Images, Tables, Links

Gents:
Agenda:

1. Email me your XHTML tables code. Several of you received a score of "MISS" on this assignment because you did not email me your code.
2. Display your working hyperlinks (need 5). We will be coming back to hyperlinks to learn more later.
3. Begin learning how to add images to a page.
4. Prepare an image for your page by resizing it to a smaller size.

Moving on...Time to begin 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.

• Make sure you XAMPP web server is working now. We are going to be working exclusively with the htdocs folder inside your xampplite folder.
• 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 Irvanfiew, 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 into a folder called "images" inside your htdocs folder.
• 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
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.