HTML Chapter 2 2018-12-19T12:29:15+00:00

HTML  Chapter 2

Topics:- (Basic Links, Understanding Directories and Directory Structures, Understanding URLs, Creating Links with the <a> Element, Advanced E-mail Links)

Links and Navigation

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.

In this chapter, you learn the following:

❑ .  How to link between pages of your site

   How to link to other sites

    How to structure the folders on your web site

    How to link to specific parts of a page in your site

Basic Links

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.

Linking to Other Web Pages

To link to another web page, the opening <a> tag must carry an attribute called href; the value of the href attribute is the name of the file you are linking to. As an example, here is the <body> of the . This page contains a link to a second page called index.html:

<body>

<p>Return to the <a href=”index.html”>home page</a>

</p> </body>

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.

Figure 2-1

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?

If you want to link to a different site, you can use the <a> element again, but this time you specify the full web address for the page you want to link to rather than just the filename. Here is an example of a link that will take you to an external site, in this case the Wrox web site:

<body>

<p>Why not visit the <a href=”http://www.wrox.com/”>Wrox web site</a>?</p>

</body>

As you can see, the value of the href attribute is what you would type into a browser if you wanted to visit the Wrox web site; the full web address is often referred to as a URL (Uniform Resource Locator). When creating any link, you should try to make it concise and use words that let people know what they will see if they click on the link. One reason for this is that links are usually presented in a different color than the surrounding text, which makes them stick out more than the text around them. As a result, many people scan pages for links when they want to go to the next page without really reading the entire page. Therefore, people are more likely to keep exploring your web site if the links are easy to read and have a better explanation than just “click here.”

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.

The following is a link to the Google homepage:

<p><a href=”http://www.Google.com/” title=”Search the Web with Google”>Google</a>

is a very popular search engine.</p>

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.

Figure 2-2

You should be aware that everything inside the <a> element gets rendered as a link, including white space around the text or images. Therefore it is best to avoid spaces directly after an opening <a> tag or before the closing </a> tag. For example, consider the following link with spaces just inside the <a> element :

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.

Figure 2-3

It is far better to use white space outside of these tags, like so:

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.

Linking to E-mail Addresses

You’ve probably seen a link that shows an e-mail address, which when clicked on opens a new e-mail in your e-mail program, ready for you to send an e-mail to that address. To create a link to an e-mail address, you need to use the following syntax with the <a> element:

<a href=”mailto:name@example.com”>name@example.com</a>

Here, the value of the href attribute starts with the keyword mailto, followed by a colon, and then the e-mail address you want the mail sent to. As with any other link, the content of the <a> element is the visible part of the link shown in the browser, so this would also work:

<a href=”mailto:name@example.com”>E-mail us</a>

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.

There are alternatives to creating a link to an e-mail address:

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).

Write your e-mail address into the page using JavaScript. The idea behind this technique is that the programs that scour the Web for e-mail addresses cannot read the JavaScript version of an address.

Now it’s your turn to create a page that has three types of link: an internal link, an external link, and an e-mail link. We will be developing the Example Café site:

1. Check that the page looks like this:

<?xml version=”1.0” encoding=”iso-8859-1”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” > <html xmlns=”http://www.w3.org/1999/xhtml”> <head>

<title>Example Cafe – community cafe in Newquay, Cornwal, UK</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> </head>

<body>

<h1>EXAMPLE CAFE</h1>

<p>Welcome to Example Cafe. We will be developing this site throughout .</p>

<h2>Contact</h2>

<p><address>12 Sea View, Newquay, Cornwall, UK</address></p>

</body>

</html>

2. We are going to start by adding navigation between the pages of the site. To start, replace the first paragraph (after the <h1> element) with links to the three other pages of the site. Each <a> element should contain the name of the page it links to, as shown here. We will group these links inside a <div> element:

<h1>EXAMPLE CAFE</h1>

<div>

<a href=””>HOME</a>

<a href=””>MENU</a>

<a href=””>RECIPES</a>

</div>

3. Add the name of the contact page, but do not make it a link (because this is the page that the user is already on, they do not need a link to it):

<h1>EXAMPLE CAFE</h1>

<div>

<a href=””>HOME</a>

<a href=””>MENU</a>

<a href=””>RECIPES</a>

CONTACT

</div>

4. Add the filename of each of these pages as the value of the href attribute:

<h1>EXAMPLE CAFE</h1>

<div>

<a href=”index.html”>HOME</a>

<a href=”menu.html”>MENU</a>

<a href=”recipes.html”>RECIPES</a>

CONTACT

</div>

Since these pages are all in the same folder, you only need to specify the file name; you do not need a full URL.

5. Under the address, add a link to the following page on Google Maps, like so: info@ examplecafe.com:

