Education

Solutions for

K-12

Higher Education

Design and Film Schools

Students

Adobe Web Tech Curriculum

Unit 6: Hyperlinks, Lists, and CSS

Lesson 6.2: Hyperlinks

Within-Page Links

Overview of Within-Page Links
Creating Within-Page Links
Under the Hood

Overview of Within-Page Links

As mentioned previously, within-page links (sometimes called intrapage links) link to another location on the same page. Creating within-page links requires the creation of a name anchor that can then be associated with the desired link. In the web page illustrated in Figure 6.2-4, the Table of Contents (TOC) at the top of the page contains hyperlinks labeled Subject 1, Subject 2, etc. These link to locations further down on the same page, namely the Subject 1 section, the Subject 2 section, etc. How does the Subject 1 hyperlink know to take the user to the Subject 1 section below? It's all hidden within the HTML code, as you'll see in the Under the Hood section below. For now, just realize that the hyperlinked text in the TOC uses an anchor <a> element with the href attribute, while the hyperlink's destination section uses an anchor element with the name attribute (i.e., a name anchor). Meanwhile, let's see how easy GoLive makes this process.

Figure 6.2-4: Sample Within-Page Anchors

Creating Within-Page Links

Creating Within-Page Links via the GoLive Object Palette

To add an anchor to a GoLive page before associating it with a link, follow these steps:

Create the name anchor:
1. Click and drag the Anchor icon from the Basic set of the Objects Palette to the desired location within the Document Window Layout Editor; a small anchor will mark the spot. The Anchor Inspector (shown in Figure 6.2-5) will appear.
2. Type a unique name for the anchor into the Name field of the Anchor Inspector.
Create the hyperlink that will take the user to the just-created name anchor:
1. Select the text that will become the hyperlink (i.e., the text the user will click to get to the name anchor you just created).
2. Drag a line from the Point and Shoot icon within the Text Inspector to the new anchor symbol in the Layout Editor.

Creating Within-Page Links via the Document Window

If the link text and the desired anchor location are on the same page (as they are in the case of within-page links), associate the link text and anchor as follows:

Select the to-be-linked text.
Alt-click (PC) or Command-click (Mac) the selected text and drag a line to the desired anchor location:
- If the name anchor has been previously created, drag directly to that anchor symbol.
- If a name anchor has not been previously created, drag to the desired location on the page. The anchor indicator will appear and the anchor name is automatically assigned by GoLive when created in this manner.

Figure 6.2-5: Anchor Inspector

Under the Hood

The basic syntax for creating a name anchor you can link to is:

<a name="anchorname">anchor name text</a>

The basic syntax for creating the link that takes you to a name anchor on the same page is:

<a href="#anchorname">label text</a>

The octothorp (#) indicates that the reference that follows the href is an anchor name.

Using the previous example (with a "top of page" link added), Figure 6.2-6 illustrates how the name anchor and the href anchor should be coded. Note that the "pagetop" name anchor element doesn't enclose any text between its start and end tags (it is not required to do so, but it can):

anchor tag's name and href attributes

Figure 6.2-6: Proper Coding for name and href Anchors

Text explanation of name anchor image

Important Note
When you check your within-page links, you may find that they don't appear to be working. Keep in mind that, if your page is very short, clicking on the links won't appear to do anything, because the link's destination is already visible on screen and/or the page isn't long enough to "jump" to anywhere that causes the page to shift on screen. One solution that allows you to complete the link-checking process is to resize your browser window to a smaller size so that the whole page isn't visible in the window.

To link to a specific name anchor on a different page, append the "#anchorname" to the absolute URL for that page. In that case, the correct syntax is:

<a href="http://www.site.com/path/page.htm#anchorname">label text</a>

Demonstration or Practice Activity

View the links destinations graphic presented previously. Note the within-page links on the Guitar page.
In GoLive, open the Link_Practice site.
Open the guitar.html page.
Make sure the Layout tab is selected.
Create a within-page link from the Guitar page's "Acoustic" text (within the Table of Contents at the top) to the h2 "Acoustic" heading lower on the page. Use the name "acoustic" for the name anchor.
Create a within-page link from the Guitar page's "Electric" text (within the Table of Contents at the top) to the h2 "Electric" heading lower on the page. Use the name "electric" for the name anchor.
Create a within-web link from the Guitar page's "Return to Instruments page" text to the instruments.html page.
View the code for the hyperlinks and the name anchors in the Source Editor.
Test the hyperlinks by displaying the page in a browser and clicking on them. Because this is a very short web page, you may have to make your browser window quite a bit smaller in order to see the within-page links work.

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).