- What You Will Learn
- Approximate Time
- Lesson Files
- Specifying Link Color and Forma
- Creating Hypertext Links
- Understanding Links and File Structure
- Adding New Folders and Files to a Site
- Creating a Site Map
- Working with Links in Site Map View
- Viewing a Subset of the Entire Site
- Saving the Site Map
- Targeting Links
- Inserting and Linking to Named Anchors
- Inserting E-mail Links
- Working with Links On Your Own
- What You Have Learned
This chapter is from the book
This chapter is from the book
This chapter is from the book
Inserting and Linking to Named Anchors
When a document is long or has many sections, you might need to create a series of links that will jump the user to specific places within the document. This technique eliminates the need for the viewer to scroll through long passages of text. A named anchor marks the place in the page to which a link jumps. In this exercise, you insert and link to a named anchor. You will also learn another method of selecting link files—using the Point To File icon.
- Open definitions.html from the Lesson_03_Links folder. Choose Modify > Page Properties and select the Links category of the
Page Properties dialog box. Set the same default link colors that you used for the index.html document in this lesson’s first
exercise. Click OK.
Recall that the link color’s hexadecimal value was #FF3300, the rollover link color was #FF9900, the visited-link value was #993300, and the active link color was #FFCC00.
This file contains a large amount of text that requires the visitor to scroll to see the entire document.
- Position the insertion point in front of the term Vinyasa Yoga at the bottom of the document. Click the Named Anchor button in the Common category of the Insert bar.
The Named Anchor dialog box opens.
- Type vinyasa in the Anchor name text field; then click OK.
Don’t use spaces, punctuation, or special characters (such as copyright symbols, number signs, and so on) in the name. There should never be more than one named anchor with the same name in the same document; otherwise, the browser cannot jump the user to the correct named anchor.
A yellow icon appears on the page to represent the named anchor. The icon might be selected when it first appears on the page—selected anchor icons are blue. This icon is an invisible element that doesn’t appear in the browser.
- Place the cursor at the end of the paragraph describing yoga at the top of the page. Press Return and type There are many styles of yoga, including:. Press Return (Macintosh) or Enter (Windows) and type the following terms, with a line break between each:
- Hatha
- Anusara
- Ashtanga
- Bikram
- Dynamic Hatha
- Integral
- Iyengar
- Kripalu
- Vinyasa
This text will act as a navigational element by jumping the user to the corresponding sections of the page. Each term will be a link that references the corresponding named anchor, like the one you created for Vinyasa Yoga near the bottom of this page in the preceding steps.
- Select the text Vinyasa from the new list of yoga styles you just created. Type #vinyasa into the Link text field on the Property inspector.
The number sign (#) is required to tell the browser that this link is internal—it takes the user to a location on the same page.
Make sure that the name you type after the number sign is exactly the same as the anchor name. You should follow the naming guidelines from Lesson 1 when you name your anchors. Named anchors are case-sensitive, even though many browsers accommodate a case change. For example, if you name your anchor vinyasa and then type #Vinyasa in the Link text field, your link might not work consistently in all browsers.
The text Vinyasa, located in the list of yoga styles, is now linked to the Vinyasa term and definition near the bottom of the page. Now you will repeat the process for Kripalu.
- Add another named anchor before the Kripalu term near the bottom of the document and name it kripalu.
You have created a second anchor.
- Select the word Kripalu in the list of yoga styles at the top of the document. Drag the Point to File icon (located next to
the Link text field in the Property inspector) to the kripalu-named anchor you just made. Release the mouse button when the
pointer is directly over the named anchor.
When you first click the Point to File tool, the Link text field initially contains instructional text that will be replaced with the link that you choose. After you roll over the named anchor, #kripalu will appear in the Link text field. Using the Point to File icon to create links might help prevent typing errors.
- Insert named anchors and links to them for the remaining navigational terms you created at the beginning of the document.
For the anchor names, type hatha, anusara, ashtanga, bikram, dynamic, integral,and iyengar for their respective yoga types.
You can edit the names of any anchors you create by clicking the named anchor. The Property inspector changes to show that a named anchor is selected. You can change the name in the Property inspector’s Name text field.
- Insert a named anchor at the very top of the page in front of the text Yoga and name it top. Create a new line at the bottom of the page, type Back to Top and link it to #top using the Link text field on the Property inspector.
In long documents, it is a common practice to include links at the end of every section to a named anchor at the top of the page or to a navigational table of contents. This common anchor is usually called #top. When you provide this type of a link, users don’t need to scroll back up to the top of the page if they want to continue using those links to jump to other sections. Any number of links on the page can reference the same named anchor.
- Save the file and preview it in the browser.
The navigational terms at the top of the page now link to their corresponding sections. You can close the definitions.html file.
In the following step, you will continue learn how to link to a particular section of another document using a named anchor.
- Open the top-level index.html file in the Lesson_03_links folder. In the paragraph beginning with Anusara Yoga, a form of hatha yoga… select the words hatha yoga. Type definitions.html#hatha in the Property inspector’s Link text field.
)
)
)
)
)
Be sure to replace the original number sign (#) in the Link text field with the link you have typed in.
)
In the previous steps, you created a named anchor at the hatha section of the definitions.html file. Now you are making a link in index.html point directly to the hatha section in definitions.html—instead of linking to the top of the page as it would if you had used definitions.html as the link. You can preview index.html in the browser and test this new link.
The use of anchors to link to specific portions of other pages helps your site to be more functional, directing your viewers to what they are looking for immediately and reducing the amount of time they have to spend scrolling through long documents. The more functional and easy to use your site is, the more likely it is that you will have new and repeat visitors.
Leave the index.html document open for the next exercise.