Boulder Community Network
Basic HTML Class
Sample Script

Back to Training Center

Pre-Class Preparation

  1. Arrive at lab about 20-30 minutes before class.
  2. Boot up machines and overhead projectors.
  3. Bring up Netscape on all machines and maximize it so that it covers the
  4. entire screen.
  5. Bring the BCN homepage up on all browsers:
  6. Add the BCN homepage to the bookmarks on each browser.

Welcome to the Boulder Community Network's Basic HTML Instruction Class

[Instructor introduces him-/herself and asks assistants to introduce themselves.]

[Mention assumptions about basic computer and Internet skills they should have (familiar with mousing, typing, and the Internet).]

Participant Introductions and Skills

Please tell us

[Instructor should note personal interests and incorporate some into the course, if possible. Also, note the types of questions that they have and if the answers are not part of this class, try to address them one-on-one during free time. Avoid answering in front of the entire class technical questions that are not appropriate for this basic introduction.]

Class Outline

During today's class we will each learn how to design and construct our own home page with all the basic components of a web page, including images, links, and color, and learn where to go for additional information and instruction.

We will use Notepad as our text editor and Netscape as our browser. We will save our files to the Desktop for easy access.

[Have assistants pass out handouts, which consist of a list of standard tags and attributes and a resource list].

During the next 2-3 hours, we'll be covering the following information:

Assistance During This Orientation

Feel free to ask questions as we go along. Get the attention of one of the assistants if you need some extra help--that's what they are here for.

1. Community Networks and BCN

About BCN

BCN is a nonprofit organization separate from the university. But the university continues to provide us with invaluable support -- not the least of which is office space and use of these state-of-the-art classrooms maintained by continuing education. Boulder Community Network has been serving Boulder County since 1994. We have been funded by Federal grants and matching funds from the university and area organizations, as well as generous donations from people in the community like you.

BCN is a community network and one of several hundred community networks around the world -- most of them are in the United States. Community Networks are concerned with

For BCN public access translates to Internet public access computers at libraries, recreation centers, and municipal buildings in the county and public education about the Internet through classes like this one. BCN provides, through our volunteer matching program, computer-related consulting to nonprofits and schools for a nominal fee. So if you have ties to an organization that could use some help -- let us know.

2. HTML Overview

HTML--Hypertext Markup Language--is the language of the World Wide Web. It is no more than ASCII text, so it can be created on a simple text editing tool such as Notepad on a PC or Simple Text on a Mac. When you save your file, you give it and *.htm or *.html extension and you've got yourself a Web page!

If you go to the Netscape menubar and click on View>Source, you can see the underlying code for the BCN Home Page.

[Exercise--Have students view the source code for the BCN Home Page]

As you can see, the text is surrounded by tags inbetween carats. Looking at the source code at various Web sites is a good way to learn about creating Web pages.

3. Planning your Web site

Before jumping into HTML coding, you need to plan your Web site. Start by answering these questions:

If it's a large site, you'll want to create a storyboard that shows how all the pages will be linked together. You'll also want to establish a filename structure and heirarchy.

4. Creating HTML Documents

HTML codes consist of tags that are mostly paired.

<tag>. . . </tag>
Some are not:
<br>, <hr>, <p>, <img>
The minimal HTML document looks like this: [write the following on the white board]

<title>. . .</title>


Many tags contain attributes that change the features of the tag. For example: [write the following on the white board]
<body bgcolor="FFFFFF">
creates a white background instead of the default gray. The "FFFFFF" is called the "value" of the attribute.

Basic Markup Tags

Here are some basic tag: [write the following codes on the white board]

<title>This is the Title</title>

Titles are what show up at the top of the browser and in a bookmark. [Have students look at the top of the BCN page and the list of bookmarks.

<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>

Headings are default formatted styles and go to six levels. Each level is followed by a line space. For example, a first-level head is 24 points and bold.


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

[Exercise: Have them open Notepad--Programs>Accessories>Notepad--and write code using the basic tags, including a couple of headings and a couple of paragraphs. Have them save the file to the Desktop using the *.htm extension. Then have them double click on the file to open it in Netscape. Mention that the Home page is generally named "index.htm."]

Additional Markup Tags

Other useful tags are


Unnumbered (bulleted) List - <ul>. . .</ul>

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 about 5 spaces in from both sides.)

