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.

Three programs that support creating and editing web pages are Aptana Studio 3, Brackets, and Dreamweaver. At least one of these should be available on the lab computers. Aptana Studio 3 and Brackets are open source software, so you can download them to your own computer. The following links provide basic information for getting started with these programs.

(There are other programs for creating web pages as well, but we don't have "Getting Started" documents available for them.)

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. If you are using Aptana Studio 3, you can also publish your web page to the K College personal web page server within Aptana, although this isn't always easy to use.

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 next step in this lab is to use a CSS style file to determine 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 ).