Geoscience Diversity Enhancement Project

Crash Course in HTML

==============================

You are encouraged to build a basic web page for eventual installation through your web account on the CSULB server and on the web page for G-DEP. Your web page can include information about yourself and your interests and it can showcase your G-DEP research. It would be a very good place for you to display your poster project and any posters or presentations you make to science conferences. Another good thing to put up there is your résumé.

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 issue, 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 NotePad or WordPad (in your Start-Programs-Accessories area) 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 text editor (NotePad or WordPad). 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 CSULB web account. And, remember, there's no such thing as a web page that ISN'T "under construction," so it's quite okay to put a workable draft up there and then tinker with it as you get better and better at this.

==============================

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 this web page, http://www.csulb.edu/geography/gdep/html.html -- once there, go to the menus at the top of Netscape or other browser 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 (Netscape) or a NotePad window (IE) with the actual code and HTML tags that created the page at which you're staring. You can cut and paste from this by highlighting the code you want and then hitting Control C. This will put the selection in the clipboard. Then, you can open your text editor in another window and paste the selection into your document for modification.

==============================

Some Basic HTML

<html> must always be the very first line of code in 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. It can include geekspeak directions to search engines and other things, but these are strictly optional. 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]), for a grand total of 2563 or more than 16,000,000 choices! If you use RGB, the command becomes bgcolor="#FFFFFF" (for white) or "#000000" (for black). Red is "#FF0000"; green is "#00FF00"; blue is "#0000FF"; yellow is "#FFFF00" -- 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="#FFE4E1">

Using these colors or numbers, you can also specify link, vlink (visited link), and/or alink (active link). Be careful that you choose colors in harmony with your background color and in strong enough contrast to it to be visible! To do all of this, you'd type, for example:

<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.

<font face="serif"> and </font> allows you to specify font typeface. If you like sans-serif type, you can type <font face=sans-serif"> or try for more control by specifying particular typefaces by typing <font face="arial, helvetica, sans-serif">. The user's browser will first look to see if it has arial installed and will use it to show your page if it does. If it doesn't, it'll try helvetica and use that, if it has helvetica installed. If it has neither, it will use whichever sans- serif typeface it does have. If you prefer serif type (the kind with little extensions on the ends of the letter tips), you could type <Courier New, Times New Roman, serif"> or, simply, <serif>.

<font size="#"> and </font> allows you to change the size of the lettering between the two tags by specifying some number between 1 and 7 for the #. If you want the lettering to be bigger, you have to put a + before the number; if you want the lettering to be smaller, you have to put a - before the number.

<center> and </center> centers anything, whether text or graphics, typed between them.

<blockquote> and </blockquote> indents whole sections of text or graphics between the two tags.

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 report'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're 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 my 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.csulb.edu/geography/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 (e.g., Lynx) can't see: By including this, you clue them in to what they're missing. Some people prefer to bypass graphics, and, for many visually-impaired people, the only option is a text-based browser that can be connected with a voice synthesizer. The alt= is an easy courtesy ensuring access to all who visit your page. 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.csulb.edu/geography/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 and then link to your own account's graphics (it saves Geography 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 you should use for G-DEP projects, unless you created the graphics yourself), please just put in a link to that site.

You can see an example of this in my introductory physical geography lecture about the structure of the planet: http://www.csulb.edu/~rodrigue/geog140/lectures/earthstructure.html. The diagram of P-wave and S-wave trajectories in the earth came from the University of New Brunswick, and your browser is linking itself to the UNB web server to let you see that image.

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 one of your supervising faculty. This is to make sure you don't publish copyrighted material on your web page (this is also why you should not scan photographs from a book, magazine, or newspaper).

To grab a bullet or line 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. Oh, remember how you used the "align=bottom" in the middle of the <img alt="----------" align=bottom src="http://www.csulb.edu/geography/gifs/clrbar.gif"> command to create a colorful line below a paragraph? If you are using a regular rectangular or square image and if you want the image on the left side of the page, with text on the right, you would type align=left, instead of align=bottom, in that command.

What about hypertext links?

