Internal and External Links

Web Design – Section 3-6

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives

The Student will:Understand the parts of a web

address.Be able to create a link to another web

page on the Internet.Be able to create a relative link from

one page to another within your website.

Web Links 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 This revolutionized the way we access

information.

URLs – Uniform Resource Locator

Links to web pages refer to the address, or URL (Uniform Resource Locator), of the web page. URL's consist of various parts.

Consider the URL: http://www.discoverbing.com/tour/index.htm

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.discoverbing.com - Domain name where the file is

located. /tour/ - folder or directory where the file is located index.htm - the filename

Adding an External Link to an HMTL file

External Links are inserted into a document using the <a> tag which stands for "anchor". This tag by itself does nothing. At a minimum, it requires the "href" attribute,

which defines the destination of the link.<a href = "document location">

Then you have the text you want to be the hyperlink and then close the a tag with </a>

Linking to the Hancock Web Page

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

<a href ="http://www.hancockhs.org">Hancock High School</a>

Note that the destination path (contained within quotes) gives the browser complete directions to locate the web page. 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 link is referred to as an absolute address because it is the full address of the web page.

Linking to Pages Within Your Website

The link to Hancock home page is an absolute address (the full address to the school website).

Now you will learn to make links to pages within your own website, using a relative address.

Relative Addresses

A relative address is one that refers only to a portion of the web address, rather than to the full address. For example, assume you are webmaster of the domain

mydomain.com, and want to add a link from http://www.mydomain.com/file1.htm to http://www.mydomain.com/file2.htm.

In file1.htm, you don't need to link to the full address. You can simply link to the file name (file2.htm), since both files are located in the same place.

A relative address is an address that is relative to the location of the linking file.

Using Relative References In your web page you have an unordered list that

contains list items for units 4, 5, an 6. Turn these list items into links, as in the following example:

<a href="unit4.htm">Unit Four: Graphics</a> Note that the destination path ("unit4.htm") gives the

browser directions starting from the current folder. This type of link is called a relative address because the

entire address is relative to the location of the current file. Since index.htm and unit4.htm both exist in the same folder, there is no need to spell out an entire URL.

If you had saved unit4.htm in a subfolder (for example, the "unit4" subfolder, you could still link to this file using a relative address; you would just need to include the subfolder in the address, like this: unit4/unit4.htm.

Summary

Reference Absolute Addresses with the entire URL<a href ="http://www.hancockhs.org">Hancock

High School</a> Reference Relative Addresses from the

location of the current page<a href="unit4.htm">Unit Four: Graphics</a>

Rest of Today

Add the link to the Hancock Homepage to your file.

Add a link to the Unit 4 from your index.htm to the unit4.htm you created previously

Do the same for Unit 5 and Unit 6. Open your index.htm file and check your

links.