SQL PHP HTML ASP JavaScript articles and free scripts to download
HTML

HTML Image display

HTML provides <img> tag to place image in a web page. img stands for image. This tag does not have any closing tag.

Attributes of <img> tag are :

Src:

Src stands for Source. Specifies the name of the image file to be used.

Height:

Used to specify the height of the image.

Width:

Used to specify the width of the image.

alt:

This is used to display some text when the visitors mouse over the image. i.e., it acts as a tool tip for the image. Alt tags are important for search engines as robots can't read images, to tell about the image we can add alt tag or alternate text to tell about the image. This also helps in accessibility issues of the website

Related Tutorial
Image as link

HSpace:

Used to specify the amount of space to the left and right of the image.

VSpace:

Used to specify the amount of space to the top and bottom of the image.

Border:

We can specify the border around the image. Border = 2 will add two pixcel border to the image.

Example Code:

<img width=400 height=50 border=0 hspace=0 src="image.gif">

Align

We can add align attribute to the image tag, we can specify left, right, top, button etc. Here is one example.

<img width=400 height=50 border=0 hspace=0 src="image.gif" align=right>

Note:

If the path of the image file is not mentioned it will search for the image in the current directory.

Hot Linking of images

It is not only we can display images from the working ( present ) server we can display images from other websites also. However it is not a good practice and we should take necessary permission from the owner to display images from other sites. This is to respect others privacy and copyrights. This is known as Hot linking. Each call to images from other sites will add to bandwidth consumption of other site. Here is an example of how it works.

<img src="http://www.othersite.com/images/image.gif" align=right>

In your working directory create one file test1.htm with your standard page structure. In the same directory keep one image of your self of gif or jpg format.
Add the code inside test1.htm to display your photo.
Then write few sentences about you and your photo should be placed at right of your text.
Reduce the photo size ( by html code ) to 100 x 100 thumbnail size.

Linking different part of the image to different pages

Be the first to post comment on this article :


Google+
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer