Placeholder Image

Subtitles section Play video

  • To include an image into our web page we use the image tag <img>.

  • 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.

To include an image into our web page we use the image tag <img>.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it