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.

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.

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

If you are using Aptana Studio 3, you can publish your web page to the K College personal web page server within Aptana, or you can use another open source program, FileZilla, to publish your web page. If you are using Dreamweaver on a lab computer, you should use FileZilla.

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. The next step in this lab is to create a new file that will contain the CSS that determines the appearance of your page.

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 (https://moodle.kzoo.edu/mod/page/view.php?id=12541 ).