HTML Tutorial – 07 – Images


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.

Add a Comment

Your email address will not be published. Required fields are marked *