Wednesday, 5 June 2013

Html Images | The img Tag and src Attribute | How to Create Html Images


Relevant images are very important for putting value in webpage content. They quickly and easily clarify the topic. So as a webpage developer one must know how to create html images or how to put images in html code.

html images, img tag, src, attribute, create, insert

Html Images | The <img> Tag and src Attribute | How to Create Html Images

A tag <img> is used to put images in html code. It is single having no closing tag. This tag contains a main attribute "src" which signifies the address/URL of the image. SRC stands for source and here in image tag it stands for source of the image. Also there is an attribute of "alt" in <img> tag which gives some text to the image.

Syntax for Html Image:

<img src="URL" alt="some text">

The URL gives the address of the location where the image is stored on the web.

Html Images | Height and Width Attributes - Set Height and Width of an Image

Height and width attributes are used to change the size of an image. The values of these attributes are specified by no. of pixels.

<img src="URL" alt="image text" width="350" height="400">

It is best to specify both width and height of an image as it reserves the space for that image. But if we do not use these attributes, browser, while browsing, can change the layout and thus spoils the look of a webpage.
There are two other attributes of Image tag also:
<map> Image map 
<area> Clickable area for an image

Html Images | Using Image as a Link | How to Make an Image a Hyperlink

Hyperlink is a clickable area which sends us to a specific webpage when we click on it. And it is possible to make your html image a hyperlink. It means whenever someone will click on the image a particular webpage will open. Now how to use image as a link?

The syntax for a hyperlink is following:

<a href="URL">Label</a>

URL is the web address and Label is what we see as a link. When we will click on label the URL specified will be opened.
Now if we replace "Label" with an image then we would be having our image as a link or clickable area.
The code will be:

<a href="URL"><img src=""></a>






No comments:

Post a Comment