Transcript Links & Basic Web Site

XP
Developing a Basic Web Site
Tutorial 2:
Web Site Structures & Links
1
XP
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
2
XP
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
3
The browser may
only show a
portion of the
page. The user
must scroll down
to see the rest of
the page.
Place links at the
top of the page
to make it easier
for the user to
navigate to a
particular section.
To link to an
element with an id:
<a href=“#classes”>
Classes
</a>
To add an id name
to an element:
<h2
id=“classes”>
Chemistry Classes
</h2>
Place links at the
top of the page
to make it easier
for the user to
navigate to a
particular section.
To link to an anchor
element:
<a href=“#classes”>
Classes
</a>
To define an
anchor element:
<h2>
<a name=“classes”>
Chemistry Classes</a>
</h2>
XP
Linear Structures
Each page is linked to the next and 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
7
XP
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.
first link jumps to
previous page
third page has three links
second link jumps back to beginning
third link
jumps to next
page
8
XP
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.
In a hierarchical
structure, users can
move easily from
general to specific
and back.
9
Combination of Linear and
Hierarchical Structures
XP
This figure shows a hierarchical structure in which each level of
pages is related in a linear structure.
information about the play
information
about the
acts
each level
is linear
the scenes
10
XP
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.
11
Linking to a Section of a
Document
XP
 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.
<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
12
Linking to Documents
in Other Folders
XP
 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.
13
XP
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.
14
XP
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.
15
XP
Absolute Pathname
This figure shows absolute pathnames for five HTML files.
16
XP
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.
17
XP
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.
18
XP
Relative Pathnames
This figure shows the relative pathnames and their interpretations
for HMTL files and how they would be displayed.
19
Linking to Documents on the
Internet
XP
 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 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=“
http://www.mwu.edu/course/info.html”>
Course Information</a>.
20
Displaying Linked Documents
in a New Window
XP
 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. <a href=“url”
target=“new_window”>Hypertext</a>
 new_window is a name assigned to the new
browser window
21
Linking to File Transfer Protocol
(FTP) Servers
XP
 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>.
22
XP
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 mailto:email_address.
<a href=“mailto:[email protected]”>[email protected]</a>
23