<p><a href=”http://maps.google.com/maps?q=newquay” >Find us on Google Maps</a></p>

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.

6. Under the address, add a link to send an e-mail to info@examplecafe.com:

<p><a href=”mailto:info@examplecafe.com”>Mail Example Cafe</a></p>

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.

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).

Understanding Directories and Director y Structures

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.

Figure 2-5

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.

As you learn about linking, it’s helpful to learn some of the terms that are used in describing directory structures and the relationships between directories, so look back at Figure 2-5 to see an example directory structure:

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.

Understanding URLs

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.

     

Figure 2-6

Let’s look at each of these in turn.

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 always begins with a forward slash character, and may consist of one or more directory names (remember, a directory is just another name for a folder on the web server). The filepath may end with a filename at the end. Here, BeginningXHTML.html is the filename:

/examples/BeginningXHTML.html

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.

If a filename is not given, the web server will usually do one of three things (depending upon how it is configured):

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.

Absolute and Relative URLs

An absolute URL contains everything you need to uniquely identify a particular file on the Internet. This is what you would type into the address bar of your browser in order to find a page. For example, to get the page about film on the fictional news site you met earlier in the chapter, you might type in the following URL (you may find it helpful to refer back to Figure 2-5 to see how the filepath corresponds to the directory structure):

http://www.exampleNewsSite.com/Entertainment/Film/index.html

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.

A relative URL indicates where the resource is in relation to the current page. The examples earlier in this chapter, which link to another page in the same directory, are examples of relative URLs. You can also use relative URLs to specify files in different directories. For example, imagine you are looking at the homepage for the entertainment section of the following fictional news site:

http://www.exampleNewsSite.com/Entertainment/index.html

You want to add a link to the index pages for each of the subsections: Film, TV, Arts, and Music. Rather than including the full URL for each page, you can use a relative URL. For example:

Film/index.html

TV/index.html

Arts/index.html

Music/index.html

As I am sure you agree, this is a lot quicker than having to write out the following:

http://www.exampleNewsSite.com/Entertainment/Film/index.html http://www.exampleNewsSite.com/Entertainment/TV/index.html http://www.exampleNewsSite.com/Entertainment/Arts/index.html http://www.exampleNewsSite.com/Entertainment/Music/index.html

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.

Same Directory

When you want to link to, or include, a resource from the same directory, you can just use the name of that file. For example, to link from the homepage (index.html) to the “contact us” page (contactUs. html), you can use the following:

contactUs.html

Because the file lives in the same folder, you do not need to specify anything else.

Subdirectory

The Film, TV, Arts, and Music directories from Figure 2-5 were all subdirectories of the Entertainment directory. If you are writing a page in the Entertainment directory, you can create a link to the index page of the subdirectories like so:

Film/index.html

TV/index.html

Arts/index.html

Music/index.html

You must include the name of the subdirectory, followed by a forward slash character, and the name of the page you want to link to. For each additional subdirectory, just add the name of the directory followed by a forward slash character. So, if you are creating a link from a page in the root folder of the site (such as the site’s main homepage), use a relative URL such as the following to reach the same pages:

Entertainment/Film/index.html

Entertainment/TV/index.html

Entertainment/Arts/index.html

Entertainment/Music/index.html

Parent Directory

If you want to create a link from one directory to its parent directory (the directory that it is in), you use the ../ notation of two periods or dots followed by a forward slash character. For example, from a page in the Music directory to a page in the Entertainment directory, your relative URL looks like this:

../index.html

If you want to link from the Music directory to the root directory, you repeat the notation:

../../index.html

Each time you repeat the ../ notation, you go up another directory.

From the Root

It is also possible to indicate a file relative to the root folder of the site. So, if you wanted to link to the contactUs.html page from any page within the site, you use its path preceded by a forward slash. For example, if the Contact Us page is in the root folder, you just need to enter:

/contactUs.html

Alternatively, you can link to the Music section’s index page from anywhere within that site using the following:

/Entertainment/Music/index.html

The forward slash at the start indicates the root directory, and then the path from there is specified.

The <base> Element

As I mentioned earlier, when a browser comes across a relative URL, it actually transforms the relative URL into a full absolute URL. The <base> element allows you to specify a base URL for a page that all relative URLs will be added to when the browser comes across a relative URL. You specify the base URL as the value of the href attribute on the <base> element. For example, you might indicate a base URL for http://www.exampleSite2.com/ as follows:

<base href=”http://www.exampleSite2.com/” />

In this case, a relative URL like this one:

Entertainment/Arts/index.html

ends up with the browser requesting this page:

http://www.exampleSite2.com/Entertainment/Arts/index.html

Apart from the href attribute, the only other attribute a <base> element can carry is the id attribute.

