GEOG 260-01
Natural Hazards
Crash Course in HTML
You will be building a basic web page for eventual installation through your
web account on the ecst server and on the web page for this class. The
specific directions for the content are found elsewhere on this course web
page; the focus of this document is the actual mechanics of writing web
documents in HTML, or Hyper Text Markup Language.
So, thinking about what you want on your page is the first step in design.
In general, it is best to structure your web page as a series of small
documents, each hyperlinked to the others, rather than one huge document.
Modularizing your web page this way makes it easier for visitors, who are
less likely to move off due to a lengthy download. The home page should be
very small, just some text and maybe one or two small graphics (e.g., lines,
drawings, maps of the area). The idea is to get people interested and, to do
that, you don't want to put them off by an eternal download. Then, put in a
bunch of hypertext links to things you describe on the homepage, such as
maps, the individual papers on your disaster, links, and pictures. So, figure
out what you want on the home page and the number of other documents you'll
need for the links.
So, how do you do all this? I'm going to have you use your favorite word
processor and code your page in HTML. As you go, you'll view your progress in
real time by having Netscape or other browser open the page in your word
processor. You have a look at it, get grossed out, go back to your document
and change things, save again, and then reload the document on Netscape.
After lots of this, you will eventually be happy with your page and can then
get it ready for installation on your ecst web account.
First, Look at the Structure of a Few Web Pages You Like
Visit web pages and pick a few to examine at the HTML level. I suggest
starting with the Geography and Planning web page, http://www.csuchico.edu/geop/ --
once there, go to the menus at the top of Netscape and look for the "View
Page Source" or "View Source" option. Alternatively, you can put the cursor
in a blank area of the page and click the RIGHT mouse button and select
"View Source." Up will come a grey screen with the actual code and HTML
tags that created the page at which you're staring. You can cut and paste
from this, but not through the usual drop down menus (which don't exist on
this kind of page). Not to worry: You can highlight the code you want and
then hit Control C. This will put the selection in the clipboard. Then, you
can open your word processor in another window and paste the selection into
your document for modification.
Second, Some Basic HTML
<html> must always be the very first line of your document;
</html> must always be the very last line of your document.
Note that the slash within the < > tag marks the end of a command.
You'll see lots of those.
<head> is the second line of your document
<title> is the third line: This marks the beginning of what
shows up on the blue bar at the top of the browser screen. You can put the
title right after the tag or on the next line. You end the title (either at
the end of the line or on its own separate line) with </title>
</head> marks the end of the head of your document. The head
basically encloses the title of the page for display on the blue bar on top
of the browser. On to the meat and potatoes of your document, the body.
<body> marks the beginning of the body, which is all the stuff
that shows up in the main browser window. You end the body at the second
line from the end of the whole document, just above </html> with, of
course, </body>.
<body> is a tag that can be further modified to specify such
things as background color, color of your hypertext links, color of visited
links, and the color of active links. It is not necessary to specify
anything here: Netscape and other browsers have some pretty attractive
defaults. For those of you who would like to experiment here, I'll put in a
few pointers.
- bgcolor=white (or whatever) colors the background of your
page. You can specify many colors by name or you can go nuts and design
your own color through the RGB color scheme (RGB means Red Green Blue, and
each one can be given 256 different shades, from 00 [color turned off] to FF
[color fully activated and shown in its lightest hue]). If you use RGB, the
command becomes bgcolor=#FFFFFF (for white) or #000000 (for black). Red is
#FF0000; green is #00FF00; and blue is #0000FF -- you get the idea. It's a
lot easier to use the named colors. Here are a few:
- white
- black
- yellow (bright yellow)
- red (bright red)
- blue (bright blue)
- green (bright green)
- mintcream (light green)
- lemonchiffon (pale yellow)
- purple
- lavender
- orange (bright orange)
- teal
- aqua
- silver
- grey (middle of the road)
- pink (pretty loud)
- mistyrose (very light pink)
- olive
- navy
- maroon
- brown (fairly dark)
- navajowhite (light beige)
- The whole command, if all you want to do is specify a background
color, is <body bgcolor=mistyrose> or <body
bgcolor=#FFCCCC>
- Using these colors or numbers, you can also specify link,
vlink (visited link), and/or alink (active link). To do all
of this, you'd type:
<body bgcolor=white link=blue vlink=purple alink=red>
To make decorative text, you can use the following tags:
- <p> creates a paragraph break. Without it, all your
text runs together in one endless paragraph.
- <br> is a line break -- you can use it to create a new
line or paragraph without leaving a space between lines.
- <i> and </i> encloses anything you want in
italics
- <b> and </b> encloses anything you want in
bold
- <font color=red> and </font> encloses
anything you want in red or whichever named or RGB
color you put in there.
- <center> and </center> centers anything,
whether text or graphics, typed between them.
To create lists:
- To make ordered or numbered lists, first type
<ol>. After that, precede each item you want listed by number
with the tag, <li> Hint: keep them short, so you don't have to
worry about fancy formatting issues. Then, when all the list items are done,
make sure to end the whole list with the end tag, </ol>.
- To make unnumbered, bulleted lists, first type
<ul>. Just as with the numbered list, you precede each list
item with the tag, <li>. This will produce a bullet mark at
the beginning of each item. Again, make sure to end the whole list with
</ul>.
- To make indented lists not set off with numbers or bullet
marks, you can first type <dl>. These are not true lists, so
you use a different item to mark the items: <dt><dd>.
At the end of the "list," you finish with </dl>.
- It is possible to nest lists within lists, too, but that can get
pretty hairy and is not probably necessary on your disaster's home page. If
you're feeling especially adventuresome, you can play around with this, making
sure that you put the end tags in the right places.
Horizontal ruler lines
- To set off sections of your page with a horizontal line, the
simplest thing to do is type <p><hr><p>. This
creates a grey horizontal ruler line, with a paragraph break before it and
after it.
To create headings
-
HTML permits you to create headings, which are automatically spaced on their
own lines. What you do is enclose the text for a heading in the heading
tags, <h#> and </h#>, where the # stand for any
number between 1 and 6. One creates a big, in your face, header, and 6
creates a teeny but boldfaced header. Aw, heck, here's some examples, which
I've decided to center.
Honking Huge Header
Dramatic Header
Bold Header
Small Bold Header
Tiny Header
Not Nice to Do to Us Folks Needing Bifocals Header
What about graphics?
- To put graphics into your page, you need to create a link to the
graphic's URL. The URL must end in the extensions, .gif or .jpg, as the Web
can only display "jiffs" or "J-Pegs." I've put a bunch of spiffy graphics
onto the Department's GIFS directory, so I'll use one of them by way of
example. If, for example, you wanted to use a thick rainbow colored line
instead of the grey horizontal ruler line, you would type instead:
<img alt="----------" align=bottom
src="http://www.csuchico.edu/geop/GIFS/clrbar.gif">, which would
incorporate that graphic into your page.
- The img alt= part describes a graphic that someone with a
non-graphical browser can't see: By including this, you clue them in to
what they're missing. align=bottom is optional, but it aligns any
graphic to the bottom of any text that might share the same line.
src= is where you put in the graphic's URL, enclosed in quotation
marks.
- You are welcome to web over to http://www.csuchico.edu/geop/GIFS/
and click on any of the graphics listed to see what they look like and link
to them.
- Normally, however, it is considered courteous to download any
graphics you like into your OWN web directory, make them public, and then
link to your own account's graphics (it saves geop a lot of hit traffic).
For this assignment, there is an exception. If you want to include
photographs or other graphics, which you obtain from another web site (and
that is the only source of graphics I want you to include for this
assignment), please just put in a link to that site. Alternatively, you can
e-mail the webmaster for that page and ask permission to download the graphic
to your page. If you do, please save the e-mail giving you permission and
forward it to me at mailto:lapaloma@ecst.csuchico.edu.
This is to make sure you don't publish copyrighted material on your web page
(this is also why I don't want you to scan photographs from a book, magazine,
or newspaper).
- To grab a graphic you like, position the cursor on it and hit the
right mouse button. A menu will pop out of nowhere and, on it, select "Save
Image As." You then save it to your own computer or diskette. I have a
gifs directory on my computer to save my little finds. Later, you will
upload these finds onto your own web account and then link to your own
collection of graphics.
What about hypertext links?
- You can link in other things than graphics. You can, for example,
send people from your home page over to your timeline (another page
within your ecst account) or over to some other place you think is relevant
housed on some other computer. You can also show your e-mail address and set
up a link so someone can e-mail you without having to leave Netscape.
- To send someone to another document, you include the URL and some
sort of name for it, either a description of the site or the actual URL
itself. The GEOP homepage
illustrates using a name for the links, such as the "News" link (when you
click on the name, you go to the news page, without knowing the URL). The
command, then, looks like this:
- <a
href="http://www.csuchico.edu/geop/news.html">News</a>
from the Department (including jobs and internships)
- The a href= part means "Anchor at this
Hypertext REFerence" and the </a> ends the anchor
at the end of the link name (i.e., "News").
Showing the URL in lieu of a name is illustrated inside the Geography and Planning Links
page by the link over to the Association of American Geographers. The
command looks like this:
- <a
href="http://www.aag.org/">http://www.aag.org/
</a>
- You can let someone e-mail you directly from your page. The command
is:
- <a href="mailto:yourname@ecst.csuchico.edu">Your name OR
the e-mail itself<>/a>:
- Dr. Rodrigue
- or
- lapaloma@ecst.csuchico.edu
Viewing Your Magnum Opus
I am only proficient in PCs, not Macs, so my directions are for the PC, but
I think it'll be easy enough for you Mac-types to figure out the analogous
commands on your machine.
With your word processor in one window, open Netscape (or other browser) in
another window. Save your document with the .htm extension, instead of .doc
or .txt or whatever your program does. It's usually a good idea to save a
second copy to another diskette or folder or directory and have Netscape
open that (rather than your one and only copy of your work). Use the "Open
Page" command from the "File" menu in Netscape and either browse your way to
your document or type in its location (e.g., c:\msw\html\mypage.htm).
Voilà! That's what your document looks like to the web. Hate it?
Not to worry. Go back and play with it, saving frequently (and more than
one copy...). Every so often, switch to Netscape and "Reload" the page to
see the changes.
If you already have your web account activated and know how to use an FTP
program, go on and place The Majestic Final Draft in your web account and
change the permissions so the whole world can view it. If you have no idea
what I'm talking about, well, that's another lecture!
first placed on web: 10/19/98
last revised: 02/26/99