MCS-170 Project 1: DIY Web Page
I strongly recommend removing the
requirement that there be a formal lab report.
David Wolfe, Fall 2006
We will investigate many of the concepts of computer science by
creating web pages (written in the HTML markup language) and
programming language). In this project, you will learn the basics
of HTML by creating a home page for yourself that utilizes many of the
HTML ideas from Chapter 2.
It is important to understand what is happening "under the hood" when
web pages are viewed on browsers. For this reason, and to achieve
the maximum flexibility for designing web pages, we will write HTML
code directly; we will not use web authoring software
which hides the fundamental HTML code from the user.
- We will create our home page using a simple text editor - the
KWrite editor. Launch KWrite by first clicking on the RedHat menu
(lower left corner of your screen) . Then go to the Accessories sub-menu, and choose
- As a first exercise, type in the HTML code necessary for creating
a page with your name centered at the top of the page in large letters
(use H1 tags) , followed by a horizontal line, followed by two
paragraphs (delimitted by the paragraph <p> tag). The first
paragraph should have simple biographical data and the second paragraph
should describe some of your
hobbies. After you are finished typing in the HTML code, save
your file as "home-page.html." Finally,
use Firefox to test your page; i.e., to see if the page displays
- Next, we will add some text formatting and justification. Add a
paragraph following the horizontal line that is right-justified and
includes your phone number and campus address. Have the phone
number and address be in two different colors, with the phone number in
- Add a section to the bottom of your page that contains at least
five hyperlinks to sites that you consider useful and/or
interesting. Make sure that you test the page to see that the
links work correctly.
- Add an image to your page. You may grab an image from the
web, or use a digital camera to create an image. The image must be a
jpeg or gif image. See page 28 in the text for help in using the image
- Add a list of your favorite movies, books, CD's, or other
category, to your page. See page 30 for help with list tags.
- Add a table to your page that describes your class schedule. The
table should have a row for each class and columns containing 1) course
name, 2) room location, and 3) meeting time.
- When writing HTML code, you will no doubt encounter mistakes and
typing errors. HTML code follows rigid
rules of structure and mistakes are
inevitable. It is important to recognize when errors occur.
For the following list of errors, try typing in the incorrect code and
then report on what happens when your try to view the page in a
- What happens when you mistype the opening HTML tag in a
such as "<CEMTER>"?
- What happens when you mistype a closing HTML tag in a
such as "</CEMTER>"?
- A common error in Web pages is accidentally typing an opening
where you intended to place a closing tag, e.g., <I>happy<I>.
What happens as a result of
type of error?
- Are HTML tags case-sensitive? That is, does it matter whether
tag such as <TITLE> is in all capital letters? Can a
be in all lower-case letters? Can it be a mixture of capital and
- To make your web page accessible to the outside world, you need
to place it in a location where the campus web server can locate it.
Fortunately, there is a universal, and easy, way to do this. In your
home directory, there is a sub-directory labelled "www-docs". This is
the default location for the Gustavus web server to search for web
For example, when you access a home page, such as, http://www.gac.edu/~sskulrat/index.html,
from a browser anywhere in the world, what happens is the following:
- The browser sends out a query to a special computer called a
"domain name-server" to locate the Gustavus web-server, which is named
- The browser establishes a connection with our web server and asks
it to locate the file ~sskulrat/index.html.
- The campus server automatically looks in the directory "www-docs"
under the "sskulrat" home directory for the file named "index.html."
- The Gustavus server sends the file to the off-campus browser,
which displays it.
The final step in creating your web
page is to save (or copy) the file you have been working on to the
"www-docs" that you can find in your home directory. Once you
have placed the file in the www-docs directory, you should make sure
the file is "readable" by others. To check this, click on the file's
icon and press the right mouse button. A menu will popup. Select the
"Properties" submenu to popup a dialog box. Click on the
"Permissions" tab to check the file's permissions. You should
make sure that all three buttons are set as "Can Read." Once you
this, use Firefox to test that your web page can be accessed
example, if your user name is "jstudent" and your web page is named
"home-page.html", you would test your web page
"http://www.gac.edu/~jstudent/home-page.html" in the location bar of
The project report should summarize the
work done for this lab. We have included a sample project report here
for you to use as a guide in
preparing your report. To get some sense of how this project
report will be graded, look at the
that we use.
Your report should have all HTML code for
your page attached as an appendix. Make sure that you consider the
College's Honor Policy and write the following in full and sign it on
On my honor, I pledge that I have not given, received, nor
others' use of unauthorized aid in completing this work.
If you have time
- Be creative and put more images, tables, and lists on your