1. New Perspectives on Creating Web Pages with HTML
Tutorial 2: Adding Hypertext Links to a Web Page
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

2. Tutorial Objectives
Create hypertext links between elements within a Web page
Create hypertext links between Web pages
Review basic Web page structures
Create hypertext links to Web pages on the Internet
Distinguish between and be able to use absolute and relative pathnames
Create hypertext links to various Internet resources, including FTP servers and newsgroups
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

3. Creating a Hypertext Document
Hypertext documents contain hypertext links, items that you can select to view another topic or document, often called the destination of the link.
These links can point to:
another section
the same document
to a different document
to a different Web page
to a variety of other Web objects
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

4. Opening A Web Page
This figure shows that a browser may only show a portion of the web page. The user must scroll down to see the rest of the web page.
vertical scroll bar
horizontal scroll bar can also be shown
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

5. Adding Hypertext Links
You can place hypertext links at the top of a web page to make it easier for the user to navigate to a particular section of the document instead of scrolling.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

6. Creating Anchors
The <a> tag creates an anchor, text that is specially marked so that you can link to it from other points in a document.
Text that is anchored is the destination of a link; it is not the text you click on.
Each anchor has its own anchor name, using the “name” attribute i.e. <a name=“cc”>Classes</a>.
An anchor doesn’t have to be text. You can mark an inline image as an anchor.
Adding an anchor does not change your document’s appearance in any way. It merely creates locations in your Web page that become destinations of links.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

7. How an Anchor Works
anchor
hypertext links
When the user clicks one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link)
within the web page.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