You can link in other things than graphics. You can, for example, send people from your home page over to, say, a timeline for your project (which would be another page within your CSULB web 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 their browser.

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 G-DEP homepage illustrates using a name for the links, such as the "CSULB G-DEP News" link at the upper left (when you click on it, you go to the News page without knowing the URL). The command, then, looks like this:

<a href="http://www.csulb.edu/geography/G-DEP/news.html">News</a>

The a href= part means "Anchor at this Hypertext REFerence" and the </a> ends the anchor at the end of the link name (e.g., "News").

To show the URL in lieu of a name, the command looks like this:

<a href="http://www.csulb.edu/">http://www.csulb.edu/ </a>

You can let someone e-mail you directly from your page. The command is:

<a href="mailto:yourname@csulb.edu">Your name OR the e-mail itself<>/a>:

Dr. Rodrigue
or
rodrigue@csulb.edu

==============================

Tables

Tables can be very difficult to construct, but they are also very good ways to present numerical data in scientific pages. They also allow you to do some fancy formatting of your web pages, the way I've done for the G-DEP home page, for example. Here are the very basic parts of table construction in HTML.

HTML only recognizes rows and cells (no columns). You need to make sure to include enough cells in each row to allow them to line up as "columns." To build a table, you need the tags <table> at the beginning and </table> at the end of the table data.

If you'd like a border to appear around each cell, include the border size command inside the table tag. It looks like this: <table border="1"> ... </table>.

To start a row, type <tr> at the beginning: It means "Table Row." Make sure to type </tr> at the end of the row!

Between the <tr> and </tr> tags, you define the content of each cell with <td> and end the cell's content, of course, with </td>. To build a simple 3 x 3 table, then, you'd have something like:

<table border="1">
<tr>:
<td>G-DEP success</td>
<td>G-DEP participants</td>
<td>Non G-DEP students</td>
</tr>
<tr>:
<td>Writing scores</td>
<td>89%</td>
<td>79%</td>
</tr>
<tr>:
<td>Math scores</td>
<td>78%</td>
<td>61%</td>
</tr>
</table>

Which would look like:

G-DEP success G-DEP participants Non G-DEP students
Writing scores 89% 79%
Math scores 78% 61%
To see some over-the-top tables, check out some of mine (and you are welcome to mooch code for any special effects you like):

Another way to create a table is the crude-but-effective typewriter trick. What you do is use the <pre> and </pre> tags, which stands for "pre-formatted," as in typewriter. You also have to disable whichever fonts you have going in the rest of the document. You create a table in NotePad or WordPad manually, formatting each cell by hitting the space-bar to separate them and ending each row with a carriage-return. Whatever you type or space will appear faithfully in your web page, exactly like it was done on an old typewriter. That's how I did that lecture on the structure of Planet Earth that I sent you to earlier, in discussing graphics. Have a gander at that to see what I mean about the typewriter effect: http://www.csulb.edu/~rodrigue/geog140/lectures/earthstructure.html.

So, to do a table this way, you'd type:

</font>
<pre>

___________________________________________________________________
|                  |                       |                      | 
| G-DEP success    |  G-DEP participants   |   Non G-DEP students |
|-----------------------------------------------------------------|
|                  |                       |                      |
| Writing scores   |          89%          |          79%         |
|                  |                       |                      | 
| Math scores      |          78%          |          61%         |
|_________________________________________________________________|
                                          Source: Ambos et al. 2002

</pre>
<font face="arial, helvetica, sans-serif" size="-1"> (or whatever)

==============================

Viewing Your Magnum Opus

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 probably 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), but, then, I'm lazy and often don't do this <G>. 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:\My Documents\mypage.htm). Voilà! That's what your document looks like to the web. Eeeeuw! Hate it? Not to worry. Go back and play with it, saving frequently (and more than one copy, ideally,...). Every so often, switch to Netscape or IE and "Reload" the page to see the changes.

If you already have your web account activated at CSULB, the next section will show you how to use a common FTP program, so that you can go on ahead and place The Majestic Final Draft in your web account so the whole world can view it.

==============================

FTP at CSULB

To upload your web page once you're happy with it (at least temporarily), you need to have an FTP program. FTP stands for File Transfer Protocol. The one we'll use in LA4-207 is WS_FTP LE. This program is no longer available for free download, so, if you'd like to "try this at home," you can, instead, download Core FTP by visiting http://www.download.com and clicking Download Now.

