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.
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.
<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.
<body bgcolor="white" link="blue" vlink="purple" alink="red">
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).
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:
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):
G-DEP success G-DEP participants Non G-DEP students Writing scores 89% 79% Math scores 78% 61%
- http://www.csulb.edu/~rodrigue/0911/bldr911fig3.html
- http://www.colorado.EDU/hazards/qr/qr146/qr146.html#fig3
- http://www.csulb.edu/geography/gdep/news.html
- http://www.csulb.edu/~rodrigue/aguf00.html (I used tables here to create borders and colored blocks to simulate the appearance of a poster presentation).
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)
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.
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:
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.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).
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.