Transcript Links & Basic Web Site

XP
HTML
Tutorial 2: Developing a
Basic Web Site
1
XP
Tutorial Objectives
2

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
XP
Creating a Hypertext Document
3

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
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.
Link to an
element with an id:
<a href=“#classes”>
Classes
</a>
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.
Link to an anchor
element:
<a href=“#classes”>
Classes
</a>
Define an
anchor element:
<h2>
<a name=“classes”>
Chemistry Classes</a>
</h2>
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
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
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
Combination of Linear and
Hierarchical Structures
information about the play
information
about the
acts
each level
is linear
the scenes
XP
Linking to a Document
11

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.
XP
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.
<a href=“home.htm#interests”> View my
interests </a>


12
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
XP
Linking to Documents
in Other Folders
13

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.
XP
Absolute Pathnames



14
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.
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.
XP
Relative Pathnames
17

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.
XP
Relative Pathnames Continued
18

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.
Assuming the current folder is extra
The relative path to rock.htm is:
rock.htm
The relative path to parks.htm is:
extra/parks.htm
The relative path to index.htm is:
The relative path to chem.htm is:
../index.htm
../tutorial/chem.htm
XP
Linking to Documents on the
Internet
20

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>
XP
Displaying Linked Documents
in a New Window


21
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:
<a href=“url”
target=“new_window”>Hypertext</a>
– new_window is a name assigned to the new
browser window
XP
Linking to File Transfer Protocol
(FTP) Servers
22

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 used:
<a href=“ftp://ftp.microsoft.com”>
Microsoft FTP server</a>
XP
Linking to E-mail
23

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]”> CY Lin</a>