Adding Images to Your Web Page Web Design Section 5-7 Part or all of this lesson was adapted from...
10
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
-
Upload
gervais-golden -
Category
Documents
-
view
213 -
download
1
Transcript of Adding Images to Your Web Page Web Design Section 5-7 Part or all of this lesson was adapted from...
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
Attribute 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 pixels%
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:<html> <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 have only today and tomorrow to complete this. I will grade this on Friday.
Example graphics.html File
