Lesson 4 - Links

Linking to the World

The following links will be used to demonstrate how anchored links work on a page. Please read on to understand the concept.

What would the web be without links to other sites? Links create the multiple-option, interlinking, 'hypertext' world that makes the web so unique. The a(nchor) tags make all this possible.

To make a link to the outside world, surround your link text with a(nchor) tags. Here's the formula:

1. Start and end with the basic anchor tag: <a>........ </a>.
2. Within the opening tag, add the href attribute - hyperlink reference. The value, enclosed in quotes, will tell the URL that you want to connect to <a href="http://www.gavilan.edu/library">....... </a>.
3. In the space between the opening and closing tags, type in the words that will appear as the hyperlink. For e.g., <a href="http://www.gavilan.edu/library">Gavilan College Library </a>

Notice that there are no spaces from the attribute href to the final closing bracket of the closing </a>. Also, the URL is in quotes, just like all your other attributes.

This will create a link on your page that says: Gavilan College Library. It will usually be printed in blue (unless the link color has been changed), it will be underlined, and when someone clicks their mouse button on it, the browser will go to http://www.gavilan.edu/library/, the Gavilan library homepage.

Back to Top

Lists

You can add links to list items just by surrounding the list items with the <a> tags:

Back to Top

Targets

Here's another attribute that you can add to your <a> tags.

target="_blank"

This will cause the browser to open the new page in a new window. The original page stays available in the first window. Here's the full code:

<a href="http://www.comic-news.com/" target="_blank">Comic News</a>

There is one space between the closing quote of the URL and the word target.

And here's what it would look like on your page. Click on the link "Comic News" and watch how it opens another window. Close the window (by clicking on the box in the upper right corner), and you'll be back to this page.

Back to Top

Email

Besides connecting to other websites, links can also connect to an email form, with someone's email address already in the TO: line. The code looks the same, except that:

• the http:// part is changed to mailto: (no forward slashes) and
• the URL is replaced with an email address.

Here's how it looks:

<a href="mailto:anyone@somecompany.com">Email Me</a>

If that line is put into the document, the words Email Me would be highlighted and linked to an email form with that address in the line. Please use a valid email address. The email address used above is invalid and is used only as an example.

Back to Top

Anchors

Links can also connect to specific places in a website. On very long pages, this helps your reader move around the page more easily.

Did you notice the links at the top of this lesson? If you click on them, they'll take you to different parts of the lesson. You may have also noticed a few places where you can click to get back to the top of this lesson. Those are called anchors.

• Anchors connect to places within the page,
• links connect to places outside the page,
• but, they both use the <a> tag.

There are 2 steps to making an anchor:

• one to make the link to the specific place, and
• one to mark that place in the document.

To make a link that directs the browser to look for a spot within the document, you'll mark it with a number symbol:   

<a href="#top">Back to Top</a>

To mark the spot in the document, use the <a name="top"> tag. Close the </a> tag right after you open it, since there are no words you want linked. This is just to mark the spot that you want the link to go to:    

<a name="top"></a>

Back to Top

Assignment

Try this. You can copy and paste this code into your firstpage.html document:

1. After the last heading (Works in 7 years!), add a short unordered list, and add <a> tags to turn those names into links.
   
   

   <p>Read what our customers have to say!</p> <ul> <li><a href="#janice">Janice Joplin </a></li> <li><a href="#elvis">Elvis Presley </a></li> <li><a href="#frank">Frank Sinatra</a></li> </ul>

2. Those are the 3 links to your customer testimonials. Now, you can add the places that your links will go to. Copy and paste the following bunch of text below the unordered list, but before the closing </body> and </html> tags.
   
   

   <a name="janice"></a> <p>Janice Joplin</p> <p>In exum fuer des wagol, demp, unz framiz miqqel woddweIn exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe.</p> <p>In exum fuer des wagol, demp, unz framiz miqqel woddweIn exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe.</p>

3. Notice the first line, <a name="janice"></a>. That's your anchor for the Janice Joplin link. Next, create two more sections, one for Elvis and one for Frank.
   
   

   <a name="elvis"></a> <p>Elvis Presley</p> <p>In exum fuer des wagol, demp, unz framiz miqqel woddweIn exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe.</p> <p>In exum fuer des wagol, demp, unz framiz miqqel woddweIn exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe.</p> <a name="frank"></a> <p>Frank Sinatra</p> <p>In exum fuer des wagol, demp, unz framiz miqqel woddweIn exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe.</p> <p>In exum fuer des wagol, demp, unz framiz miqqel woddweIn exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe In exum fuer des wagol, demp, unz framiz miqqel woddwe.</p>

4. At the top of the page, add another anchor designating this as the top. Right under the opening <body> tag, add this line: <a name="top"></a>.
5. Now, you can add links throughout your document wherever you want to link back to the top. Just copy the line below and paste it into the document wherever and however many times you'd like.<a href="#top">Back to Top</a>
6. Save your page as links.html and try looking at it through your browser. It should look something like this page. You should have each customer's name linked, and when you click on the name, you are taken directly to the blather of that customer. And somewhere, you should have links back to the top of the page.
7. When you load this page into the browser, you can also look at the source code for the page.

   Directions for viewing source code for any page in your browser window:

   1. First, load the page into the browser.
   2. Click on View (from the top horizontal tool bar) and highlight Page Source or Source Code or View Source or just plain Source (depending on what browser you use). This will show you all the code of the page. Does it look like yours?
8. If you've never looked at the source code of pages before, here are better instructions.

Back to Top

Relative vs. Absolute Links

When you link to pages outside your own website, you will always use the absolute link, giving the full URL or web address of the outside page. But, when you link to another page on your own site, you have a choice.

The link to the customer page (above) is simply given as customers.html. The code is written like this:

<a href="customers.html">this page</a>

This is obviously not a complete URL and wouldn't work from anywhere except from within this course website. The browser reads it as "find a document called customer.html that is in the same directory at the same domain name as the place you are in now". And, it's called a relative link. Think of customers.html as the first cousin of the folder called csis6.

You could have linked to the full URL, like this:

<a href="http://www.gavilan.cc.ca.us/library/csis6/customers.html>this page</a>

This would be called an absolute link because it gives the absolute, full, and entire URL. The browser reads it as "find a computer system called www.gavilan.edu, and on that system, find a folder called library, and in that folder, find another folder called csis6, and in that second folder, find a document called customer.html".

But, the browser is already on the right system and the right folder, since it is coming from the folder, csis6. Relative links are obviously faster, since the browser isn't taken all the way back out to look for the computer system. It can simply look for the document right in the directory, on the system where it already is.

This is the end of Lesson 4. Please go to the next lesson.

Back to Top