In LA4-208, find the WS_FTP LE icon in the Hazards folder and double-click on it. Up comes a box, which asks for the following information:

Profile Name: Enter your name or nickname

Host Name: Enter ftp.csulb.edu

Host Type: Leave it at Automatic Detect

User ID: Enter your csulb.edu log-in, the part of your e-mail address before the @.

Password: Enter your csulb.edu e-mail password

Account: Ignore it

Remote Host: Let's ignore this for now

Local PC: Enter the directory where you've stored your web work (A:\ or wherever).

Click Save and then OK. This should land you right in your web directory. For now, note the path that appears in the top of the menu on the right side (/home/xx/userID). You'll need this if you FTP from other systems.

On the right side, double-click on htdocs (HyperText Documents). That puts you in your web account.

What you now have is two menus or lists, one on the left side and one on the right. The one on the left shows all the files you have on your local home directory or floppy diskette or Zip disk. The one on the right shows the content of your CSULB web account (there is probably nothing there other than two dots at the top). Let's put something in there.

Move your cursor to the file you'd like to FTP up to your web account and click on it to highlight it. Now, click the right arrow between the two menus. Voilà -- your file just flew "upstairs."

Now, are you happy with the name you gave it? You can change it by highlighting it on the right side and clicking on Rename. Up comes a box and you can call it anything you want. You can give it the .html extension, instead of the .htm one. If you want this page to be your home page, rename it index.html or index.htm. That way, anyone visiting http://www.csulb.edu/~yourname/ will automatically view that file as the starting point in your web empire. If you don't name one of the files index.html or index.htm, then, when someone goes to your web page, all they'll get is a listing of the files you have there (what you saw when you visited http://www.csulb.edu/geography/gifs/.

Other things you can do in WS_FTP LE include creating subdirectories by clicking the MkDir button (and each subdirectory should have its own index page). You can Delete files in your web account or your floppy or remove subdirectories (RmDir). And, very importantly, you can Refresh either menu. This is important when you change a document after opening WS_FTP LE. For the New and Improved version to be available for uploading, you have to tell WS_FTP LE to Refresh the files. You can even View files to have a look at the code, in case you've forgotten what name you've given a particular file.

If you dawdle during an FTP session, the CSULB server will shut down the connection on you, which will mean files aren't being FTPed when you click the arrow. It's always a good idea to Refresh both menus frequently. If the connection is broken, you'll get an "Undecipherable" message up at the top of the Remote System menu. Not to worry. You need only click on the Close button and then on the Connect button to start a new FTP session. When you've about had it with FTP for a while, you can click the Exit button to close the WS_FTP LE program down.

If you're at home and have downloaded and installed Core FTP, go on and open it. Up comes the Site Manager. It should show "New Site" on the left. On the right, fill in Site Name with whatever you want to name your web page (your own name or maybe CSULB). For Host/IP/URL, type in ftp.csulb.edu. For Password, your login (whatever is before the @ in your csulb.edu e-mail account). Enter your password. Skip down to Remote Start Folder and type in the path to your account (/home/xx/yourname) if you know it; if not, just leave it blank. For Local Start Folder, put in c:\My Documents or wherever it is you keep your HTML files on your home machine. Then hit Connect. Your web site will come up on the right. Double click on htdocs, which is where the actual web page is, the part open to the public on the Internet. On the left is the drive you identified as where you keep the HTML documents on your local machine. Any file you double click on either side will be copied to the other side: From your home computer to the web or from the web to your home computer. You can rename the files by single clicking on them and then editing their names, the way you would in Windows Explorer. You can disconnect by clicking on the button with the two red dots above your web site menu or by closing the program down from the File menu. Core FTP, then, is just as easy to use as WS_FTP LE. There are many other FTP client programs out there, some free, some to buy, and they all work pretty much on the same principles as WS_FTP LE and Core FTP.

==============================
G-DEP home | Dr. Rodrigue's Home | Geography Home | Geology Home | Anthropology Home
==============================
first placed on web: 10/19/98
last revised: 09/04/04
© Dr. Christine M. Rodrigue

==============================