Links allow you to organize your site contents into manageably small pages that load in a reasonable length of time, yet are easily reached with a click on the underlined text of the link. A table is an easy way to neatly display several links to other pages of your site or to different locations on a long page. You can make a table of contents or an index this way, or put a horizontal group of links at the bottom of your page evenly spaced along the width of the page.

Links are written with the <a> tag, called the anchor tag. A simple link looks like this:

<a href="URL-to-page#location-on-the-page" target="window-name">Underlined-text-to-click-on</a>

The URL-to-page is the Internet address and file name of the page you wish to go to. If you are linking to a page in someone else's web site on another computer, you would use the full file name and address for that site to find the computer hosting the desired page and then look for the desired file in the site directory. If you are linking to another page in your own site you don't need the address of the same computer, so you would only need the file name of the page, including the folder name if necessary to change to a new folder first just as you did in writing the name of the graphics files you have been retrieving in the earlier chapter exercises.

You see addresses like that in your browser location line when you tell it to take you to the site you wish to see. A link written for a web page uses a copy of such an address as the URL-to-page. For example, the URL for my site that brought you to my welcome page is http://www.geocities.com/ellenk2site/index.html, so if you put a link to my site Reflections on the Second Coming on your page, the code would look like this:

<a href="http://www.geocities.com/ellenk2site/index.html" target="_blank">Reflections on the Second Coming</a>

If you put your cursor over the underlined phrase "Reflections on the Second Coming" above and look at the bottom line of the browser, you will see the URL for my site displayed there. If you left click on the phrase, the browser will go to that address and get a file called index.html. Every web site should have a page by that name as the entry page for the site. While you can and will write links to the other pages (files) stored on a web site, you need a safe place for visitors to start when they visit your site. Novice computer users might have trouble remembering your site URL, and having a file the computer will load if they can at least reach the server with your member name will get them into your site, even if they don't remember the exact file name of the page you told them to look at. You can add a link to this entry page to take them to the new page you wanted them to see.

The target="_blank" tells the browser to open a new window to load the page so it doesn't replace this page with it. You simply close the window once you are through with the new page. Watch out for opening too many windows without closing them afterwards, or you may overload your computer.

You can use the target parameter to name a particular window to reuse to open new pages as is done for frames, but this can also open a new window with the first link using it and then open further pages in the same window. Target="_top" will open a new page over a site that is written with frames to get out of the frames. Use no target at all if you want to replace the current page with the new page.

You do need to be connected to the Internet to access a web site there. This is one of the few things in this tutorial that you can't try offline. However, if you load your HTML page with a link to a web site on it while you are connected to the Internet, you can access the web site by clicking on the link. This is how you can create your own page of favorite links as I did for my site, My Favorite Links. Click the Back button on the browser if you go there to return to this page.

The #location-on-the-page is a "bookmark" set by another use of the <a> tag at the location of the tag. If you use an <a name="location-on-the-page"></a> anchor on your page, you will create a bookmark by the name "location-on-the-page" at that spot. Use whatever name is easy to remember for that spot, starting with a letter at the beginning of the name. Then when you use the link, the browser will go to that particular spot on the specified page. If there is no "bookmark" on the page, the browser goes to the top of the page. This is optional but useful if you want to help your visitor move quickly to different parts of a long page.

The simplest link is the "bookmark" link to move from one place to another on the same page. You don't need to specify the complete URL or even the filename of the page for that to work, just put the bookmarks in and the links to go to them. Let's try it to move around a table on this page.

This is marked place one. Click on this link to go to marked place four.	This is marked place three. Click on this link to go to marked place two.
This is marked place two. Click on this link to go to marked place three.	This is marked place four. Click on this link to go to marked place one.

Here's the code that created the table and its links. See how simple the anchor codes are for bookmarks on the same page. When you don't specify a file name for the page, the computer assumes you want to stay on the same page and looks for a bookmark on the page that matches the name in the link. You just give each place you want to mark its own unique bookmark-name in quotation marks in the anchor tag. Then when you want the browser to move the page to the place where the bookmark is, you use an <a href="#bookmark-name">Underlined-text</a> link at the spot you want to leave to go to your bookmark. Be sure to remember the quotation marks and the # before the bookmark-name in the href (link) version of the tag only. Note that links are underlined but the bookmarks are invisible. Try clicking on the links and watch the page move up and down to the bookmarked place specified in the link.

<table width=100% border=1 cellpadding=5>
<tr>
<td>
<a name="one">This is marked place one</a>. Click on this link to go to <a href="#four">marked place four</a>.
</td>
<td>
<a name="three">This is marked place three</a>. Click on this link to go to <a href="#two">marked place two</a>.
</td>
</tr>
<tr>
<td>
<a name="two">This is marked place two</a>. Click on this link to go to <a href="#three">marked place three</a>.
</td>
<td>
<a name="four">This is marked place four</a>. Click on this link to go to <a href="#one">marked place one</a>.
</td>
</tr>
</table>

