MCS-170 Project 1: DIY Web Page

I strongly recommend removing the requirement that there be a formal lab report.

David Wolfe, Fall 2006

Project Task

We will investigate many of the concepts of computer science by creating web pages (written in the HTML markup language) and simple programs that run on web pages (written in the JavaScript 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.  

In lab

  1. 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 KWrite.

  2. 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 correctly.

  3. 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 italics.

  4. 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.

  5. 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 HTML tag. 

  6. Add a list of your favorite movies, books, CD's, or other category, to your page. See page 30 for help with list tags.

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

  8. 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 browser.


  9. 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 files.

    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 final step in creating your web page is to save (or copy) the file you have been working on to the sub-directory "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 have done this, use Firefox to test that your web page can be accessed correctly.  For example, if your user name is "jstudent" and your web page is named "home-page.html", you would test your web page by typing  "http://www.gac.edu/~jstudent/home-page.html" in the location bar of Firefox.

Project Report

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 grading sheet 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 your report:

On my honor, I pledge that I have not given, received, nor tolerated others' use of unauthorized aid in completing this work.

If you have time

  1. Be creative and put more images, tables, and lists on your page. 
Back to MCS 170 home page