Lesson 04: Adding Links

In this lesson you will learn about each of the units within this course.
This lesson should take you approximately 60 minutes.

Introduction

The best thing about the World Wide Web is how everything is connected through hypertext or hyperlinks. In this lesson you will learn how to link to other peoples web sites, web pages within your site, links within a web page, to an email address and how to control what window those links open in. To use the anchor element or hypertext link, simply suround your text or image with an opening <a> tag and then closed with a closing </a> tag and use the href attribute to provide the URL. For example, to link to Google you would use <a href="http://www.google.com"> Google </a>. Hypertext can be typically identified by an underline and a color other than the rest of the text. A hyper linked image is sometimes surrounded by a blue border or changes when your pointer moves over it. You can tell an image or text is hyper linked when the mouse pointer changes to a hand when it moves over the link.

top

The href Attibute

The href attribute tells your browser which page to display. In addition to linking to web pages, you can also link to images, audio and video files.

Absolute URLs: When you want to link to someone elses web site you will need to use an absolute URL. It will always start with the protocol (http://). I suggest you copy this from a browser and then paste them into your code to ensure they are accurate.
Example: href="http://www.google.com"

Relative URLs: When you want to link to pages or media within your web site you will use relative URLs. That way they will work regardless of whether the files are on you computer at home, on the web server (FTP), or your network drive at school because their relationship to each other is "relative". The tricky part about relative linking is going up or down in your directory (folder) structure. When you want to go into a folder you will add the folder name and a forward slash before the file name. When you want to get out of a folder and link to a file you will use ../ before the file name.
Example #1: href="forms/form.html" <<This example would go into a folder to open a file called "form.html"
Example #2: href="../contacts.html" <<This example would go out of the current folder the file is in and open a file called "contacts.html"

Linking Tips:

There is a graphic example of this in the coding examples folder in the Unit 03 "Files" folder.
This techniques is the same for linking to images when you are putting them on your web pages.
For more information check out this article from the Web Developers Virtual Library "Absolute and Relative Links"
Saving a file as "index.htm" makes the file the default file in a folder. In other words, when you type in a URL that references a folder, but does not specify a particular file, then the index web page will be displayed.

Activity: Start this activity by making another folder called "forms" and moving your "form.html" file into this folder. Then use an absolute link for the "Mount Si Home Page" link on all the pages. Use a relative link for all the rest. Test all four pages on both your local web site and once you copy them to your FTP folder. Make sure "form.html" is in the same "forms" folder on the FTP.

When you get this done, open the "Links" document in the "Files" folder and use the URLs to create hyperlinks to each of the businesses we have designed web sites for.

Absolute and Relative Links Tutorial

top

Linking to a Specific Point on a Page

You can link to a specific point on a web page. As you have seen from navigating around on the pages in the course, I have created both links down to certain sections and multiple links back to the top of the page. This is a two step process.

Step 1 - Name the Destination: The first thing you will do is to use the id attribute to identify the target element in the document. For example, on our web page if you wanted to create a link back to the top you would add an id attribute to the heading 1 tag of the page title.
Example: <h1 id="top">School Adz Contacts </h1>

Step 2 - Link to the Destination: The second thing you will do is to create a link to the top using the a element. In the href attribute you will use the number symbol (#) and then the destination name.
Example: <a href="#top"> Click Here to Go to the Top of the Page </a>

Activity: Create give the page titles on your businesses.html and forms.html pages a unique id and then link to them from the bottom of these two web pages.

Linking to a Specific Point on a Page Tutorial

top

Email Links

You can create a link that will automatically launch a mail program and preaddress the message to your email address. Just include mailto: before the email address within the href value. However this only works when the viewer has their browser configured correctly. Therefore you should always include the email address as part of the hypertext.
Example: <a href="mailto:webadmin@svsd410.org"> dockeryj@svsd410.org </a>

Tips & Tricks
Here is a tutorial that will show you how to code in the subject line or send the email to additional people. More

Activity: Create a hyperlink to your instructors email on the "contacts.html" page. To test this, ask if you can use your instructors computer or test it at home from a computer with the browser configured to use a mail program.

Email Tutorial

top

Targetting Windows

You can add an additional attribute to the anchor (a) tag that allows you to target a specific window. This is important when you design a site using frames. I have used the target="_blank" attribute in this course to open my tutorials in a new window. Don't use this technique on our School Adz site though.

Where to open the target URL.

_blank - the target URL will open in a new window
_self - the target URL will open in the same frame as it was clicked
_parent - the target URL will open in the parent frameset
_top - the target URL will open in the full body of the window

Target Tutorial

top

Activity Summary

Start this activity by making another folder called "forms" and moving your "form.html" file into this folder. Then use an absolute link for the "Mount Si Home Page" link on all the pages. Use a relative link for all the rest. Test all four pages on both your local web site and once you copy them to your FTP folder. Make sure "form.html" is in the same "forms" folder on the FTP. When you get this done, open the "Links" document in the "Files" folder and use the URLs to create hyperlinks to each of the businesses we have designed web sites for.
Create give the page titles on your businesses.html and forms.html pages a unique id and then link to them from the bottom of these two web pages.
Create a hyperlink to your instructors email on the "contacts.html" page. To test this, ask if you can use your instructors computer or test it at home from a computer with the browser configured to use a mail program.

Turn It In: When you feel like the pages are just the way you want, upload them to your server folder. Test it to make sure that they are working properly. Then email your project manager the URL of the home page for evaluation. *Make sure the URL starts with "http".

Grading Rubric

Tag Point Possible

Absolute Links 2

Relative Links 9

Page Link 2

Email Link 2

Total
15

top