Tip:
Highlight text to annotate it
X
Hi, I'm Karen and I'm going to show you how to create links that point to something else on the same page.
I'm going to demonstrate with a typical example: a table of contents.
If you have a long page with multiple sections of content, you need to add a table of contents.
This is actually one of EPA's Web standards.
Here's the page that I intend to edit.
It's got four sections with headings.
I'm going to make a table of contents at the top of the page which links to the different sections of the page.
I'm opening the page in Drupal editor.
The page has four main sections, each with an header.
I'm going to use the text of those headers for the table of contents.
I'm going to paste in the text that I'll use for the table of contents
right before the first header.
Next, I'll turn that text into a bulleted list.
Now I need to link each bullet to the matching header in the page.
First, I need to give the headers a handle, something for the links to point to.
So, I'll select the first header and click the icon that looks like a flag.
If you mouse over it, the tool tip "Anchor" appears.
Next I'll enter the anchor text. [and click "OK"]
Now that the header has an anchor, you will see a little anchor icon to the left of it. The text will also be colored blue like a link,
but it isn't really a link.
Now I will repeat that for the other three headers on the page.
Here are a couple of tips for making good anchor text:
1) Good anchor text should not have any spaces in it.
The reason is because Internet Explorer replaces that space character in a URL with '%20' which may break the URL.
This is not fatal; the user will still go to your page, but they won't go to the desired spot within the page.
You can prevent that by NEVER using spaces in anchor text!
2) Good anchor text should also be clear and easy to spell correctly.
I recommend using only lowercase letters because they reduce the chances of
misspelling if someone types them out.
Now that all the headers are "grabbable", I'll make the table of contents point to them.
I've selected the text of the first bullet.
Now I'll click the icon that looks like a globe of the earth with a chain in front of it. If you mouse over it, the tool tip "Link" appears.
A dialog box opens, and it displays the contents of the first tab, labeled Link Info.
I will choose the appropriate Link Type from the pull down menu.
Here I've chosen "Link to anchor in the text".
That makes sure that it's on the same page.
Now a list appears of all the anchors on the page.
I'll choose the correct anchor from the list and click OK.
That creates a link to the header further down the page.
Now I'll do the same for the remaining links.
Select the link text...
Choose "Link to anchor in the text"
and select the correct link, then click "OK".
Now I'll save my work and preview the page.
I test the link to see if it brings me to the correct part of the page, and indeed it does!
It's a good idea to test all the links once you've finished
just to make sure they really point to the intended destination.
And that's how to make a same-page link.