Class 03: HTML, A Formal Markup Language

Held: Monday, 1 September 2003

Summary: Today we begin to ground our understanding of computer science with details of a language. In particular, we'll look at some of the procedures necessary for building documents for the World Wide Web.

Related Pages:

• EBoard.
• Lab: Getting Started in MathLAN.
• Reading: Sam's Quick Introduction to HTML.

Assignments

• Read Sam's quick HTML reference.

Notes

• For those of you wondering about the issue, the two sections of CSC151 follow somewhat different paths through the material. Our section starts a little bit slower (and covers HTML directly), but we sometimes move more quickly through other topics.
• Any general concerns with the class so far?
• Obligatory joke: Why do Grinnell College classes meet on labor day?
  • (a) Subtle social commentary: Faculty and students are not part of the working classes.
  • (b) Tradition: We've always met on labor day. Why stop now?
  • (c) Scheduling: It's too hard to schedule labs if we take labor day off.
  • (d) Plain old orneryness: We don't like faculty and students to have three-day weekends this early in the semester.

Overview:

• Lab: Getting Started in the MathLAN.
• About Markup Languages.
• Logical vs. Physical Markup.
• The Basics of HTML.
• A Sample HTML document.

Lab: Getting Started in the MathLAN

• Since much of this course is hands on, let's get started.
• See the accompanying laboratory handout.
• We'll spend a little time looking at the course web.

A Brief Introduction to HTML

• 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 describe data.
• We start with HTML because I think you need experience thinking about formal languages.

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
• I'm a strong proponent of logical markup. Why?
  • Different people have different expectations about the appearance of certain logical items
  • Physical appearance does not necessarily indicate the logical role, even when the author of a document may intend you to do so.
• Consider book titles. What should a book title look like in a formatted document?
• Consider italicized words. Why do you expect to see a word (or words) in italics?
• I also worry that too much emphasis on physical markup leads non-designers to commit unreadable documents.

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.
  • <br> 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.