Download presentation
Presentation is loading. Please wait.
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 <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 >
4
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
5
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)
6
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=" alt="Lamp" width="15" height="15" /> </body> </html>
7
Example – Will Produce This:
8
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
9
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!
10
Example graphics.html File
Similar presentations
