Linking to Wikipedia

Back in Hour 3 I raved about the usefulness of Google Maps and how handy they can be for sharing location information with people via your web pages. Another site that I have nothing but good things to say about is Wikipedia, which is located at http://www.wikipedia.org/. Wikipedia is a free online encyclopedia, which may not sound all that special. What makes Wikipedia so unique is that anyone can edit it. That's right, you can go visit Wikipedia right now and edit any encyclopedia entry on there. Although you may think that this open-ended aspect of Wikipedia would turn it into an editorial three-ring circus, it has actually worked incredibly well. People who care about certain subjects will monitor those subjects and make sure that contributions are objective and accurate. I'm not saying Wikipedia is perfect, but it's one of the more successful online social "experiments" that has turned into a quite useful information tool.

So what does Wikipedia have to do with a book on HTML and CSS? Well, I think you'll find it useful to occasionally link information on your web pages to Wikipedia so that visitors to your site can learn more. In the hockey player web site you just saw, I included a link to Wikipedia for the player's birthplace, which allows visitors to learn more about the city. Here's the link code from the page:

 <a href="http://en.wikipedia.org/wiki/Nashville%2C_Tennessee">Nashville, TN</a> 

This code reveals another interesting thing about Wikipedia: Its links flow directly from the subject matter. More specifically, links on Wikipedia are created by the subject simply being added to the end of the Wikipedia web page address. In the example, the subject of the link is Nashville, Tennessee. The only trick is changing the comma to %2C, which is a special code used to represent a comma in a web address, as well as replacing spaces with underscore characters (_). This subject is then added to the end of the Wikipedia base URL, http://en.wikipedia.org/wiki/.

By the Way

In case you forgot, URL stands for Uniform Resource Locator, and is just the address of a resource on the Web, as in a web page.

The good news about Wikipedia addresses is that you can copy and paste them directly from a web browser into your web pages. As an example, let's say you wanted to link to the Wikipedia entry for the musician Tom Waits. Based on my brief explanation of how Wikipedia addresses are constructed, you could guess that the address of the page is http://en.wikipedia.org/wiki/Tom_Waits. But you don't have to guess. You could enter Tom Waits as the search text in Wikipedia and it would take you to the page shown in Figure 6.7.

Figure 6.7. Wikipedia serves as an excellent resource for linking to interesting topics from your web pages.

Indeed, the figure reveals that your guess regarding the Tom Waits Wikipedia address is correct. Rather than guess, however, you can just copy the address from the address field of your web browser.

Wikipedia is directly related to this lesson in that you can use the table of contents of a Wikipedia page to construct links to specific parts of the page. For example, if you visit the Tom Waits page (http://en.wikipedia.org/wiki/Tom_Waits) and scroll down a bit, you'll find a table of contents with a list of headings such as "Early Career," "Discography," "Tours," etc. These headings correspond to anchor points on the page, which means you can create links to specific parts of the page by appending one of the table of contents headings onto the page address. Just don't forget to precede the heading with a # character, like this:

http://en.wikipedia.org/wiki/Tom_Waits#Discography

Did you Know?

If a heading contains spaces, be sure to replace those spaces with underscore characters (_) when creating a link to the anchor point.

This link takes you to the Discography section of the Tom Waits page, as shown in Figure 6.8.

Figure 6.8. Most Wikipedia pages include anchor points based on the table of contents of the page.