News & UpdatesProgrammingWeb programming Store My Projects

HTML Tutorial – 07 – Images

An image can be included in a web page by using the image tag <img>. This tag requires the src (source) attribute to points to the location of the image. The standard image formats supported by all major browsers are jpg, gif and png.

<img src="pvt.png">

Another attribute that always should be included is alt, which stands for alternative description. If for any reason the image cannot be displayed this text will be shown instead.

<img src="pvt.png" alt="PVT Logo">

The image can be resized by adjusting the width and height attributes. These attributes are specified in either pixels or a percentage of the page.

<img src="pvt.png" width="100" height="100">

Title is a generic attribute that can be applied to almost any element. It specifies additional information about the element. For the <img> tag, along with many other elements, it provides a tooltip that is shown when the mouse hovers over the element.

<img src="pvt.png" title="My Title">

The deprecated border attribute sets the thickness of the image border. As with other elements able to use a border its value should be set to zero to explicitly hide it, since this is not the default for all browsers.

<img src="pvt.png" border="1">

The deprecated horizontal and vertical space attributes add spacing to the sides of the image.

<img src="pvt.png" hspace="20" vspace="20">

Align attribute

The deprecated align attribute appears on several different elements, but no other element has as many possible values as the image tag does. The default alignment is “bottom” which is equivalent to “baseline”. They both align the image to the bottom of the text. “Middle” aligns the image to the middle of the baseline and “texttop” aligns it to the top of the text.

<img src="pvt.png" align="middle">

The remaining values are used to align the image with any elements on the line, instead of only with text. “Absbottom” aligns the image with the lowest part of the line. “Absmiddle” is equivalent to “center” and aligns the image with the middle of the line and “top” aligns it with the top of the line.

<img src="pvt.png" align="absbottom">

The image can also be aligned horizontally with the values “right” and “left”. Both of these values move the image down one row and cause the text to flow around it.

<img src="pvt.png" align="left">
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours