HTML - Images

HTML Images (<img> tag)

Images are better than simple text as images are easily remembered by the people. Images play a very important role in beautifying the content on your web page. It helps to represent the complex layout and content in a very simple and convenient way for the users.

You need to have images on your web pages. This tutorial will take through simple steps to use images in your web pages.

Insert Image

• <img> tag allows inserting an image in your web page. 

• It tells the browser that this is the location where an image will be placed on the web page.

• It is an empty tag.

Syntax

     <img src=”path of image” attribute-list>

Attributes List

Attributes	Values	Description
src	URL (path)	Specifies either an absolute path or relative path of the image
alt	User Defined	Specifies the alternate text for the image if an image cannot be displayed
height	Pixels (px) or Percentage (%)	Specifies the height of the image
width	Pixels (px) or Percentage (%)	Specifies the width of the image
border	Pixels (px)	Specifies the width of the border around the image
align	left, right, top, bottom, middle	Specifies the alignment of the image according to the surrounding elements
vspace	Pixels (px)	Specifies the space on top and bottom side of the image
hspace	Pixels (px)	Specifies the space on the left and right side of the image
ismap	boolean attribute	Specifies that image is part of the server-side image-map
usemap	User Defined	Specifies an image as client-side image-map

Let’s talk some attributes in detail:

Set Image Size (height and width attributes)

You should always specify the width and height of the image based on the layout of your web page. If you omit them, image size may not fit into your layout.

Example

     <img src=”smiley.jpg” width=”100” height=”100”>

Alternatively, you use style attribute to specify the height and width of an image.

Example

     <img src=”smiley.jpg” style=”width:100px;height:100px;”>

Set Alternate Text (alt attribute)

This attribute specifies the alternate text for an image.

This text is displayed if for some reason the image cannot be displayed. It may be due to slow internet speed, the image file is corrupt, the URL is incorrect or image is missing.

If you omit it, it shows the placeholder of the image having “x” symbol in it. So, the user does not know what this area consists of. You should always specify the alternate text for an image which is related to the image.

Example

     <img src=”smiley.jpg” width=”100” height=”100” alternate=”smiley image”>

Set Image Location (src attribute)

Images can be saved in different locations like in same folder (directory), separate folder (directory), on the same server or on a different server. However, usually, we keep our image is a separate folder (directory).

Now question to be asked is that whether an image is in the same folder or another folder on the same server or it is altogether on another server.

Images in the Same Folder on Same Server (Relative Path)

Normally, when you specify just image name in src attribute, the browser tries to find the image in the same directory (folder) as that of the web page.

Let us assume that our HTML file “demo.htm” is in home directory (folder) and our image “smiley.jpg” is kept in the home directory (folder).

In this case, you just need to specify the name of an image as shown below

Example

     <img src=”smiley.jpg” width=”100” height=”100” alternate=”smiley image”>

Images in Another Folder on the Same Server

What is Relative File Path?

Relative path points to a file within the same website.

Let us assume that our HTML file “demo.htm” is in home directory and “images” is sub-directory inside home directory. Our image “smiley.jpg” is kept in this “images” directory.

In this case, you need to specify the directory name (folder name) in which image exist as shown below

Example

     <img src=”/images/smiley.jpg” width=”100” height=”100” alternate=”smiley image”>

In above example, the file path points to the file “smiley.jpg” in images directory located at the root of current web

Example

     <img src=”images/smiley.jpg” width=”100” height=”100” alternate=”smiley image”>

In above example, the file path points to the file “smiley.jpg” in images directory located in the current folder

Example

     <img src=”../images/smiley.jpg” width=”100” height=”100” alternate=”smiley image”>

In above example, the file path points to the file “smiley.jpg” in images directory located in the folder one level above the current folder.

Images on Another Server (Absolute Path)

Some websites store their images on the different server which is generally called “Image Server”.

You can access these images or in fact, you can access images from any URL of the web.

What is Absolute File Path?

Absolute path points to another website. It is full URL of another file on the web.

Example

     <img src=”https://www.professorforyou.com/images/smiley.jpg” alt=”smile Image”>

Set Image Border (border attribute)

You can specify the thickness of the border around the image in terms of pixels. 0 means no border else it specifies the thickness.

Example

     <img src=”smiley.jpg” width=”100” height=”100” alternate=”smiley image” border=”3”>

Set Image Alignment (align attribute)

By default, the alignment is left (if only image is present) of the page.

Example

     <img src=”smiley.jpg” width=”100” height=”100”>

If there are surrounding elements like text around the image then alignment is bottom (of text)

Example

     Hello How are you <img src=”smiley.jpg” width=”100” height=”100”>

Image Maps (usemap attribute)

It is an image with clickable areas.

It can be defined by using a <map> tag.

The clickable areas are defined by <area> tags which are specified within <map> tag.

The relationship between the image map and actual image is created by associating name attribute of <map> tag with the usemap attribute of the <img> tag.

Example

     <img src="smiley.gif" width="145" height="126" alt="Planets" usemap="#smileymap">

     <map name="smileymap">

     <area shape="rect" coords="0,0,35,66" alt=”Left Hand" href="welcome.htm">

     <area shape="rect" coords="105,0,140,66" alt="Right Hand" href="thanks.htm">

     <area shape="circle" coords="80,45,20" alt="Open Eye" href="home.htm">

     <area shape="circle" coords="75,85,20" alt="Mouth" href="food.htm">

     </map>