Lab 1: Creating a Course Web Page



This lab has two parts. The purpose of the first part is to create a course web page that will link to your projects. In the second part you will send your instructor an email to let her/him know where your page is, and to give them some information on your computer science background. If you get stuck, ask for help from the instructor or a TA.

These parts must be done in order! (Part 1 first, then Part 2.)

Part 1: Creating a Course Web Page

Create folders named CS107Web and CS107Labs (or something similar) in your directory on your own machine or on the M: drive of the lab computers. When you save your new web page, you will be saving it into the CS107Web folder. When you are saving labs from within JES, save them to the CS107Labs folder.

Creating Your Web Page

For this course, you will create a web page that represents a portfolio of your projects. The course staff will use this page to track your progress throughout the course, so it is important that you keep it up-to-date. Whether or not you already have a personal home page, you should create a separate page for this course.

You may choose to create your page entirely on your own, or you may start from this template and customize it to make it your own.

Two programs that support creating and editing web pages are Aptana Studio 3 and Dreamweaver. Both programs are available on the lab computers. Aptana Studio 3 is open source software, so you can also download it to your own computer. The following links provide basic information for getting started with these two programs.

We'll talk more about HTML (the language underlying web pages) throughout the course, but one thing that you should be aware of now is that different web-browsers may render the same HTML file in slightly different ways.

Adding Content to Your Page

Now add some content to your page, using appropriate HTML tags. If you want to see some examples of headings, paragraphs, lists, or tables, you can look at the source code for a simple HTML page or a simple table example (or any other HTML page) by going to the page and then either right-clicking or Control-clicking on the page and choosing View Page Source.

At a minimum your page must include:

You are also welcome to include any additional information that you choose:

At this point don't worry too much about the appearance of your page: font sizes, background colors etc. You'll get a chance to revisit those issues later in the lab using CSS.

TIP: Your Email Address on a Web Page

You can decide whether or not you want to put your email address on your web page. There are web crawlers that look for email addresses on web pages and then send spam to them. If you do put your email address on a web page, then you might want to disguise it in some way.

If your user id is k00ab01 then you don't want to list it as, but rather as k00ab01{at}kzoo{.}edu, or in some other format that is easy for a human to read, but doesn't look like an e-mail address to a crawler. You can also disguise it by including it as an image.

Publishing Your Web Page

Most students have found FileZilla (another open source program) an easy way to transfer files from their own computers (or a lab desktop computer) to the K College server for personal web pages. If you are using Dreamweaver on a lab computer, you should use FileZilla.

Part 2: Submitting via Moodle


Create a Word document with the following information:

What is a computer science autobiography?

Your autobiography should answer the following questions:

The autobiography doesn't need to be very long. A couple of short paragraphs will be fine.

Before submitting this document via Moodle, if you are not already a participant in the COMP107 course, you must join this class on Moodle (ask your instructor or a TA if you're not sure how to do this). To submit your document, click on the Link to Lab 1 and then browse to find the Word file you just made. Then click to upload the file. If you have any difficulties or questions with these, speak to your instructor or a TA.