1 / 9

Adding Images to Your Web Page

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

regina-gilmore
Download Presentation

Adding Images to Your Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  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: <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>

  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

More Related