HTML

1
HTML

• Tutorial 2 Developing a Basic Web Site

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
• a different document
• a different Web page
• 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 each page is linked to the
next to previous page, in an ordered chain of
pages
Link to previous page
In this structure you can jump only from one page
to the next or previous page
Link to next page
8
Augmented Linear Structure include a link in
each page that jumps directly back to the first
page, while keeping the links to move to the next
and previous pages
second link jumps back to beginning
first link jumps to previous page
third link jumps to next page
third page has three links
9
Hierarchical Structure It 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
10
Combination of Linear and Hierarchical Structures
information about the play
information about the acts
overall structure is hierarchical
each level is linear
the scenes
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 () 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.
• 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. For example,
  /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.

15
Folder Tree
Five HTML files 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.
16
(No Transcript)
17
Relative Pathnames

• A relative path specifies the location for a file
  in relation to the folder containing the current
  Web document.
• 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
Assuming the current folder is case1
The relative path to rock.htm is
rock.htm
The relative path to parks.htm is
extra/parks.htm
../index.htm
The relative path to index.htm is
../tutorial/chem.htm
The relative path to chem.htm is
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
  taglta hrefurl targetnew_windowgtHypertextlt/
  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 servers.
• FTP servers can store files that Internet users
  can download, or transfer, to their computers
• URLs for FTP servers follow the same format as
  those for Web pages, except ftp is usedlta
  hrefftp//ftp.microsoft.comgt Microsoft 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_addresslta hrefmailtocy.lin_at_eku.e
  dugt CY Linlt/agt