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).]
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.]
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:
4. Creating HTML Documents
HTML codes consist of tags that are mostly paired.
<tag>. . . </tag><br>, <hr>, <p>, <img>Many tags contain attributes that change the features of the tag. For example: [write the following on the white board]
<html>
<head>
<title>. . .</title>
</head>
<body>
</body>
</html>
<body bgcolor="FFFFFF"> 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.
<p>
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
Lists
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="http://bcn.boulder.co.us">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 InformationHere 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