Web Pages and HTML

Web pages can be as simple or complex as you wish to make them – this document will outline some basic steps and point to some simple resources for making web pages.

Step #1) Setting Up Your Marcus Account for a Web Page

After logging on to your MARCUS account, create a directory called html. To do this, type the following command at the marcus% prompt and press Enter: mkdir html
Next, change the protection on this directory and your main (root) directory to allow others to view its contents (this access will be read-only. It will not allow others to make changes). To set the correct protection, type the following commands, ending each line by pressing the Enter key:
chmod 755 html
cd ..
chmod 755 [your username] (Note: [your username] is your e-mail name)
home

Step 2) Learn the Basics of HTML

HTML is the language of the Web. Your page must be "tagged" using this system. The easiest and best way to learn it is to use the various on-line references. They appear to be superior to any printed book currently on the market.

An excellent basic guide is NCSA's Guide to HTML.

Another site is The Yale C/AIM Web Style Guide.

Step 3) Creating an HTML Source File for your Home Page

A) You can create and edit an HTML source file directly on MARCUS using the Pico text editor

After logging on to MARCUS, move into your html folder by typing cd html
To create and begin editing a file on MARCUS, type: pico index.html

B) Or you can create the page using a text editing program (such as WordPad) and transfer the file to MARCUS when it is finished.

a. Create a new document as you normally would in your word processing program. The document must be saved in TEXT-ONLY format, and must be named index.html.

b. View your preliminary document in Netscape by opening Netscape, selecting the File menu, and choosing Open File . Identify the correct disk drive, and locate your document as the file to open.

Although it is possible to save a Microsoft Word document in HTML format, WCTS does not suggest that you use the Save as HTML... option in Microsoft Word to create web pages. Regardless of which method you choose, keep these things in mind:

The URL of your home page will be
http://people.whitman.edu/~[your username]/
Important note about naming your source file: The ~ in your URL directs the browser to look in your html directory for a file called index.html. Hence, your home page MUST be named index.html if you want it to show up when the above URL is entered.
Regardless of whether or not there is an index.html file in your html directory, you can view any web page you create by typing the above address plus the filename. For example, if you want to view the file home.html, use the following URL: http://people.whitman.edu/~username/home.html

However, if you do not have an index.html file, you technically do not have a home page on MARCUS - you may have a series of web pages that will show up when you type in the correct URL, but there will not be a default first page (ie - a home page) that browsers are directed to automatically from the list of Whitman people's home pages.

Step 4) Move the finished source file to MARCUS

Use FTP (on a PC) or Fetch (Macintosh) to place the file in your HTML directory on MARCUS.

Markup Tags

HTML <HTML>

This tells your browser that the file contains HTML-coded information.

HEAD <HEAD>

The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window.

TITLE <TITLE>

The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short

BODY <BODY>

The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.

Headings <H1>…<H6>

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>.

Paragraphs <P>

Unlike documents in most word processors, carriage returns in HTML files aren't significant. You don't have to worry about how long your lines of text are. Word wrapping can occur at any point in your source file without affecting how the page will be displayed. A Web browser ignores a line break and starts a new paragraph only when it encounters another <P> tag.

ALIGN=CENTER, ALIGN=RIGHT

Unnumbered Lists <UL>

Start with an opening list <UL> (for unnumbered list) tag

Then <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed

Numbered Lists <OL>

A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses `<OL>` instead of `<UL>`. The items are tagged using the same `<LI>` tag.

Horizontal Rules <HR>

To make a horizontal line the width of the browser window. A horizontal rule is useful to separate major sections of your document. You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). <HR SIZE=4 WIDTH="50%">