Scribd
Upload
8 views

Basic Links

Uploaded by

Antony mutahi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Basic Links

Uploaded by

Antony mutahi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Basic Links

You can specify a link 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.

For example, here is the <body> of the page ch03_eg01.html. 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 as ch03_eg01.html, when you click the words “home
page,” the index.html page loads into the same window, replacing
the current ch03_eg01.html page. As you can see from Figure 3-1,
the content of the <a> element forms the link.

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 takes you to an external site, in this case the Wrox website (ch03_eg02.html)

<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 want

to visit the Wrox website; the full web address is often referred to as a Uniform Resource Locator

(URL). Since it includes the full web address, it’s referred to as an Absolute URL.

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 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 reading

the entire page. Therefore, people are more likely to keep exploring your website 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 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 takes 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 takes you to, which displays in a tooltip when you hover over
the link. This can be helpful if you do use an image for a link.

Following is a link to the Google homepage (ch03_eg03.html):

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

is a very popular search engine.</p>

Figure 3-2 shows the title attribute, which gives further information about the link to the user, when
the cursor is held over the link.

You should be aware that everything inside the <a> element renders
as a link, including white space around the text or images.
Therefore, 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 (ch03_eg04.html):

Why not visit the<a href="http://www.wrox.com/"> Wrox Web


site </a>?

Linking to E‑mail Addresses


You’ve probably seen a web page with an e-mail address that, when clicked, opens a new e-mail in

your e-mail program, with the To field pre-populated with the e-mail address.

To create a link to an e-mail address, you need to use the following syntax with the <a> element

(ch03_eg05.html):

<a href="mailto:[email protected]">[email protected]</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:[email protected]">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 websites for e-mail addresses.
After they find e-mail addresses on websites, they start sending spam to those addresses.

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

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

2. Write your e-mail address into the page using JavaScript.

You might also like