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
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
The <img /> tag The <img /> tag is used to insert images into a web page. Note that the <img /> tag a non-container tag. You open and close it in the same <> End the tag with /> not just a >
Attributes for the <img /> tag Value Description src URL Specifies the URL of an image alt text Specifies an alternate text for an image height pixels % Specifies the height of an image width Specifies the width of an image
Format for the <img /> tag Here is an example of the <img /> tag: If I have an image that I want to insert and the image is in a directory called images then: <img src="images/stickman.gif" alt="Stickman" width="24" height="39" /> 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)
Example - The HTML Code: <head> <title>Example of images</title> </head> <body> <p>Insert an image from another folder:</p> <img src="images/stickman.gif" alt="Stickman" width="24" height="39" /> <p>Insert an image from a web site:</p> <img src="http://www.w3schools.com/images/lamp.gif" alt="Lamp" width="15" height="15" /> </body> </html>
Example – Will Produce This:
Summary <img /> tag is used to insert images in a web page. The <img /> tag is a non-container It is opened and closed in the same tag! The <img /> tag uses the following attributes src, alt, height, width
Rest of Today Download Homework 5-7 from the Hancock website Complete Homework 5-7 by adding 6 pictures to your website You need to finish this today!
Example graphics.html File