Images Intro

Gents:
Agenda:

Moving on...Time to continue learning the (X)HTML code to add images to a page.

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 add images to a page you must format the images first.
• Types of Images
  - JPGs -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. - GIFs - are used for buttons, bullets, lines, decorations, etc. GIFS support only 256 colors but have a small file size; not recommended for images.
   - PNGs - are a 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 tyically 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 Fireworks, which is great for resizing images.
   - Other popular images-editing programs include Irvanview, Adobe Photoshop Elements, and GIMP (free).
• For now, save all your pictures into a folder called "images" inside your htdocs folder, or save directly to htdocs.
• 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!

Monday and Tuesday we will learn the basic code to display images on a page, and tomorrow we will begin to edit some images to place into our tables.

Assignment:

1. Copy the 6 sample photo files in the c:\drive (root) to your xampplite\images folder
   or use 6 photos of your own. Mr. Seiler will announce a height and width in class.
2. Create a new (X)HTMLpage 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.
   Watch the demo in class, because we haven't covered this yet!
10. Save your work and show me when you are finished.