Making Web Pages, Part 1

This set of instructions is mainly for those of you with wam accounts, but much of it applies no matter where you will be housing your page.

To get started, log on to your wam account. At the prompt, type

cd ../pub (Note: there is a space between "cd" and "../", and there are two periods before the forward slash.)

and hit RETURN.

What you have done is this: "cd" is the command to change directories. ../pub is a directory. More precisely, the "../" part takes you up (or down, depending on how you look at it) one level in the directory structure. And in that level, there is a pre-made directory called "pub." This is the "public" directory, in which web pages are stored.

Now you are going to make a very simple web page. At the prompt, type

pico index.html

and hit return. The "pico" portion of this command has invoked a text editor -- a word processor, if you will -- called "PICO." The "index.html" portion gives a name to the file you are creating. (If the file already existed, this sequence of steps would simply open it for editing; more on that later.)

All this will put you into a screen that look very much like PINE. In fact, PICO is the editor that PINE uses. If you know how to use PINE, you pretty much know how to use PICO.

Why is the page called "index.html?"

It doesn't have to be. But if it is, it will be the default page that will be opened when anyone goes to the web site:

www.wam.umd.edu/~yourlogin

where, of course, "yourlogin" is replaced with your own WAM login name.

Note: You don't have to call the page "index.html". You can call it whatever you like, but it should be a name that (a) ends with .html or with .htm and (b) contains no spaces.

A basic web page has two parts: a head, which doesn't show up onscreen, and a body, which is what your viewers will see. We will get to those two components in a moment. But meanwhile, at the beginning of your document, type

<html>

This is a tag. Tags are always contained in angle brackets. This one tells the viewer's computer that what follows is in the HyperText Markup Language, used to make web pages.

Now hit RETURN and on a new line, type

 <head><title>My Web Page</title></head>

The first tag is telling the viewer's computer that we've begun the head of the document. The head contains various sorts of information about the document, and all of it is optional. Many things could go in the head, but we'll ignore all but one: the title. Titles are not required, but including them is good manners.

The second tag says "Here's here the title starts." Then we type in the title. (You can use a different one, of course; that's up to you.)

The third tag, </title>, says "That's the end of the title." Notice that it has a "/" in it. Many HTML tags come in such pairs. The one without the "/" turns the feature on and the one with the "/" turns it off. And based on this, you cna no doubt guess: The fourth tag says "This is the end of the head."

Now we can turn to the body. The most basic tag here is

<body>

and you can write that on the next line of your page. If you leave things that way, your page will have a plain gray background. But this page, you notice, has a white background. If you prefer that, make the tag look like this:

<body bgcolor=#ffffff>

The word "body" is the main part of the tag. The "word" "bgcolor" stands for "background color" and modifies the action of the main part of the tag. The "=" means just what you think, and the "#ffffff" picks out a number, written in a special way that we'll discuss in a subsequent lesson. This number, called a HEX NUMBER, is the number assigned to the color pure white.

Note that "bgcolor=#ffffff" contains no spaces.

Now let's put in a bit of content. Let's make a title that the viewer will see, and let's center it. On a new line, type

<center>My Web Page</center>

(Use another title as you prefer.) The first tag says "Center this text." Then follows the text itself. Finally, the second tag says "Turn off centering."

We need some text to follow this title. And we need to make sure that it starts on a new line. If we want space between the title and the text that follows (and we probably do), we use a paragraph tag. This tag starts a new paragraph. Type

<p>This is my first paragraph in my very first web page. 
It is a short paragraph but it isn't very long.

<p>And this is my second paragraph. It's even shorter.

(If you prefer, you can write something less inane.)

As you have no doubt guessed, the tag

<p>

inserts a paragraph break. For a single line break (we'll come back to this) use

<br>

instead of

<p>

Note that neither the paragraph nor break tags require a closing tag.

Let's recap. What you have written up to now should look like this:

<html> <head><title>My Web Page</title></title> <body bgcolor=#ffffff> <center>My Web Page</center> <p>This is my first paragraph in my very first web page. It is a short paragraph but it isn't very long. <p>And this is my second paragraph. It's even shorter.

Note: HTML doesn't indent paragraphs. (Don't ask why; the answer is very boring and not in any way satisfying.) HTML also ignores carriage returns. Furthermore, HTML also ignores all multiple spaces. (That is, two spaces or twenty-two are the same as one in HTML. There are ways around this, but we'll not worry about them now.

In the next lesson, we'll add some bells and whistles. Meanwhile, to end the page, add two more lines:

</body>
</html>

Strictly speaking, these aren't necessary. But they bring the ritual to a close, as it were.

You have now created the basic text or code for your page. Now you need to save it. Type ctrl-x -- that is, hold down the "control" key and hit "x" while doing so. When you are prompted to answer whether you want to save the file, hit "y" for "yes." Then hit RETURN to keep the name "index.html."

A Further Note on Saving Text It is generally good practice to save your work frequently, as most of us have learned the hard way. In PICO, the way to save without exiting the program is by typing ctrl-o.

Now you can look at your page. To do this, you need to open Netscape or Internet Explore and you need to type the address into the appropriate space at the top of the browswer window. For wam users, here's how to figure out your address. Take your username -- mine is "stairs" -- and insert it into the following in the obvious place:

http://www.wam.umd.edu/~username

In my case, it would be

http://www.wam.umd.edu/~stairs

This is if the page is called "index.html." If I call it, e.g., mypage.html, the web address will be

http://www.wam.umd.edu/~stairs/mypage.html

Use the appropriate address and you should be able to see your page.

-Allen Stairs
stairs@glue.umd.edu