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.
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.< 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>
Note that the last 2 images both act as hyperlinks.