Transcript Tutorial 2 - Saddleback College

Developing a Basic Web Site
Maureen Smith
Professor, Saddleback College
Tutorial 2
Lesson Plan



Review
How to FTP
Tutorial 2 – Developing a Basic Web
Site
– Session 2.1
– Session 2.2
– Session 2.3

Review
Objectives




Define links and how to use them
Create element ids to mark specific
locations within a document
Create links to jump between sections
of the same document
Describe how to set and use anchors
for backward compatibility with older
browsers




List different types of Web site
structures and how to employ them
Create links to sections within a
document
Define absolute and relative paths
Interpret the structure and contents of a
URL






Link to a page on the Web
Link to FTP servers, newsgroups, and
e-mail addresses
Open links in a secondary window
Work with popup titles and access keys
Create semantic links
Create link elements
Session 2.1

In this session, you will create anchors
on a Web page that let you jump to
specific points in the document
– After creating those anchors, you will
create and then test your first hypertext link
to another document
Working with Links

Having added new content to the chem
page, it’s too long to fit in a window
– When opening it, the user sees only a
small portion and must scroll
– We need a quicker way to access the info
not seen

A user can select a link in a page to
view another topic or document
– Called the link’s destination
– Let’s add links that point to the different
sections by listing them at the top and
formatting them as links
– Users can then click a link to move directly
to the section that interests them

Three steps:
– List the section names at the top
– Mark each section using an id attribute
– Link the text you added in step 1 to the
sections you marked in step 2

Let’s create a list of the section names,
separated by a bullet
– See tutorial2/chem1.htm
Creating Element ids

Now we need a way to identify those
elements in the document
– One way is through the id attribute
<h2 id=“classes”>Chemistry Classes</h2>
– Assigns the id name “classes” to the h2
heading “Chemistry Classes”
– id names MUST BE UNIQUE
• Browser will report an error if it finds duplicate
id names
• They are not case sensitive

Let’s add ids to the h2 headings
– We’ll use id names classes, grading, app,
and safety
– See tutorial2/chem2.htm

Then we will create links to those
sections
Creating Links within a
Document

Let’s link the list entries to the four
sections
– When you click one of the links at the top,
browser will display corresponding section
without scrolling
– See figure 2-5

To create the link, enclose the content in
an <a> tag and use href attribute to
identify the link target
<a href=“#id”>content</a>
– where id is the value of the id attribute for
the destination and content is the hypertext
<a href=“#classes”>Classes</a>

Not limited to text—an image can be a
link
<a href=“#classes”><img src=“dube.jpg”
/></a>

A link should not contain any block-level
elements; but you can put them on the
outside
<h2><a href=“classes”>View Class
List</a></h2>

Cannot place one link inside another
– But can place most inline elements in a link

Let’s change the entries in the list to
links pointing to the different headings
– See tutorial2/chem3.htm
– Then test your links
Creating Anchors

Older browser versions do not support
ids as link destinations
– Have to insert an anchor element by using
“name” instead of “id”
– See page 63 if your audience will mostly
have older versions

We’re done adding links to the chem
page
Session 2.2

Stephen wants two more pages added
to his site
– One showing contact info and one listing
his favorite chemistry links
– Each page must contain links to the other
pages so users can easily move around
within the site
Working with Web Site
Structures

Before you set up links for a site, it’s
worthwhile to map out exactly how you
want the pages to relate
– Called storyboarding
– A diagram of the site’s structure
– Shows all pages in the site and how they
are linked together

Web sites use several different
structures
– Examining them can help you decide how
to design your own sites
Linear Structures

An online version of a famous play
would have links between individual
scenes
– This would use a linear structure in which
each page is linked with the pages that
follow and precede it in an ordered chain

Linear works best for pages with a
clearly defined order
– But difficult as the chain of pages increases
in length
– Can modify to make it easier to return
immediately to opening page, rather than
backtracking, by using an augmented
linear structure
– Each page contains an additional link back
to opening page
Augmented linear structure
Hierarchical structures

A hierarchical structure starts with a
general topic that includes links to more
specific topics
– Each specific topic includes links to yet
more specialized topics, etc
– Users can easily move from general to
specific and back, but not from specific to
specific
Hierarchical structure
Mixed Structures

