Images
O.K., now you've learnt about how to
handle text I'll tell you about images:
Images in HTML pages are normally in ".gif" or ".jpg" format as these
are the only really standardised formats on the internet.
Images are inserted into a web page by the simple command:
<IMG SRC="yourpic.gif">
There are loads of attributes for the <IMG> tag:
| Attribute | Possible Values | Explanation |
|---|---|---|
| SRC="file.gif" | Any filename or URL | The filename of the image you want in the page |
| ALIGN="x" | RIGHT, LEFT, MIDDLE, TOP, BOTTOM | How the image is aligned with respect to the text: e.g. if set to LEFT, the image will go to the left of the page, and text will flow round on the right. |
| ALT="text" | [text identifying image] | A label for the image. Put it in square brackets to make it clear. Displayed in text only browsers and while the image is downloading in normal browsers. |
| BORDER="n" | 0 and anything above | Sets the size of the border around the image. |
| HEIGHT="x" | Any number in pixels | The height of the image. Always specify this, as with WIDTH, it makes the rest of the page load while waiting for the image to download. |
| HSPACE="x" | Any number in pixels | The amount of horizontal "padding" around the image from the text. |
| VSPACE="x" | Any number in pixels | Along with HSPACE, this is the vertical padding around the image from the text. |
| WIDTH="x" | Any number in pixels | Along with HEIGHT, this specifies the horizontal dimension of the image. |
This can be added to by using the <CENTER>
& </CENTER> tags, with which you can obviously center an image.
Another thing that can be done with images is to make them hyperlinks
by putting the <A HREF="nextpage.htm"> & </A> tags round
the image, like this:
<HTML>
<HEAD><TITLE>Iceman's Web Page</TITLE></HEAD>
<BODY TEXT="#000000" ALINK="#FFFF00" VLINK="#8080FF" LINK="#0000FF"
BACKGROUND="greyweave.gif">
<H1>This is a heading of size 1</H1><BR>
<FONT COLOR="#FFFF00"><H1>This is a heading of size 1
in a different colour (yellow) </H1></FONT><P ALIGN="RIGHT"
ID="ice_verdanaHead">
<FONT SIZE=+2 FACE="Verdana">This is text of font size +2 and
in the Verdana Font, Aligned on the Right</FONT></P>
<!-- This is a comment, it won't appear in the browser, but is useful
when looking at source code. -->
<A HREF="mypage.htm">
This is a hyperlink to mypage.htm (Don't Click This!!)</A><BR>
<A NAME="middle">This is an anchor: you can't see anything
though!
<CENTER>
<A HREF="nextpage.htm">
<IMG SRC="mail.jpg" BORDER="2" HSPACE="2" VSPACE="2">
</A>
</CENTER>
Don't Click This Either!!
</BODY>
</HTML>
Click Here for the Resulting Page
Remember that putting a link as an image means you get a border round
the image. Set BORDER=0 to turn this off.
O.K., now try inserting some images into your page to smarten it up.
