Learn HTML : Images

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,

 
or

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 ,

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 ,

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





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 :

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,

This is a dog
This is a dog

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,

This is a dog
This is a dog

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)

Leave a Comment

LinkedIn Auto Publish Powered By : XYZScripts.com
%d bloggers like this: