Image Gallery

Gents:
Agenda:

Images (pictures, graphics) are a tricky topic. You have to know some important background information about images before you begin adding them to your pages.

• Images are NOT embedded on a webpage; They are referenced and "pulled in" by the code. Images are stored in a separate images folder on your webserver. Use only lowercase characters and NO SPACES in filenames!
• The IMG tag works like other X(HTML) tags, but before you add images to a page you must format the images first.
• Types of Images
  - JPG -JPG or JPEG images are used primarily for photographs; JPGS produce nice quality for the web with a nice file size; JPGs support more colors than GIFs.
   - GIF - Format is used for buttons, bullets, lines, decorations, etc. GIFS support only 256 colors but have a small file size; not recommended for photographs.
   - PNG - isa newer format that support the best forms of transparency. We will be saving a few images as 24-bit PNGs.
• Make sure to include the "alt" attribute to help those who are vision-impaired.
• Online images are typically not free, but we can use them for class examples.
• We will be trying out photoshop.com and its free image editor for resizing pictures. For class purposes we will use the locally installed program called Irfanfiew, which is great for resizing images.
   - Other popular images-editing programs include Adobe Fireworks, Adobe Photoshop Elements, and GIMP (free).
• For now, save all your pictures onto your desktop.
• Remember to prepare your images for the web first. Resize them in an image editor, not using the browser.
   - Remember that JPGs are a "lossy" format. Every time you click Save, you recompress the file and lose data; So, be sure to save your original files in case you need to re-edit the image. Never degrade your original file!

Assignment

1. Copy the 6 sample photo files in the ftp folder ("image samples" to your desktop. Or choose your own photos.
2. Create a new XHTML page named photogallery.html
3. Add an h1 tag to display a title. (your choice.)
4. Add n h2 tag to display a subtitle (your choice, something related to nature photos)
5. Create a 3x3 table to hold thumbnail photos.
6. Resize all 6 of the images to 300x300 to create thumbnails.
7. Save them as JPGs.
8. Insert the photos into your 6 table cells.
9. Hyperlink the photo to the larger version.
10. Save your work and show me when you are finished.
11. Validate your code until your fingers turn blue!
    Extra credit: create a custom page logo using Fireworks. Place at the top of your page.