A Beginner's Tutorial to HTML - Lesson 5 Linking Text and Graphics explains how to link within the same page, between pages within your website or a site anywhere in the world
A Beginner's Tutorial to HTML - Lesson 5 Linking Text and Graphics explains how to link within the same page, between pages within your website or a site anywhere in the world!
{short description of image}

HTML Tutorial:
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7

 

 
html tutorial
Garvick Com

A Beginner's Tutorial to HTML

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>

Mouse

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

Mouse

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  

Mouse

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:

computer 

Mouse

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:

bee

Mouse

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:

Mailbox
Feel Free to Send E-mail to webmaster@garvick.com

 

|  Lesson 1 (Learning the Basics) | Lesson 2 (Adding Color)  | Lesson 3 (Formatting Documents) |
Lesson 4 (Graphics) |  Lesson 5 (Linking Text & Graphics) |  Lesson 6 (Lists) |
| Lesson 7 (Tables) | Back to HTML Tutorial |

 

Garvick Home | Free Recipes | Shopping Mall | Annual Events | Vancouver BC

 

Site Map | Garvick's Privacy Policy