Learn HTML : Images

Last Updated on Wednesday, 13 May 2009 06:29 Written by Admin Wednesday, 13 May 2009 06:29

Often when you are creating web pages you need to show images or pictures in your page. To do this you can use the html image tag. This article shows you how.

Images are inserted into your html page using the tag.  The IMG tag can have both an open and a close or just a open tag for example,

<img > </img>
or
<img />

As well as the above tags we need to define the location of the actual image that we want to see. To do this we specify the src , for example ,

<img src="dog.jpg" />

would produce something like this,

Dog Pic

Dog Pic

With the src tag we need to think about a few things. In the above example we assume that the image file is located in the same directory as the html page itself, but this may not be the case. The tag could also reference an image on the web, for example ,

<img src="http://www.smarterdimensions.com/images/logo.gif"></img>

and this would produce

logo

logo

Some of the attributes that we can have with the image tag are

Align, then “align” attribute can be specified in 5 ways

<img src= “dog.jpg” align=“bottom”>
<img src=“dog.jpg” align=“modile”>
<img src=“dog.jpg” align=“top”>
<img src=“dog.jpg” align=“left”>
<img src=“dog.jpg” align=“right”>

Next we have the “alt” attribute, t he “alt” attribute is used to explain what the image represents. The alt attribute allows for a descriptive string of text to hold the place of the image.
It appears when the image display is turned off in the browser.

for example :

<img src="dog.jpg"  alt="This is a dog" />
dog11

no image

next we have the “border” attribute,this adds a border to our image and the number specified is the thickness of the border for example,

<img src="dog.jpg"  alt="This is a dog"  border="1" />
<img src="dog.jpg"  alt="This is a dog"  border="10" />

would produce

borders

borders

next we can have the “height” and “width” attributes, these give the dimensions of the image. These can be specified in pixels or percentage available to show the image for example,

<img src="dog.jpg"  alt="This is a dog"  border="1" width="50%"  height="50%" />
<img src="dog.jpg"  alt="This is a dog"  border="1" width="50"  height="50" />

for example ,

width and height

width and height

It should be noted that the width and height attributes allow the images to load faster in a document (instead of having the browser try to determine the information itself – which increases download time)

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
Learn HTML : Images, 10.0 out of 10 based on 1 rating

Leave a Reply