HTML Tutorials - Images
To add images to your html page you can use the <img /> tag. The <img /> tag needs no off switch so you should include a forward slash to indicate that it closes itself.
The image tag contains a number of properties src, alt, width and height, so lets have a quick look at each of these attributes.
SRC - This indicates where the image is and what the name of it is. So to display an image called home.gif that is stored in the same directory as the html file, you would type
<img src="home.gif" > |
If your images was in a sub directory of the home directory called images then our code would look like.
<img src="images/home.gif" > |
Remember file names are case sensitive home.gif is not the same as Home.gif.
HTML Images: ALT
ALT stands for "alternate text". This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view your image what the image is about.
The alt tag is quiet good for Search Engine Optimization in that it tells your search engine (i.e. google) what the image is about, it would be a good idea to have the text in your alt tag similar to your keywords as this puts more emphasis on those keywords, just try to avoid spamming you alt tag with two many keywords.
Sample of using the alt would be:
<img src="images/home.gif" alt="Click Here to Return to the Home Page" > |
HTML Images: Height and Width
The WIDTH and HEIGHT attribute tell the browser the dimensions of the image. The browser can use this information to reserve space for the image as the page is being displayed.
The basic syntax for specifying the height and width attribute in html is
WIDTH = "width expression"
HEIGHT = "height expression"
So let’s have a look at an example
<img src="images/home.gif" alt="Click Here to Return to the Home Page" height="120" width="200"> |
In the above example we specify that the image is to be rendered with a height of 120 pixels and a width of 200 pixels
HTML Images – Centering Images
To align images in html it’s a good idea to use Cascading Style Sheets, however another way of doing this is by using the div tag.
The <div> tag defines a division/section in a document. Browsers usually place a line break before and after the div element.
Use the <div> tag to group block-elements to format them with styles
Let’s look at an example
<div align="center"><img src="home.gif" / ></div> |
This will center an image, we could of set align to left or right. See Screenshot below
 |