Chapter 5
Making Connections with Links
In This Chapter
Understanding hyperlinks
Building the anchor tag
Recognizing absolute and relative links
Building internal links
Creating lists of links
The basic concept of the hyperlink is common today, but it was a major breakthrough back in the day. The idea is still pretty phenomenal, if you think about it: When you click a certain piece of text (or a designated image, for that matter), your browser is instantly transported somewhere else. The new destination might be on the same computer as the initial page, or it could be literally anywhere in the world.
Any page is theoretically a threshold to any other page, and all information has the ability to be linked. This is still a profound idea. In this chapter, you discover how to add links to your pages.
Making Your Text Hyper
The hyperlink is truly a wonderful thing. Believe it or not, there was a time when you had to manually type in the address of the web page you wanted to go to. Not so anymore. Figure 5-1 illustrates a page that describes some of my favorite websites.
In Figure 5-1, the underlined words are hyperlinks. Clicking a hyperlink takes you to the indicated website. Although this is undoubtedly familiar to you as a web user, a few details are necessary to make this mechanism work:
- Something must be linkable. Some text or other element must provide a trigger for the linking behavior.
- Things that are links should look like links. This is actually easy to do when you write plain HTML because all links have a standard (if ugly) appearance. Links are usually underlined blue text. When you can create color schemes, you may no longer want links to look like the default appearance, but they should still be recognizable as links.
Figure 5-1: You can click the links to visit the other sites.
- The browser needs to know where to go. When the user clicks the link, the browser is sent to some address somewhere on the Internet. Sometimes that address is visible on the page, but it doesn't need to be.
- It should be possible to integrate links into text. In this example, each link is part of a sentence. It should be possible to make some things act like links without necessarily standing on their own (like heading tags do).
- The link's appearance sometimes changes. Links sometimes begin as blue underlined text, but after a link has been visited, the link is shown in purple, instead. After you know CSS, you can change this behavior.
Of course, if your web page mentions some other website, you should provide a link to that other website.
Introducing the anchor tag
The key to hypertext is an oddly named tag called the anchor tag. This tag is encased in an <a></a> set of tags and contains all the information needed to manage links between pages.
The code for the basicLinks.html page is shown here:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>basicLinks.html</title>
</head>
<body>
<h1>Some of my favorite sites</h1>
<h2>Wikipedia</h2>
<p>
One of my favorite websites is called
<a href = "http://www.wikipedia.org">wikipedia.</a>
This terrific site allows ordinary users to enter
encyclopedia definitions. Over time, the entries
can be as reliable as a commercial encyclopedia,
and a lot more complete.
</p>
<h2>Dummies</h2>
<p>
You can find out a lot about upcoming and current
Dummies books at <a href = "http://www.dummies.com">
www.dummies.com</a>. You might even find this
book mentioned there.
</p>
<h2>PopURLS</h2>
<p>
If you want
to know what's happening on the Internet today,
check out <a href = "http://popurls.com">
popurls.com</a>. This site aggregates a bunch of
social networking sites.
</p>
</body>
</html>
As you can see, the anchor tag is embedded into paragraphs. The text generally flows around an anchor, and you can see the anchor code is embedded inside the paragraphs.
Comparing block-level and inline elements
All the tags described so far in this book have been block-level tags. Block-level tags typically begin and end with carriage returns. For example, three <h1> tags occupy three lines. Each <p></p> set has implied space above and below it. Most HTML tags are block-level.
Some tags are meant to be embedded inside block-level tags and don't interrupt the flow of the text. The anchor tag is one such tag. Anchors never stand on their own in the HTML body. This type of tag is an inline tag. They're meant to be embedded inside block-level tags, such as list items, paragraphs, and headings.
Analyzing an anchor
The first link shows all the main parts of an anchor in a pretty straightforward way:
<a href = "http://www.wikipedia.org">wikipedia.</a>
- The anchor tag itself: The anchor tag is simply the <a></a> pair. You don't type the entire word anchor, just the a.
- The hypertext reference ( href) attribute: Almost all anchors contain this attribute. It's very rare to write <a without href. The href attribute indicates a web address will follow.
- A web address in quotes: The address that the browser will follow is encased in quotes. See the next section in this chapter for more information on web addresses. In this example, http://www.wikipedia.org is the address.
- The text that appears as a link: The user will typically expect to click specially formatted text. Any text that appears between the <a href> part and the </a> part is visible on the page and formatted as a link. In this example, the word wikipedia is the linked text.
- The </a> marker: This marker indicates that the text link is finished.
Introducing URLs
The special link addresses are a very important part of the web. You probably already type web addresses into the address bar of your browser (http://www.google.com), but you may not be completely aware of how they work. Web addresses are technically URLs (Uniform Resource Locators), and they have a very specific format.
Sometimes, you'll see the term URI (Uniform Resource Identifier) instead of URL. URI is technically a more correct name for web addresses, but the term URL has caught on. The two terms are close enough to be interchangeable.
A URL usually contains the following parts:
- Protocol: A web protocol is a standardized agreement on how communication occurs. The web primarily uses HTTP (hypertext transfer protocol), but occasionally, you encounter others. Most addresses begin with http:// because this is the standard on the web. Protocols usually end with a colon and two slashes (://).
- Host name: It's traditional to name your primary web server www. There's no requirement for this, but it's common enough that users expect to type www right after the http:// stuff. Regardless, the text right after http:// (and up to the first period) is the name of the actual computer you're linking to.
- Domain name: The last two or three characters indicate a particular type of web server. These letters can indicate useful information about the type of organization that houses the page. Three-letter domains usually indicate the type of organization, and two-letter domains indicate a country. Sometimes, you'll even see a combination of the two.
- Subdomain: Everything between the host name (usually www) and the domain name (often .com) is the subdomain. This is used so that large organizations can have multiple servers on the same domain. For example, my department web page is http://www.cs.iupui.edu. www is the name of the primary server, and this is the computer science department at IUPUI (Indiana University–Purdue University Indianapolis), which is an educational organization.
- Page name: Sometimes, an address specifies a particular document on the web. This page name follows the address and usually ends with .html. Sometimes, the page name includes subdirectories and username information, as well. For example, my web development course is in the N241 directory of my (aharris) space at IUPUI, so the page's full address is http://www.cs.iupui.edu/~aharris/n241/index.html.
- Username: Some web servers are set up with multiple users. Sometimes, an address will indicate a specific user's account with a tilde (~) character. My address has ~aharris in it to indicate the page is found in my (aharris) account on the machine.
The page name is sometimes optional. Many servers have a special name set up as the default page, which appears if no other name is specified. This name is usually index.html but sometimes home.htm. On my server, index.html is the default name, so I usually just point to www.cs.iupui.edu/~aharris/n241, and the index page appears.
|
Domain |
Explanation |
|
.org |
Non-profit institution |
|
.com |
Commercial enterprise |
|
.edu |
Educational institution |
|
.gov |
Governing body |
|
.ca |
Canada |
|
.uk |
United Kingdom |
|
.tv |
Tuvali |
Making Lists of Links
Many web pages turn out to be lists of links. Because lists and links go so well together, it's good to look at an example. Figure 5-2 illustrates a list of links to books written by a certain (cough) devilishly handsome author.
This example has no new code to figure out, but the page shows some interesting components:
- The list: An ordinary unordered list.
- Links: Each list item contains a link. The link has a reference (which you can't see immediately) and linkable text (which is marked like an ordinary link).
- Descriptive text: After each link is some ordinary text that describes the link. Writing some text to accompany the actual link is very common.
Figure 5-2: Putting links in a list is common.
This code shows the way the page is organized:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>listLinks.html</title>
</head>
<body>
<h1>Some nice programming books</h1>
<ul>
<li><a href = "http://www.aharrisbooks.net/haio">
HTML / CSS / JavaScript ALL in One for Dummies</a>
A complete resource to web development</li>
<li><a href = "http://www.aharrisbooks.net/jad">
JavaScript / AJAX for Dummies</a>
Using JavaScript, AJAX, and jQuery</li>
<li><a href="http://www.aharrisbooks.net/pythonGame">
Game Programming - the L Line</a>
Game development in Python</li>
<li><a href="http://www.aharrisbooks.net/h5g">
HTML5 Game Development for Dummies</a>
Building web and mobile games in HTML5</li>
</ul>
</body>
</html>
The indentation is interesting here. Each list item contains an anchor and some descriptive text. To keep the code organized, web developers tend to place the anchor inside the list item. The address sometimes goes on a new line if it's long, with the anchor text on a new line and the description on succeeding lines. I normally put the <li> tag at the end of the last line, so the beginning <li> tags look like the bullets of an unordered list. This makes it easier to find your place when editing a list later.
Working with Absolute and Relative References
There's more than one kind of address. So far, you've seen only absolute references, used for links to outside pages. Another kind of reference — a relative reference — links multiple pages inside your own website.
Understanding absolute references
The type of link used in basicLinks.html is an absolute reference. Absolute references always begin with the protocol name (usually http://). An absolute reference is the complete address to a web page, just as you'd use in the browser's address bar. Absolute references are used to refer to a site somewhere else on the Internet. Even if your website moves (say, from your desktop machine to a web server somewhere on the Internet), all the absolute references will work fine because they don't rely on the current page's position for any information.
Introducing relative references
Relative references are used when your website includes more than one page. You might choose to have several pages and a link mechanism for moving among them. Figure 5-3 shows a page with several links on it.
Figure 5-3: These little piggies sure get around . . .
The page isn't so interesting on its own, but it isn't meant to stand alone. When you click one of the links, you go to a brand-new page. Figure 5-4 shows what happens when you click the market link.
Figure 5-4: The market page lets you move back.
The market page is pretty simple, but it also contains a link back to the initial page. Most websites aren't single pages at all, but an interconnected web of pages. The relative reference is very useful when you have a set of pages with interlacing links.
The code for pigs.html shows how relative references work:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>pigs.html</title>
</head>
<body>
<h1>Destinations of Porcine Mammals</h1>
<ul>
<li>This little pig went to
<a href = "market.html">market</a></li>
<li>This little pig stayed
<a href = "home.html">home</a>.</li>
<li>This little pig had
<a href = "roastBeef.html">roast beef</a></li>
<li>This little pig had
<a href = "none.html">none</a>.</li>
<li>This little pig went
<a href = "wee.html">'wee wee wee'</a>
all the way home.</li>
</ul>
</body>
</html>
Most of the code is completely familiar. The only thing surprising is what's not there. Take a closer look at one of the links:
<a href = "market.html">home</a>.</li>
There's no protocol (the http:// part) and no address at all, just a filename. This is a relative reference. Relative references work by assuming the address of the current page. When the user clicks market.html, the browser sees no protocol, so it assumes that market.html is in the same directory on the same server as pigs.html.
Relative references work like directions. For example, if you're in my lab and ask where the water fountain is, I'd say, “Go out into the hallway, turn left, and turn left again at the end of the next hallway.” Those directions get you to the water fountain if you start in the right place. If you're somewhere else and you follow the same directions, you don't really know where you'll end up.
Relative references work well when you have a bunch of interconnected web pages. If you create a lot of pages about the same topic and put them in the same directory, you can use relative references between the pages. If you decide to move your pages to another server, all the links still work correctly.
In Book VIII, you discover how to set up a permanent web server. It's often most convenient to create and modify your pages on the local machine and then ship them to the web server for the world to see. If you use relative references, it's easy to move a group of pages together and know the links will still work.
If you're referring to a page on somebody else's site, you have to use an absolute reference. If you're linking to another page on your site, you typically use a relative reference.