Trainer's Outline for IP Training 1- Basic HTML

Handouts

  1. Topics covered

Instructions for Trainers

People learn HTML best when they can actually create some HTML documents during the session. If possible, get students to bring in text that they want to put onto CCN, so they have something real to work on.

If time does not permit any editing of HTML documents during the training session, give the students homework. There's nothing like doing it yourself to give you an "aha!" insight into how it works.

My approach is a lecture with an overhead projector and a connection to CCN. The students generally take notes and I teach the theory on the blackboard and demonstrate examples on the projector. The students then go home and practice their skills. It seems to work quite well. -CS

There is also a self study tutorial available for this course.

Time Limit: 1 hour

Suggested Outline

  1. Definition of HTML, explain that HTML is format for all documents on CCN. Introduce the idea that you are describing the structure of the document, not its appearance, and that the way the document is displayed depends on the browser you're using. (Compare Lynx [dial-in CCN] and Netscape [PAT at Hfx Library]).

  2. Start with simplest HTML document (Example 1-0). Introduce use of \ to view HTML.

  3. In the simplest HTML doc, point out title tags, level 1 heading, and paragraph tag. Define the term "tag". Define the term "element". Observe that paragraphs are automatically filled (i.e. extra spaces and tabs taken out, carriage returns inserted as necessary). Flip back and forth between two views to see result of title and h1 tags. Point out that title tags and heading tags come in pairs (e.g. <h1> </h1>) but paragraphs don't.

  4. Show them a simple tag, for example, the paragraph Example 1-1 tag.

  5. Give them a text file to edit (put it on the system somewhere or mail it to them). They will insert HTML markup. Start with title and level 1 heading, also paragraph tags.

  6. Example 1-2 HTML file should introduce line breaks, italics, boldface, horizontal rule. Introduce <em> and explain how it is less machine-dependent than <b> or <i>, but that some browsers don't recognize it. Try out these tags in the file they are editing.

  7. Example 1-3 HTML file should introduce headers.

  8. Example 1-4 HTML file should introduce unordered lists (simple and nested). Again try out these tags.

  9. Example 1-5 HTML file should introduce ordered lists. Try nesting, but keep in mind that browsers don't always number them correctly.

  10. Example 1-6 HTML file should introduce definition (description?) lists.

  11. Example 1-7. HTML document should introduce <pre> tag. Use a table to illustrate. If someone observes that, you could just put <pre> at beginning and </pre> at end of a text document which they're putting on the system, point out that it won't looks so great in Netscape (comes out in a typewriter-like font).

  12. Example 1-8 for special characters. Also have people check out their own profile, which should use < and >. Special characters: required because browsers recognize tags by use of < and >, so if you want to put < or > in your document, you need a special way to define them.

  13. Mention the formal structure of HTML documents: 
    <HTML>
   <HEAD>
     Title tag goes in this section
  </HEAD>
  <BODY>
     The other tags mentioned go into this section.
  </BODY>
</HTML>
    Note that this is good form. At the moment, browsers don't require it, and the example documents don't use it (to keep them short), but it is good to keep in mind that future versions of browsers may require it.

  14. Observe that HTML documents can be created with a plain text editor. Doesn't have to be on CCN, you can do it on your PC with your favourite editor, then upload it to your home directory. Note that if you're using a word processor, you should save as plain text, not as a word processor file. When working on HTML, it is useful to have a program to view it with; mention Netscape, Mosaic, MacWeb, Cello, and DosLynx as possible programs to use as viewers for testing. Also mention that there are programs for IBM and for Mac which will help you compose HTML; e.g. HTML Assistant for Windows, macros for use with WordPerfect, programs that will convert from RTF (produced by some word processors) to HTML, etc.

    This is a good resource page for above.

  15. Point them towards the Information Providers' Help Index (quickest way is to [go ip], then look for link to IP Help Index), which has links to some documentation on HTML.