Image Tag

 

You can insert images into your web pages by using the <img> tag and specifying the location of the image on the server. Please note that images are not technically inserted into an HTML page; images are linked to HTML pages.

 

NOTE: This code is a single code and should be closed within the tag.

 

HTML Example:

 

<img src="images/flower.jpg" width="100" height="100" alt="Flower" title="Flower">

 

Result:

 

Flower

 

 

The <img> tag above contains a number of attributes. These attributes tell the browser all about the image and how to display it.


Here's the explanation of these attributes:

 

Attribute

                                              Purpose

src

Required attribute. This is the path to the image. It can be either an absolute path or a relative path.

width

Optional attribute but recommended. This specifies the width to display the image. If the actual image is wider or smaller, it will shrink or expand to the dimensions you specify here so it’s better to specify the actual dimensions of the image, not to lose quality. Also make sure the image is the correct size to start with.

height

Optional attribute but recommended. This specifies the height to display the image. This attribute works similar to the width.

alt

Alternate text. This specifies the text to be used in case the browser can't render the image.

title

Defines the title of the image which can be seen by mouse rollover on the image.

 

NOTE: It’s recommended to use all the attributes listed above in your image tags as they all carry very important information.

 

Image Links

 

You can label your image as a link so that it opens a URL by clicking on it. You do this by simply wrapping the image tag with hyperlink tag <a>.

 

HTML Example:

 

<a href="images/flower_large.jpg">

<img src="images/flower.jpg" width="100" height="104" alt="Flower">

</a>

 

 

Result:

 

Flower

 

 

Removing the Image Border

 

As you see this code has created a border around the image. This is the default behavior for most browsers. In order to remove the border, set the border attribute to zero: border="0"

 

HTML Example:

 

<a href="images/flower_large.jpg">

<img src="images/flower.jpg" width="100" height="104" border="0" alt="Flower">

</a>

 

 

Result:

 

Flower

 

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>