|
Create a new document in your text editor and save the file as tutorial2.html. We will
link between this new web page and the previous one, later in the tutorial when we
look a hypertext links. | |
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Through the Looking Glass</H1>
<IMG SRC="alice.gif">
</BODY>
</HTML>
|
|
The IMAGE tag enables images to be included on a web page. The IMAGE tag has no end tag
and the source of the image is specified by the SOURCE attribute. Add the code on the
left to your tutorial2.html file and then copy the image on the right to the same
folder that contains your html file. |
 | |
|
If the image is in a different folder from the file that refers to it, then the value of
the SOURCE attribute should be the path of the image. For example, if the image is in
the windows folder then the SOURCE attribute would read SRC="C:/WINDOWS/ALICE.GIF".
|
To copy the image, right click on the
image and
choose Save Picture As.
Ensure that the image
is saved to the
folder containing your html file.
|
| |
|
The ALIGN attribute of the IMAGE tag determines how the image is placed with respect
to surrounding text. The attribute takes two possible values LEFT and RIGHT. LEFT
aligns the image to the left of text and RIGHT to the right.
Align the image to the right and add the paragraph of text shown below with the
opening PARAGRAPH tag preceding the IMAGE tag. |
|
|
<P><IMG SRC="alice.gif" ALIGN="right">One thing was certain, that the white kitten had had nothing to do with it
- it was the black kitten's fault entirely. For the kitten had been having its
face washed by the old cat for the last quarter of an hour (and bearing it
pretty well considering), so you see that it couldn't have had any hand in the
mischief.</P> |
| |
|
If the text occupies a greater vertical distance than the image does, then the text
will wrap around the image. To see this, copy the text in your file and paste it
three times in front of the end PARAGRAPH tag to increase the amount of text.
| |
|
A border can be placed around an image using the BORDER attribute as shown. The
value of the attribute gives the thickness of the border in pixels. |
| |
|
The WIDTH and HEIGHT attributes of the IMAGE tag are used to specify the width and
height of an image. When the WIDTH and HEIGHT attributes are specified, the page will load more quickly in the browser, since the browser does not first have to retrieve the image to find out what size it is before determining the layout of the page.
|
To find out the width and height
of an image, you must open the
image in a graphics application
such as Paint Shop Pro or Photoshop.
|
| |
|
<IMG WIDTH="174" HEIGHT="128">
|
|
Add the WIDTH and HEIGHT attributes to the IMAGE tag as shown. |
|
|
The attributes can also be used to size the image to a larger or smaller size
than the image's original dimensions. However, there is a limit to how far this
can be taken before the image becomes distorted. To see this effect,
change the value of the WIDTH attribute to 300.
| |
|
For browsers that do not display images, the ALTERNATIVE tag is used to display
alternative text in place of the image. When a browser does display images, the text
appears in a pop up lable when the mouse is placed over the image.
| |
|
Add the following code to the IMAGE tag and then place the mouse over the image on
your web page to see the effect. |
|
<IMG ALT="Alice and the Red Queen.">
|
| |
