HTML Site

Now, we move onto images. They're quite simple, really. First, there's an IMG tag. It won't help unless the browser is psychic, so in it, we include a SRC= tag. So let's get this right. Most images are either GIFs or JPGs, the ext in the examples. Additionally, filenames must be capitalised EXACTLY as they were saved because browsers search exactly what you say.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<IMG SRC="
filename.ext"><BR>
<IMG SRC="
Filename.ext"><BR>
</BODY>
</HTML>

Appears as:


Whoops, looks like Netscape doesn't like that second one! If you have another browser, you may see a red X in a box, or other things, including ALTernative text. ALT text is what the browser sees until the image is loaded, or they see if they have disabled or are unable to see images. Also, if you cannot describe an image, or it may look tacky with an alt, leave it so that ALT="".

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<IMG SRC="
filename.ext" ALT="You see this?"><BR>
<IMG SRC="
Filename.ext" ALT="You see this?"><BR>
</BODY>
</HTML>

The ALT tag also often shows up when you leave your mouse over an image. Also, this below may not necessarily work. See below:

You see this?
You see this?

To speed up loading, or to modify the size you see, sometimes used to show smaller images that you can click on (thumbnails). These are determined by the WIDTH= and HEIGHT= tags. Netscape autmatically sets aside the size of an image so that people can continue browsing your site without having to wait for images to load to continue. You can "resize" images to anything you like.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<IMG SRC="
filename.ext" WIDTH="40" HEIGHT="40"><BR>
<IMG SRC="
filename.ext" WIDTH="10" HEIGHT="10"><BR>
<IMG SRC="
filename.ext" WIDTH="200" HEIGHT="5"><BR>
<IMG SRC="
filename.ext" WIDTH="5" HEIGHT="60"><BR>
</BODY>
</HTML>

The result is the same image resized 4 times.







Have you ever tried to put an image inside an A HREF tag? See that ugly blue line?

You can get rid of it by inserting a BORDER= tag. It can be any size but 0 is the norm.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<A HREF="
website.html"><IMG SRC="filename.ext" BORDER="0"></A><BR>
<A HREF="
website.html"><IMG SRC="filename.ext" BORDER="40"></A><BR>
</BODY>
</HTML>

These appear as:


Intermediate Links:

Links
Text Formatting
Images
Ordered and Unordered Lists