CSC 105 Grinnell College Spring, 2005
 
An Algorithmic and Social Overview of Computer Science
 

Laboratory Exercise on Some Basics of html

Summary: This laboratory exercise introduces 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 lab, 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 http://www.walker.cs.grinnell.edu/fluency-book/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 the document 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 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, Jones and Bartlett, 2005.

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

The process for using the World Wide Web for retrieving an HTML document includes three basic components:

Unfortunately, the details for each of these steps vary considerably from one computer system to another. In some cases, you may create and edit the document on one system and use ftp to copy that file to an appropriate directory on a Web server. In other cases, you can set any directory and file, so that it can be accessible. In still other cases, Web accessible directories and files must be placed within a specified structure and then made explicitly visible.

Directories and Permissions for Files on a Linux System

The following instructions are typical of files on a computer system using the Linux operating system.

Web Directories and Setting Permissions

For Web access, a Linux Web server looks for files within a directory called public_html, located in a user's subdirectory. Further, to be accessible by anyone over the World Wide Web, you must give permission to everyone to look at your home directory, the public_html directory, and the relevant file(s).

In the Linux world, the relevant file permissions are encoded as the number 755. The user -- you -- has full permission (7) for reading the file, changing the file, and executing the file. Others in your group (e.g., other students) have limited permission (5) to read and execute the file, but not to change it. Everyone else has the same limited permissions as your group (encoded as the number 5).

The following steps establish the needed directory and specify needed permissions as 755. You should issue the following commands in a terminal window.

  1. Any materials related to the World Wide Web belong in a subdirectory of your home directory named public_html. If you have no such subdirectory, create one by giving the command 
    mkdir ~/public_html

    in the terminal window.

  2. Next, you must allow Web users to access both your home directory and its public_html subdirectory. To do this, open a terminal window and
    1. give the command 
      chmod 755 ~

      at the prompt. (The symbol ~ stands for your home directory.)

    2. Make the subdirectory accessible too with the command 
      chmod 755 ~/public_html

Creating a File

While you could create a file for Web viewing in many ways, a simple way to start begin with an existing Web document and then to edit it. Follow these steps to copy this sample lab to your account in a way that will be accessible to the World-Wide Web.

  1. Copy the sample program to your public_html directory in two steps: First store our sample file sample-html-page.html into your public_html directory.

    1. Load the file into your browser using the URL 
      
   http://www.walker.cs.grinnell.edu/fluency-book/labs/sample-html-page.html
    2. Then use the Save option in your browser to store the file to your public_html directory.

  2. Next make your copy of this file public:

    1. From your home directory, move to the appropriate directory with the command: 
      cd public_html
    2. Then share your copy of sample-html-page.html with the command: 
      chmod 755 sample-html-page.html

  3. To check the file is available, load it into your Web browser by entering the URL: 

    http://yourWebserver/~yourusername/sample-html-page.html
    Note that when you specify a URL on a Linux system, the Web server automatically looks in your public_html directory, so you do not need to include that directory name in what you type.

Editing a Web File

Once the file is present with appropriate permissions, you can edit its content with any editor. On a Linux system, the most common plain-text editors are emacs and vi.

  1. Edit this file with emacs, 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, 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> ?

Links and References

Within Web pages, it is common to include links to other documents. The simplest approach is to specify a link through the use of an anchor tag.

  1. To clarify how anchors work, add the following line within the body of your document sample-html-page.html : 
         <a href="http://www.walker.cs.grinnell.edu/fluency-book/labs/html-basics.shtml">a link to this lab</a>

  2. Save your edited copy of sample-html-page.html and reload it into your browser.

  3. In the browser page, find the words a link to this lab, and click on this phrase. The browser should jump to this new page. (Use the back button to return to your sample-html-page.html.)

To review how this anchor works, the opening tag begins with the letter a, and the end of the anchor has the standard format </a>. Within the opening tag, the reference href indicates that you will specify a URL. The words between the tags (in this case a link to this lab) identify the material the user will clink on in the browser.

  1. Replace the suggested text or URL with something else, and check how the browser response. What happens if the URL contains a typographical error? What happens if the URL is the same as your sample-html-page.html document?

Images within Web Pages

Just as an anchor tag allows links to other Web pages, an image tag allows pictures to be embedded within a Web document.

  1. To understand some basics of images, include the following lines within the body of your sample-html-page.html 
       <img src="http://www.walker.cs.grinnell.edu/Walker-photo.gif"
   alt="Henry Walker">
    Upon reloading the page in the browser, you will encounter a picture of this author.

Note that this image tag does not have a corresponding closing tag. Within the img tag, the src part identifies the file name and location for the source of the image; the alt part specifies what text the browser should display if the image is unavailable. If you move the mouse over this image, this alternate text may also be displayed by your browser.

  1. Sometimes within a Web page, you may want to specify the size of an image. This can be done with a height or width designation within the img tag.

    1. Add the phrase 
         height=100
      to the img tag, and review what happens in the browser.
    2. Change the height from 100 to 200, and describe what happens.
    3. Remove the height specification and insert instead 
         width=150
      Again, review what happens in the browser,
      Also try changing 150 to 100 or 250, and describe the result.

  2. Replace the author's picture by another image. In case you are looking for interesting pictures, you might want to browse the U. S. Government's Digital Library at http://www.firstgov.gov/Topics/Graphics.shtml

Work To Be Turned In



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

created 16 December 2003
last revised 28 November 2006

 Valid HTML 4.01! Valid CSS!