New Perspectives on Creating Web Pages with HTML

1
New Perspectives on Creating Web Pages with HTML

• Tutorial 2 Adding Hypertext Links to a Web Page

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

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

4
Opening A Web Page
5
Adding Hypertext Links
6
Creating Anchors

• The ltagt 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. lta nameccgtClasseslt/agt.
• An anchor doesnt have to be text. You can mark
  an inline image as an anchor.
• Adding an anchor does not change your documents
  appearance in any way. It merely creates
  locations in your Web page that become
  destinations of links.

7
How an Anchor Works
8
Creating Links

• To create a link to an anchor, use the same ltagt
  tag you used to create the anchor.
• The ltagt 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. lta
  hrefgragtGradinglt/agt.

9
Creating Links Continued
10
Text Links in the Browser
11
Web Page Structures

• Storyboarding your Web pages before you create
  links helps you determine which structure works
  best for the type of information youre
  presenting.
• You want to ensure that readers can navigate
  easily from page to page without getting lost.
• Youll 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.

12
Linear Structures
13
Augmented Linear Structure
14
Hierarchical Structure
15
Hierarchical Structure on AltaVista Web Page
16
Combination of Linear and Hierarchical Structures
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 youre not careful, your structure can become
  confusing and unmanageable for the user.

18
Multipage Document with No Coherent Structure
19
Creating Links Among Documents
20
Linking to a Document

• To create a link to a document, use the same ltagt
  tag with the href attribute i.e. lta
  hrefcontact.htmgtContact melt/agt.
• 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.

21
HTML Code that Links to Other Documents
22
Browser Displaying Links to Other Documents
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
• lta hrefhome.htminterestsgt View my interests
  lt/agt
• 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

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.
25
Links in the Chemistry Page thatPoint to Anchors
in the Links Page
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.

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/pa
  rks.htm.
• HTML also requires you to include the drive
  letter followed by a vertical bar () i.e.
  /C/tutorial.02/case/parks.htm.

28
Folder Tree
29
Absolute Pathname
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.

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.

32
Relative Pathnames
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 browsers
  document window.
• Once you know a documents URL, you can create a
  link to it by adding the URL to the ltagt tag along
  with the href attribute in your text file i.e. lta
  href http//www.mwu.edu/course/info.htmlgtCourse
  Informationlt/agt.

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. http//www.mwu.edu.

35
Interpreting Parts of a Uniform Resource Locator
(URL)
36
Link to Another Page on the Web
37
College Board AP Page
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. lta
  hrefurl targetnew_windowgtHypertextlt/agt
• 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

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. lta hrefurl
  target_blankgtHypertextlt/agt.

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. lta
  href ftp//ftp.microsoft.comgtMicrosoft FTP
  serverlt/agt.

41
Displaying a FTP Site
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 newsnewsgroup.
• To access the surfing newsgroup alt.surfing, you
  place this line in your HTML file i.e. lta
  hrefnewsalt.surfinggtGo to the surfing
  newsgrouplt/agt.

43
Accessing the alt.surfing Newsgroup
44
Linking to E-mail

• Many Web designers include their e-mail addresses
  on their Web pages, so that users who access the
  page can send feedback.
• You can identify e-mail addresses as hypertext
  links.
• when a user clicks the e-mail address, the
  browser starts a mail program and automatically
  inserts the e-mail address into the To field of
  the outgoing message
• The URL for an e-mail address is
  mailtoe-mail_address.
• To create a link to the e-mail address
  davis_at_mwu.edu, the following code would be
  entered
• lta hrefmailtodavis_at_mwu.edugtdavis_at_mwu.edult/agt

45
Mail Message Window
46
Adding an Email Link
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, e-mail
  addresses and Gopher servers.