Class 03: HTML: A Formal Markup Language

Held Tuesday, August 29, 2000

Summary

Today we begind to ground our understanding of dealing with the computer with hands-on practice. In particular, we'll look at some of the procedures necessary for building documents for the World Wide Web.

Notes

• Assignment:
  • Read Beginning Scheme (available online)
• We still don't have the new graphics cards. If it's any comfort, the machine in my office has the same problems.
• I'll have normal office hours today (1:30 to 3ish). However, I already have someone who has signed up for about 1:30 to 1:45.
• Reminder: Grinnell classes meet on labor day.

Overview

• A brief introduction to HTML
• Lab
  • Preparation
  • Lab activities
  • Reflection

A Brief Introduction to HTML

We won't cover this section explicitly, but it gives you some things to think about.

• HTML is the markup language used for the World Wide Web.
• Unlike a programming language, which describes algorithms, HTML is simply a markup language. Markup languages descrie data.

Representing Computerized Documents

• Some of the same questions come up as you consider how the computer might represent any document. For example, a typical word-processed document will have different margins, font, and justification at different parts of the document.
  • Should a human be able to tell what's going on; or can it all be ``computer gibberish''?
• What do you have to represent in a document? Nearly everything:
  • The content of the document
  • Something about each piece of the document
  • General document characteristics (e.g., page margins)
  • ...
• We say that a language for representing documents includes ``mark up'' symbols that indicate these characteristics.

Logical vs. Physical Markup

• In considering markup, there are two general ``philosophies'' for what you mark: logical markup and physical markup.
• In logical markup, you indicate the role of each piece of text. For example, you might indicate that
  • ``This is a paragraph''
  • ``This is an important word or phrase''
  • ``This is a quotation''
  • ``This is the title of a book''
  • ``This is a top-level section heading in a paper''
• In physical markup, you indicate the appearance of each piece of text. For example, you might indicate that
  • ``This should appear in Times Bold 12pt''
  • ``This should appear in a box 2 inches each side that is placed 3/4 inch from the top margin and 5 inches from the right margin''

HTML Basics

• HTML is a simple markup language created for the World-Wide Web.
• HTML is intended to be human readable.
  • Some would dispute that claim.
• HTML is a particular form of SGML, the Standard Generalized Markup Language
  • SGML was designed by a number of scholars for representing electronic manuscripts.
  • Full SGML can even describe layout of pages so that one can precisely represent documents like the Talmud.
• In HTML, parts of the document are surrounded by tags.
  • Tags give information about those parts of the document.
  • Each tag begins with a less-than sign and ends with a greater-than sign.
  • End tags have a slash after the less-than sign.
• For example,
  • You begin a paragraph with <P> and end a paragraph with </P>.
  • You begin an important word or phrase with <EM> and end it with </EM>.
  • You begin a list of items with <UL> and end it with </UL>.
  • You begin an item in that list with <LI> and end it with </LI>.
  • You begin a numbered list with <OL> and end it with </OL>.
  • You begin a piece of text in a ``typewriter font'' with <TT> and end it with </TT>.
• Some tags do not require end tags. Some even disallow end tags. For example,
  • <BR> is a line break. Since there's not text that you're marking, it needs no end tag.
  • <HR> is a horizontal rule.
  • The <LI> tag does not need an end tag (since the next <LI> or the ending <UL> obviously ends it).
• Some tags permit you to enter parameters: more information about how the text should be displayed. For example, you can write
  • <P align="right"> for right-justified text
  • <HR width="75%"> for a less-wide rule
  • <FONT face="Helvetica" color="Red"> for red, Helvetica text.

Lab

Preparation

Are there questions on the lab?

Lab

Do the HTML lab. Raise your question if you have a hand. If you don't finish it all today, try to work on it tonight (or later).

Complete understanding of this lab is not required to progress to the next lab.

Reflection

What have you learned today?