Getting Started with Structuring Pages

Available Files

The following files are available for download:

Download Exercise Files

Learn more about using exercise files.

Today, we will be assuming the role of a web designer for a new bicycle touring business, Get Out & Ride. You have been hired to assist in a restructuring of their web site. They have given you a basic page and it is your task to give the content meaningful structure and style. Today, we will focus on the Frequently Asked Questions page.

Let's take a look at our starting point.

Step1. Launch a web browser.

Step2. To begin opening a file, press:

Control key+o

NOTE: If you are using Internet Explorer, you will also have to Click the browse button.

You see the Open dialog box.

We need to specify the name and location of the file to open.

Setting the Location for Opening Your File

When the dialog box opens, it lists a default location from where the file will be opened. All of our exercise files are contained in the epclass folder, located on the desktop. We'll want to change our location to this folder.

We will start at the desktop, since our exercise file folder, epclass, is located there.

Step1. To move to the desktop,

Click

The current location is now set to the desktop. All of our exercise files are contained in the epclass folder, located on the desktop.

Step2. To open the epclass folder,

Double-Click the epclass folder icon

The epclass folder contents are now visible.

Note for Macintosh Users - On a Macintosh, the "From:" field is above the list of visible folders and files. To move to the desktop, press the key combination Command key+D. From there, you can move into the epclass folder.

We will need to open the GOAR FAQ subfolder of the epclass folder that contains all of the necessary documents.

Step3. To open the correct folder,

Double-Click the GOAR FAQ folder

There are two files in this folder: index.html and finished.html. We'll open both of them today, but let's start with index.html.

Step4. To open our starting point file for today,

Double-Click index.html

You see this page in your browser:

Get Out & Ride starting point file. Page is black and white with blue hyperlinks.

While the page is usable, readable, and well organized, there is little visual interest. Our goal, by the end of the workshop, is to create an attractive, functional, and meaningful FAQ page.

Step5. To open a new tab and begin browsing to a finalized version of our page, press:

Control key+T, Control key+O

Let's open finished.html now.

Step6. To open finished.html,

Double-Click finished.html

You see the finished product for today.

Finished Get Out & Ride page with internal hyperlinks, sidebar, header, and well-structured content section.

Take a moment to explore the finished product. Once you have finished, let's start by adding some more structure to the <head> of our document.

UITS IT Training Content Library

Getting Started with Structuring Pages

Available Files

Need help with the available files?

Setting the Location for Opening Your File