As a site becomes more complex, may
use a combination of structures
– Includes both hierarchical and linear
– See Figure 2-12

Search results can point to any page
and will need a way to quickly
understand what your site contains and
how to get at it
– So each page should contain at minimum a
link to home page
– May want to use a site index—a page
containing an outline of entire site and its
contents
– See Figure 2-13 for a confusing structure
Creating Links between
Documents

To move between the three pages in the
chem site, let’s create links between
each page and the other two pages
– See Figure 2-14

Will use files named conttxt.htm and
linkstxt.htm from your data files
– May want to rename them as contacts.htm
and links.htm
Linking to a Document

Begin by inserting links in chem page to
the other two pages
<a href=“contacts.htm”>Contact me</a>

Must be located in same folder as chem
file in order for the browser to find it
– Filename is the target—no id needed

Filenames are case sensitive on some
operating systems, but not on others
– To avoid a problem, use lowercase for all
files on a web site and avoid special
characters like blanks and slashes
– Keep them short so users are less apt to
make typing errors

Let’s add links to the Contact and Links
pages
– See tutorial2/chem4.htm—then test

Now we need similar links in the
contacts and links files that allow users
to open the other two pages
– See tutorial2/contacts.htm
– See tutorial2/links.htm
– Then test
Linking to a Location within
another Document

Stephen also wants the contact and links
pages to contain links to the various
sections of the home page
<a href=“chem4.htm#classes”>Classes</a>
– See tutorial2/contacts.htm
– See tutorial2/links.htm
– Then test
Linking to Documents in Other
Folders

None of our links have specified a
location of the destination document
– Browsers assume that if this info is not
included, the destination document is
located in the same folder as the document
containing the link
– This is not always the case!

Must specify file’s location or path so
browsers can find it
– HTML supports two kinds of paths:
absolute paths and relative paths
Absolute Paths

The absolute path shows exactly where
the file is on the computer
– In HTML, you start every absolute
pathname with a slash (/)
– Then you type the folder names on the
computer, starting with the topmost folder
in the folder hierarchy and progressing
through the different levels of subfolders
– Separate each folder name from the next
with a slash
– The pathname, from left to right, leads
down through the folder hierarchy to the
folder that contains the file
– After you type the name of the folder that
contains the file, you type a final slash and
then the filename
– See Figure 2-26

If on different drives, must include drive
letter as well
/C|/faculty/dube/class/chem.htm

Don’t have to include drive letter if
destination document is on same drive
as the document containing the link
Relative Paths

If a computer has many folders and
subfolders, absolute pathnames can be
long, cumbersome, confusing
– For that reason, most Web authors use
relative pathnames in their hypertext links
– A relative path gives a file’s location in
relation to the current document
– Unlike absolute pathnames, a relative
pathname does not begin with a slash
– To reference a file in a folder above the
current folder in the folder hierarchy,
relative pathnames use two periods (..)
– To specify a different folder on same level
(sibling folder), move up folder tree using
double period and then down using name
of sibling folder
– See Figure 2-27

Should almost always use relative paths
– Are portable—if you move files to a
different computer or server, can move
entire folder structure without changing
relative pathnames you created
– If you use absolute, would have to revise
each link to reflect new location
Changing the Base

The browser resolves relative
pathnames by default based on location
of current document
– Can change by specifying a different base
in document’s head
– <base href=“path” />
– where path is folder location that you want
browser to use
Session 2.3

In the links.htm file, Stephen has listed
some Web sites that may be useful
– Let’s change these names to links
Understanding URLs

Need to know the URL to link to a
resource on the Internet
– URL, or Uniform Resource Locator,
specifies precise location of a resource
– Name is taken from protocol used to
access the resource
– A protocol is a set of rules defining how
info is exchanged between two devices
– Browser communicates with servers using
the Hypertext Transfer Protocol or HTTP
– So URLs for all Web pages begin with
“http”
– See Figure 2-28 for other protocols
Linking to a Web Page

URL for a Web page:
– http://server/path/filename#id
– where server is name of server storing file,
path is path to file on that server, filename
is name of file, and if necessary, id is name
of an id or anchor within the file
http://www.mwu.edu/course/info.htm#majors
protocol/server/path/filename/id or anchor name

