CSC325 2010F Web and Databases

Warning! The Web site for this class is in beta form.

Laboratory: HTML Basics

Summary: In this laboratory you will explore some basic features of HTML.

Prerequisites: Familiarity with the MathLAN network. Familiarity with basic Linux commands. Ability to use an editor.

Preparation

a. Log in to your MathLAN workstation. (Of course, you've probably already done that if you're reading this laboratory.)

b. Open a terminal window into which you can type commands.

c. Open a Web browser so that you can explore the pages that you create.

Exercises

Exercise 1: Your Web Directory

As you might expect, a Web server needs to be able to distinguish between the files in the filesystem that are intended for provision on the World Wide Web and those that are intended only for internal use.

For our Web server, Apache, the default settings indicate that files in any user's ~/public_html directory are intended to be provided on the World Wide Web. Files in that directory can be found beneath the URL http://www.cs.grinnell.edu/~username/. For example, all my pages can be found beneath http://www.cs.grinnell.edu/~rebelsky/.

Note, however, that provision is determined by more than whether or not the directory exists. In addition, our Apache server pays attention to file permissions. Hence, a non-readable file in your public_html directory will not be made available on the World Wide Web.

a. If you do not already have a public_html directory, create one.

b. Point your Web browser to the corresponding URL.

c. In most cases, you will find a permission-denied message because our Web server pays attention to file permissions. Figure out the basic permissions that are necessary to make your files readable.

Note: You should make the permission changes on our Web server, www.cs.grinnell.edu, rather than on any other machine, because file system changes can take a bit of time to propagate from system to system.

Feel free to ask me for help if you have trouble figuring out what permissions are appropriate.

d. Create a subdirectory for this lab (e.g., public_html/CSC325/labs/html-basics) and make sure that it can be accessed through your Web browser.

Exercise 2: Your First File

a. Copy the file /home/rebelsky/share/web/sample.txt to your directory for this lab.

b. Point your Web browser to the directory for this lab. You should see a link to the file.

c. Click on that link.

d. Update the file and then reload the page to verify that changes to the file are available to the Web browser. (If they are not, hypothesize as to why not.)

e. Rename the file and determine (a) what happen if you try to reload the file from the browser at the old URL and (b) whether the directory listing updates appropriately.

Exercise 3: Your First HTML File

a. Copy the file /home/rebelsky/share/web/sample.html to your directory for this lab.

b. Load the page from your Web browser to get a sense of the appearance.

c. Open sample.html in the editor of your choice. Then, make some variations of the wording and perhaps add some formatting using the b, strong, em, i, tt, or code tags. After each chance, determine the effect of the change by reloading the page in your browser.

d. Edit the file further:

e. Change the <h1> and </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> ?

f. Click on the "W3C" logo for HTML 4.01 at the bottom of the page. This sends the page file to a standards verifier.

g. To gain a better understanding of formatting rules, try these experiments:

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

i. Perform some additional edits to this page, changing its look, content, and/or images. Be sure that your revision satisfies the W3C verifier.

 

History

Monday, 30 August 2010 [Samuel A. Rebelsky]

 

Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Mon Nov 29 09:06:17 2010.
The source to the document was last modified on Wed Sep 1 08:00:10 2010.
This document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CSC325/2010F/Labs/html-basics-lab.html.
A PDF version of this document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CSC325/2010F/Labs/html-basics-lab.pdf

You may wish to validate this document's HTML ; Valid CSS! ; Creative Commons License

Samuel A. Rebelsky, rebelsky@grinnell.edu

Copyright © 2010 Henry Walker and Samuel A. Rebelsky. Please contact us for permission to reuse materials.