New Perspectives on Creating Web Pages with HTML

1
New Perspectives on Creating Web Pages with HTML

• Adding Hypertext Links to a Web Page

2
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.

3
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.

4
Folder Tree
5
Absolute Pathname
6
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.

7
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.

8
Relative Pathnames
9
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.htmlgt
  Course Informationlt/agt.

10
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.

11
Interpreting Parts of a Uniform Resource Locator
(URL)
12
Link to Another Page on the Web
13
College Board AP Page
14
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.

15
Displaying Linked Documents in a New Window

• Use the target attribute in the href tag i.e.
• lta hrefurl targetnew_windowgt
  Hypertextlt/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

16
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

17
External Hyperlinks

• 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_blankgt Hypertextlt/agt.

18
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.