OBJECTIVE

• Use image tags
• Explain issues associated using images
• Use hyperlinks to link to other pages and locations

DISCUSSION

• <img src = "filename/url" /> 
• Types of images ... bmp, gif, jpg, png
• Careful about load time
  • Keep image size as small as needed
  • Avoid forcing images to other sizes

Hyperlinks

• <a href =  "filename/url">Info</a>
• Link to location on page by using the anchor tag and linking to it:

    <a href = "#help">Go to Help</a>
    <a name = "help">Help info here</a>
    

File Navigation

• Careful with linking files and maintaining paths.
• See example ... Navigation Example

EXERCISES

1. There are many attributes associated with the <img> tag.  For example, you can align the image and change its size.  Go online and find out what attributes you need to specify to align an image and specify its size.  You can use whatever tutorial you want but you might want to check out the link below.
2. Create a page that displays the same image in multiple locations and sizes. The page should meet the following requirements:
   1. The image is small and aligned to the left.
   2. The image is large and aligned to the right.
3. Create a page that demonstrates hyperlinks.  You should first create several folders: folder1, folder2, and folder3.  Folder2 should be in folder1, and folder3 should be in folder2.  Then create a file in folder2 with links to pages in each folder.  You should have a total of 4 files.  You can put anything on the pages.  Keep them simple since the goal is to practice linking files.  Also, add a link to another website.
4. Add the following to the page (in folder2) that you made in question 3.  Add an image to the bottom of the form.  Then add an anchor tag with a link at the top.  When the user clicks on the link at the top, the user should be directed to the image.
5. How do you make an image act as a hyperlink?  Demonstrate using your file in question 4.
6. Go online and determine the pros and cons of the four image types (bmp, jpg, gif, and png) for using on web pages.  Is there a preferred format?
7. How do you set an image as the backgound of a page?
8. What does the target attribute of the <a> tag do?  Experiment and demonstrate it.
9. Hyperlink Exercise

LINKS AND HELP

• Image attributes:  http://www.w3schools.com/html/html_images.asp