Images are often added to web pages to make them look more inviting and interesting compared to a page of plain text. Using the HTML Image tag, it is easy to add images to any web pages. This tag also has a number of attributes, or characteristics, that you can specify.
When adding images to a web page, it’s important to remember that an image is not actually part of the file that makes up the web page itself. The files used for the web page are separate files from all image files. The HTML Image tag refers the web browser to the specific image file for the image that you want shown. When the web page is displayed in a browser, the image file is displayed along with any other files that make up that page.
The code for the HTML Image tag is: <IMG SRC="image location" />. Image location is the file name for the image you want to be shown and where the image is stored. It is important that you get this information correct to ensure the image is displayed properly. The organization and storage of images that you want to use on your web page are important considerations.
Some people store their images in the same directory as all the other parts of their web pages. In this case, when you refer to the image, you would only include the filename in the HTML Image tag. When a web page has a number of images, it is common to create a subdirectory, often called images. In this case, the subdirectory name would also be included in the tag.
As an example, here is what we would do to insert an image of a tree, filename tree.jpg, onto a web page. If we had stored the tree image in the same place as our other web page files, the HTML Image tag would be <IMG SRC="tree.jpg">. If the image file was stored in a subdirectory within our web page directory, the tag would be changed to <IMG SRC="images/tree.jpg">. What is important to remember is that the HTML Image tag provides a reference, or path, to the image file. Basically, it tells the browser where to look for the file.
The HTML Image tag has a number of attributes that can be specified for the image you want to include. Attributes are characteristics of the tag itself and so they are used within the tag, or between the < and >. The attributes that are used with the HTML Image tag are:
- ALIGN — specifies how your image is aligned in relation to the text on your page (LEFT, RIGHT, TOP, MIDDLE, BOTTOM)
- ALT — refers to alternative text. This is a very important attribute and should be included for all your images. It specifies the text that is displayed instead of the image
- BORDER — adds a border to your image, with the thickness specified in pixels
- HEIGHT and WIDTH — can be used to define the width and height of the image you want displayed, which allows you to change the size of the image. Be careful using these attributes as you can change the quality of the image and the proportions, resulting in poor quality images
- VSPACE and HSPACE — are used to add white space around your image.