Developing a Basic Web Site

1
Developing a Basic Web Site

• Tutorial 2
• Web Site Structures Links

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

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
The browser may only show a portion of the page.
The user must scroll down to see the rest of the
page.
5
(No Transcript)
6
(No Transcript)
7
Linear Structures
8
Augmented Linear Structure
9
Hierarchical Structure
10
Combination of Linear and Hierarchical Structures
11
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.

12
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 or ids and link to an anchor you create
  within the 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

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

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

15
Folder Tree
16
Absolute Pathname
17
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.

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

19
Relative Pathnames
20
Linking to Documents on the Internet

• A URL 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.

21
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,
  you would use the target attribute in the href
  tag i.e. lta hrefurl targetnew_windowgtHyperte
  xtlt/agt
• new_window is a name assigned to the new browser
  window

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

23
Linking to E-mail

• 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.
• lta hrefmailtodavis_at_mwu.edugtdavis_at_mwu.edult/agt