The Anchor

In HTML, the primary means of linking one location to another is the anchor, or <a> tag. It's a very simple scheme that uses URLs to move between locations. You specify the URL as an href attribute value:

<a href="http://myserver/mysite/mypage.htm">

Go To My Page

The browser formats the text following the opening anchor tag as the link, so in the previous example, the only visible portion of the link is the phrase "Go To My Page." The browser continues to format text following the <a> tag as link text until it encounters the closing </a> tag. Everything between the start and end of the anchor tag, including spaces (an exception to the rule that browsers ignore white space), is the link text.

There are two types of anchor tags: links and bookmarks. Their functions are completely different.

A link is an anchor tag that acts as the trigger for a hyperlink—when you click on the link, it begins or triggers the linking action. Bookmarks are anchor tags that act as the destination for a link. You can jump to a bookmark, but bookmarks aren't visible, and you can't click them. The browser formats anchor tags that contain links as underlined, colored text—blue by default. Browsers generally change the link color after the user has visited the link target.

To create a bookmark, you must give the anchor tag a name attribute:

<a name="Bookmark1">

You can jump to a bookmark in the same document or in a different document. Basically, a bookmark is a way to jump to a place in a document other than the top of the document, which is the default link target. To jump to a different position in the same document, you would write a link tag like this:

<a href="#Bookmark1">

Note the pound sign (#)in front of the href attribute value. The pound sign informs the browser that the link target is a bookmark rather than a document. You can also link to bookmarks in other documents by appending the pound sign and the bookmark name to the end of the URL:

<a href="http://myserver/mysite/mypage.htm#Bookmark1">

You'll see many pages set up with links at the top of the page that jump to bookmarks farther down in the page. Typically, you'll also find that each bookmarked section has a link back to a bookmark at the top of the menu, so that after reading a section, you can jump back to the menu to select a different section. There are some good reasons to set up documents like this rather than as a set of linked pages. A single long document with a menu is less work to create and requires only a single trip to the server. A single long document is also easy to print. On the other hand, it's often more difficult to read long documents, because you have to scroll through them.

Listing 2.5 contains an example of a document with a menu and internal bookmarks for each section. The spacing (<p>&nbsp;</p>) paragraphs are just to put enough white space on the page to force the page to scroll—you wouldn't need them in a normal document. In the browser, the menu page looks like Figure 2.12.

Ct H-WWLWW

Figure 2.12: A menu page with several sections (ch2-12.htm) Listing 2.5: A Menu Page with Several Sections (ch2-l2.htm)

Ct H-WWLWW

Figure 2.12: A menu page with several sections (ch2-12.htm) Listing 2.5: A Menu Page with Several Sections (ch2-l2.htm)

<a href="#Bookmark1">Section 1</a><br>

<a href="#Bookmark2">Section 2</a><br>

<a href="#Bookmark3">Section 3</a><br>

<a href="#Bookmark4">Section 4</a><br>

<a name="Bookmark1">

Content for Section 1 goes here.

<a href="#Menu"><font size="2" color="red">

(back to menu)</font></a><br> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>

<a name="Bookmark2">

Content for Section 2 goes here.

<a href="#Menu"><font size="2" color="red">

(back to menu)</font></a><br> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <a name="Bookmark3"> <h2>Section 3</h2></a> Content for Section 3 goes here. <a href="#Menu"><font size="2" color="red">

(back to menu)</font></a><br> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <a name="Bookmark4"> <h2>Section 4</h2></a> Content for Section 4 goes here. <a href="#Menu"><font size="2" color="red">

(back to menu)</font></a><br> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>

So that you can see a different style, Listing 2.6 contains a multiple-choice question formatted as a set of short linked pages.

Listing 2.6: A Set of Linked Pages (ch2-l3a.htm-ch2-l3e.htm)

<!__******************************************************

* This file (ch2-13a) contains the multiple-choice *

* question. Each distractor is a link to another page *

* that contains the feedback for that distractor. * **********************************************************-- >

<p>Which of the following is <EM>not</EM> a valid anchor tag type?</p>

<li><a href="ch2-13b.htm">A link to another document.</a> <li><a href="ch2-13c.htm">A link to a specific position in a document.</a>

<li><a href="ch2-13d.htm">A link to a previous document.</a>

<li><a href="ch2-13e.htm">A link to the Back button on the browser.</a> </li></ol>

<!-- *****************************************************

* This file (ch2-13b) contains the feedback for the *

* first (incorrect) distractor. * **********************************************************-- >

<p>You selected: "1. A link to another document." That is a valid tag type. Click <a href="ch2-13a.htm">continue</a> to try again.</p>

<!--******************************************************

* This file (ch2-13c) contains the feedback for the *

* second (incorrect) distractor. * **********************************************************-- >

<p>You selected: "2. A link to a specific position in a document." That is a valid tag type. Click <a href="ch2-13a.htm">continue</a> to try again.</p>

<!__******************************************************

* This file (ch2-13c) contains the feedback for the *

* third (incorrect) distractor. * **********************************************************-- >

<p>You selected: "3. A link to a previous document."

That is a valid tag type. Click <a href="ch2-13a.htm">continue</a> to try again.</p>

<!--******************************************************

* This file (ch2-13c) contains the feedback for the *

* fourth (correct) distractor. * **********************************************************-- >

<p>You selected: "4. A link to the Back button on the browser."

That is not a valid tag type. </body> </html>

If you look at this set of pages in a browser, you'll see the question first (see Figure 2.13).

JM fl rflMMH

Figure 2.13: Multiple-choice question screen (ch2-13a.htm)

JM fl rflMMH

Figure 2.13: Multiple-choice question screen (ch2-13a.htm)

As you click each distractor, you'll see pages similar to Figure 2.14. I won't show them all, because you can download the code and view them in your browser. Figure 2.14 shows what happens if you select the first distractor.

ffc £xH torii m r«Ji rsfc

B

- - J .' 'J ^«v- .-r, J .. r

Uc ■«* ] r.ij jk».4fc>. jtf-Zt-a fíMt-

jj ¡ji< .rJii H

VwNhn'i H1 A ¿J. i* Iíomíií "Tl-i'. <<"1-114 ■ :r..-1 h«<ri

VwNhn'i H1 A ¿J. i* Iíomíií "Tl-i'. <<"1-114 ■ :r..-1 h«<ri

4 bM ft'VVNWH

Figure 2.14: Feedback for a multiple-choice question

Was this article helpful?

0 0

Post a comment