|
<![CDATA[
Annotated listing of "Dept of Clairvoyance and Prestidigitation".
for teaching "How to Create a Web Page".
updated 17-NOV-1998.
jim.cerny@unh.edu Computing & Information Services, Univ. NH
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The URL for the fictitious "Dept of Clairvoyance and Prestidigitation" is
http://unhinfo.unh.edu/Campus/cis/NIS/Courses
/Graphics/Clairvoyance/index.html
This example consists of three HTML files (discussed below) and the
three graphics files used in them:
index.html departmental home page
gogee.html page for one faculty member
grant.html page for another faculty member
getta-grant.gif picture of one faculty member
thall-star.gif T-Hall graphic used on home page
webtile.gif spider web background
The annotation also refers to:
AuthorAuthor.html pointers to info/tools on the Web.
JPEG-info.html an extract of JPEG and GIF information.
While this annotated listing is self-contained when used with the
Web page itself on-screen, it is not a substitute for a more
comprehensive disucssion of HTML design and tagging. We highly
recommend the two books by Laura Lemay:
Lemay, Laura, [1997],
Teach Yourself Web Publishing with HTML 4
in a Week, 4th ed., paper, sams.net, $29.99,
ISBN:1-57521-336-2.
This example is constructed to contain most of the ordinary tags someone
would need in building an organizational type of Web page. It is
essentially an HTML 3.2 example, without features added in HTML 4.0.
Remember, a well-behaved browser is supposed to just ignore tags that it
doesn't recognize, not to generate errors for them.
This discussion assumes use of a graphical browser. Most of what is
covered applies to non-graphical browsers as well (e.g., Lynx), but
we are avoiding discussion of most of the detailed differencs in how
inherently graphical features are handled in non-graphical browsers.
All tags in this example are upper-case, but that is just a convention
for human-readability of HTML-tagged text. Browsers should ignore case
usage in tag keywords.
All lines in the original HTML-tagged text are numbered, including blanks.
Explanatory annotations follow the line(s) to which they apply and are
indented several spaces. When discussing tags the <...> brackets are
omitted to provide better contrast with the actual occurrence of the
tag that is discussed.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
index.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. <HTML>
Optional but recommended. Defines the document type.
Requires a matching tag at end of document.
2.
Blank line. Used to benefit humans reading the tagged
text. Ignored by browsers.
3. <HEAD>
Marks the section that contains tags that are a prolog
to the rest of the document. Requires a matching tag.
There are not many kinds of tags that are used in the
HEAD section.
4. <!-- Dept of Clairvoyance and Prestidigitation -->
5. <!-- Demonstration page for teaching "How to Create a Web Page" -->
6. <!-- Jim Cerny, Computing & Information Services, Univ. of N.H. -->
7. <!-- updated for 17-NOV-1998 -->
Comments are marked this way. Each line needs to be
independently commented because there is not a way to mark
a block of comments as in some programming languages.
Not restricted to the HEAD but most often used there.
8. <TITLE>Clairvoyance and Prestidigitation at UNH</TITLE>
The TITLE tag marks text used to identify the document.
This is what shows up in bookmarks, history lists, and
is used by many indexing programs. Keep it short.
Placing the /TITLE tag on the same line with the TITLE tag
is just a habit or convention in my tagging style and is not
required.
9. </HEAD>
10.
11. <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FFA000" VLINK="#FFFFCC">
The BODY tag marks the beginning of the remainder (bulk) of
your document with whatever text, tags, and other content you
may elect to use. The four attributes used here in this tag
are optional as a way to control use of colors. Each one is
set in quotes that enclose the color specified as a base-16
(hexadecimal) number. Each begins with a pound-sign (to
indicate it is base-16) and consists of six digits (0-F).
These digits represent RRGGBB but are far removed from the
RGB color designations you may see in graphics programs.
BGCOLOR = the background color. Default is gray. Black
(used here) is "#000000".
TEXT = the color of ordinary text on the page. Default is
black. White (used here) is "#FFFFFF".
LINK = the hyperlink color before it has been selected.
Dark orange (used here) is "#FFA000".
VLINK = the color of the hyperlink _after_ it has been
selected. Pale yellow-orange (used here) is "#FFFFCC".
Graphical browsers keep a history file of links you've visited
and change the color after a visit to make it easier for you
to track what you've read. In most graphical browsers this
is a preference you can set by default but a page's LINK and
VLINK settings override your defaults.
How do you know what color you want and what its code is?
One way is to take note when you see colors that you like in
use on someone else's Web page - use your browser's command
to view the document source. Another way is to consult one
of the tables or converters that people have set up on some
Web pages to help you make the choice (see AuthorAuthor.html).
12.
13. <H2 ALIGN=CENTER>Department of Clairvoyance and Prestidigitation.<BR>
14. University of New Hampshire</H2>
H2 indicates a second-level heading tag. These range from H1-H6
and decrease in font size. A limited number of other tags are
allowed within heading tags. The BR tag forces a line break since
normally a browser would display as much text as would fit on one
line in the display window. The ALIGN=CENTER attribute with the
CENTER argument does, as expected, center the heading on the line.
15. <IMG SRC="thall-star.gif" ALT="T-Hall-Star"><P>
The IMG tag is for an in-line image, a graphic that is displayed
by default in the accompanying page text (many browsers let you
turn off that default display). There are numerous attributes
allowed in an IMG tag, many of them seldom used. The
two attributes used here are basic and would normally be used.
SRC = expects you to list the address for the graphic file, in
quotes. If it is a simple file name it means the file is in
the same directory as the HTML file in which it is referenced.
Alternatively a complete URL can be used to reference a file
elsewhere on the server or on a completely different server.
Two kinds of graphics files are allowed here. GIF and JPEG.
If your graphics file is not in one of these formats, then you
need to locate a graphics utility to convert it. (For more
information on choosing between GIF and JPEG see "JPEG.info").
ALT = specifies alternative text that is displayed if
someone is using a non-graphical browser.
The P tag is a paragraph tag. That causes a line to be
skipped and a new paragraph to begin. Originally it was
not a paired tag, but the current standard recommends its
use as a P and /P pair. As a single P tag you can put it
either at the beginning or end of each paragraph. Stacking
multiple P tags will not generate extra white space, however.
16. <PRE>
The PRE tag marks the beginning of a section of preformatted
text. This is one way that special indenting and line spacing
is handled. A limited number of additional tags are allowed
within the preformatted text and that will be recognized as
HTML tags and not treated as literal text. You could use this
to layout a table or draw some ASCII art.
17. <TT><B>
The TT and B tags specify physical (in contrast to logical)
styles. TT means to use a monospaced typewriter font and
in most browsers that is Courier. B means to turn on boldface.
18. "That old black magic has me in its spell ..."
Some demonstration text in the spirit of this semi-occult
Department.
19. </B></TT>
End of the boldface and monospaced type.
20. </PRE>
End of the preformatted text.
21. <FONT SIZE=-1>version for 17-NOV-1998</FONT><BR>
The FONT tag is used it to increase or decrease the size
of the text bracketed by it, compared to what it would normally
be. Measured in points. SIZE=-1 reduces the size by one point.
Cascading Style Sheets are a new, recommended way to do this.
The BR for line break is probably not really needed here
but ensures that any additional text begins on a new line.
22.
23. <HR>
HR is the horizontal rule tag and is used to draw a horizontal
line across the screen. The HR begins on a new line so it
includes an implied line-break. This is one of the few tags
that is not in a matching pair. There are some optional
attributes for the HR tag to control width and length of the
ruled line.
24. <P><STRONG>Major teaching and research interests in the Department
25. of Clairvoyance and Prestidigitation include dreams, hypnosis,
26. astrology, tarot, numerology, past life regression,
27. cold fusion, and UFO's.</STRONG></P>
28.
P and /P tags are used to mark this as a paragraph. Within
them the STRONG and /STRONG tags are used as logical (in
contrast to physical) styles to emphasize the text, but to
make it more emphasis than the EM and /EM tags provide. This
is browser dependent, but on most browsers it would be bold.
29. <P><STRONG>Some of our envious colleagues refer to us as "tricks and
30. guesses." Our advice is not to stand too close to them
31. at 3:13 p.m. EDT on July 25, 2003.</STRONG></P>
32.
Same tag usage as on the preceding paragraph. Each paragraph
was tagged separately because the STRONG and /STRONG tags do not
allow the P and /P tags within them.
33. <HR>
Another horizontal rule for visual organization/separation.
34. <H3>Faculty and staff.</H3>
H3 and /H3 are header tags, but a smaller or less emphasized
header than the H2 and /H2 tags call for (used above).
35.
36. <UL>
37. <LI><B><A HREF="gogee.html">Gogee, Peder</A> faculty in residence.</B>
38. <LI><B><A HREF="grant.html">Grant, Getta</A> assistant professor.</B>
39. </UL>
There are several ways to do lists with HTML. The unnumbered
or UL list is one of the more useful. Each list item begins
on a new line and is displayed with a bullet. List items are
indicated with the LI tag, which does not have a matching pair
and which can include quite a few other tags. The B and /B
tags are used again here as a physical style to make the list
item bold.
Each list item here includes a hyperlink, defined with the
A and /A tags. The hyperlink tag allows us to do two things:
(1) To specify some text that will be highlighted as a
hyperlink using either default colors or colors as
specified on the BODY tag above.
(2) To specify the URL (address) of the hyperlink, the
information we will get with a mouse click on the hyperlink
text. The A tag includs the HREF attribute to specify the
URL. (This is similar to SRC attribute on the IMG tag.)
Both of these hyperlinks are simple references to files
in the same directory as the HTML file that invokes them.
Sometimes these are called relative links because you can
move the whole directory to a different location and none
of the references need to change.
You usually want to associate (highlight) enough text with the
hyperlink to make it noticeable, but not an excessive amount that
would defeat the purpose of making it stand out. After a
hyperlink tag it is common to include additional text.
40.
41. <HR>
42. <BR CLEAR=LEFT>
CLEAR=LEFT means not only to make a line break, but to move
down until the left margin is clear - makes sure that if the
next item were a graphic that it would start at the left
margin and not at some intermediate point horizontally on the
page.
43. Send e-mail comments to
<A HREF="mailto:cwis.admin@unh.edu">Webmanager</A>.<BR>
This is a simple way to send e-mail to someone from within
a Web page. It is not a full-fledged e-mail capability, just
the capability to send a message to the indicated address.
The address is given in URL format but it differs from the
format used for most other URLs in that there are no slashes
after the colon. While this kind of e-mail is convenient for
both the Web page designer and user, it is important to
remember that it is essentially anonymous e-mail and that you
have no real way to know who is sending it.
44. Go to <A HREF="http://www.unh.edu">UNHINFO</A><BR>
This is a simple hyperlink to allow return to the top level
of UNHINFO. A fancier way to do this might involve a graphical
button as a hyperlink. It is good design practice to give
the person browsing the page a way to navigate back to some
appropriate starting point.
45. <FONT SIZE=-1>
This uses the SIZE attribute to reduce the font size for
the next two lines to de-emphasize them.
46. ©University of New Hampshire<BR>
This inserts a copyright notice on the Web page. Some people
believe strongly in this and it makes them feel better, many don't
bother. Consider this: even though you have a legal copyright
interest in the page contents and its expression, under what
circumstances would you really-really take legal action if someone
infringed your copyright?
The copyright symbol (a "c" enclosed in a circle) is
specified by what is called a character entity, in this
case an ampersand + keyword "copy" + a semicolon. Character
entities always begin with an ampersand and end with a
semicolon. Usually there is a numeric entity between them,
but sometimes there is a keyword you can use instead. The
numeric entity equivalent of © is &169; - any character
which you can display on screen should have a defined numeric
entity, which you would have to look up in a table. Here's
another example: Suppose you want to use the angle brackets
<used around tags> in a discussion but don't want the browser
to try and interpret them as marking an HTML tag. You would
need to use the numeric tags $#60; and > to get that effect.
Finally, some browsers, such as Lynx, don't know about numeric
entities and will display them as if they were ordinary text.
47. URL http://www.unh.edu/NIS/Courses/Graphics/Clairvoyance/
This is not a tag, just the inclusion of the URL for the
Web page. This can be convenient if someone saves the page
in e-mail or in printed form. It can be inconvenient to
maintain if you move your pages around on the server and
many servers have automated ways to insert this information
to avoid what could otherwise be a nasty housekeeping task.
48. </FONT>
49.
50. </BODY>
51. </HTML>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
gogee.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. <HTML>
2. <!-- jwc. 21-FEB-1996. -->
3. <HEAD>
4. <TITLE>Peder Gogee</TITLE>
5. </HEAD>
6.
7. <BODY BACKGROUND="webtile.gif">
The BACKGROUND attribute is another way, besides the BGCOLOR
attribute, to get a colored background. This attribute
specifies a graphics file (GIF or JPEG) that is then used to tile
or fill in the background.
8.
9. <H3>Peder Gogee.</H3>
10. <HR>
11.
12. <P>My teaching interests are in the area of spoon
13. bending and
14. <A HREF="3spoons.html">
15. spoons as metaphor</A>.</P>
This page mostly illustrates HTML features already discussed.
The URL used on the HREF tag does illustrate two further points
of URL syntax, however.
Originally this was linked directly
to the author's page, but it kept changing, so I finally
copied the file and use this relative link.
I had decided to use spoon bending as an example and then
went browsing the Web searching for a picture of a spoon
as a graphic. Imagine my surprise when, even better, I found
this story written by someone for his daughter! Originally this
was linked directly to the author's page, but it kept changing,
so I finally copied the file and use this relative link.
16.
17. </BODY>
18. </HTML>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
grant.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. <HTML>
2. <!-- jwc. 17-NOV-1998. -->
3. <HEAD>
4. <TITLE>Getta Grant</TITLE>
5. </HEAD>
6.
7. <BODY>
8.
9. <H3>Getta Grant.</H3>
10.
11. <IMG SRC="getta-grant.gif" ALT="Getta's picture">
Getta's image is cropped from a Matisse painting that I
found on the Web once-upon-a-time.
12. <HR>
13.
14. <P>My primary research interest is cold fusion technology.
15. I would like to tell you more about it, but on advice of
16. our attorney I am not able to while patent applications are
17. pending.</P>
18.
19. <P>For more information, visit the
20. <A HREF="http://www.mv.com/ipusers/zeropoint/">
21. cold fusion home page</A>.</P>
All of the tags on this page are the same as those discussed
on the home page. This HREF attribute does, however, use a
full URL rather than just a relative reference to a local
file. In fact, this URL illustrates several points of URL
syntax. The ":8001" refers to a special address port on the
server that is evidently used instead of the usual port of
":80" for HTTP traffic. When the usual port is used, this
information is normally omitted. Notice the use of mixed
case in the remainder of the URL that lists the directory
path and specific file. Case is important in that part of
the address!
And while the Department of Clairvoyance and Prestidigiation
is fictitious, its listed interests are real and there
really is a cold fusion Web page at MIT.
22.
23. </BODY>
24. </HTML>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
]]>
|
Annotation of Clairvoyance Dept Web page example