[Exercise: Have students add a list and set off a paragraph as a blockquote, save the file, and view it in Netscape.]

5. Formating text

Plain text is okay, but we're used to using bold and italics and other formats to make our text interesting and stand out. [write the following codes on the white board]

Bold - <b>. . .</b> (physical) or <strong>. . .<strong> (logical)
Italic - <i>. . .</i> (physical) or <em>. . .<em> (logical)

[Exercise: Have students make some words bold or italic.]

You can also alter the text by making it larger or smaller

<font size="-1">. . .</font> or <font size="2">. . .</font>

or adding color.

<font color="008080"> . . .</font> (teal)
<font color="FF0000"> . . .</font> (red)

[Exercise: Have students make some words smaller or larger or add color.]

Forced line break - <br>

Horizontal rule - <hr>

Note that these are not paired tags. And we can add attributes to them. To alter the horizontal rule length and width, do the following: [write the following codes on the white board]

<hr width="70%" size="5"> The "5" means 5 pixels high.

[Exercise: Have students code a line, then go back and change the width and height.]

6. Linking

Linking is the "hyper" in HTML. To link you use anchor tags <a > . . .</a>
Anchor tags must have attributes.

You can link to a place within the same document--a two-part process.

<a name="top">Level 1 Head</a> (anchor)
<a href="top">Go to Top of Page</a> (link)

HREF stands for Hypertext REFerence.

[Exercise: Have students create an anchor (name) tag at the top of their page, type Go to Top of Page at the bottom of their Web page, and create a link back to the top. Have them save the file, click, and view it.]

To other documents

<a href="filename.htm">Filename</a> (relative link)
<a href="mainfolder/myfolder/filename.htm">Filename</a> (absolute link)

To a specific place in another document

<a href="filename.htm#top">Go to Top of Page</a>

Note the pound sign before the filename.

To other Web sites (URLs [Uniform Resource Locators])

<a href="">Boulder Community Network</a>

[Exercise: Have students type Boulder Community Network onto their Web page and create a link to it. Then save the file, click, and view it.]

To an email address

<a href="mailto:">Brenda Ruth</a>

[Exercise: Have students type their name and email address (or someone else's) onto their Web page and create a "mailto:" link to it. Then save the file, click, and view it.]

7. Adding Images

Images is what makes the World Wide Web a graphics-based rather than text-based medium. Right now two image formats are recognized by most browsers: GIF (*gif) and JPEG (*.jpg). To add an image, you use the following tag and attribute:

<img SRC="image.gif" alt=image>

The "alt" attribute is arbitrary, but it identifies what the image is and is a courtesy to those who still use text-based browsers or turn their images off when browsing for faster downloading.

[Exercise: Have students save the BCN logo to the desktoop using the right mouse button (Save image as . . ). Have them code the image into their Web page, save the file, click, and view it.]

8. Advanced tags (not part of this class)

There are lots of tags, and each HTML update (HTML 3.2 is the current standard) makes more available. Some useful tags are

<table>. . .</table> to create tables and columns on a page.
<form>. . .</form> to process information.
<frame>. . .</frame> to create more than one window in a browser.


9. Troubleshooting

Avoid overlapping tags. Remember FILO--first in, last out. Tags must be nested, meaning

<b><i>bold and italic</i></b>

Check your links!

10. For More Information

Here are some resources:

A Beginner's Guide to HTML

11: Fill out comment form

[Walk them through the comment form, which is linked to the bottom of the BCN home page. SEND THE COMMENTS TO LINDA BARR (she's 5th on the list).]

Tell us what you liked about this HTML class and how we can improve it.

12: Thanks and Good-bye

Post Class Shutdown
  1. On each computer, use the "shut down" button under the "start button".
  2. When you get the screen message that it's o.k. to power down computers, be sure to turn off BOTH CPU and monitor.
  3. Double check all computers in room and make sure all "lights" are off on computers.
  4. Turn off lights.
  5. Make sure door locks behind you.
  6. Tell staff person in office that the lab is locked up.
  7. Debrief BCN staff person how the class went.