Images in HTML
Lessons Covered


Images are often used to give visual appeal. They can significantly impact your website both positively (if used correctly) and negatively (if used incorrectly). In HTML images are applied by using the <img> tag. There are a number of attributes as well, they are discussed below.


The src Attribute

The source attribute ( src ) is used to specify the location of an image.

In the code snippet below, it is assumed that the image is located in a folder named images. It is also assumed that the name of the image is flower.

In order for the browser to display the image it has to check the folder for it. All this is specified by the src attribute.

You will also note the file extension .jpg. The file extension of the image you wish to display must be specified. Other common extensions include .gif ( often used for graphics ) and .png.

Using the src attribute to apply the image: 

 
<img src="images/flower.jpg"/>

arrow  Click to see result

Note: Remember the source attribute is images/flower.jpg because the flower image is located in a sub-folder. This sub-folder has the name images. If the flower image was in the same folder as the HTML file it is being applied to then the src would instead be flower.jpg.


The alt Attribute

The alternate attribute ( alt ) displays a text description in browsers that are unable to display the image.

The alternate text attribute applied:

<img src="images/flower.jpg" alt="A Hibiscus Flower"/>

arrow  Click to see result

Note: In HTML 4.01 any image used without the alternate text attribute generates an error when the code is validated.


The title Attribute

The title attribute is used to provide information about an image. When the mouse points on or passes over the image the title is shown.

Applying this attribute:

<img src="images/flower.jpg" alt="A Hibiscus Flower" title="Hibiscus Flower">

arrow  Click to see result

Note: The title attribute is just as important as the alt attribute. Make use of it when using images in HTML.


The width and height Attributes

Width and height are also used in images.

Observe:

<img src="images/flower.jpg" alt="A Hibiscus Flower" title="Hibiscus Flower" 

 width="200px" height="100px">

arrow  Click to see result

Note: The width and height attribute can be used to resize an image. This method is however highly discouraged as the browser still has to load the original size. So if the image is really large and you resize it with the width and height attributes it may still take some time to load. You should instead consider resizing the image using a editing program. One such program is Microsoft Paint.


Images can also be used as links. If you have not went through the links lesson as yet you may do so now.

<a href="http://www.new2html.com/html_images.html"> <img src="images/flower.jpg"  

alt="A Hibiscus Flower" title="Hibiscus Flower" width="55px" height="55px"> </a>

arrow  Click to see result


Practise Excercise



picture to be saved

Instructions


Copy the above image to your computer and store it in a folder. You can do this by right clicking the image and selecting "Save Picture As". Enter a name for the image and save it. After you have done this open a new text document. Using knowledge from this lesson and the previous do the following:

  1. Give your web page a suitable title (the browser window title)

  2. Give a level 2 heading in the body, (for e.g. "Butterfly").

  3. Under the heading apply the image. Ensure you include the alt, src and title attributes.

  4. Set the width and height value to 50 pixels.



Well thats it for images. You can now be as creative as you wish and decorate your pages with images and text. Time for our next lesson. Click the link below to continue.


    Previous Lesson Previous Lesson - Links                           Next Lesson - Tables (Part 1) Next Lesson