Lab 1: Creating a Course Web Page

 


Introduction

The purpose of this Lab is to gain hands-on practice with HTML. To do this, you will create a course web page. If you get stuck, ask for help from the instructor or a TA.

Create a Class Folder

Before you go any further, create a folder for your work in this class (e.g., comp105, comp107, or comp108). If you are working on a machine of your own, you might want to create this folder on the Desktop or in a Documents folder. If you are working on one of the College machines, be sure to create your folder on the M: drive, so that you have access to your work from any campus lab.

TIP: Web Page Filenames

It is best to avoid spaces and special characters in your folder and filenames for this course. For example, COMP Web Pages is not a good name for a web folder or page).

Getting Started with Brackets

There are many programs that support creating and editing web pages. We recommend an open source application called Brackets for this class; it is relatively easy to use, and it is available on the lab computers or to download to your own computer. (If you download it, your computer will choose where to install Brackets. It won't be in the folder you just created, though; that is for your own files you create for your assignments.)

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 k00ab01@kzoo.edu, 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.

We'll talk more about HTML (the language underlying web pages) throughout this 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.

Publishing An Initial Version of Your 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 server for personal web pages. (Some students have had problems downloading FileZilla directly from the organization's web site, but have been able to download it successfully from SourceForge.)

Adding A Style File

One of the key principles of modern web design is that content should be kept separate from presentation. HTML is used to organize page content and CSS determines the presentation -- the way the page actually looks. For example, you can specify the background color for your page in a style file like this:

body {
   background-color: yellow;
}

The minimal files that the Getting Started with Brackets document recommended downloading included a minimalCSS.css file that you can edit to change your document's background color or make any other style changes.

Once you have a CSS style file, you can load it into your page with a line like the following in the <head> section of your document:

    <link rel="STYLESHEET" type="text/css" href="minimalCSS.css">
The SimpleHTMLPage.html file includes the appropriate link command in the head section. (You can view the page source to see this.)

Wrap Up and Re-Publish

In the time you have remaining, modify your HTML and CSS to make your page as well organized and visually appealing as possible. (You do not have to keep your background yellow!) Keep in mind that we don't expect you to be an expert web designer at this point. Do the best you can with the time and the tools that you have available to you.

Before you leave, make sure that you upload the final version of your page and give your instructor the full name of your web page on the server, including your user name, the name you gave your web page directory, and the name of the actual web page (which might be index.html). Then make sure that your page is accessible from the "Student Web Pages" page in Moodle.