HTML Basics - Using Images, HRs, Linking, and Wallpaper

Images, HRs, Links, and Wallpaper

Inserting images or graphics is relatively easy. The basic tag to use is <IMG SRC="filename"> Here I have placed a small graphic and centered it. The code is <IMG SRC="pawRed.gif">

To help the page load faster, it is a good idea to use height and width tags. The code for the image above would be: <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">

You can align images just like text with the ALIGN tag. This graphic aligned right would be: <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">

There is a BORDER tag you can incorporate in the IMG tag. Check this out: <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16" BORDER="5">

This BORDER tag comes in handy when you want to link a graphic but do not want that colored link border around it. In that instance, you would use BORDER="0" in your IMG tag.

If you wanted to place more than one graphic on the same line, you would just repeat the IMG tag. At most you can place only one space between them - or any text, for that matter. To get around that, use this code for each space you want - including the semicolon at the end (it's part of the code):  

Here is the same image line with 5 spaces between each graphic:
<IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">     <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">     <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">     <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">     <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">     <IMG SRC="pawRed.gif" WIDTH="16" HEIGHT="16">

Which brings us to horizontal rules...<HR> Using just the <HR> will give you the centered default line:

You can alter the size and width like this: <HR WIDTH="450" HEIGHT="10">

And you can use the NOSHADE tag to get this: <HR ALIGN="left" WIDTH="450" HEIGHT="10" NOSHADE>

For wallpaper, you place the graphic file name within the BODY tag. For this background, I typed: <BODY BACKGROUND="flowersbg1.jpg"> Again, the file must be in the same directory or you will have to put in the full address (URL). Read the Backgrounds & Borders HTML page for more specific information.

Linking is a matter of coding too. The <A HREF></A> is used. So to link to Page One of this Tutorial with the words "Page One", I type: <A HREF="htmlbasics.htm">Page One</A> - as long as I am linking to the same directory.
If linking outside your directory, you must use the full address:<A HREF="http://www.geocities.com/~critterss/htmlbasics.htm">Page One</A>
and it looks like this: Page One, showing up in the link color I have chosen (remember Page One?)

To link an image and not have a border around it, you use the <A HREF></A> around the image file name like this: <A HREF="htmlbasics.htm"><IMG SRC="buttonbadge.gif" WIDTH="20" HEIGHT="20" BORDER="0"></A>
If you want the border, just leave out the BORDER tag.

Mailto links are just a matter of using the mailto: code. To link my email address, I type: <mailto:nettguide@geocities.com>Email Me</A> and it looks like this: Email Me

Part One
Starting Out and Sound

Part Two
Working with text

Part Three
Images, HRs, Linking, and Wallpaper

Part Four
Tables are your friends

Part Five
Using Backgrounds & Borders