Class 03: HTML: A Formal Markup Language

Held: Wednesday, 22 January 2003

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

Related Pages:

• SamR's Quick Guide to HTML
• Lab: Getting Started in the MathLAN
• Lab: Writing Hypertexts for the World Wide Web

Due

• SamR's Quick HTML References.

Assignments

• Read Beginning Scheme (due Fri).
• Scan (but do not do) The DrScheme Lab (due Fri).
• Start Homework 1: A CS151 Web Site (due next Wed).

Notes:

• I'm still reading through your surveys. Expect responses by Friday.
• When you work on today's lab, you should plan to work with a partner.

Overview:

• About HTML.
• Logical vs. Physical Markup.
• Lab: Getting Started in the MathLAN.
• Lab: Writing Documents for the World Wide Web.

A Brief Introduction to HTML

We may not 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 describe 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
• 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.

Lab: Getting Started in the MathLAN

• Since much of this course is hands on, let's get started.
• See the accompanying laboratory handout.

HTML Lab

• Do the HTML lab.
  • Raise your hand if you have a question.
  • 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.
  • However, you will need to understand all of the lab in order to do the first homework assignment.

Reflection

What have you learned today?