Let's try it with the newsletter.html file, adding links to mark the title of each article and creating a table of contents under the newsletter heading. Retrieve the file in Notepad and add this table of contents under the <img> tag for the string of Christmas lights:

<table width=100% border=0>
<tr>
<td>
<center>
<a href="#ruthann">Ruthann gets arrested!</a><br>
<a href="#craftingtip">Crafting Tip</a><br>
<a href="#quote">Quote of the Feast</a><br>
<a href="#present">Most Original Christmas Present</a><br>
<a href="#bowlingscores">Bowling Scores</a>
</center>
</td>
</tr>
</table>

Then mark each title with an anchor tag naming the bookmark at each place. For example, the title for the first article about Ruthann becomes

<center><a name="ruthann"><h5>Ruthann gets arrested!</h5></a></center>

Mark the rest of the titles similarly with their own bookmark-names given in the table of contents. Save the file, load the page in your browser, and try the links. They should work the same way the links in the copy of the newsletter below work.

Louella's Tattle and Tips Ruthann gets arrested! Crafting Tip Quote of the Feast Most Original Christmas Present Bowling Scores
Ruthann gets arrested! Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources. Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake. Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)	Crafting Tip Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!
	Quote of the Feast The biggest turkeys do their gobbling on Christmas. Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.
	Most Original Christmas Present Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.
Bowling Scores Name Game 1 Game 2 Game 3 Game 4 Willa 102 119 131 95 Roy 152 149 159 171 Ruthann 141 133 156 143 Will 189 182 159 171

Now let's make a page which could serve as an archive for back issues of the family newsletter. Since both this file and the newsletter file should be stored in your puzzle folder, you don't need to tell the browser to look in another folder as you did when you went from the puzzle folder to the backgrounds folder to retrieve a graphics file. We can use the same table of contents for the links, except that now we'll have to add the file name before the bookmark name to tell the browser to go from the archive page to the newsletter page.

Copy the file below into Notepad and save it as newsarchive.html. Load it into your browser and click on the links. Note how the browser loads the newsletter.html file and then moves the page to the bookmark for each link.

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<center><h3>Newsletter Archive</h3></center>
<table width=100% border=0>
<tr>
<td>
<h5>Christmas Newsletter, 2000</h5>
<p>
<a href="newsletter.html#ruthann">Ruthann gets arrested!</a><br>
<a href="newsletter.html#craftingtip">Crafting Tip</a><br>
<a href="newsletter.html#quote">Quote of the Feast</a><br>
<a href="newsletter.html#present">Most Original Christmas Present</a><br>
<a href="newsletter.html#bowlingscores">Bowling Scores</a>
</td>
</tr>
</table>
</BODY>
</HTML>

If you have to move from one folder to another, you simply write the path to follow as part of the file name. For example, suppose you have newsarchive.html in your main directory and the newsletters are collected in a subfolder in the main directory called tattle. You would write the file name and address as tattle/newsletter.html#ruthann for the link to the bookmark ruthann on page newsletter.html in subfolder tattle relative to the location of the page newsarchive.html in your main directory.

That is something to consider when you are creating folders to organize a web site. It is pretty easy to move down through subfolders, though the file names may get long when you have to string folder names together to name all the folders to go through until you finally reach the file itself. It isn't as easy to move upwards through several subfolder levels. You may have to go to the full file name with all the folders from the main directory on down to properly specify the path to follow through the folders to find the desired file.

The URL for a file on another computer is written using the Internet name of the computer and the name of the main directory folder for the web site before the names of the folders within the web site main directory. We discussed that a bit at the beginning of the chapter. When you link to a file on another computer, you have to first specify that you must go to the correct computer first to find that main directory folder.

That's why the URL for my main page, http://www.geocities.com/ellenksite/, starts by telling the browser to find the geocities.com server which hosts my site under the member name ellenksite. Once it finds my main directory, I can access the other pages stored there with links written relative to the main directory files. That's where I store my index pages, with the pages for the various sections of the site sorted into their own folders, or else have the index pages in the folder and link from my welcome page or menu by going down one level into the section subfolder. That way I only have to add one folder name to go down into a subfolder or the ../ shorthand (that is two periods and a slash) to go up a folder to an index page.

Using relative addresses like this makes a web site easier to build and maintain, and more portable if you have to move it. I have a copy of it on my PC where I can not only check the appearance of the pages but also can check the links as they will work the same way once uploaded to the server. As long as you use the same file and folder names on your hosted web site as on its copy on your PC, the links will work the same way.