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