HTML Basics

Contents:
HTML is a simple markup language. Here is a simple HTML document:
/------
         <HTML>
         <BODY>
         Hello World!
         </BODY>
         </HTML>
\------
It looks like this.


Tags

A tag describes something about the document.
Tags are enclosed in angle brackets, <like this>.

Tags come in two varieties: single tags (aka empty tags) and pairs of tags. The difference is that a single tag occurs on its own, while a pair of tags must have an open and closing part. The closing part is just like the opening except that it is prefixed by a slash.

Single tags are used for separators or for inserting a single item. They do not have a matching closing tag. For example, some common single tags are:

All the tags in the first example are pairs.

Some other pair tags are: We also have a complete list of HTML tags. Note that pairs may be nested, but you must nest them properly:
/------
    <B>This is <I>important</I> stuff</B> you need to know.
\------
/======
    This is important stuff you need to know.
\======


Formatting

All formatting is done by writing HTML tags in the document. The viewer ignores all the normal text formatting like line breaks and text breaks and instead uses the tags to mark-up how the document should look.

For example: all line breaks are treated as a space, so having your document formatted like this:

/------
     This is one paragraph.  It contains all sorts of information.
     We want to keep it separate from the other paragraph.

     This is another paragraph.  It is <EM>totally</EM>
     unrelated to the first.
\------
will look like this when viewed over the Web:
/======
This is one paragraph. It contains all sorts of information. We want to keep it separate from the other paragraph. This is another paragraph. It is totally unrelated to the first.
\======

Not pretty is it? - So we use paragraph marks <P> to separate paragraphs of text. The above then becomes:

/------
     This is one paragraph.  It contains all sorts of information.
     We want to keep it separate from the other paragraph.
     <P>
     This is another paragraph.  It is <EM>totally</EM>
     unrelated to the first.
\------
which looks like you would expect:
/======
This is one paragraph. It contains all sorts of information. We want to keep it separate from the other paragraph.

This is another paragraph. It is totally unrelated to the first.

\======

Line Breaks and Rules

One problem is that paragraph marks tend to insert extra space between the lines to indicate the paragraph break. This is a pain when writing addresses and so on, so you can use line breaks instead:
/------
       Fred Foonly <BR>
       <I>Aventura Ave 23<BR>
       Palo Alto, CA.</I>
\------
which comes out of the viewer looking like this:

/======
Fred Foonly
Aventura Ave 23
Palo Alto, CA.
\======

You can put a horizontal rule or line break wherever you could put a paragraph break.

/------
       Thus endeth the story<HR><B>Credits</B><P>
       The evil jester was played by ....
\------

/======
Thus endeth the story
Credits

The evil jester was played by ....

\======

Stanford CS dept PCD grp Leland Comment UP BACK
1994 © Christian mogensen@cs.stanford.edu