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.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 index.html - 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. <a>This is a link to nothing</a> 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> <a href="http://www.somedomain.com/somedirectory/somefile.html">This is the text that users click on</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 your navigation menu (Home, Accessibility, Usability, Graphics, Javascript and Tools). Turn these list items into links, as in the following example: <a href=“accessibilty.html">Accessibility</a> Note that the destination path ("accessibilty.html") 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.html and accessibilty.html both exist in the same folder, there is no need to spell out an entire URL. If you had saved accessibilty.htm in a subfolder (for example, the "accessibilty" 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: accessibilty/accessibilty.html.

<a href=“accessibilty.html">Accessibility</a> 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=“accessibilty.html">Accessibility</a> The name of the file The text that appears on the web page

Your turn… Add the link to the Hancock Homepage to your index.html file. Add links to Home, Accessibility, Usability, Graphics, Javascript and Tools in your navigation menu. Example: <li> <a href="accessibility.html">Accessibility</a> </li> Open your index.htm file and check your links.

You web page should look like this: Links need to work!