Frontend Engineering, Volume I

HTML Chapter 5 Companion

© 2012, Martin Rinehart

History—HTML 1, 2, 3

Website—Changes

Tools—Forums

Outlines

We used to be brave, bold, type-it-all-in-at-once, nesters of lists when it was time to create outlines. Not any more. We've become, timid, one-step-at-a-time outline builders. We get the job done much faster than before. We'll show you the timid (and faster) approach.

We begin by typing the outline, so it looks like an outline, minus the numbering:

Entrees
Desserts
    Cake
    Pie
        Apple
        Blueberry
        Cherry

Then we type the outermost level, as an ordered list:

<ol type='I'>
    <li>Entrees</li>
    <li>Desserts
    </li>
</ol>

Note how the <li> and the </li> are separated, ready for another level. The above comes out looking like this:

1. Entrees
2. Desserts

Next, we add the first level of detail, like this:

<ol type='I'>
    <li>Entrees</li>
    <li>Desserts
        <ol type='A'>
            <li>Cake</li>
            <li>Pie
            </li>
        </ol>
    </li>
</ol>

That will come out looking like this:

1. Entrees
2. Desserts
   1. Cake
   2. Pie

(Confession: this lesson is idealized. These would come out right if we didn't make misteaks mistakes. We make mistakes. We fix them. One step at a time and it's always easy to fix them.)

Finally, you get to the last level of detail, still working one small step at a time. And it comes out perfect!

<ol type='I'>
    <li>Entrees</li>
    <li>Desserts
        <ol type='A'>
            <li>Cake</li>
            <li>Pie
                <ol type='1'>
                    <li>Apple</li>
                    <li>Blueberry</li>
                    <li>Cherry</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

And there you have it:

1. Entrees
2. Desserts
   1. Cake
   2. Pie
      1. Apple
      2. Blueberry
      3. Cherry

Inline—Not Just Corrections

The following unordered list shows the <del>, <ins> and <s> tags, in your browser. Open this page in other browsers to see other (possibly similar or identical) results.

• Let's mark some words <del>with del tags</del>.
• And then we can insert <ins>some other words</ins>.
• And show the <s> tag, too</s>.

Project—A Table for the Time Line

We'll begin with a sample, step-by-step. After that it's your turn to start your project's time line. Do not try to carry it past the small amount we use in the sample. We'll bring it up to a good, professional polish in Chapter 6 and Chapter 9.

Sample Time Line

Begin by editing your template. Immediately save as Time Line 1. Then add a title and a heading and save again. Our result is in Time Line 1 (menu, above). Yours should look similar. (Don't forget to check the title in the browser's tab.) Right-click View Source on ours if you have issues.

Now, the overall plan: we want a time line of the development of the World-Wide Web, by decade. We'll settle for three decades.

1. 1990s—Early HTML
2. 2000s—HTML 4
3. 2010s—HTML 5

So let's begin a table with a time line row. Start a table (<table> and </table> tags). Add a table row (<tr> and </tr> tags). Add three decade cells saying "1990s", "2000s" and "2010s" (<td> and </td> tags).

Give your table these attributes:

• bgcolor='#f0f0ff' (use any color you like)
• border=1
• cellpadding=3

Ours looks like this:

View our complete page to this point in "Time Line 2." Yours should be similar. Again, view our source if you have issues.

Now, add the data row that explains what went on in each of these decades, WWW-wise. Our finished result looks like this:

Now that needs a thousand improvements. Some colors would be nice. HTML 4 continues to be important in this decade, which we should show. And ... Well, hold it. Get yours up to this level for now. Leave the next rounds of improvements for Chapters 6 and 9. Then if you still have ideas, go for it!

Your Own Time Line

Now it's on to your own project's time line. We should warn you that mastering tables is not the hard part. Designing a time line that communicates your subject is the hard part. Beginning with a pencil sketch is always good. (We're partial to felt-tip markers for our "pencil" sketches.)

Get your time line designed. Then get it written in HTML, up to the level of the example here. A few more rows and columns would be good as they'll give you more to work with. Good luck!

Character Entities—Money! (Though not Much Money)

.

Feedback: MartinRinehart at gmail dot com

# # #