CS 199 Willamette University Spring, 2019
 
Programming in PHP, Databases with MySQL,
and Web Applications
 

Laboratory Exercise on Some Basics of HTML, Part 1

Summary: This laboratory exercise begins an introduction to documents which you routinely find on the World-Wide Web. Elements covered here include the general structure of HTML documents and some basic HTML tags.

Acknowledgment

Much of this lab is an edited version of a lab by the same name, developed to support the book, The Tao of Computing: A Down-to-earch Approach to Computer Fluency by Henry M. Walker, Jones and Bartlett Publishers, 2005—copyrighted by Henry M. Walker, 2004, 2005.

Introduction

As a reader of this lab, you already have interacted with the World-Wide Web in something like the follow sequence:
  1. Within a Web browser (e.g., Microsoft Edge, Chrome, Firefox, Safari), you type an address (or URL or Uniform Resource Locator), such as http://www.walker.cs.grinnell.edu/courses/199.sp19-willamette/labs/sample-html-page.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 an edited and abbreviated version of the CS 199 course syllabus: sample-html-page.html .

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

  1. Click on this link to view the abbreviated course syllabus in your browser.

  2. Once you have this sample document in your viewer, view the underlying document. Instructions when utilizing the Safari browser follow (steps for other browsers likely are similar, although details may differ):

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

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, HTML Basics, from the Austin Community College, Austin, Texas.

  1. Review again the text source for sample-html-page.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.

Establishing an HTML Document That Is Accessible over the Web

In order to make an HTML document accessible over the World Wide Web, you need to place the document in a directory that can be read by a Web server. For CS 199, WITS has created such a directory:

For Mac computers in Ford 202, follow these instructions:

  1. Click on the "Finder". When the word "Finder" appears at the top of the screen,

    1. Click on "Go"
    2. Under "Server address" type: 
      smb://cs-199.willamette.edu/www

      where you type your Willamette login name in place of yourusername.

    3. Click "Connect". If all goes well, a new Finder window will appear, and you will have accessed a directory where you can store files.
    4. Once "Connect" goes well, click the Plus sign "+", so the Server address becomes visible in the window marked, "Favorite Servers".

  2. With this connection established, load the following page into your browser: 

    
   http://www.walker.cs.grinnell.edu/courses/199.sp19-willamette/labs/sample-html-page.html

  3. Then use the Save option in your browser to store the file to your Desktop (or other convenient directory. Once saved, use your mouse to drag the file to the course's Web directory: smb://cs-199.willamette.edu/www . In saving the file, choose a file name that is unique to you (and your partner). This is a shared drive, so all students have access to all stored files. Don't clobber someone else's work by using a file name they have picked.

Editing a Web File

To create or edit a file, use TexTEdit to manage a document stored on your Desktop After your editing, save the document to your Desktop and copy the new version to smb://cs-199.willamette.edu/www.

  1. Edit sample-html-page.html, trying some variations of the wording and some of the formatting tags described above. For example, change the heading of the document, and insert a line at the end that indicates the dates when this file was created and last updated.

    After each modification, save the file and copy it to smb://cs-199.willamette.edu/www. Then use the reload button on your browser to check your revised version of sample-html-page.html .

  2. Edit the file further, leaving out the initial < html > tag. Reload and describe what happens. Then reinsert this tag, and try omitting some closing elements, reload, and describe what happens.

  3. At the start of the body of the Web page, add another header line <h2> This is my new title </h2>. Reload the page to see what happens.

  4. Change the <h1> header near the top of the page to <h2>, <h3>, or <h4>. In each case, describe what happens. Do you see any progression in style or format from <h1> to <h2> to <h3> to <h4> ?

  5. Change the second sentence in the introduction to a bold font by inserting the tag <b> before the start of the sentence and placing the closing tag </b> after the sentence.

  6. Insert a "horizontal rule" tag <hr> between the first and second paragraphs of the page, and describe what happens.



created 16 December 2003
revised 28 November 2006
updated and expanded 13-15 January 2019 		Valid HTML 4.01! Valid CSS!