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.
The attributes we are going to use are...
src the location of the image file
alt alternative text for the image
widtht width of the image
height height of the image
title extra information shown when the cursor hovers obove the image
border the border width around the image
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" />
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).
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.