Lesson 5
Linking Text and Graphics
[ The Anchor Tag
] [ Anchor Attributes ] [ Bookmarks ]
[ Linking Graphics ] [E-Mail]
The Anchor <a> Tag
The Anchor Tag (also known as Hypertext Links) enables text, graphics and
even multimedia elements on a page to be used as hyperlinks. Hyperlinks are
connections between Web pages that allow you to navigate through your own Web
Site (internal links) or go to another Web Site anywhere in the world (external
links).
Text links are identified on a Web page as being both a different color
(usually blue) and underlined. Graphics links can be identified by the mouse
pointer turning into a hand with a pointing finger when it's held over the
graphic.
Attributes for the Anchor Tag are:
- <href>. Used to specify the URL address that links the item with the
site it points to.
- <name>. Used for targeting a specific portion of a web document.
- <title>. Used to give the linked resource a title.
- <rel>. Defines the forward relationship of the current page, the next
page in the site's structure.
- <rev>. Defines the backward relationship of the current page, the
last page in the site's structure.
To link one document to another within your own site when both files are in the
same directory, just type the name of the file being linked to, e.g., the
sample shows a link to a document called "HTML Demo". The actual name
of the document is "html-dem.htm").
This is what the code would look:
<a href="html-dem.htm">HTML demo</a>
This is what it looks like in the browser:
HTML demo
---
If the document was located in a subdirectory (for our example the directory
would be called "links"), you'd call up the file by typing the name
of the directory and then the name of the file itself, e.g.
"links/html-dem.htm"
This is what the code would look:
<a href="links/html-dem.htm">HTML demo</a>
---
If the document was not located in the same directory but rather was located
up one level on your site, you would call up the file by typing "../"
before the name itself.
This is what the code would look like:
<a href="../html-dem.htm">HTML demo</a>
---
If the document was located in another directory at the same level on your
site (for our example the directory would be called "webpage"), you
would call up the file by typing "../directory name/" before
the name itself,
The code would look like this:
<a href="../webpage/html-dem.htm">HTML demo</a>
---
If the document was located in a directory two levels up on your site, you
would call up the file by typing "../../directory name/"
before the name itself.
This is what the code would look like:
<a href="../../webpage/html-dem.htm">HTML demo</a>
To link to another website anywhere in the world, you'd include the
website's address (URL) in the anchor code.
This is what the code would look like:
<a href="http://freebiesandstuff.freeyellow.com/index.html">
http://freebiesandstuff.freeyellow.com/index.html</a>
This is what it looks like in the browser:
http://freebiesandstuff.freeyellow.com/index.html
Bookmarks
Bookmarks allow you to place a bookmark in any section of the page or any
section on another page. To make a bookmark, you must do two
things:
First, you must specify where you want a "bookmark" to appear. You
do this by using the <a> tag with the <name> attribute as follows:
<a name="bookmarks">. This tag would be positioned where you
want to place the bookmark (in this sample my bookmark just happens to be
called "bookmark" and is located on the same line as the title
"Bookmarks" at the beginning of this section. This is what the
code would look like:
<a name="bookmarks"></a>Bookmarks
Second, you must specify the actual link that would go to your bookmarked
spot. Do this by using an <a href="#bookmarks"> tag (in this
sample the link is located in the box at the top of the page).
This is what the code would look like:
<a href="#bookmarks>[Bookmarks]</a>
This what it would look like in the browser:
[Bookmarks]
To link to a bookmark on another page you'd follow the same procedure as in
the first step above, except the bookmark would be located on the other page.
The code would be the same as that specified in the second step above except
you'd also reference the name of the page that contains the bookmark. An
example would be:
<a href="lesson4.htm#sample">. The document called
"lesson4.htm" contains a bookmark called "sample" opposite
the image of the bumblebee...This is how the link
to the bookmark called "Sample" in the document called
"lesson4.htm" would look
Linking Graphics
Graphics can also be used to link to a specific document either within your
own website (internal link) or to a website anywhere in the world (external
link).
Need a refresher on inserting graphics?
For an internal link, this is what the code would look like
<a href="lesson4.htm"><img src="madhack.gif"
border=3 alt=computer> </a>
This is what it looks like in the browser:
For an external link, the code would look like this:
<a
ref="http://freebiesandstuff.freeyellow.com/index.html"><img
src="beew.gif" border=0 alt-bee> </a>
This is what it looks like in the browser:
E-Mail
To specify that a link is to an e-mail address, you'd use the mailto tag.
This is what the code would look:
<a href="mailto:webmaster@garvick.com">Feel Free to Send Me
E-mail</a>
This is what it would look like in the browser:
Feel Free to Send Me E-mail
Since not all browsers support the mailto tag, it's a good idea to also
write out your e-mail address in full. That way your e-mail address can at
least be copied and pasted. This is what the code would look like:
<a href="mailto:webmaster@garvick.com">Feel Free to Send
E-mail to webmaster@garvick.com</a>
This is what it would look like in the browser:
Feel Free to Send E-mail to
webmaster@garvick.com
It's cool to have a graphic for your E-mail address, just don't forget to
include a text link as well. This is what the code would look like:
<a href="mailto:webmaster@garvick.com"><img
src=mailbox.gif">Feel Free to Send E-mail to
webmaster@garvick.com</a>
This is how it would look in the browser:
Feel Free to Send E-mail to webmaster@garvick.com
|
