Saturday, November 06, 2010

Creating a Image Links in an HTML Document | Adding images in an HTML document

Creating image links is as same as creating text links. Simply add an "img" tag after the "a href" tag. Border, width & height of the image can also be changed or edited using "border", "width" & "height" tags respectively in the "img" tag.

General format/syntax for creating an image link is:


  • <a href="[link]"><img src="[picture url]"></a>



Replace [link] with the link to open when someone clicks on the image and [picture url] with the URL of the image, if your image is located on the server itself then simply type its name.

For Example:


Input:

<a href="http://bazid.webs.com"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQg-Biq2eH0YU9V8rggCyKE061HLF3UD3F3s22x4_H2tr9dXi0t=1h=163w=228usg=__sq3X1Dt26v0FmXCCYMOO2tTxbd4=" /></a>

Output:


The adress of this image is "http://t0.gstatic.com/images?q=tbn:ANd9GcQg-Biq2eH0YU9V8rggCyKE061HLF3UD3F3s22x4_H2tr9dXi0t=1h=163w=228usg=__sq3X1Dt26v0FmXCCYMOO2tTxbd4=" Clicking this image will open "http://bazid.webs.com".

Now the example for border, width & height tags:


Input:
<a href="http://bazid.webs.com"><img border="1" height ="250" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQg-Biq2eH0YU9V8rggCyKE061HLF3UD3F3s22x4_H2tr9dXi0t=1h=163w=228usg=__sq3X1Dt26v0FmXCCYMOO2tTxbd4=" width="250" /></a>

Output:


In this example the width and height of the image is 250 pixels. It can be altered and the same image for different sizes can be obtained. The thickness of the border is set to 1, it is purple coloured. It can be thickened by increasing its value.
If no border is required then simply enter "0" in the border. The system will set no border to the image by default.

No comments:

Post a Comment


Ali Khan Blogs is a Blog about Blogging and SEO Tips and Tricks for Newbie Pakistani and Indian Bloggers