Mister Hungerford's Web Page
MESA
Web Page Design Competition
Web Page Creation Activity #3
(Links)
The
purpose of this activity is to continue your introduction of a few simple
commands of Hyper Text Markup Language (HTML). You will experiment with web page creation using a simple
text word processor and HTML coding.
During
previous activities we have learned the basic HTML document format.
<html>
<head>
<title> The name of your page.
</title>
</head>
<body> All the stuff in your page goes here.
</body>
</html>
Ø
The
HTML tag defines the document as a web page. All other tags are nested within it.
Ø
The
head contains information not displayed as part of the web page.
Ø
The
body contains the displayed portion of the page.
Now lets look at LINKS
One of the most important things with Web Pages is
to provide links to other documents or section of a document on the same server
or on a different server. Links
are what makes Web Pages special, the building blocks of hypertext. Without links, there world be no reason
for anything other than paper.
All links use a set of "ANCHOR" tags, <A. .> . . . </A> with the
words between the starting and ending tags providing the hot spots or anchor
words. For example, in the coding <A. . > San Jose State University
MESA </A> Schools Program, the anchor words show up as the link in
the document: San Jose State
University MESA Schools Program.
Clicking on the anchor words connects you to the other document of file.
An anchor tag has attributes included in the start
tag that define the location where the link will connect. With the attribute, the link looks like <A HREF=". . ."> . . .
</A>. HREF stands for
Hypertext REFerence and followed by (inside the quite marks, by the name or URL
of the document being linked.
There are five
major types of links, we will look at each one individually.
Relative Links
Ø Link to a file in the same
directory on the same server:
<A
HREF="secondpage.htm">MESA</A> Program.
This appears as MESA
Program.
Clicking on the word MESA would send you to the page
called "secondpage" on
your server (or in this case disk).
Absolute Links
Ø Link to a file on a
different server:
<A HREF=http://mesa.ecs.fullerton.edu> CSU Fullerton MESA </A> Program.
This appears as CSU Fullerton MESA
Program.
Clicking on the words CSU Fullerton MESA would send
you to the MESA page at Cal State Fullerton's server.
E-Mail Links
Ø Another variation of the
link commands is linking to an e-mail address. It would look something like this:
<A HREF=mailto:[email protected]>
Mister Hungerford's E-mail </A>
This appears as a normal link in the text. Mister
Hungerford's E-mail. When
this type of link is used, an e-mail connection is generated using the default
program. Please note that this link
does not work on all computers.
For instance, it is problematic with non-Internet standard e-mail (such
as AOL users) and also for any computer that is not configured with a default
mail program.
Graphic Link:
Ø Sometimes a link is tagged
on an image. An example of this would be:
<A HREF=http://mesa.ecs.fullerton.edu><IMG
SRC="mesalogoblue.gif" ALT="MESA Logo"></A>
Clicking on the MESA Logo would send you to the MESA
page at Cal State Fullerton's server.
Target Links
Ø This sections linking
process is similar to linking to another document but has an extra step first.
1.
Step
One - Create a "target"
element to mark the section you want the link to go to.
2.
Step
Two - Create the link to that section.
Creating the target work or anchor used the NAME
attribute with the anchor tag.
This identifies where the link will connect when it is clicked. The syntax is very similar to the other
anchor tag attribute (HREF) and the target name is case sensitive, meaning that
"MESA" is not the same as "mesa" or "Mesa" in the
tag.
Step One:
<A
NAME="San Jose">San Jose State University MESA Program <A/>. Appears as San Jose
State University MESA Program in the text. Notice that there is nothing that identifies this text as
being different from any other text surrounding it. In fact, it is OK to define the NAME attribute without any
anchor words between the two commands.
Step Two:
Ø Example of a link to a
section in the same file:
<A
HREF="#San Jose"> San Jose State University MESA Program
</A> is housed in the Science Building . . . appears as a normal link in
the text - San Jose State University
MESA Program is housed in the Science Building . . . and links to the
exact section of this file.
Ø Example of a link to a
Sections in a different File in the same directory on the same server.
<A HREF="#example.htm#San Jose">
San Jose State University MESA Program </A> is housed in the Science
Building . . . appears as a normal link in the text - San Jose State University MESA Program is housed in the Science
Building . . . and links to that exact section of the other file.
Ø Example of a link to a
Section in a File on a different server.
<A
HREF="http://mesa.ecs.fullerton.edu/index#San Jose"> San Jose
State University MESA Program </A> is housed in the Science Building . .
. appears
as a normal link in the text - San
Jose State University MESA Program is housed in the Science Building .
. . and links to that exact section of the other file.
For
more information on HTML check the following sites:
Digital's
HTML Starter Page
http://thuban.ac.hmc.edu/www_common/ips/HTML_PRECONFIGURED/HOW2HTML.HTM#BASIC_PAGE
How
a Web Page Works (excellent site)
http://www.howstuffworks.com/web-page.htm
Tutorial
to basic HTML
http://www.cwru.edu/help/introHTML/toc.html
HTML
Made Really Easy (HTML Tutorial)
http://www.jmarshall.com/easy/html
BareBones
Guide to HTML