Lesson 1: Linking to External Internet Sites

Overview

The World Wide Web was built on the principal of hypertext. Prior to hypertext, documents were all standalone. They might refer to each other in text, but there was no direct connection between one document and another. With hypertext, readers were suddenly able to quickly jump from one document to another, which revolutionized the way we access information.

Links to web pages refer to the address, or URL (Uniform Resource Locator), of the web page. URL's consist of various parts. For example, consider the following URL, which is the home page for this course curriculum:

http://www.washington.edu/accessit/webd2/student/index.html

This URL consists of four parts, separated by forward slash (/):

http:// - This is the Internet protocol, and tells the browser how to connect with the server hosting the URL. Most documents on the web begin with http://, but they might also begin with https://, ftp://, telnet://, or others.
www.washington.edu - Domain name where the file is located.
/accessit/webd2/student/ - folder or directory where the file is located (in this example, the file index.html is stored in a subdirectory three levels deep)
index.html - the filename

The file name index.html could optionally be omitted from the above example. When the server discovers that student is a directory rather than a file name, it would check the student directory for one of the standard home page file names, and in this case would find index.html.

Linking to a URL

Links are inserted into a document using the <a> tag which stands for "anchor". This element by itself does nothing. Consider this HTML:

   <a>This is a link to nothing</a>

At a minimum, the <a> elements requires an href attribute, which defines the destination of the link.

When you link to external websites, you use an absolute path, as in the following example:

   <a href ="http://www.somedomain.com/somedirectory/somefile.html">This is the text that users click on</a>

Note that the destination path (contained within quotes) gives the full address to the target page, starting with "http://". If you were to copy all the characters between the quotation marks and insert them into the address bar of a browser, the browser would open the website. This type of URL is referred to as an absolute URL. In the next lesson, you will learn about its opposite, the relative URL.

Learner Outcomes

At the completion of this exercise:

you will be able to create a link to another web page on the Internet.

Activities

Return to index.html in your web portfolio.
Locate the name of your school in the second div element.
Change the name of your school into a link to your school's home page. Use the above example as a model.

Resources/Online Documents

All done?

After you have saved the changes to index.html, open the file in your browser. Refresh your browser and test the link. Show your instructor your results before starting Lesson 2.