Laurie Lamar's comments in red
26 October 1998
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 Wordpad as our text editor (SimpleText on Macs) 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 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!
You may have heard of programs like Adobe PageMill or Microsoft FrontPage. These programs are sometimes called "authoring tools"-- they will create HTML for you. But we won't be covering them today. Today, we'll be learning to code basic HTML by hand. This is important to know, even if you use an authoring tool-- because sometimes authoring tools make mistakes!
Okay, we've talked about HTML. Now let's look at some. 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 in between "greater than" and "less than" signs. Looking at the source code at various Web sites is a good way to learn about creating Web pages.
2.5. The web is a client-server system.
Explain how browser (e.g. Netscape) on the desktop (where students develop code today) is a client. To make pages accessible to the world, must upload page to server. Server sends pages to browser on the client. Browser decides how to display the HTML pages on the client screen.
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.
But planning is just Step 1. Obviously, to create web pages, you need to code them in HTML. That's Step 2, and that's what we'll start to learn today.
But that's not all! After you code the pages, you still have:
Step 3: upload to server (ftp)- not covered in this class
Step 4: test with various types of users- not covered in this class
Step 5: gather data about how well your site is meeting users' needs- not covered in this class
Step 6: repeat Steps 1 through 5!
4. Creating HTML Documents
HTML codes consist of tags that are mostly paired.
<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: [write the following on the white board]
<html>
<head>
<title>. . .</title>
</head>
<body>
</body>
</html>
Many tags contain attributes that change the features of the tag. For example: [write the following on the white board]
<body bgcolor="#FF0000"> creates a red background instead of the default color (typically gray or white). 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>
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: Have them open Wordpad--Programs>Accessories>Wordpad--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." If students intend to put pages onto BCN, mention that BCN has certain filenaming conventions, like xxxindex.htm.]
Additional Markup Tags
Other useful tags are
Lists
Unnumbered (bulleted) List -
<ul>. . .</ul> <li> required, </li> optional but preferredNumbered (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.)
[Exercise: Have students add a list and set off a paragraph as a blockquote, save the file, and view it in Netscape.]
5. Formatting 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 horizontal rule, 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)
This example shows pathnames, which we don't cover in this class.
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>
Note that you must include the http:// part. If you forget it, the link won't work properly.
[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.]
7. Adding Images
Images is what makes the World Wide Web a graphics-based rather than text-based medium. People love to see graphics, but be careful-- if your graphics filesizes are too big, your page will take a long time to load. 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="a red flower">
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 desktop using the right mouse button (Save image as . . ). Have them code the image into their Web page, save the file, click, and view it. Be sure to mention that copying images in this way is illegal unless the person who owns the image has explicitly given you permission to copy the image.]
8. Advanced tags (not part of this class)
There are lots of tags, and each HTML update (HTML 4.0 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!
When you are saving your HTML file, be sure to save it as a text file-- not a Word file or anything else. Also, be sure that the filename ends in .htm or .html -- even on a Mac. Finally, remember that the filenames for links are usually case-sensitive-- myfile.htm is different than MYfile.htm.
10. For More Information
Here are some resources:
A Beginner's Guide to HTML-- http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.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
| Last Update: , by the Volunteer Coordinator BCN Home Feedback About BCN Donate Search BCN Volunteer! |