Quick Reference: Hyperlinks and Projects | How to Do Everything with HTML & XHTML

In this chapter you have learned how to create hyperlinks to weave your Web site into a cohesive whole. You have also learned how to link to specific locations on a different page as well as linking to other Web sites. This quick reference section will remind you of what you have learned as you begin to create and link together the pages of your own Web site.

Create Hyperlinks

Hyperlinks are what make the Web a web. You can create links from text, photos, clip art, and so on, by enclosing them inside the anchor element. You also can link to a particular spot on the same page and even a certain spot on a different page. The elements and attributes in the next table will help you remember how to create and style your own links.

To Do This	Use This
Create a hyperlink	<a href=" "> </a>
Link to a different page	<a href="webpage.htm">Link</a>
Set a place marker that you can link to (used for linking to a specific spot on the same page or on another page)	<element > </element>
Create a named anchor using the name attribute (deprecated)	<a name="spot"> </a>
Link to a place marker or named anchor on the same page	<a href="#spot">Link</a>
Link to a place marker or named anchor on a different page on the same Web site	<a href="Webpage.htm#spot">Link</a>
Link to a place marker or named anchor on a different Web site	<a href="http://www.newSite.com/ webpage.htm#spot">Link</a>
Open a link in a new window	<a href="webpage.htm" target="_blank">Link</a>
Create an e-mail link	<a href="mailto:email@server.com">Link</a>
Cause links on a page to change to red when a cursor passes over them	<style> a:hover {color: red} </style> Note: This must be nested in between the <head> tags.
Remove link underlines	<a href="webpage.htm" style="text-decoration: none">Link</a>

Code for Project 7

If you had problems getting your Project 7 page to match up with the picture in Figure 5-1, the HTML markup for creating that page is provided here. Compare your code to that which follows, and try to find the solution to your problem. If you’re really adventuresome, try modifying this code by creating some place marker links to other pages or changing the color or appearance of your links:

<html>      <head>        <title>My HTML Reference Guide</title>      </head>      <body>        <h1>Pages I've Created</h1>         <ul>           <li><a href="headings.htm">Headings</a></li>           <li><a href="text.htm">Text Elements</a></li>           <li><a href="sup.htm">Superscript &amp;                Subscript</a></li>           <li><a href="del.htm">Deleted Text</a></li>           <li><a href="pre.htm">Preformatted Text</a></li>           <li><a href="ulist.htm">Unordered List</a></li>           <li><a href="ulist2.htm">Multi-level                Unordered List</a></li>           <li><a href="olist.htm">Ordered List</a></li>           <li><a href="olist2.htm">Ordered List                with Start Attribute</a></li>           <li><a href="olist3.htm">Outline List</a></li>           <li><a href="dlist.htm">Definition List</a></li>           <li><a href="text-format.htm">Text                Formatting</a></li>           <li><a href="generic-fonts.htm">Generic                Fonts</a></li>           <li><a href="font-colors.htm">The Color                Property</a></li>           <li><a href="16colors.htm">The Sixteen                Basic Colors</a></li>           <li><a href="css-color.htm">CSS Color</a></li>         </ul>         <a href="index.htm">Home</a>    </body> </html>