| CSC 325 | Grinnell College | Fall, 2008 |
| Databases and Web Application Design | ||
This laboratory exercise guides the reader through the following basic steps that give rise to individual Web pages on the CS/Math/Stat network.
The lab also suggests several experiments regarding how browsers display data with elements missing HTML elements.
Several word-processing packages provide a capability to create Web pages using an option to "Save as a Web page". Similarly, word-processing packages and editors allow the revision of Web pages. However, experience suggests that many (most?) word-processing packages and editors create Web pages that do not conform to the standards of the World Wide Web Consortium. Experience over the years on several Web-based projects suggests use of these packages regularly leads to long-term, subtle problems that can take hours or days to fix.
Since this course seeks to provide an understanding of how to produce materials that work on multiple browsers on various machines and operating systems, the use of word-processing packages to create Web pages is prohibited for this lab and throughout this course. Similarly, when editing you should work directly with content and html — you must not use an editor that hides html tags and format.
As we start to study and build Web pages on the CS/Math/Stat network, we must organize files to allow appropriate access. Access to files on the departmental network is motivated by several basic principles:
On the CS/Math/Stat network, these principles lead to the following structure:
The first part of this lab asks you to create a public_html directory and set permissions so that files within this directory can be accessed through the Web. (Of course, you can skip these steps if you already have created a public_html within your home directory.)
Open a terminal window and give the command
chmod 755 ~
at the prompt. (The symbol ~ stands for your home directory.)
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. This directory, too, must be accessible; give the command
chmod 755 ~/public_html
to make it so.
We now create an html document and experiment with it. As a simple example, consider the document sample.html.
For reference, the original file sample.html is shown below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample HTML page</title>
</head>
<body>
<h1>A Sample HTML Page</h1>
<p>
In a Web page dated February, 2002,
<a href="http://www.grinnell.edu/offices/president/missionstatement/">
the College's Web site</a> gives the following statement
concerning its Mission Statement:
</p>
<blockquote>
When Grinnell College framed its charter in the Iowa Territory of the
United States in 1846, it set forth a mission to educate its students
"for the different professions and for the honorable discharge of the
duties of life." The College pursues that mission by educating young
men and women in the liberal arts through free inquiry and the open
exchange of ideas. As a teaching and learning community, the College
holds that knowledge is a good to be pursued both for its own sake and
for the intellectual, moral, and physical well-being of individuals
and of society at large. The College exists to provide a lively
academic community of students and teachers of high scholarly
qualifications from diverse social and cultural circumstances. The
College aims to graduate women and men who can think clearly, who can
speak and write persuasively and even eloquently, who can evaluate
critically both their own and others' ideas, who can acquire new
knowledge, and who are prepared in life and work to use their
knowledge and their abilities to serve the common good.
</blockquote>
<p>
The following picture appears on the opening page of the <a
href="http://www.cs.grinnell.edu/~walker/csdept-visitors/visitor-home.xhtml">
the Department Overview</a> from this department's General Information
page for visitors and prospective students.
</p>
<img src="/~walker/csdept-visitors/photos/outside-1.jpg"
alt="Grinnell's Noyce Science Center">
<br><br>
<a href="http://validator.w3.org/check/referer">
<img src="/~walker/valid-html401-blue.png"
border="0"
alt="Valid HTML 4.01 Transitional"></a>
<br>
Created: 12 August 2008 by
<a href="http://www.cs.grinnell.edu/~walker">Henry M. Walker</a>
<br>
Last revised: 12 August 2008
</body>
</html>
In analyzing this material, all formatting commands are listed in angle brackets: < > . Further, the first and fourth lines are special:
Beyond these two special lines, many commands apply for a section. For example, <b> indicates the beginning of a section which should be printed in a bold type face, and </b> indicates the end of the same section. As in this example, in many cases, the formatting commands at the start and at the end of a section have the same name, but an extra slash / is added to the end marker.
The following table gives some main formatting commands 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 |
| <h3> | begin a header3 section (headers can be h1, h2, h3, h4) |
| <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 |
Additional commands for images (img tags) and for links (anchor tags or a tags) are discussed later in this lab.
[For more information about HTML, you should consult the readings for this lab.]
The next several steps involve creating and editing sample.html within your public_html directory.
Copy sample.html to your account, set its permissions to allow Web access, and prepare to edit the file.
Use this link to view this document within a new window in your viewer.
Save the document as file sample.html in your public_html directory.
In a terminal window, set the permissions of file sample.html to 755, so that it can be views over the Web.
Display your new copy of sample.html in your browser, checking that it loads properly. The new URL will be:
http://www.cs.grinnell.edu/~yourusername/sample.html
Prepare to edit your copy of file sample.html using a text editor, such as emacs or vi.
Compare the sample.html file with what the browser displayed when you first accessed this page. Note how the browser interprets the formatting instructions in displaying the material.
Using an editor, try some variations of the wording and trying some of the formatting tags described above. At the very least, change the title at the top of the page, add your username and file name at the bottom, and update the date created and last revised.
After each modification, use the reload button on your browser to check your revised version of sample.html .
Edit the file further:
Change the <h1> to <h2> or <h3> or <h4>, and describe what happens in each case. Do you see any progression in style or format from <h1> to <h2> to <h3> to <h4> ?
Click on the "W3C" logo for HTML 4.01 at the bottom of the page.
To gain a better understanding of formatting rules, try these experiments:
Expand the a (anchor) tag at the end of the page, by adding the phrase target=author. What happens if you click on this revised link?
Perform some additional edits to this page, changing its look, content, and/or images. Be sure that your revision satisfies the W3C verifier.
This document is available on the World Wide Web as
http://www.cs.grinnell.edu/~walker/courses/325.fa08/lab-static-pages.shtml
|
created 11 August 2008 last revised 12 August 2008 |
|
| For more information, please contact Henry M. Walker at walker@cs.grinnell.edu. |