HTML 3.2 by Example

This is how we include an image into a document:

  <IMG SRC="pic.gif" ALT="just a picture">

Here "pic.gif" is the name of the image file, and the alt="just a picture" specifies the text that is displayed by a browser without a graphics support or if image loading is stopped or turned off.

 

Now we will use the ALIGN attribute, which determines how an image is aligned with the text:

  Top aligned <IMG SRC="pic.gif" ALIGN=top>

  middle aligned <IMG SRC="pic.gif" ALIGN=middle>

  and bottom aligned <IMG SRC="pic.gif" ALIGN=bottom>

Top aligned middle aligned and bottom aligned

 

Now we will use the ALIGN attribute again, but this time we will align our image relative to the left/right edge of the browser window:

  <IMG SRC="pic.gif" ALIGN=left>
  <IMG SRC="pic.gif" ALIGN=right>

 

 

Using a CENTER or P ALIGN=center tags we can center the image in the browser window:

  <CENTER><IMG SRC="pic.gif"></CENTER>
  <P ALIGN=CENTER><IMG SRC="pic.gif"></P>

 

Here we will also use the <BR> tag with a CLEAR attribute to make sure that the text continues after the picture:

  <IMG SRC="pic.gif" ALIGN="left" ALT="just a pic"> Here's some text next to the graphic <BR CLEAR="left"> and here the text continues below it.

just a pic Here's some text next to the graphic
and here the text continues below it.

 

Now we will use HSPACE and VSPACE attributes in order to put space between pictures and other objects, which would otherwise be displayed right next to each other without any intervening spaces.

Here's an example of using HSPACE attribute with the value of 15:

  <IMG SRC="pic.gif" HSPACE="15">
  <IMG SRC="pic.gif" HSPACE="15">

Without using the HSPACE attribute the result would be very different:

  <IMG SRC="pic.gif">
  <IMG SRC="pic.gif">

 

And here's an example of using VSPACE attribute with the value of 20:

  Here's an example of using <BR> <IMG SRC="pic.gif" VSPACE="20"> a VSPACE attribute with an image.

Here's an example of using
a VSPACE attribute with an image.

And again, without using the VSPACE attribute the result would be very different:

  <P ALIGN="center">Here's the same example, <BR> <IMG SRC="mac.gif"> only a VSPACE attribute is absent.<

Here's the same example,
only a VSPACE attribute is absent.

 

Here's an example of using the WIDTH and HEIGHT attributes:

  <IMG SRC="pic.gif" WIDTH="20" HEIGHT="20"><BR>

  <IMG SRC="pic.gif" WIDTH="100" HEIGHT="40">


 

And here's how you draw (or suppress) a border around your images:

  <IMG SRC="pic.gif" ALT="just a pic" WIDTH="25" HEIGHT="25" BORDER="10">

  <A HREF="tutor3.html"><IMG SRC="pic.gif" ALT="just a pic" WIDTH="25" HEIGHT="25" BORDER="0"></A>

  <A HREF="tutor3.html"><IMG SRC="pic.gif" ALT="just a pic" WIDTH="25" HEIGHT="25" BORDER="5"></A>

just a pic just a pic just a pic

 

Note that the last 2 images both act as hyperlinks.