There are six Web page URLs to add to
our Links page
– See list in Figure 2-30
– Each URL will be the href attribute value
for the appropriate <a> tag
<a href=http://school.discovery.com>
Discovery Schools</a>
– See tutorial2/links.htm
Linking to FTP Servers

FTP servers are one of the main
resources for storing files on Internet
– Use a communications protocol called File
Transfer Protocol or FTP
ftp://server/path/filename
– See Figure 2-33

Requires password and username to
access files
– Browser supplies this info automatically
with “anonymous” username, but some do
not allow anonymous access
Linking to Usenet News

Usenet is a collection of discussion
forums called newsgroups
– Users can publicly exchange messages on
lots of topics
news:newsgroup
– Opens a program for reading newsgroups
called a newsreader displaying latest
messages – See Figure 2-34
Linking to a Local File

May see a file stored locally on your
computer or LAN
file://server/path/filename
– Rarely used in Web pages
Linking to E-mail

Can communicate with site’s owner or
staff of organization that runs the site
through e-mail
mailto:address

Let’s add a link to Stephen’s e-mail
address
– See tutorial2/contacts.htm

There are problems with e-mail links
– User may not know how to use e-mail
client
– User’s browser may open wrong e-mail
client
– Increased spam—unsolicited junk e-mail

Spammers create their e-mail lists by:
– Scanning Usenet postings, stealing
Internet mailing lists, using programs called
e-mail harvesters that scan mailto URLs
– Many developers are removing e-mail links
in favor of Web forms that submit e-mail
requests to a secure server
– See suggestions on page 83
Working with Hypertext
Attributes

Several attributes control behavior and
appearance of links
Opening a Secondary Window

By default, each new page you open
replaces contents of previous page
– Clicking on external links on links page
would leave chem Web site—would have
to click the back button

Let’s have links displayed in second
window
<a href=“url” target=“window”>content</a>
– Window is name assigned to new window
– If several links have same target name, all
open in same window, replacing previous
contents
– HTML supports several special target
names—See Figure 2-38

Let’s target a window called “new”
– See tutorial2/links.htm (create Mo)

If you want all the links to point to a new
window, can add target attribute to
<base /> tag in document’s header
– Use sparingly; creating secondary windows
can clog up user’s desktop and users
cannot see their Back button
Creating a Popup Title

Can add a popup title to your links to
provide additional info
– Descriptive text that appears whenever
user positions mouse over a link
– See Figure 2-40
<a href=“chem.htm” title=“Return to the
Chemistry Home Page”>Home Page</a>
– Not supported by all browsers
Creating an Access Key

Instead of clicking on a link, a keyboard
key (called an access key) can be
assigned
<a href=“chem.htm” accesskey=“I”>Home
Page</a>
– To use it, an accelerator key (usually Alt) is
pressed
– Not practical; most access keys are
already reserved by browser
Creating a Semantic Link

Two attributes, rel and rev, let you
specify relationship between a link and
its destination
– Rel describes contents; example, linking to
a glossary of chemistry terms
<a href=“terms.htm”
rel=“glossary”>Chemistry Glossary</a>

Rev complements rel and describes
contents of source document as viewed
from destination document’s
perspective
– To go from chem home page to glossary,
might include the following to describe
where the user is coming from
<a href=“terms.htm” rel=“glossary”
rev=“home”>Chemistry Glossary</a>

These links are called semantic links
because the tag contains info re the
relationship between link and
destination
– Not designed for user, but for browser
– See Figure 2-41 for link types that can be
used
Using the Link Element

Another way to add a link to your page
is to add a link element to document’s
head
– Intended for browser use and do not
appear in browser window
– Typically used to connect to style sheets
Tips for Creating Effective Links



Storyboard your site before you create it
Make sure users can easily navigate
your site by linking each page to the
site’s home page and a page containing
a site index
Avoid using text like “click here” in your
links—make sure your linked text
describes what the destination contains



Never place two links adjacent to one
another; separate them with text or
extra space or symbol
Avoid long pages; break up each page
into a sequence of linked pages
If you do create a long page, create
links to different sections and a link
back to top of page



Use only lowercase filenames for all
documents
Use anchors if you need your internal
document links to work with older
browsers
Use care when inserting an e-mail link
– Research latest tools to thwart harvesters
and spammers