Become a "Friend of BCN"

Boulder Community Network
Creating HTML Documents

HTML codes consist of tags that are mostly paired. A tag is a string enclosed in angle brackets.

<tag>some text goes here</tag>
Some are not:

<br>, <hr>, <img>

Some can optionally have end-tags:

<p></p>, <li></li>

The minimal HTML document looks like this:

<html>
<head>
<title>. . .</title>
</head>
<body>

</body>
</html>

Many tags contain attributes that change the features of the tag. For example:
<body bgcolor="#FF0000">
creates a red background instead of the default color. The "#FF0000" is called the "value" of the attribute.

Allen Johnson (a BCN volunteer) has developed this interactive color picker

Basic Markup Tags

Here are some basic tags:

<title>This is the Title</title>

Titles are what show up at the top of the browser and in a bookmark.

<body>This is the body of your Web page.</body>

The body is the content of your Web page.

<h1>Level 1 Head</h1>
<h2>Level 2 Head</h2>
<h3>Level 3 Head</h3>

A Head 1 will usually be the biggest and boldest. However, the exact way that headings look is determined by the browser. Netscape might format headings a little differently than, say Internet Explorer. Usually, though, a header is followed by a line space.

<p>

Paragraphs usually add an extra line space at the end of a paragraph.

Exercise 1

Create an HTML file with some heading and some paragraphs

note that internal spacing is ignored, and also the capitalization of tags is irrelevant <li><Li><LI> all work the same

answer

Additional Markup Tags

Other useful tags are

Comments
< !--This is a comment -->

Lists

Unnumbered (bulleted) List - <ul>. . .</ul> <li> required, </li> optional but preferred

Numbered (ordered) Lists - <ol>. . .</ol>

Definition Lists - <dl><dt>Term</dt> <dd>Definition</dd></dl> (Indents the definition part.)

Nested Lists - <ul><ul>. . .</ul></ul>

Preformatted Text - <pre>. . .</pre> (Lets you determine spacing between words and lines without codes and displays the text in a fixed-width font.)

Blockquote - <blockquote>. . .</blockquote> (Indents text in from both sides. Exact spacing of the indent is determined by the browser.)

An example of lists

  1. a numbered list
  2. list elements are <li>
  3. an unnumbered list
  4. a definition list
    List elements have two pieces - this is a Definition Term <dt>
    and this is a Definition Data <dd>
    Term
    data

Exercise 2

Add a list of quotations - use<ul> and <blockquote>.

answer

Next

Boulder Community Network

Copyright © Pierre Malraison All rights reserved.