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'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 go on to page 2.
