Web Design - Introduction to Graphics

Sections:   Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5

Section Four:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H

Beyond Text Up until now everything we have been doing in our HTML document has been text-based. In this lesson we are going to “kick it up a notch” and add images to our HTML documents. The <img> Image Tag The <img> tag is a very important tag as it is the tag that allows us to add images to our HTML documents. One thing to understand about images displayed in a web page is that the images are not actually stored in the web page itself. Instead the <img> tag uses an attribute that refers to the image stored on a server on the web; the src="" attribute. So if the reference to the image source is incorrect, the image won’t display on your web page. This type of image is called an inline image. There are some important characteristics about the <img> tag that you should be aware of. The <img> tag does not have a closing tag. The <img> tag does not do anything on its own – it requires attributes to make it work. The src="" Attribute The real magic of the <img> tag comes from the src="" attribute – or the source attribute. The src="" attribute value points to the location of the image to be displayed. Much like hyperlinks the location can be an absolute reference (a specific location on the web accessed by the image’s URL) or a relative reference (a location relative to your HTML document). An absolute reference is harder to determine for an image than it is for an individual web page, so you are advised to use relative references when dealing with images. To understand how relative references work in regard to the src="" attribute imagine you created a web page about your favorite vacation spot and the web page has been saved as DreamVacation.html. On the web page you want to display a photo you took while vacationing in the Amazon – your favorite vacation spot! You download the photo to your computer and since it is a photo it is in JPEG format. You rename the file amazon.jpg and you save the image to the same folder where your web page is saved. To have your Amazon photo, amazon.jpg, display on your Favorite Vacation web page, DreamVacation.html, you would include the following bit of code: One thing to note: the above code only works if the HTML document and the image to be displayed are listed in the same folder. Let’s See it in Action Next

© 2008 KCDL. All rights reserved.