The Tao of Computing, Second Edition

Simple html

Summary: This page describes a general framework for documents which you routinely find on the World-Wide Web. In addition to the general structure of html documents, the lab reviews various html tags, including simple formatting, links, and images.

Introduction

As a reader of this page, you already have interacted with the World-Wide Web in something like the follow sequence:
  1. Within a Web browser (e.g., Netscape, Internet Explorer, or Mosaic), you type an address (or URL or Uniform Resource Locator), such as sample-html-page-1.html or sample-html-page-2.html.
  2. Your browser sends a request to the server for that address.
  3. The server finds the file on a disk drive.
  4. The server retrieves the file from the disk.
  5. The server sends the file back to your browser.
  6. Your browser interprets the file and displays it on your screen.

This sequence of events is illustrated in the following diagram.

Client-server interaction for the World-Wide Web - 1

HTML Format

As a simple example, consider the document sample-html-page-1.html or sample-html-page-2.html . (These pages are identical, except that page-1 specifies the use of the Western alphabet when displaying this page --- in a META tag at the top of the page source, and page-2 does not.)

To get started understanding how this document is produced in the given format, follow these steps:

  1. Click on one of these links, sample-html-page-1.html or sample-html-page-2.html, to view this document in your viewer. As you will see, this page contains the first two paragraphs of Chapter 1 of Walker, Henry M., The Tao of Computing: A Down-to-earth Approach to Computer Fluency, Second Edition, Jones and Bartlett, 2011.

  2. Once you have this sample document in your viewer, move to the View option in your browser, and select the Page Source or Source option. This will show you the original document sample-html-page.html, as sent by the server to your browser (and before the browser has done its formatting).

As you will see in the new source window, a typical html Web page has the following basic format:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    ...
</head>

<body>
   ...
</body>
</html>

According to the standards of the World Wide Web Consortium (W3C), the first line of the document must indicate the type of document and the specific version of html being used. In this case the document type (DOCTYPE) and the version follows the international standard for
   HTML 4.01 Transitional
This opening line informs your browser how to interpret the rest of the page.

In the lines that follow, formatting commands are listed in angle brackets: < > . Many commands apply for a section. For example, <head> marks the beginning of header information for the document, and </head> indicates the end of the same section. Similarly, <body> marks the beginning of the main body of the page, continuing through </body> near the end of the file.

The following table gives some common formatting commands, some of which are illustrated in this example:
Command Meaning
<html>begin an HTML document
<head>begin the header section
<title>begin a title
<body>begin the body of the document
<h1>begin a header1 section (headers can be h1, h2, h3, h4)
<center>center the material that follows
<p>begin a new paragraph
<br>break a line (begin a new line)
<b>begin bold type face
<i>begin italics type face
<hr>draw a horizontal line
<blockquote>display the section exactly as formatted

While these formatting directives explain many of the elements in sample-html-page.html, the third line requires some additional comment. In html, a meta instruction is used to supply information about the page itself to the browser. In this case, this full line indicates that characters on this page are encoded according to a charset=ISO-8859-1 or "Latin-1" system that is suitable for most Western European languages. ("ISO-8859-5" would indicate a Cyrillic alphabet, "SHIFT_JIS" would specify a Japanese encoding, and "EUC-JP" another Japanese encoding. Other choices also are possible.)

[For more information about HTML, you might try the primer A beginner's guide to HTML, currently maintained by Marty Blase of the National Center for Supercomputing Applications.]

  1. Review again the text source for sample-html-page-1.html or sample-html-page-2.html. Explain how each tag within the body of the source leads to material and formatting you see when the page is loaded into the browser.



This laboratory exercise coordinates with Chapter 11 of Walker, Henry M., The Tao of Computing: A Down-to-earth Approach to Computer Fluency, Second Edition, Jones and Bartlett, 2011.


created 16 December 2003
last revised 28 November 2006

Valid HTML 4.01! Valid CSS!