GEOG 109-01
Geographical Research and Writing
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 idea
is to provide access to your resumé and to a selection of your best
work while a Geography and Planning major at Chico State. Since a web page
is often more informal than a resumé, you might also want to include
such things as your hobbies, opinions, treasured spots on the Internet, and
maybe even pictures of yourself or hobbies. So, think about what you want
on your page as 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). 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
resumé, maps, papers, hobbies, cool 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 or HyperText Markup Language. 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't cut and paste
from this, but you can certainly open your word processor in another window
and copy the HTML manually 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). 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
- <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 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).
- 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 resumé (another page
within your ecst account) or over to some other place you think is really
cool (e.g., the Geography and Planning home page?) 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>
(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 News page by the link over
to Dr. Rovai's baby pictures. The command looks like this:
- <a
href="http://www.cisnet.net/mom/">http://www.cisnet.net/mom/
</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: 10/19/98
© Dr. Christine M. Rodrigue