Creating Links with the <a> Element

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.

Creating a Source Anchor with the href Attribute

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.

For example, when you click the words Wrox Web site (which you can see are inside the <a> element) the link takes you to http://www.wrox.com/:

Why not visit the <a href=”http://www.wrox.com/”>Wrox Web site</a> to find out about some of our other books?

If the following link were placed on the homepage of the fictional news site we have been looking at, it would take you to the main Film page of that site:

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.

Figure 2-7

Creating a Destination Anchor Using the name and id Attributes (Linking to a Specific Part of a Page)

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.

Common examples of linking to a specific part of a page that you might have seen used on web pages include:

      “Back to top” links at the bottom of a long page

A list of contents on a page that takes the user to the relevant section of that page Links within text to footnotes or definitions

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.

Figure 2-8

Figure 2-9

Before you can create links to each section of the page (using the source anchors), you have to add the destination anchors. Here you can see that inside the <h2> subheading elements, there is an <a> element with the id attribute whose value identifies each section (remember that a page should not contain two id attributes that have the same value):

<h1>Linking and Navigation</h1>

<h2><a id=”URL”>URLs</a></h2>

<h2><a id=”SourceAnchors”>Source Anchors </a></h2>

<h2><a id=”DestinationAnchors”>Destination Anchors</a></h2> <h2><a id=”Examples”>Examples</a></h2>

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 (#).

<p>This page covers the following topics:

<ul>

<li><a href=”#URL”>URLs</a></li>

<li><a href=”#SourceAnchors”>Source Anchors </a></li>

<li><a href=”#DestinationAnchors”>Destination Anchors</a></li> <li><a href=”#Examples”>Examples</a></li>

</ul>

</p>

If you take a look at Figure 2-8, you can see how the page has several links to the sections of the page; and in Figure 2-9, you can see what happens when the user clicks on the second link and is taken directly to that section of the page.  It is important for destination anchors to always have some content; otherwise some browsers will not find the destination. For example, you should not use the following to indicate the top of the page:

<a id=”top”></a>

Rather, you should put this around the main heading or some other content, like so:

<h1><a id=”top”>Linking and Navigation</a></h1>

If someone wanted to link to a specific part of this web page from a different web site (such as the section on Source Anchors), he or she would add the full URL for the page, followed by the pound or hash sign and then the value of the id attribute, as follows:

http://www.example.com/HTML/links.html#SourceAnchors

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 <a> Element’s Other Attributes

The <a> element can carry several attributes that we have not yet met. While these attributes are not used as much as those covered up to this point, for completeness it is worth quickly looking at them. The <a> element supports all of the universal attributes, the UI event attributes, and the following attributes:

accesskey charset coords href hreflang rel rev shape style tabindex target type

The accesskey Attribute

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.

The accesskey attribute should be specified on the source anchor. For example, if you want to follow a link to the top of the page when the user presses the T key on his keyboard (with either Alt or Ctrl) you use the accesskey attribute like so:

<a id=”bottom” accesskey=”t”>Back to top</a>

Note that the key is case-insensitive. You will see more about the accesskey attribute (and some examples).

The charset Attribute

The charset attribute indicates the character encoding of the document the URL points to. It is typically used only when you are linking to a page in a different language that uses a different character set.The value must be a string that identifies the character set, such as UTF-8 or ISO-8859-1. (This example links to a document in the Japanese character set:

<a href=”http://www.amazon.co.jp/” charset=”ISO-2022-JP”>Amazon Japan</a>

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

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.

The hreflang Attribute

The hreflang attribute indicates which language the page you are linking to is written in. It ’s designed to be used when linking to a page in a different language from the current document, and the value of this attribute is a two-letter language code. For example:

<a href=”http://www.amazon.co.jp/” hreflang=”JA”>Amazon Japan</a>

The rel Attribute

The rel attribute is used on the source anchor to indicate the relationship between the current document and the resource specified by the href attribute. The major browsers do not currently make any use of this attribute, although it is possible that automated applications could be written to use this

information. For example, the following link uses the rel attribute to indicate that its destination is a glossary of terms used in the document:

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.

Value

Description

toc (or contents)

A document that is a table of contents for the current document

index

A document that is an index for the current document

glossary

A document containing a glossary of terms that relate to the current document

copyright

A document containing the copyright statement for the current document

start

A document that is the first in a series of ordered documents, of which this is one document

next

A document that is the next in a series of ordered documents, of which this is one document

prev (or previous)

A document that is the previous in a series of ordered documents, of which this is one document

help

A document that helps users understand or navigate the page and/or site

chapter

A document that acts as a chapter within a collection of documents

section

A document that acts as a section in a collection of documents

subsection

A document that acts as a subsection in a collection of documents

appendix

A document that acts as an appendix in a collection of documents

The rev 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.

The shape Attribute

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.

The tabindex Attribute

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).

The target Attribute

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.

<a href=”Page2.html” target=”_blank”>Page 2</a>

The title Attribute

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.

The type Attribute

The type attribute specifies the MIME type of the link. MIME types can be compared to file extensions, but are more universally accepted across different operating systems. For example, an HTML page would have the MIME type text/html, whereas a JPEG image would have the MIME type img/jpeg. The following is an example of the type attribute being used to indicate that the document the link points to is an HTML document:

<a href=”index.html” type=”text/html”>Index</a>

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.

Now it’s your turn to try making a long page with links between different parts of the page. In this example, you are going to create the menu for our Example Café. So open the menu.html page from the sample application in your text editor or authoring tool:

1. The page should look like this when you begin:

<?xml version=”1.0” ?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

<head>

<title>Example Cafe – community cafe in Newquay, Cornwal, UK</title>

</head>

<body>

<h1>EXAMPLE CAFE</h1>

<p>Welcome to Example cafe. We will be developing this site throughout .</p>

<h2>Menu</h2>

<p>The menu will go here.</p>

</body>

</html>

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.

<a href=”index.html”>HOME</a>

MENU

<a href=”recipes.html”>RECIPES</a>

<a href=”opening.html”>OPENING</a>

<a href=”contact.html”>CONTACT</a>

3. Below this, add the headings for the different courses on offer. Each heading should have a destina-tion anchor so that you can link directly to that part of the page, and the value of the id attribute will describe that section. The main heading also needs a destination anchor because it will be used for “Back to top” links. Remember that destination anchors require some content, so these anchors contain the text for the heading:

<h1><a id=”top”>Example Cafe Menu</a></h1>

<h2><a id=”starters”>Starters</a></h2>

<h2><a id=”mains”>Main Courses</a></h2>

<h2><a id=”desserts”>Desserts</a></h2>

4. Under the heading for the Example Café Menu, add links to the destination anchors for each course. These should go inside a <p> element:

<p><a href=”#”>Starters</a> | <a href=”#mains”>Main Courses</a> | <a href=”#desserts”>Desserts</a></p>

5. At the bottom of the page, you will have a note that states any items marked with a letter v are suit-able for vegetarians. Links next to vegetarian items will point to this note, so it needs to have a des-tination anchor:

<p><a id=”vege”>Items marked with a (v) are suitable for vegetarians.</a></p>

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.

<h2><a id=”starters”>Starters</a></h2>

<ul>

<li>Chestnut and Mushroom Goujons (<a href=”#vege”>v</a>)</li> <li>Goat Cheese Salad (<a href=”#vege”>v</a>)</li> <li>Honey Soy Chicken Kebabs</li> <li>Seafood Salad</li>

</ul>

<p><small><a href=”#top”>Back to top</a></small></p>

<h2><a id=”mains”>Main courses</a> </h2>

<ul>

<li>Spinach and Ricotta Roulade (<a href=”#vege”>v</a>)</li> <li>Beef Tournados with Mustard and Dill Sauce</li> <li>Roast Chicken Salad</li>

<li>Icelandic Cod with Parsley Sauce</li>

<li>Mushroom Wellington (<a href=”#vege”>v</a>)</li> </ul>

<p><small><a href=”#top”>Back to top</a></small></p>

<h2><a id=”desserts”>Desserts</a></h2 >

<ul>

<li>Lemon Sorbet (<a href=”#vege”>v</a>)</li>

<li>Chocolate Mud Pie (<a href=”#vege”>v</a>)</li>

<li>Pecan Pie (<a href=”#vege”>v</a>)</li>

<li>Selection of Fine Cheeses from Around the World</li>

</ul>

<p><small><a href=”#top”>Back to top</a></small></p>

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.

Figure 2-10

Advanced E- mail Links

As you saw at the beginning of the chapter, you can make a link open up the user’s default e-mail editor, and automatically address an e-mail to you — or any other e-mail address you give. This is done like so:

<a href=”mailto:info@example.org”>info@example.org</a>

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.

For example, to make the subject line of the e-mail Inquiry, you would add the subject property name followed by an equals sign, and then the term Inquiry, like so:

<a href=”mailto:info@example.org?subject=Inquiry”>

You can specify more than one property by separating the name/value pairs with an ampersand. Here you can see that the subject and a CC address have been added in:

<a href=”mailto:info@example.org?subject=XHTML&cc=sales@example.org”></a>

The table that follows includes a full list of properties you can add.

Property

Purpose

subject

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.

body

Adds a message into the body of the e-mail, although you should be aware that users would be able to alter this message.

cc

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.

bcc

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).

Summary

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.

This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.