Lesson 06

In this lesson, you created a small page named MyLinks.htm to practice creating hyperlinks. If you intend to add such a page to your real Web site, you'll likely offer many links. Below is a template you can use for creating your own page of favorite sites. It includes external hyperlinks as well as links to anchor points within a page.

Use any technique you like to add the page shown in the box below to your XHTMLclass folder. If you're using Windows, you can follow these steps:

 
  1. Select all the tags and text below, and press CTRL + C to copy to the Clipboard.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!-- Link to style sheet for this Web site -->
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!-- Title below for browser title bar and search engines -->
<title>My Favorite Sites</title>
</head>

<body>
<!-- Title below is an anchor point named top -->
<h1><a id="top"></a>My Favorite Web Sites</h1>

<!-- Table of links to anchor points in this page -->
<div style="text-align:center">
<table cellspacing="10" style="margin:10px auto;">
<tr>
<td><a href="#dictionaries">Dictionaries</a></td>
<td><a href="#downloads">Downloads</a></td>
<td><a href="#music">Music</a></td>
<td><a href="#pictures">Pictures</a></td>
</tr>
</table>
</div>

<!-- Title below is the Dictionaries anchor point -->
<h2><a id="dictionaries"></a>Dictionaries and Searches</h2>
<ul>
<li><a href="http://babelfish.altavista.com/">
Babel Fish Translation</a></li>
<li><a href="http://www.onlineconversion.com/">
Conversions</a></li>
<li><a href="http://dictionary.reference.com/">
Dictionary.com</a></li>
<li><a href="http://www.freetranslation.com/">
Free Translation</a></li>
<li><a href="http://www.google.com">
Google</a></li>

<li><a href="http://www.webopedia.com/">
Webopedia</a></li>
<li><a href="http://www.wikipedia.org/">
Wikipedia</a></li>
</ul>
<!-- Link to top of page -->
<p><a href="#top">Top</a></p>

<!-- Title below is the Downloads anchor point -->
<h2><a id="downloads"></a>Downloads and Shareware</h2>
<ul>
<li><a href="http://www.download.com/">
Download.com</a></li>
<li><a href="http://www.freedownloadscenter.com/">
Free Downloads Center</a></li>
<li><a href="http://www.tucows.com/">
Tucows Downloads</a></li>
</ul>

<!-- Link to top of page -->
<p><a href="#top">Top</a></p>

<!-- Title below is the Music anchor point -->
<h2><a id="music">Music and Sound</a></h2>
<ul>
<li><a href="http://www.partnersinrhyme.com "> Free Sound Effects</a></li>
<li><a href="http://www.frogstar.com/wav/">
Frogstar Sound Effects</a></li>
<li><a href="http://www.ilovewavs.com/">
I Love Wavs.com</a></li>
<li><a href="http://www.urge.com">
MTV Urge</a></li>
<li><a href="http://www.walmart.com/music">
Wal-Mart music</a></li>
</ul>

<!-- Link to top of page -->
<p><a href="#top">Top</a></p>

<!-- Title below is the Pictures anchor point -->
<h2><a id="pictures"></a>Photos and Pictures</h2>
<ul>
<li><a href="http://www.1clipart.com/">
#1 Free Clip Art</a></li>
<li><a href="http://www.grsites.com/webgraphics/">
Absolute Graphics</a></li>
<li><a href="http://www.barrysclipart.com/">
Barry's Clipart Server</a> </li>
<li><a href="http://office.microsoft.com/clipart/ "> Office Clip Art and Media</a></li>
<li><a href="http://school.discovery.com/clipart/">
The Clip Art Gallery</a></li>
</ul>

<!-- Link to top of page -->
<p><a href="#top">Top</a></p>

</body>
</html>



 
  1. Open your text editor (in Windows click Start, and choose All Programs > Accessories > Notepad).

     
  2. Press CTRL + V, or choose Edit > Paste from the text editor's menu bar to paste in the entire page.

     
  3. Close your text editor. In Notepad, click the Close (X) button in its upper-right corner.

     
  4. When asked about saving your changes, choose Yes.

     
  5. In the Save As dialog box, navigate to your XHTMLclass folder so you see that folder name in the Save In box, as in the image below.
     

Save the new page in your XHTMLclass folder as links.htm
Save the new page in your XHTMLclass folder as links.htm

  1. In the filename box, type links.htm as the file name.

     
  2. Click the Save button in the dialog box.


Your XHTMLclass folder should now contain an icon named links.htm that shows your Web browser's logo, as in the image below. Double-click that icon to open it in your Web browser.

Icon for links.htm
Icon for links.htm

When you open the page, it will show some links near the top. The page will get its styles from your style sheet, so fonts and colors may be different on your screen than in the image below. You can click any one of those links to jump to a heading within the page. Use the Top link at the bottom of any section within the page to jump back to the top of the page.

Top of the new links.htm page
Top of the new links.htm page

Close the page after exploring, and then open it in your text editor to explore its contents. Feel free to add new links, or change existing links, as time permits. We've covered many things you can use to customize this page. And we'll use this page as a working example in our next lesson. Feel free to delete MyLinks.htm if you intend to use the larger links.htm page. There's no need to have two pages of links in your site.
 
Claudia's Results      Back to Studies Index