Creating hyperlinks
Hyperlinks are essential for creating a usable web site. They're also one of the things that make the Internet so unique. Instead of a book that has a clear beginning, middle, and end, a web page is a single point in a vast network linking many of the world's computers together. Following the links from page to page and from site to site is what gave rise to the idea of "surfing" the Internet. Links are a great way of pulling a site visitor deeper into your web site, or for pointing them to useful resources elsewhere on the web.
In Plone, there are two main types of links: Internal Links and External Links. An Internal Link is a hyperlink to a page on the same web site. An External Link is a hyperlink to a page on a different web site.
Internal Links
If you haven't done so already, go ahead and create at least two web pages of your own. Navigate to one of the pages and click on the Edit tab on the green toolbar.
Now you should be looking at the Body Text of your web page. Highlight some text that you want to create a link for and click on the Internal Link icon shown in the previous figure.
The following Insert Link window will appear now:
Note that you can navigate around in this window to find the page that you want to link to. If you don't see any pages at first, try clicking on Home in the leftmost column. This should bring up a listing of the contents for your web site, as shown in the preceding screenshot. You can also use the Search box in the upper right corner of the Insert Link window to locate the page that you want to link to.
Then, select the page to create a link to. In the following screenshot, we've chosen to create a link to the Alpine Ecosystems page:
For the time being, ignore the Link to anchor menu and just proceed with the default selection. Click on the Ok button in the lower-right corner of the Insert Link window to finish creating your Internal Link.
You're all done! Save the page that you are working on to try out the link. Your linked text should appear slightly blue and underlined, to differentiate it from normal unlinked text.
External Links
As stated above, External Links are for linking to a web site other than the one you are working on. The process for creating an External Link is similar to that of creating an Internal Link.
Start by editing a page and highlight some text that you want to create an External Link from. Click on the following External Link icon:
Now you need to type in the complete web address of the target page. Plone provides the first part of the link, the http:// (which must be included) to make things easier. Thus if you want to link to the Plone web site, you would type www.plone.org just after the http:// part.
Alternatively, you can copy and paste web addresses from your browser into the link field. This makes things easier if the link you want to use is long and difficult to remember.
Use the Preview button on the rightmost side of the dialog box to make sure that the web site address that you've provided is valid, and that the correct page exists at that address.
Click Ok in the lower-right corner of the External Link window to finish creating the link. Now save the page you were working on, to complete the operation.
Notice that the text of the External Link has a small icon next to it, as shown in the following figure:
Linking to a specific part of a page: anchors
Anchors are a way of linking directly to a specified part of a page. For example, if you have a rather long page with many sections, you may want to create an anchor for each section and a link to that anchor so that your site visitor doesn't have to scroll up and down the page manually looking for the correct section. The anchor icon is shown in the following figure:
Consider the following page ─a list of many chemical elements:
Because this list is broken up into subsections (Noble gases, Alkali Metals, and so on) it is possible to create a link that goes directly to each section, by creating a anchor.
We'll start by defining where the anchor is going to be. The best thing to do in this case is to create one anchor for each Subheading on the page.
To begin, click on the Anchor icon. In the Anchors window, note the two tabs: Link to anchor and Manage Anchors. Click on Manage Anchors to define the anchors for this page.
Note the list of paragraph styles on the left (Heading, Subheading, and so on). You must select a paragraph style to display a list of the items that you can create anchors for. Because in the example page there is only the Subheading style in use, you won't see anything appear in the list on the right until you click on Subheading. But when you do, you will see all of the text elements on the page that have the Subheading styling applied to them.
Starting with Noble Gases, we'll select each checkbox for all of the subheadings in the list and click on Ok to finish. You've now created an anchor for each of the subheadings on your page. Should you want to delete an anchor, simply return to the Anchors window and deselect the checkbox next to the anchor that you wish to remove.
This is only the first step in creating some working anchors. You won't see much change at this point.
Now that the list of anchors is defined, we can create an Internal Link that points directly to one of these anchors. Let's go ahead and create a link from another page to the The Elements page.
We'll start by creating an Internal Link. Highlight the text that you want to create the link for and then click on the Internal Link icon.
Next, navigate to the page that you want to link to (in this case, The Elements). Click on the Link to anchor drop-down menu on the right to get the list of anchors that you've defined already.
From here, choose the appropriate anchor. In keeping with our example, we'll choose Halogens.
The link has now been created. When the page is saved, you can follow the link you've just made and it should take you not only to the correct page, but also to the exact position you identified as the anchor.
Let's say you want to link to an anchor that is on the same page as the link is. Using the Anchor icon, you can easily create such a link. Let's consider the Elements page from the above examples. Here's some sample text that makes a reference to the list of transition metals. The words Transition Metals are highlighted because we want to link to the anchor of the same name.
Next, click on the Anchor icon. You should see the Anchors window. Leave the Link to anchor tab selected and click on the appropriate style from the menu on the left (remember, we've been working with subheadings). This will bring up a list of defined anchors that you can link to, as shown in the following screenshot:
Select the anchor that you wish to link to (Transition Metals in this case) and click on Ok.