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.
Laboratory: Basics of HTML
CSC 105 - The Digital Age
For this lab, it will be convenient for you to be able to move easily
between viewing two different web pages: this one, and one you will
modify. This can be done by opening multiple "tabs" in your browser as
If all went well, this should have opened a second "tab" in your
browser. (Near the top of the window, there should be icons that look like
index-tabs. You can click on either of them to switch between viewing
multiple pages you have open.)
From the File menu of your web browser, select New Tab
- Return to this page to continue reading.
For this lab, you will use and modify a copy of the document found here:
To get started, follow these steps (but you may want to read all the
steps before you begin):
Copy the URL given above, so that you can paste it again momentarily.
Move to the new tab you just created in your browser.
Go to the url you just copied.
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 can view the sample document in your browser, select Page
Source from the View menu (or select
View Page Source from the menu obtained by right-clicking
anywhere on the web page). 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
HTML 4.01 Transitional.
This opening line informs your browser how to interpret the rest of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
In the lines that follow, formatting commands (also
called tags) are given in angle
brackets: < > . 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. Some tags are for
markup that has no beginning and end, such as drawing a horizontal
line, <hr />.
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, h1, h2,
|<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|
|<u>||begin underlining text|
|<hr />||draw a horizontal line|
|<blockquote>||indent the section, as in a quotation|
While these formatting directives explain many of the elements in
sample-html-page.html, the fourth line in the sample file
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 the ISO-8859-1 or
"Latin-1" character set that is suitable for most Western European
languages. (In contrast, "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
Beginner's guide to HTML, a very old but still accurate guide written by Marc Andreessen, co-author of the first web browser and founder of Netscape. There are also more in-depth tutorials]
Review again the html source
sample-html-page.html, to find the title tag. When
viewing the sample web page through your browser, can you find where the
page's "title" appears?
Again, return to the html source for the sample web page. Can you explain
how each tag within the body of the source leads to formatting
you see when the page is loaded into the browser?
Establishing an HTML Document That Is Accessible over the Web
The process for "publishing" an HTML document (i.e., making it available
for others to view on the World Wide Web) includes three basic components:
Unfortunately, the details for each of these steps vary considerably from
one computer system to another. The directions below will help you through
the process on the MathLAN. These instructions are typical of
computer systems using the Linux operating system.
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.
Web Directories and Necessary Permissions Settings
For Web access, a Linux Web server looks for files within a directory
called public_html, located in a user's home directory. To
be accessible by anyone over the World Wide Web, you must give everyone
permission to navigate through both your home directory and the
public_html directory, in order to access your html files.
In the Linux world, the relevant permissions (for these directories) are
encoded as the number 755, or the permisions string
The number can be interpreted as follows.
The first digit (7) asserts that the "user" (i.e., the person
who created the file) has full permissions: to read, write, and
"execute" the directory. (The "execute" permission, when applied
to a directory, allows someone to navigate through the
directory.) Remember the decimal number 7 is the binary
number 111, which corresponds to the
The second digit (5) gives others in the user's group permission
to read and execute the directory, but not to modify it. This is
the binary number 101, which is why the permissions
appear as r-x.
The third digit (5) specifies that everyone else in the world
has the same permissions as those in the user's group.
The following steps establish the needed directory and permissions.
First, create a subdirectory within your home directory called
public_html with the following command (except you should
username with your own username). Note that the character
between "public" and "html" must be an underscore.
Next, you must allow Web users to access (i.e., read and execute)
both your home directory and its public_html
subdirectory. Since Web users may be anywhere in the world, this
means that you must allow everyone this access. You can use the
two commands that follow to do this:
chmod 711 /home/username
chmod 755 /home/username/public_html
HTML Source Files and Necessary Permission Settings
While you could create a file for Web viewing in many ways, a simple way is
to begin with an existing Web document and then to edit it.
Follow these steps to copy the sample page to your account and make it
accessible to the World-Wide Web.
To copy the sample page to your public_html directory:
Issue the following command in your terminal window:
cp ~walker/public_html/fluency-book/labs/sample-html-page.html public_html/
From your home directory, move to the public_html directory
with the command:
Next make your copy of the file publicly readable: (Here, the
permissions setting 644 indicates that the owner of
the file can read and modify it, while everyone else can only
read it. We are not giving anyone permission to "execute" the
chmod 644 sample-html-page.html
If you still have the sample web page displayed in one of the tabs
of your browser, now would be a good time to close that tab and
re-open a new one. This will help avoid confusion in the next step,
where you will view the copy of the same page that is now located in
your own directory.
Now, to check that the sample web page can be viewed from your
directory, load it into your Web browser using the URL given
below. (Again, you should replace username with
your MathLAN username. In addition, the tilde character is
necessary; however, since the file is 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 the URL.)
If you have any trouble viewing the sample web page at this point,
please ask for help.
Editing an HTML File
Once the file is present with appropriate permissions, you can edit
its content with any text editor. (You should not edit it in a word
processor, however, since word processors will not store the file as a
text file without special effort on your part.) On our Linux system, a
simple editor is gedit.
To open the sample file in gedit use the following command:
gedit sample-html-page.html &
(The ampersand at the end of the command means that the terminal
window will still be available for you to type further commands
in, should you need to.)
Modify some text in the file (e.g., add or delete a sentence or
two), and then save the file. Then view the page in your web
browser to see your changes. (To ensure that you are viewing the
most recent changes, select Reload from the View
menu of the browser, type Ctrl-R in the browser window,
or click the Reload button, which looks like a circular
blue arrow near the top-left of the browser window.)
In this step you will make some additional changes to the web page
by adding the appropriate tags. After each
modification, reload the page in your browser to see the
revised version. (Note that, even if you do this correctly,
sometimes the change may not be available on the web server
immediately. If it appears that your page has not changed even
though you saved and refreshed, wait a few seconds and refresh
Divide the first paragraph in two by adding a paragraph tag:
Make a sentence bold by adding the appropriate open and close tags:
<b> and </b>.
Make the same sentence italic as well by adding the open and
close tags for italics around the tags for
bold: <i> and
(Note that when you use multiple tags like this, they should not
be interleaved. In other words, it is wrong to say
by </i></b>. Even if the web page
displays correctly for you when you do this, it might not
display correctly for someone using a different browser.)
Choose a different sentence and underline it
with: <u> and
Next you will experiment with "headers" in html. In the sample Web
page, the heading "Chapter 1" is a "level-one header". Find it in the
html source file, noting that it is set off by the
tags: <h1> and
Add another header line below it: <h1> This is my
new title </h1>. Reload the page to see what
Change the <h1> header near the top of the page
or <h4>. In each case, describe what happens.
- Do you see a progression in style or format from
<h1> to <h1> to <h2> to
Draw a horizontal line at the bottom of the web page. To do this,
you will want to place the <hr /> tag (for
"horizontal rule") just before the end of the "body" of the web
page. There is no closing tag that goes with <hr />.
Links to Other Web Pages
Within Web pages, it is common to include links to other documents.
Indeed, this is what "hypertext" is all about. The simplest way to
specify a link is through the use of an
To review how an 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 specifies the URL that will be linked to. The
words between the open and close tags (in this case
"a link to the Grinnell College web page") become the label for the
To clarify how anchors work, add the following line within the
body of your document sample-html-page.html :
<a href="http://www.grinnell.edu">a link to the Grinnell College web page</a>
Don't forget to save your file and reload it into your browser.
In your browser, follow the link you just created. (Of course, you
know the back button will return you to the page you are
working on. Did you know that the keystroke
combination alt-leftArrow will do the same thing?)
Replace the suggested text for the link label to see this in
action. Next alter the URL itself. What happens if the URL
contains a typographical error? (Give it a try, please.)
Add another link in your sample web page, this time to page of your
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. This is indicated by the /
before the closing bracket. The src attribute identifies the
file name and location for the source of the image; the alt
attribute specifies what text the browser should display if the image
is unavailable. Depending on the browser you are using, if you move
the mouse over the image, the alternate text may also be
displayed. It is good to always provide alternate text: some users
may have set their browsers to not display images; other users may
have special software that reads web pages to them, and it will read
the alternate text if any is provided.
To understand some basics of images, include the following lines
within the body of your sample-html-page.html
<img src="http://www.cs.grinnell.edu/~weinman/gfx/weinman-photo.jpg" alt="Jerod Weinman" />
Upon reloading the page in the browser, you will encounter a
picture of your instructor.
Remember that it is appropriate to resize images that you intend
to display on your web page, so that they are not too large (and so
that they do not take too long to download when others view your
You can also specify the exact dimensions at which the image will be
displayed using html tags, as shown below. Just be aware that this
approach, used alone, does nothing to speed up the download. It only
changes what the viewer sees, not the size of the actual image file.
Add the attribute
height=100 anywhere within
the img tag, and review what happens in the browser.
Change the height from 100 to 200, and review what happens.
Remove the height specification and insert instead
width=150 Again, review what happens in the
Now, without removing the width attribute, insert the following
and review what happens.
Describe what the height and width attributes do, alone and in
Next you will replace the author's picture with another image.
You should have some jpeg images from a previous laboratory in a
directory called 105. Check to see that you do with
ls -l ~/105
Copy the images to your public_html directory
with the following command. (Note that the asterisk indicates that
all files in the 105 directory that end with ".jpg" should be
cp ~/105/*.jpg ~/public_html/
Set the file permissions on these images such that they can be
viewed in a browser (i.e., such that anyone in the world can
"read" them) with the command:
chmod 644 ~/public_html/*.jpg
Now modify the image src attribute by replacing the
address of the current image with that of the new image. For
You will also want to modify the alt attribute of
the image tag appropriately. (Also, don't forget to
username to your own user name.)
Lists and Tables
If you have gotten this far and have additional time, surf to the
demo web page that we created in class. View its html source code to
review how lists are created in html, and then create a list on your
sample web page.
The list you have made, if you followed the example on the demo
Web page from class, is called an "un-ordered" list. To modify your
list to become an "ordered" list, change the
<ul> and </ul> tags that delimit
the list to:
<ol> and </ol>. Try
this to see how it affects the appearance of your list.
Now do a similar exercise with tables. Use the html source from
the demo web page to review how tables are made on the web, and
then create a table in your sample web page.
See if you can add rows to the table. You will find the tag pair
<tr> and </tr> useful for this.
Now see if you can add columns. The tags you need
are <td> and </td>.