HTML Tutorial #3

Make sure to read Tutorials #1 and #2 first!

In the last tutorial, we saw that some tags have a lot more properties than others. The tag has no properties, while the <BODY> tag has 5 (that we've learned so far). In this tutorial we will cover two new tags: <A> and <IMG> which are utterly useless without setting one or more of their properties.

The <A> tag is called the anchor tag and is commonly used to create a hyperlink; a clickable area that takes the user to another page. I mentioned this in the first tutorial, but I will review and expand on that information. To make a hyperlink, you must set the HREF property to the web page you are linking to. If the page belongs to someone else, use the full address (ex. HREF="https://staticlounge.tripod.com/tutor3.htm"). If the page is in the same directory, on the same server as the one you are working in, you can just give the name of that file (this would be done when you are linking to another page on the same site, ex. HREF="tutor3.htm"). You can also navigate the directories within the site your page is on. "notes/special.htm" would link to the special.htm file in the notes subdirectory. Likewise, if you are working in the notes subdirectory and want to link to a page that is in the main directory, use the ".." command (ex. HREF="../index.htm").

Another property of the <A> tag is NAME. This can be used in conjunction with the HREF property but if you put a NAME property then the HREF property is no longer required. The NAME property is used to mark an area of the page as anchored. You can then link to a specific point in the page (rather than the top) as long as it has been given a name. To link to an anchor add a '#' (pound sign) followed by the name of the anchor to the end of the URL (ex. HREF="http://www.alphabet.com/letters.htm#g"). You can also link to an anchor within the page you are working on by excluding the url (ex. HREF="#bottom").

The final property we will deal with is TARGET which sets where the link is to be opened. This comes in more handy when we use frames (all in good time, young jedi) but one useful trick is to set TARGET="_blank" to make the link open a new browser window. This is useful if you want the user to see something without actually leaving your site.

Here is a fully loaded Anchor:

Try putting that piece of code somewhere in a web page. It will create a link to this site that opens in a new window. One other feature to note is setting HREF="mailto:(some e-mail address)". This will tell the browser to open an e-mail client and prepare a message to (some e-mail address). For example: <A HREF="mailto:geckoweb@iname.com"> would create a link to send me mail.

Our next tag is something very new and exciting: <IMG>. This is the tag used to insert graphics into a web page. To put a graphic into a web page, the image file must also be online somewhere. Then you can set the SRC property equal to the destination of the image. The same rules apply as did for the HREF property. For example: <IMG SRC="images/a.jpg"> would insert "a.jpg" from the images subdirectory.

Another property is ALIGN. This controls where the image will be placed in relation to the surrounding text. Setting ALIGN="left" will force the image to the left side of the page and text will be placed to the right of it (this is somewhat pointless because it is the default setting anyway). Typing ALIGN="right" would obviously force the text to the right. ALIGN="center" is also possible but does not always work on some browsers. To center an image it is better to put <CENTER> tags around the image. Ex: <CENTER><IMG SRC="monkey.jpg"></CENTER>

The BORDER property is the width of the border around the image (default is 0). Most browsers don't display a border unless you are using the image as a link, in which case the border color is dependent on the values you entered in your <BODY> tag for LINK, ALINK, and VLINK.

The WIDTH and HEIGHT properties can be set to force the image to a certain size. Keep in mind that the browser will automatically detect these lengths. Only use these properties if you want the browser to stretch and distort your image (which is generally discouraged because browsers are not very good at this).

Here is an example of a fully loaded image tag being used as a link:

A few things to note: The <A> tag requires an end tag (</A>) while the <IMG> tag does not. Also note that numeric properties such as BORDER=3 do not require any quotation marks.

Now, here is a sample page to play around with:

<HTML>
<HEAD>
<TITLE>My Third Web Page!</TITLE>
</HEAD>
<BODY>
<A NAME="top"><H2>My Favorite Links</H2></A>
(<A HREF="#bottom">Jump to the bottom</A>)
<A HREF="http://staticlounge.tripod.com" TARGET="_blank">Static Lounge</A>
<A HREF="http://blackwidow.informatics.sunysb.edu/logan" TARGET="_blank">Logan's Cold Fusion Page</A>
Scroll Down...
<IMG SRC="https://staticlounge.tripod.com/images/balls.jpg" BORDER=4>
 
 
 
 
 
 
 
 
 <A NAME="bottom"></A>This is the bottom of the page. 
<A HREF="#top">Go back to the top</A> or <A HREF="mailto:geckoweb@iname.com">E-mail me</A>.
</BODY>
</HTML>

Stay tuned for the next tutorial!
Get a printable versin here.