In a web page you display an image by including an image reference.

open online HTML editor
^{Online editor Works only in IE - If you use another browser you can Download Web Page Teacher}.

<img src="url"> - the src specifies the url of the image you want to display - the source. This can be relative or absolute.

An absolute url is the complete url of the destination image. For example:
<img src="http://www.TheWebsEye.com/HTML/img/fruit.gif">

A relative url shows the path to the image relative to the current page.

• If this is in the same directory as the current page the link would look similar to:
  <img src="fruit.gif">.
• You can specify the location of the image relative to the root folder by preceeding it by a "/" for example:
  <img src="img/fruit.gif">

ATTRIBUTES - an image can have the following attributes:

alt="value" - specifies alternative text for browsers that don't display the image - it should always be included so as to make the site more user-friendly for visually impaired users - example.

hspace="value" - specifies the amount of horizontal space to the left and right of the image.

vspace="value" - specifies the amount of vertical space above and below the image.

width="value" height="value" - specifies the width and height of the image in pixels. These should always be included as they create a placeholder for the image so that other text can load even if the image has not been fully displayed by the browser.

border="value" - specifies whether there should be a border around the image. It is useful if the image is being used as a link because you can set the border=0 so that the image is not surrounded by the default color of the hyperlink.

align="left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom":

• ALIGN="left" - aligns the image to the left and the text will wrap around the right side.
• ALIGN="right" aligns the image to the right and the text will wrap around the left side.
• ALIGN="top" aligns the top of the image with the top of the tallest element on that line.
• ALIGN="absmiddle" aligns the middle of the current line with the middle of the image.
• ALIGN="bottom" aligns the bottom of the image with the base line of the current line.


OTHER LESS COMMON align ATTRIBUTES:
• ALIGN="texttop" aligns the top of the image with the top of the tallest text in the line
• ALIGN="middle" aligns the base line of the current line with the middle of the image.
• ALIGN="baseline" aligns the bottom of the image with the base line of the current line.
• ALIGN="absbottom" same as baseline