HTML: Web Page Design

Last update on 22-January-07

About this Lab

Before the lab, read section 0.1 Lab Overview and 0.2 Before the Lab.

This lab has two windows. This window contains the table of contents. The links below load in a second window. If a second window does not appear, check underneath the current window. As a first step, it is probably convenient to resize and rearrange the windows until you are comfortable with the layout.

Blue links provide background information and lessons, while sections that appear in red contain step by step instructions for creating your own html page. Each step contains a link to an example page, which will load in the second window, with which to compare your own page.

Contents

0. Introduction

0.1 Lab Overview

0.2 Before the Lab

0.3 HTML Overview

1. Getting Started

1.1 HTML Basics

1.2 Step 1: Set Up Your Page

2. Basic Formatting

2.1 Line Breaks

2.3 Horizontal Rule

2.4 Step 2: Organize Your Paragraphs

3. Character Formatting

3.1 Character Formatting Basics

3.2 The <FONT> Tag

3.3 Step 3: Add Character Formatting

4. Links

4.1 The <A> Tag

4.3 Step 4: Add Some Useful Links

5. Images

5.1 The <IMG> Tag

5.2 Linking Images

5.3 Image Alignment

5.4 Height & Width

5.5 Alternate Text

5.6 Step 5: Add Images

6. Color

6.1 <BODY> Modifiers

6.2 <FONT> Modifiers

6.3 Step 6: Add Color

7. Finishing Up Your Webpage

7.1 Using HTML From Other Files

7.2 Step 7: Add The Finishing Touches

8. Discussion and Deliverables

8.1 Mid-lab Discussion Questions

8.2 Step 8: Hand It In

8.3 Deliverables

9. Resources

9.2 Table Basics I

9.3 Table Basics II