Named Anchors

  1. Create a new html file and name it Yourlastname_C03.html
  2. Give it an html title of: Anchors Aweigh!
  3. Populate it with about 75 paragraphs of Lorem Ipsum text or as many as are needed to prevent about 3/4 of it from being seen in your browser without scrolling.
  4. At the top of the page, immediately after the opening <body> tag, enter this:
    • <a name=top id=top></a>
    • Note that both the name and id attributes ought to be used.
    • Nothing goes between the opening and closing tags, but they are both needed.
  5. At the very bottom of the page, just before the closing body tag, add this link:
    • <a href=#top>Top of Page</a>
  6. Open the file in your browser, go to the bottom of the page, and test that the link brings you to the top of the page.
  7. Now insert at five locations distributed somewhat evenly through the text the following three items in this order:
    1. Put in a link to the top of the page using the same code shown above.
    2. Next, put in a named anchor. For the names, use anything you like.
    3. Then, add a level 1 heading using any text you please.
    • In summary, you have something like the following at each of the five locations (the name/id and headings would vary):
      1. <a href=#top>
      2. <a  name=truth  id=truth></a>
      3. <h1>The Truth </h1>
  8. Finally, at the top of the page, after the named anchor for top, put in a heading that says: Table of Contents
  9. Using an unordered list, create a link to each of the five headings. For the text of the links, use the same text used in the respective headings. The links need to be listed in the order that the headings appear in the document.
  10. Save the file, open it in your browser and text that they all work, including the top links.
    • Reminder: you should always test your files before sending them in.
  11. Include the file in the exercise folder that you send me for the week.