Basic HTML Tutorial

BHP HTML Basics - Adding An Image

Pictures in Your Page
Placing an image or two.. or more, in your webpage can really add some life to it. The image itself is not placed in the HTML document but is stored as a separate file. When the tag to place the image is used in the HTML file, the web browser will use the separate image file to place an image on your page.
A typical tag for an image looks like:
<IMG SRC="learn.jpg">
This tag also gives us a clue of sorts to its meaning, just like the other tags did. It is a tag to place an IMaGe in our web page using a file that has its SouRCe at a particular URL.
This particular tag is saying that we want to use an image file named "learn.jpg" as the source of our image.
The results of this tag are:
Learn HTML
Like the tags we studied earlier, the <IMG> tag has some attributes that can help the tag to work better in our pages. One of these attributes sets some alternative text that will be displayed if for some reason your visitor is unable to view your image. The attribute is ALT and is used like this:
<IMG SRC="learn.jpg" ALT="Learn HTML">
Normally, the web browser will download the image file, and use the size of the image to determine how much space should be used on the page to display it and then lay out the page accordingly. This means a delay while the image downloads until your page can be displayed properly.
You can help things along by including the correct size of the image in pixels as part of the HTML tag for the image. This way the browser can set aside a space big enough for your image and display the rest of the page while the image downloads. This does not speed the download of the image but it does make your page seem to load much faster, which your vistors will appreciate.
The size information that you need to give the browser is the HEIGHT and WIDTH of the image in pixels. Using these attributes in our tag, the code now looks like:
<IMG SRC="learn.jpg" ALT="Learn HTML" HEIGHT="50" WIDTH="200">
Remember our discussion in the last section on how to use a subdirectory in a relative URL?
Many people feel that their main web space directory gets a cluttered feel to it if the image files and HTML files are all in the same directory. They prefer to upload the images to a separate subdirectory, usually named "images". They then use the relative URL to call an image file from the subdirectory. The code that is used in this case looks something like:
<IMG SRC="images/learn.jpg" ALT="Learn HTML" HEIGHT="100" WIDTH="200">
By using the name of the subdirectory in the path of the SRC attribute, the image file will be retrieved from the subdirectory.
We have learned how to use the <IMG> tag to add an image to our web page. We have seen that the source of the image comes from a separate file which we specify using the SRC attribute of the <IMG> tag.
We have also seen how to adapt our image tag to enable display of alternate text for those who are unable to view our images. This was done by the use of the ALT attribute.
By letting the web browser know the size of our image with the HEIGHT and WIDTH attributes, we can speed up the layout of our entire page by the web browser.
Using a subdirectory to hold all of our image files was made possible by the use of a relative URL specifying the path to the image file in the subdirectory.
In the next section, we will learn how to link our page to other pages, either our own or to those of others on the Internet.
Back Next
[Back] [Table of Contents] [Next]
Copyright 2000 John H. Bolgiano, Jr. - All rights reserved
Modified with permission for educational use by Roberta Bush