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.
As a reader of this lab, you already have interacted with the World-Wide
Web in something like the follow sequence:
Within a Web browser (e.g., Netscape, Internet Explorer, or Mosaic), you
type an address (or URL or Uniform Resource Locator), such as
Your browser sends a request to the server for that address.
The server finds the file on a disk drive.
The server retrieves the file from the disk.
The server sends the file back to your browser.
Your browser interprets the file and displays it on your screen.
This sequence of events is illustrated in the following diagram.
As a simple example, consider the document
To get started understanding how this document is produced in the given
format, follow these steps:
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
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:
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
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,
|<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
[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.]
Review again the text source for
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.
creating/editing the document,
placing that document in a directory that can be found by a Web server, and
setting access permissions to allow Web users to view the document.
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
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
in the terminal window.
Next, you must allow Web users to access both your home directory and
its public_html subdirectory. To do this, open a terminal
give the command
chmod 755 ~
at the prompt. (The symbol ~ stands for your home directory.)
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.
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.
Load the file into your browser using the URL
Then use the Save option in your browser to store the file to
your public_html directory.
Next make your copy of this file public:
From your home directory, move to the appropriate directory with
Then share your copy of sample-html-page.html with the command:
chmod 755 sample-html-page.html
To check the file is available, load it into your Web browser by entering
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.
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 .
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.
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.
Change the <h1> header near the top of the page to
or <h4>. In each case, describe what happens.
Do you see any progression in style or format from
<h1> to <h2> to <h3> to
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
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.
To clarify how anchors work, add the following line
within the body of your document sample-html-page.html :
<a href="http://www.cs.grinnell.edu/~walker/fluency-book/labs/html-basics.shtml">a link to this lab</a>
Save your edited copy of sample-html-page.html and reload it into
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.)
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
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.
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.
To understand some basics of images, include the following lines within
the body of your sample-html-page.html
Upon reloading the page in the browser, you will encounter a picture of
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
Add the phrase
to the img tag, and review what happens in the browser.
Change the height from 100 to 200, and describe what happens.
Remove the height specification and insert instead
Again, review what happens in the browser,
Also try changing 150 to 100 or 250, and describe the result.
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
Copies of the file sample-html-page.html for steps 9, 17, and 19.
Explanations for steps 10, 12, 16, 18.
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