|
|
|
In this exercise, you will create NAME anchors on HTML pages from the previous exercise (Exercise Six: Relative URLs). You will then create a set of hyper-references on each HTML page, linking to all of the NAME anchors on each and every page.
Mac Files (.sit -- 19K)
PC Files (.zip -- 18K)
1. Get out the "website" you created during the last exercise, Exercise Six; corrected example code has been included in the stuffed/zipped materials available above, which you may use as the foundation for this exercise, if you wish. Here is the illustration of site structure from that exercise:
Take the content from sprigMuslin.txt (included in the stuffed/zipped materials for this exercise). Copy and paste this content into the BODY of all four HTML pages in your website; paste this content AFTER the existing links and IMG tags so that it's BELOW the existing stuff on every page.
2. Format the paragraphs of text using the <p></p> tag, marking the beginning and end of every paragraph; do this for all four pages.
Example:
<p>Mrs. Wetherby was delighted to receive a morning call from her only surviving brother, but for the first half hour of his visit she was granted no opportunity to do more than exchange a few commonplaces with him over the heads of her vociferous offspring.</p>
3. On each page, find two paragraphs that you want to jump to. Mark the first word of each of those paragraphs with a NAME anchor; name the first NAME anchor "one" and the second NAME anchor "two".
Example:
<p><a name="one">"Yes, I do:</a> I like Leigh. You needn't fear I shall let him get into mischief: I won't."</p>
4. Add links to the set of existing links at the top of each HTML page. There should be one link to every NAME anchor on every page, including the NAME anchors on the current page, for a total of eleven links in all on each page (three links to every other HTML page (the page, and one to each NAME anchor on the page), plus two links to NAME anchors on the current page).
Example:
<p><a href="#one">Link to "one" on this page</a></p> <p><a href="./page2.html#one">Link to "one" on page2.html</a></p>
5. Add a hyper-reference to the bottom of each HTML page which links to the top of the page.
Example:
<p><a href="#">Link to Top</a></p>
Note: if you wish to support Internet Explorer 5 for the Macintosh, you'll need to add an extra NAME anchor to the top of every HTML page (probably to the content of the H1 tag), and link to that NAME anchor directly with your hyper-reference.
Example Code at Top of Page:
<h1><a name="top">page1.html</a></h1>
Example Code for Bottom of Page:
<p><a href="#top">Link to Top</a></p>
6. Test your pages; make corrections.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.