To include an image into our web page we use the image tag .
This tag requires the source attribute (src) to points to the location of the image, which
can for example be in the JPG, GIF or PNG format.
Another attribute that we should include is alt, for alternative description. If for any
reason the image can't be displayed this text will be shown instead.
We can resize the image by adjusting the width and height, specified in either pixels or
a percentage of the page.
Title is a generic attribute that can be applied to almost any element. For the image tag it
will provide a tooltip when the mouse hovers over it.
Next, we have four deprecated attributes. The border attribute sets the thickness of
the border. As with other elements able to use a border we should set its value to zero
if we don't want it to be shown since this is not the default for all browsers.
The horizontal (hspace) and vertical (vspace) space attributes simply add spacing to the
sides of the image.
The alignment attribute (align) appears on several different elements, but no other element
have as many values as the image tag does. Let's take a look at some examples.
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.
Next, we have some values that aligns the image with any elements on the line instead
of only with text. Absolute bottom aligns the image with the lowest part of the line.
Absolute middle is equivalent to center and aligns the image with the middle of the line
and top aligns it with the top of the line.
As for horizontal alignment, we have the values right and left, which both moves the image
down one row and cause the text to flow around it.