1. Adding Images to Your Web Page Web Design Section 5-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

2. Objectives  The Student will: Utilize images created in a graphics program in an html page Use thumbnail images to link to a larger image Use the ALT attribute when adding images to a page

3. The tag  The tag is used to insert images into a web page.  Note that the tag a non-container tag. You open and close it in the same <> End the tag with /> not just a >

4. Attributes for the tag AttributeValueDescription srcURLSpecifies the URL of an image alttextSpecifies an alternate text for an image heightpixels % Specifies the height of an image widthpixels % Specifies the width of an image

5. Format for the tag  Here is an example of the tag:  If I have an image that I want to insert and the image is in a directory called images then: The image is the file “images/stickman.gif” The text read by a screen reader will be “Stickman” The width is 24 pixels (72 pixels is an inch) The height is 39 pixels (72 pixels is an inch)

6. Example - The HTML Code: Example of images Insert an image from another folder: Insert an image from a web site:

7. Example – Will Produce This:

8. Summary  tag is used to insert images in a web page.  The tag is a non-container It is opened and closed in the same tag!  The tag uses the following attributes src, alt, height, width

9. Rest of Today  Download Homework 5-7 from the Hancock website  Complete Homework 5-7 by adding 6 pictures to your website  You have only today and tomorrow to complete this. I will grade this tomorrow and Wednesday.