Home Logo
Show Full Menu
Hide Full Menu

Understanding images

Created: 16/09/10 Views: 979 myFave Image

In this tutorial we will learn how to include images into our web page.
Including images into a web page is very simple, the first thing we need is the <img /> tag. This tag simply lets the browser know that it is now dealing with an image. Inside the <img /> tag there are 2 essential attributes, src and alt.

Here is an example of how the image looks with just the src and alt attributes
  • <img src="images/candles.jpg" alt="Image of candles using a pink filter" />
  • Image of candles using a  pink filter

As you can tell from the src attribute, the image file is in the folder of 'images' and the file is named 'candles.jpg'. Since we haven't included either the width or height attributes, the image is kept at it's origional dimensions (200px by 267px).

Here is an example of using all the attributes
  • <img src="images/candles.jpg" alt="Image of candles" width="100px" height="134px" border="2" title="Pink Candles" />
  • Image of candles

So now as you can see, by adjusting the width and height I have made the image smaller, also there is a 2px border going around the image. If you hover your cursor of the image, you will see a small box with 'Pink Candles' in it which is done via the title attribute.

next tutorial: Understanding tables

There are no comments