What really distinguishes the Web from other mediums is the way in which a web page can contain links (or hyperlinks) that you can click on to be taken from one page to another page. The link can be a word, phrase, or image. When you link to another page in your own web site, the link is known as an internal link. When you link to a different site, it is known as an external link. In this chapter you will learn how to create both types of link. You will also see how you can link to a specific point within a page.
While you will learn the basics of linking from one Web page to another fairly quickly, it is also helpful to learn some other concepts, such as how to structure your site well by storing different files into separate folders or directories. Once you understand directory structure, you can link between pages of your own site using shorter links called relative URLs.
A link is specified using the <a> element. Anything between the opening <a> tag and the closing </a> tag becomes part of the link that users can click in a browser.
As long as index.html is in the same folder , when you click the words “home page,” the index.html page will be loaded into the same window, replacing the curren page. As you can see from Figure 2-1, the content of the <a> element forms the link.
This is how the links for the download code for this chapter work. Remember that you can click the View menu in your browser and then select the View Source or Page Source option at any time to see what is going on in an XHTML page. Why not try it on the download code now?
Many web designers also use images inside the <a> element, which is something you will see in the next chapter. When you use an image, you should make sure that the image gives a clear indication of where the link will take you. You can also use the title attribute on a link; the value of the title attribute should be a description of what the link will take you to, which will be displayed in a tooltip when you hover over the link. This can be especially helpful if you do use an image for a link.
Figure 2-2 shows the title attribute, which gives further information about the link to the user, when the mouse is held over the link.
Why not visit the<a href=”http://www.wrox.com/”> Wrox Web site </a>?
As you can see in Figure 2-3, these spaces in the link will be underlined.
Why not visit the <a href=”http://www.wrox.com/”>Wrox Web site</a>?
Of course, you should still have spaces between words inside the <a> element; it’s just best if they are not inside the beginning or end of the link.
There is one drawback to putting your e-mail address on a web page: some less scrupulous inhabitants of the Web use little programs to automatically search web sites for e-mail addresses. After they have found e-mail addresses on web sites, they will start sending spam to those addresses.
❑ Use an e-mail form that visitors fill out instead, because automated programs cannot use contact forms to collect e-mail addresses. The drawback is that an e-mail form requires a script to run on the web server (written in a language such as ASP.NET or PHP).
Since these pages are all in the same folder, you only need to specify the file name; you do not need a full URL.
This time the value of the href attribute is the web address you would type into your browser in order to find a map of Newquay in Google Maps.
This time the value of the href attribute begins with mailto: and this is followed by the e-mail address.
7. Save this file as contact.html in the same folder as the sample application for this chapter. Then open it up and take a look at it in your browser. You should end up with something that looks like Figure 2-4.
You have now seen how to create basic types of links, and you are ready to delve into the more in-depth topics. But first you need to read through a few pages that explain more about how you should organize the files in your web site into folders, and also understand the anatomy of a URL (the address that identifies pages and other resources on your web site).
A directory is simply another name for a folder on a web site; in the same way that your hard drive contains different folders, a web site can be said to contain directories. Usually you will find that a web site contains several directories, and that each directory contains different parts of a web site. For example, a big site with several subsections will have a separate directory for each section of that site, and also different directories for different types of files (for example, images may live in one directory and style sheets in another).
In the same way that you probably organize the files on your hard drive into separate folders, it is important to organize the files on yourweb site into directories so that you can find what you are looking for more easily and keep control of all the files. As you can imagine, if all the files used in a web site resided in the same directory, that directory would quickly get very large and complicated.
Figure 2-5 shows an example directory structure for a news site, with separate folders for each section. Note also how the Music section has its own folders for subsections about Features, MP3s, and Reviews. In addition, the main folder has separate folders for different types of files used in the site: images, scripts, and style sheets.
When you start to build any web site you should create a good directory structure that can withstand growth; it’s surprising how a small web site can quickly grow and contain many more files than you initially imagined.
❑ The root directory (or root folder) is the main directory that holds the whole of you web site; in this case, it is called exampleNewsSite.com.
❑ A subdirectory is a directory that is within another directory. Here, Film is a subdirectory of Entertainment.
❑ A parent directory is a directory that contains another directory. Here, Entertainment is the parent directory of Arts, Film, Music, and TV.
A URL or Uniform Resource Locator specifies where you can find a resource on the web; you are probably most used to thinking of them as web addresses. As you move around the Web, you will see the URL of each web page in the address bar of your browser.
If you look at the example URL in Figure 2-6, there are three key parts to the URL: the scheme, the host address, and the filepath.
The scheme identifies the way a file is transmitted. Most web pages use something called the Hypertext Transfer Protocol (HTTP) to pass information to you, which is why most web pages start with http://, although you might have noticed other prefixes such as https:// when doing banking online (which is a more secure form of http) or ftp:// when downloading large files.
The host address is usually the domain name for the site, e.g., wrox.com. Often you will see www before the domain name, although it is not actually part of the domain name itself. The host address can also be a number called an IP address.
All computers connected to the Internet can be found using an IP address. An IP address is a set of up to 12 digits separated by a period (full stop) symbol. When you enter a domain name into a browser, behind the scenes the name gets converted into the IP address for the computer(s) that stores the web site. This is done by consulting a domain name server (DNS), which keeps a directory of domain names and the corresponding IP addresses.
The filepath will usually correspond to the directory structure of the web site, so in this case the BeginningXHTML.html page would be found in a directory called examples. In fact it is not just web pages that have their own URLs; every file on the Web, including each image, has its own URL. So the filename could be an image rather than an XHTML page.
❑ Look for a default file and return that. For web sites written in XHTML, the default file is usually index.html; if no filepath is specified, the server will look for a file called index.html in the root folder, or if a directory is specified it will look for an index.html file in that directory.
❑ Offer a list of files in that directory.
❑ Show a message saying that the page cannot be found or that you cannot browse the files in a folder.
When linking to pages on your own web site, you do not need to use all of three parts of the URL — you can just use the filepath and filename, as you will see in the next section.
As you can see, absolute URLs can quickly get quite long, and every page of a web site can contain many links. When linking to a page on your own site, however, you can use a shorthand form: relative URLs.
You might be interested to know that your web browser still requests the full URL, not the shortened relative URL, but it is the browser that is actually doing the work of turning the relative URLs into full absolute URLs. Another benefit to using relative URLs within your site is that you can develop the site on your desktop or laptop without having bought a domain name. You can also change your domain name or copy a subsection of one site over to a new domain name without having to change all of the links, because each link is relative to other pages within the same site.
Relative URLs work only on links within the same web site; you cannot use them to link to pages on other domain names.
The subsections that follow provide a summary of the different types of relative URLs you can use.
Because the file lives in the same folder, you do not need to specify anything else.
Each time you repeat the ../ notation, you go up another directory.
The forward slash at the start indicates the root directory, and then the path from there is specified.
Apart from the href attribute, the only other attribute a <base> element can carry is the id attribute.
You have already seen examples of using the <a> element to create links. For the rest of the chapter we’ll look more closely at the <a> element, and you’ll see how it can be used to link to a specific part of a page. As with all journeys, links have a starting point known as the source, and a finishing point known as the destination; in XHTML both points are called anchors. Each link that you see on a page that you can click is a source anchor, created using the <a> element. You can also use the <a> element to create markers in parts of your pages that allow you to link directly to that part of the page. These markers are called destination anchors.
The source anchor is what most people think of when talking about links on the Web — whether the link contains text or an image. It is something you can click expecting, to be taken somewhere else. As you have already seen, any text contained between the opening <a> tag and closing </a> tag forms part of the link that a user can click on. The URL the user should be taken to is specified as the value of the href attribute.
Why not visit the <a href=”http://www.wrox.com/”>Wrox Web site</a> to find out about some of our other books?
You can see more films in the <a href=”Entertainment/Film/index.html”>film section</a>.
By default, the link looks something like the one shown in Figure 2-7, underlined and in blue text. You need to specify a destination anchor only if you want to link to a specific part of a page, as described in the next section.
If you have a long web page, you might want to link to a specific part of that page in order to save the user from having to scroll up and down the page to find the relevant part. The destination anchor allows the page author to mark specific points in a page that a source anchor can point to.
You create a destination anchor using the <a> element again, but when it acts as a destination anchor rather than using an href attribute, you use the id attribute.
If you are looking at the source code of some older web pages, you may see a name attribute used as well, or even instead of the id attribute. You may remember that the name and id attributes were two of the universal attributes that most elements can carry. The id attribute is now the preferred way to create a destination anchor, but it was only introduced in version 4 of HTML, and the name attribute was used to perform the same function in previous versions.By way of example, imagine that you have a long page with a main heading and several subheadings. The whole page does not fit on the screen at once, forcing the user to scroll, so you want to add links at the top of the page that take readers directly to each of the section headings on that page.
With destination anchors in place, it’s now possible to add source anchors to link to these sections. To link to a particular section, the value of the href attribute in the source anchor should be the same as the value of the id attribute on the corresponding destination element, preceded by a pound or hash sign (#).
The value of a name or id attribute should be unique within the page, and source anchors should use the same combination of uppercase and lowercase characters as used in the destination anchors.
The accesskey attribute creates a keyboard shortcut that can be used to activate a link. For example, if you gave the accesskey attribute a value of t, when the user presses the T key along with either the Alt or Ctrl key (depending on the operating system), the link gets activated. In some browsers, when a link is activated the browser immediately follows the link. In some other browsers, the link is just highlighted, and the user has to press the Enter (or Return) key for the link to be followed.
Note that the key is case-insensitive. You will see more about the accesskey attribute (and some examples).
This is particularly useful when linking to foreign language sites written in character encodings that some users might not be able to understand (or might not even be able to view — for example, not all American computers have the characters installed that are required in order to view Japanese text).
The coords attribute is designed for use on a source anchor when it contains an image. It allows you to create something known as an image map, which is where different parts of the same image link to different places. The value of the coords attribute will be a set of x and y coordinates that indicates which part of the image should follow the link.
For more information, please read the <a href=”#glossary” rel=”glossary”>glossary</a>.
See the table that follows for possible values of the rel attribute.
The rev attribute provides the same role as the rel attribute but is used on the destination anchor to describe the relation between the destination and the source. It is currently not supported by major browsers.
If you want to create an image map, the shape attribute can be used to indicate the shape of an area that becomes a clickable hotspot. The shape attribute is covered in detail later, where you learn how to create image maps.
To understand the tabindex attribute, you need to know what it means for an element to gain focus. Any element that a user can interact with can gain focus. If the user clicks the Tab key on his or her keyboard when a page has loaded, the browser moves focus between the parts of the page that the user can interact with. The parts of the page that can gain focus include links and some parts of forms (such as the boxes that allow you to enter text). When a link receives focus, and the user presses Enter on the keyboard, the link is activated. You can see focus working on the Google web site; if you repeatedly press the Tab key, you should see focus pass between links on the page. After it has passed across each link in turn, it goes onto the box where you enter search terms, across the site’s buttons, and usually ends up back where you typed in the URL. Then it cycles around the same elements again as you keep pressing Tab.
The tabindex attribute allows you to specify the order in which, when the Tab key is pressed, the links (or form controls) obtain focus. So, when the user clicks the Tab key, you may want the focus to land on the key items on the page that the user might want to interact with (skipping some of the less-used features). The value of the tabindex attribute is a number between 0 and 32767. A link whose tabindex attribute has a value of 1 receives focus before a link with a tabindex value of 20 (and if a value of 0 is used, the links appear in the order in which they appear in the document).
By default, when you use the <a> element to create a link, the document you are linking to will open in the same browser window. If you want the link to open in a new browser window, you can use the target attribute with a value of _blank.
As mentioned at the start of the chapter, it is good to use a title attribute on any links that contain images. It can also help provide additional information to visitors in the form of a visual text tooltip in most browsers or an auditory clue in voice browsers for the visually impaired. Figure 2-2 near the beginning of this chapter showed you what the title attribute looks like in Firefox when a user hovers over the link.
Theoretically, the browser could use the information in the type attribute to either display it differently or indicate to the user what the format of the destination is, although none use it at present.
2. After the heading, replace the first paragraph with the links for the navigation, just like the ones you created in the last Try It Out for the contact.html page. The only difference this time is that the CONTACT option will be a link, but the MENU option will not be a link.
6. You can just add in the items on the menu in a bulleted list. Note how the vegetarian items have a link down to the description of vegetarian dishes. Don’t forget to add the “Back to top” links under each list.
7. Save your example as menu.html and take a look at it in your browser. You should end up with something that looks like Figure 2-10.
You can also specify some other parts of the message, such as the subject, body, and e -mail addresses that should be CC’d or BCC’d on the message.To control other properties of the e-mail, you place a question mark after the e-mail address and then use name/value pairs to specify the additional properties. The name and the value are separated by an equal sign.
The table that follows includes a full list of properties you can add.
Adds a subject line to the e-mail; you can add this to encourage the user to use a subject line that makes it easier to recognize where the mail has come from.
Adds a message into the body of the e-mail, although you should be aware that users would be able to alter this message.
Sends a carbon copy of the mail to the CC’d address; the value must be a valid e-mail address. If you want to provide multiple addresses you simply repeat the property, separating it from the previous one with an ampersand.
Secretly sends a carbon copy of the mail to the BCC’d address without any recipient seeing any other recipients; the value must be a valid e-mail address. If you want to provide multiple addresses, you simply repeat the property, separating it from the previous one with an ampersand.
If you want to add a space between any of the words in the subject line, you should add %20 between the words instead of the space. If you want to create a line break in the body of the message, you should add %0D%0A (where 0 is a zero, not a capital O).
While an e-mail link can create an e-mail with all of these properties set, it does not stop the user from editing the values in their e-mail program.It is common practice to add only the e-mail address in e-mail links. If you want to add subject lines or message bodies you may decide to use an e-mail form instead (although these do require a script on the server that can process the form and send the e-mail).
In this chapter you learned about links. Links enable users to jump between pages and even between parts of an individual page (so that they don’t have to scroll to find the place they need). You have seen that you can use the <a> element to create source anchors, which are what most people think of when you mention links on the Web. The content of the source anchor is what users can click — and this should usually be an informative, concise description of what the user will see when they click on the link (rather than text such as “click here”), or it can be an image. You can also use the <a> element to create destination anchors. Destination anchors are a little like index points or special markers, because they allow you to create links that take visitors directly to that part of the page. Destination anchors should always have some content. Along the way, you learned more about URLs, in particular the difference between an absolute URL, as with those that appear in the address bar of your browser, and relative URLs, which describe where a resource is in relation to the document containing it. Learning the different ways in which relative URLs can be used will also be helpful as you head to the next chapter and learn about adding images and other objects into your documents.