The Image Tag

The Image Tag

The Image element is used to incorporate in-line graphics into an HTML document. This element cannot be used for embedding other HTML text.

In HTML, images are defined with the <img> tag.  The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

The SRC Attribute

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.

Syntax :-

                        <img src="url">

The ALT Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.

Example :-

                        <img src="boat.gif" alt="Big Boat">

The WIDTH and HEIGHT Attributes

If the WIDTH and HEIGHT attributes are used, the viewer of their document will not have to wait for the image to be loaded and its size calculated.  The browser can determine the layout of the text around the image and display the text first.

Example :-

                        <img src="boat.gif" alt="Big Boat" width=50 height=50>

The BORDER Attribute

            This lets the document author control the thickness of the border around an image displayed.  This can be set to 0 so that if the image is surrounded by <A> elements, the normal link border will not be shown.

Syntax :-

                        <IMG BORDER=value>

The VSPACE and HSPACE Attributes

            The VSPACE attribute controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image.  They allow setting of a 'margin' around the image which is kept as white space - useful to prevent text wrapping right up to floating images.

Syntax :-

                        <IMG VSPACE=value HSPACE=value>

The ALIGN Attribute

ALIGN=left image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.

ALIGN=right will align the image aligns with the right margin, and the text wraps around the left.

ALIGN=top aligns itself with the top of the tallest item in the line.

           

ALIGN=texttop aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).

ALIGN=middle aligns the baseline of the current line with the middle of the image.

ALIGN=absmiddle aligns the middle of the current line with the middle of the image.

ALIGN=baseline aligns the bottom of the image with the baseline of the current line.

ALIGN=bottom aligns the bottom of the image with the baseline of the current line.

ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

Syntax :-

                        < IMG ALIGN= left | right | top | texttop | middle | absmiddle | baseline | bottom | absbottom >           

----------------------------------------------------------

** If you like this post please like our page in facebook

" Dot Net Support" 

Be a Fan

Posted in: HTML