How to Write A Simple Web Page

Purpose

The purpose of this document is to provide an overview of how to write a web page. There are lots of ways to do this and lots of pages that tell you how. This page is intended to give you just the most basic information to get you started as quickly as possible. My favorite book for HTML is Visual Quickstart Guide HTML For the World Wide Web by Casto from PeachPit Press.

What is HTML

HTML was designed as a language that defines how to format text. Originally, it's purpose was simply to make academic information available to anyone in the world. It is very good at providing basic formatting for simple text. It is not quite so good at providing complex formatting (as provided by, say "Word").

A web page is just text. You can use any text editor (on Windows you will find notepad to work well; on *ix systems I like vi) or any word processor. If you use a word processor be sure to save it as text.

Web pages must have ".HTML" appended to the end of them to work correctly (strictly speaking you can use ".htm" but I think that's kind of obsolete now).

Once you've written some text, put some tags in and saved it out as text, you're ready to look at it in a browser. Start up your web browser, select "file" and "open" and open up the HTML document you just saved. It's that simple.

In general, HTML consists of a set of "tags" that describe how you want things to be displayed. A tag is a less than symbol (<) and a greater than symbol (>) with the tag information in the middle (for example "<BR>" is a tag). Usually you need to have two tags, a start tag and an end tag, for things to work correctly. In most cases, the end tag is like the start tag but with slash before the contents of the tag. For example, "<B>" starts bolding text while "</B> stops bolding text.

In HTML only the first space in any string of spaces has any effect and new lines (the character you get when you press the enter key) are ignored.

The easiest way to get started here is to simply show you the basic tags and let you play with them.

The Basic Formatting Tags

Lists

You can make lists (like I did in the last section) by doing either an ordered list tag (which means it will give you numbers) or an unordered list tag (which means it will give you bullets) and then starting each item in your list with a list element tag.

You can nest ordered and unordered lists (that is, a list can be an element of a list) as much as you want. This is good for outlines and complex lists. Just make sure you put the end tags in the right place or it will get all messed up.


Let me give you some examples:
Ordered List
  1. Turn left on Mayfair St.
  2. Turn right on Temple St.
  3. When you come to Milpitas Blvd, Turn left.
  4. My house is on the right.
Nested Ordered List
  1. Introduction
    1. Greet & thank the audience
    2. Tell them the purpose of this talk
    3. outline some of the key points
  2. Explain how HTML works
    1. Original purpose
    2. Text
    3. Tags
  3. Simple formatting
  4. Lists
  5. Tables
  6. Summary
Nested Unordered List

Tables

Tables are very useful but also fairly complex. A table is constructed out of a series of rows with each row consisting of one or more cells. There are a variety of tags you can put on a table but I'm just going to show you the basic table.


Here is an example. First I'll show the HTML then I'll show you a table.
<TABLE BORDER=1>
<TR>
<TD>Row 1 Cell 1</TD>
<TD>Row 1 Cell 2</TD>
<TD>Row 1 Cell 3</TD>
<TD>Row 1 Cell 4</TD></TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>Row 2 Cell 2</TD>
<TD>Row 2 Cell 3</TD>
<TD>Row 2 Cell 4</TD></TR>
<TR>
<TD>Row 3 Cell 1</TD>
<TD>Row 3 Cell 1</TD>
<TD>Row 3 Cell 1</TD>
<TD>Row 3 Cell 1</TD></TR>
</TABLE>
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 4
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 4
Row 3 Cell 1 Row 3 Cell 1 Row 3 Cell 1 Row 3 Cell 1

Links & Images

The cool thing about the web is that one page can link to another. In order to do that you need to have the URL. For example, Yahoo's URL is "http://www.yahoo.com". You can get the URL of almost any page on the web by looking at the address bar on your browser (exception: if it starts with "file://" that means you aren't looking at a page on the web but one on your computer; other people won't be able to see this so don't use that as the URL).

Correctness

Technically speaking, the web page that you would create using this information would not comply with the rules of HTML. Most browsers are very forgiving so it's not big deal, but I should tell you how to comply just so you'll know.

The Big Example

Web page was mostly constructed out of the tags explained herein. You can look at the HTML of this page by going to the VIEW menu item in your browser (on most browsers) and selecting "Page source" or "source". The three things you'll see that I haven't explained are &lt;, &gt; and &amp;. These are converted by a browser into a less than sign ("<"), a greater than sign (">") and an ampersand ("&"). I needed to use these special tags because when the browser sees those characters it interprets them in special ways (specifically, as the start of a tag, the end of a tag and the start of a special character). I guess I might as well show you a few others:

In Closing...

Obviously, there is more to HTML than this little bit. Not, MUCH more, actually, but more. I left out a few formatting tags (e.g. subscript, superscript, fonts) and didn't tell you about all the things you can do with tables (e.g. headers, spanning, nesting) or with images (e.g. width, height, alternate text) and I didn't mention color at all. And you can put images in the background of your page or the background of your table. But once you get the basics figured out you will be able to read a book and get all that stuff.

Good luck!