This lesson introduces the basics of using text and images as hyperlinks within and between HTML documents.
·
Hyperlinks
- An Introduction
·
Text
Hyperlinks
·
Relative
Versus Absolute Pathnames
·
Image
Hyperlinks
·
Image
Borders
·
Image
Maps
·
E-Mail
Hyperlinks
Hyperlinks - An Introduction
The chief power of the Web comes from its ability to link from one web page or site to any other regardless of where (ie. which computer server) they physically reside. This can be achieved by the use of hyperlink tags. Though only text could be so tagged in earlier versions of HTML (hence the origins of the name HyperTEXT Markup Language), today any text or image can serve as a hyperlink to any another page, site or even an e-mail address, jumping to the appropriate resource when clicked on.
To add a link, the <A HREF=> and </A> tags are used. These tags bracket a portion of text or an image which will serve as a hyperlink, with the "HREF=" attribute identifying the destination URL.
Text Hyperlinks
To link with text simply bracket the desired word or phrase with the <A HREF=> and </A> tags. Typically, though not always, hyperlinked text is displayed in browsers with an underline, as illustrated below:
|
HTML
Code |
|
Browser
Display |
|
<A
HREF=http://www.unitedmedia.com/comics/dilbert/> Check out today's
Dilbert comic!</A> |
|
Relative Versus Absolute Pathnames
An important point to remember when creating links is to
make sure the correct URL is given. In order to provide a link to documents in
other directories, the complete path from the current document to the linked
document must be indicated. For example, a link to a file called "dilbert.html"
located in the subdirectory "comics" would be written as:
<A
HREF="comics/dilbert.html">Dilbert Comic</A>
These are called relative links because the path to
the file being linked to is specified relative to the location of the current
file. The absolute pathname (ie., the complete URL) of the file could
also be used, but relative links are more efficient in accessing a server. They
also have the advantage of making documents more "portable" -- for
instance, several web pages stored in a single folder on a local computer, with
relative hyperlinks between each other, could be uploaded to a web server
together, where the links would continue to work just as they do within a
locally stored copy.
The exception to this is when links are made to websites on
other servers the absolute pathway must be given (ie., the complete URL).
Thus
the relative pathway for this page is:
<A
HREF="lesson5.htm">
Whereas
the absolute pathway is:
<A
HREF="www.alternetwebdesign.com/htmltutorial/lesson5.htm">
Image Hyperlinks
Instead of using text as hyperlinks, images may be used instead. This method of providing visual clues to links is becoming increasingly common on the Web. To do this, simply surround the image tag with hyperlink tags, in the same way a text link is tagged:
|
HTML
Code |
|
Browser
Display |
|
<A
HREF=http://www.unitedmedia.com/comics/dilbert/> <IMG SRC="dilbert.gif"
WIDTH=78 HEIGHT=72 BORDER=0></A> |
|
|
Image Maps
Image mapping is a method of hypertext linking different parts of an image with the use of pixel coordinates to denote the areas. With an image map, a single image can provide many links to a number of different URLs.
Below is a sample image map as it appears in HTML code and within a browser window:
|
HTML
Code |
|
Browser
Display |
|
<MAP
NAME="links"> |
|
|
E-Mail Hyperlinks
In order to create a link which launches the visitor's own e-mail program while filling in a specified address, include the "MAILTO:" tag with the desired e-mail address as shown here:
|
HTML
Code |
|
Browser
Display |
|
<A
HREF="MAILTO:name@server.com">Click here to send
e-mail.</A> |
|
Try it out!
In the box below, type the following HTML code, then click the "View" button. The HTML document you have written will be displayed in your browser. You may wish to change some of the tags and/or attributes to experiment with some of the different items discussed in this lesson.
NOTE: If you would like to put one of the graphics from these lessons into your code, include the entire address - ie. the Absolute Pathname. EG. http://www.alternetwebdesign.com/htmltutorial/imagename.gif
Try typing this:
<HTML>
<HEAD>
<TITLE>Want to learn more? </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000">
Do you want to learn more?
Click on the links below to get to some other useful HTML tutorials and
reference documents:
<UL>
<LI><A HREF=http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html>NCSA-
A Beginners Guide to HTML</A>
<LI> <A HREF=http://WWW.stars.com/Authoring/HTML/Intro/>The WDVL:
Introduction to HTML</A>
</UL>
If you have any other HTML links you would recommend, please e-mail me at: <A
HREF="MAILTO:info@alternetwebdesign.com">info@alternetwebdesign.com</A>
<P> Click on the arrow to go to the next lesson.
Lesson 6
<A HREF="http://www.alternetwebdesign.com/htmltutorial/lesson6.htm"><IMG
SRC="http://www.alternetwebdesign.com/htmltutorial/arrowright.gif"
WIDTH=10 HEIGHT=8 BORDER=0></A>
</BODY>
</HTML>
Lesson
6
This lesson introduces the concept of tables as they are used in HTML documents.
·
Tables
- An Introduction
·
Explanation
of Table Tags
·
Explanation
of Table Structure
Tables - An Introduction
Tables are used two ways in HTML: to display charts (what the designers of the <TABLE> tag originally intended it for); and as a means of controlling the layout of information on a web page. Although creating tables can be challenging, because readers of this tutorial will only be modifying information on existing web pages, all that is required is a basic understanding of the key elements and attributes which make up a table.
Explanation of Table Tags
|
<TABLE>...</TABLE>
|
|
Encloses
the table. The TABLE tag has the following variable attributes: "BORDER="
Specifies the thickness of the border around the table. When using a table
to control a page's layout, the border is usually set to zero. "CELLPADDING="
Defines spacing within cells. "CELLSPACING="
Defines spacing between cells. "WIDTH=" Specifies the width of a table; typically given as a percentage of the total browser window space available. |
|
<TR>...</TR>
|
|
Specifies
a table row within a table. You may define default attributes for the
entire row. These are: "ALIGN="
(either LEFT, CENTER, or RIGHT) |
|
<TD>...</TD>
|
|
Specifies
a table data within the table row. The attributes for table data are: "ALIGN="
(either LEFT, CENTER, or RIGHT) |
Explanation of Table Structure
Just as HTML documents have a basic structure, so too do tables:
<TABLE>
<TR>
<TD>This is the table data cell #1</TD>
<TD>This is the table data cell #2</TD>
</TR>
</TABLE>
Below are samples of the various <TABLE> tags and their respective browser display:
|
HTML
Code |
|
Browser
Display |
||
|
<TABLE
BORDER=1 CELLPADDING=2 CELLSPACING=2> |
|
|
Two further notes about the creation of tables: Firstly, tables are often "nested" within each other as a means precisely controlling the layout of information on a page. Secondly, in order to make a table cell appear empty, some form of place holder must be inserted, be it the ASCII code for a blank space ( ) or perhaps a GIF consisting of a single pixel the same colour as the cell's background.
Try it out!
In the box below, type the following HTML code, then click the "View" button. The HTML document you have written will be displayed in your browser. You may wish to change some of the tags and/or attributes to experiment with some of the different items discussed in this lesson.
Try typing this:
<HTML>
<HEAD>
<TITLE>TABLE Manners</TITLE>
</HEAD>
<BODY BGCOLOR="#800080"
TEXT="#FFFFFF">
TABLE Manners
<TABLE WIDTH=80% BORDER=1 CELLPADDING=2
CELLSPACING=2>
<TR>
<TD>Rule # 1</TD>
<TD>Always make sure you write all TABLE tags in the right
order.</TD>
</TR>
<TR>
<TD>Rule # 2</TD>
<TD>It is inappropriate to nest too often.</TD>
</TR>
<TR>
<TD>Rule # 3</TD>
<TD>Sit up straight and do not put your elbows on the table.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
