NHS Designs
Web Design

HTML 08: Web page construction

You've certainly learned a lot already: tags, elements, links, paths...but it's all for nothing if you don't create some killer Web pages with that knowledge.

In this next set of lessons, you'll ramp up construction: you're going to take a Web page from conception to blueprint, pour the foundation, build it, and even put on some finishing touches.


From Journal to Web Site

Tony and his Segway


Tony's journal:

Tony's journal
Click for a larger image.

Make sure you read through Tony's adventures - they'll come in handy through this lesson.

Tony's got his hands full driving across the United States on his Segway. Why don't you give him a hand and create a Web page for him?

Here's what you are going to do:

  • 1. Rough Sketch: First, you're going to create a rough sketch of the journal that is the basis for your page design.
  • 2. Outline: Next, you'll use the basic building blocks of HTML (<h1>, <h2>, <h3>, <p> and so on) to translate your sketch into an outline (or "blueprint") for the HTML page.
  • 3. Basic HTML: Once you have the outline, then you're going to translate it into real HTML.
  • 4. Enhanced HTML: Finally, with the basic page done, you'll add some enhancements and meet some new HTML elements in future lessons.


Exercise 1

Take a close look at Tony's journal above and think about how you'd present the same information on a Web page.

Draw a picture of that page on a sheet of paper. No need to get too fancy, you're just creating a rough sketch. Assume all his journal entries will be on one page, blog-style.

Things to think about:

  • Think in terms of large structural elements: headings, paragraphs, images, and so on. Draw a rectangle for each structural element.
  • Are there ways his journal might be changed to be more appropriate for the Web?


Do this exercise before you move on.


The Rough Design Sketch

Tony's journal looks a lot like a Web page: all we need to do to create the design sketch is get all his entries on one page and map out the general organization. It looks like, for each day that Tony creates an entry, he has a date heading, an optional picture, and a description of what happened that day. Let's look at the sketch...

design sketch
Click for a larger image.


From a Sketch to an Outline

Now that you've got a sketch of the page, you can take each section and draw something that looks more like an outline or blueprint for the HTML page.

All you need to do now is figure out which HTML element maps to each content area.

exercise: web page construction




Turn in your sketch/outline on a sheet of paper, along with these short answers.

1. What are the four main steps we are using in order to translate Tony's journal into a Web page?

2. Why is it a good idea to create a rough sketch and an outline before coding the HTML in Notepad?


Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com