8. Creating Links
To create a link to an anchor, use the same <a> tag you used to create the anchor.
The <a> tags used to create links are sometimes called link tags.
Use the href attribute, which is short for Hypertext Reference, to indicate the location to jump to.
href can refer to an anchor that you place in the document or to a different Web page or a resource anywhere on the Internet
it is important to note that the href attribute is case sensitive
You link to an anchor using the anchor name preceded by a pound (#) symbol i.e. <a href=“#gra”>Grading</a>.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

9. Creating Links Continued
After you create the anchors that serve as destinations for your links, you need to create the links themselves.
The <a> tag you use to create the anchor and the href attribute to indicate the location to jump to.
You should be careful to make each anchor name unique within a document.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

10. Text Links in the Browser
Text formatted as links
If the headings do not appear as text links, check your code to make sure that you are using the <a> and </a> tags around the appropriate text, the href attribute within the tag, and the quotes and # symbols.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

11. Web Page Structures
Storyboarding your Web pages before you create links helps you determine which structure works best for the type of information you’re presenting.
You want to ensure that readers can navigate easily from page to page without getting lost.
You’ll encounter several Web structures as you navigate the Web.
Examining some of these structures can help you decide how to design your own system of Web pages.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

12. Linear Structures
In this structure you can jump only from one page to the next or previous page
Link to previous page
Link to next page
This figure shows one common Web page structure, the linear structure, in which each page is linked to the next and to previous page, in an ordered chain of pages.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

13. Augmented Linear Structure
This figure shows an augmented linear structure, in which you include a link in each page that jumps directly back to the first page, while keeping the links that allow you to move to the next and previous pages.
first link jumps to previous page
second link jumps back to beginning
third page has three links
third link jumps to next page
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

14. Hierarchical Structure
This figure shows the hierarchical structure, which starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics, and so on.
In a hierarchical structure, users can move easily from general to specific and back, but not from specific to specific.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

15. Hierarchical Structure on AltaVista Web Page
As with the linear structure, including a link to the top of the structure on each page gives users an easy path back to the beginning.
Subject catalogs such as the AltaVista directory of Web pages often use this structure. This figure shows this site, located at
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

16. Combination of Linear and Hierarchical Structures
This figure shows a hierarchical structure in which each level of
pages is related in a linear structure.
information about the play
the scenes
each level is linear
information about the acts
overall structure is hierarchical
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

17. Web Structures Continued
A little foresight can go a long way toward making your Web pages easier to use.
The best time to organize a structure is when you first start creating pages, when those pages are small in number and more easily managed.
If you’re not careful, your structure can become confusing and unmanageable for the user.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

18. Multipage Document with No Coherent Structure
This structure is confusing, and it makes it difficult for readers to grasp the contents of the overall Web site. Moreover, a user who enters this structure at a certain page might not be aware of the presence of the other pages.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

19. Creating Links Among Documents
links to the conttxt.htm document, which contains contact information
links to the linktxt.htm document, which contains links to various Chemistry Web sites.
Unlike creating hypertext links between elements on the same page, this process does not require you to set an anchor in a file to link to it; the filename serves as the anchor or destination point.
the chem.htm document, which is the document containing the links.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

20. Linking to a Document
To create a link to a document, use the same <a> tag with the href attribute i.e. <a href=“contact.htm”>Contact me</a>.
In order for the browser to be able to locate and open contact.htm, it must be in the same folder as the document containing the link.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

21. HTML Code that Links to Other Documents
<a> tags to point to other documents
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

22. Browser Displaying Links to Other Documents
links to the Contact and Links page
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

23. Linking to a Section of a Document
To navigate to a specific location elsewhere in a document, rather than the top, you can set anchors and link to an anchor you create within the document.
for example, to create a link to a section in the Web page home.htm marked with an anchor name of “interests,” you create an anchor in home.htm in the section on Interests, and then enter the following HTML code in the current document:
<a href=“home.htm#interests”> View my interests </a>
the entire text, “View my interests,” is linked to the Interests section in the home.htm file, via the anchor name “interests”
the pound symbol (#) in this tag distinguishes the filename from the anchor name
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

24. Adding Links to Specific Locations in a Page
The pound symbol (#) in these tags (shown in red) distinguishes the filename from the anchor name.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

25. Links in the Chemistry Page that Point to Anchors in the Links Page
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

26. Linking to Documents in Other Folders
Browsers assume that if no folder information is given, the file is in the same folder as the current document.
When referencing a file located in a different folder than the link tag, you must include the location, or path, for the file.
HTML supports two kinds of paths: absolute paths and relative paths.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

27. Absolute Pathnames
An absolute pathname provides a precise location for a file.
With HTML, absolute pathnames begin with a slash (/) and are followed by a sequence of folders beginning with the highest level folder and proceeding to the folder that contains the file.
Each folder is separated by a slash.
After you type the name of the folder or folders that contains the file, type a final slash and then the filename itself i.e. /tutorial.02/case/parks.htm.
HTML also requires you to include the drive letter followed by a vertical bar (|) i.e. /C|/tutorial.02/case/parks.htm.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

28. Folder Tree
This figure shows five HTML files that are located in four different folders.
The top most folder is the tutorial.02 folder. Within the tutorial.02 folder are the tutorial and case1 folders, and within the case1 folder is the extra folder.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

29. This figure shows absolute pathnames for five HTML files.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

30. Relative Pathnames
A relative path specifies the location for a file in relation to the folder containing the current Web document.
As with absolute pathnames, folder names are separated by slashes.
Unlike absolute pathnames, a relative pathname does not begin with a slash.
To reference a file in a folder directly above the current folder in the folder hierarchy, relative pathnames use two periods (..) i.e. ../tutorial/chem.htm.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

31. Relative Pathnames Continued
Relative pathnames make your hypertext links portable.
Unlike absolute pathnames, If you move your files to a different computer or server, the hypertext links will stay intact.
If absolute pathnames are used, each link has to be revised. This can be a very tedious process.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

32. Relative Pathnames
This figure shows the relative pathnames and their interpretations
for HMTL files and how they would be displayed.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

33. Linking to Documents on the Internet
To create a hypertext link to a document on the Internet, you need to know its URL.
A URL, or Uniform Resource Locator, specifies a precise location on the Web for a file.
You can find the URL of a Web page in the Location or Address box of your browser’s document window.
Once you know a document’s URL, you can create a link to it by adding the URL to the <a> tag along with the href attribute in your text file i.e. <a href Information</a>.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

34. Uniform Resource Locator (URL)
Each URL follows the same format.
The first portion of the URL identifies the communication protocol, which is a set of rules that governs how information is exchanged.
Web pages use the communication protocol HTTP, short for Hypertext Transfer Protocol, so all Web page URLs begin with the letters “http”.
Following the communication protocol, there is typically a separator, such as a colon and two slashes (://) i.e.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

35. Interpreting Parts of a Uniform Resource Locator (URL)
This figure interprets a Web page with the URL
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

36. Link to Another Page on the Web
As long as your computer is connected to the Internet, clicking the text within the tag navigates you to the document located at the specified URL.
Links to the College Board AP Internet page
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

37. AP page in a separate browser window
College Board AP Page
Chemistry page remains open in the original browser window
AP page in a separate browser window
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

38. Displaying Linked Documents in a New Window
By default, each Web page you open is displayed in the main browser window, replacing the one you were viewing last.
To force a document to appear in a new window, instead of the main browser window, you would use the target attribute in the href tag i.e. <a href=“url” target=“new_window”>Hypertext</a>
url is the URL of the page, and new_window is a name assigned to the new browser window
the value use for the target attribute is used by the browser to identify the different open windows in the current browser session
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

39. External Hyperlinks
You can set up external hyperlinks to open in the same browser window by using the same value for the target attribute.
if you do, the first hyperlink clicked opens the new window and displays the contents of the external file
as subsequent external hyperlinks are clicked, they replace the contents of the already opened window, and the contents of the main browser window remain unaffected
If you want your external documents to be displayed in their own browser window, you can assign a unique target value for each hyperlink, or you can assign the _blank keyword to the target attribute i.e. <a href=“url” target=_blank>Hypertext</a>.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

40. Linking to File Transfer Protocol (FTP) Servers
You can create links to other Internet resources, such as FTP (File Transfer Protocol) servers.
FTP servers can store files that Internet users can download, or transfer, to their computers
FTP is the communications protocol these file servers use to transfer information
URLs for FTP servers follow the same format as those for Web pages, except that they use the FTP protocol rather than the HTTP protocol i.e. <a href= ftp://ftp.microsoft.com>Microsoft FTP server</a>.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

41. This figure shows what it might look like with Internet Explorer.
Displaying a FTP Site
Different browsers can display the contents of an FTP site in different ways.
This figure shows what it might look like with Internet Explorer.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

42. Linking to Usenet News
Usenet is a collection of discussion forums called newsgroups that let users exchange messages with other users on a wide variety of topics.
The URL for a newsgroup is news:newsgroup.
To access the surfing newsgroup alt.surfing, you place this line in your HTML file i.e. <a href=news:alt.surfing>Go to the surfing newsgroup</a>.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

43. Accessing the alt.surfing Newsgroup
When you click a link to a newsgroup, your computer starts your newsgroup software and accesses the newsgroup.
This figure shows an example of the Outlook Newsreader program.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

44. Linking to
Many Web designers include their addresses on their Web pages, so that users who access the page can send feedback.
You can identify addresses as hypertext links.
when a user clicks the address, the browser starts a mail program and automatically inserts the address into the “To” field of the outgoing message
The URL for an address is mailto: _address.
To create a link to the address the following code would be entered
<a
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

45. window opens when the davis@mwu.edu link is clicked
Mail Message Window
window opens when the link is clicked
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

46. Adding an Link
the address itself is in the code for the mailto: URL
mail message window opens with address already inserted
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2

47. Tutorial 2 Summary Learned how to work with hypertext links.
Learned how to create anchors within a Web page.
Created links to anchors.
Created hyperlinks within a single document and links to other Web pages.
Discussed creating hyperlinks to resources other than Web pages, such as FTP sites, addresses and Gopher servers.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 2