Frontend Engineering, Volume I

HTML Chapter 4 Companion

© 2012, Martin Rinehart


History—Birth of the WWW

History of ARPANET: http://www.zakon.org/robert/internet/timeline/.

Websites—Navigation

Tools—Dictionaries

Adding a <title>

Begin by editing your template.html. Make the addition shown in the listing here:

<!doctype html>

<!-- folder/???.html - ??? -->

<html>

    <head><title>???</title>

        <style>

        </style>
    </head>

    <body>

        <script type='text/JavaScript'>

        </script>
    </body>

</html>

<!-- end of folder/???.html -->

We use "???" to give subtle hints in testing, like "Hey, morons! How could you be so dumb! You forgot to put the title here!"

We used to put in bogus titles, like "Title Goes Here," but they slipped past us too often. Make yours any sort of gentle reminder that you might want.

After you save the improved template, edit it again and immediately Save As something like test-title.html. Then replace "???" with something like "Test Title Here!", save and view in a browser or two. We still remember the first time we tried. It was magic.

Titles and SEO

Why is <center> Deprecated?

Nested Lists

By nesting lists within other lists, you can create lots of interesting effects. The simplest one is to nest one unordered list within another.

The following code produced the above nested lists. Note that we've changed the type for the list of ice cream flavors. Note also how we've separated the <li> and </li> tags around the Ice Cream bullet. The browser doesn't need this help. We do it for our own benefit. Otherwise, nesting lists can get messy.

<ul>
    <li>Cake</li>
    <li>Ice Cream
        <ul type='circle'>
            <li>Chocolate</li>
            <li>Coffee</li>
            <li>Vanilla</li>
        </ul>
    </li>
    <li>Cookies</li>
</ul>

Three-Page Navigation

Here we'll build hyperlinked navigation among three pages. After this sample you will be able to add the navigation to your own project website. We'll begin by creating sample pages. (Our people will be real, historic figures. You can emulate us, or make up fictional people, as you like.)

Create Sample Pages

Edit your template and immediately save it as benny.html. Add a "navigation goes here" dummy note at the top. Add an <hr> and a major heading. Fix the title. Save. It should look like this:

Screenshot of the Benny Goodman sample page.

Repeat for gene.html and teddy.html. Visit any of the following to check our work. Right-click and View Source to see how we did it, if you have trouble.

Historical note: In the middle of the Great Depression Benny Goodman's virtuoso clarinet ("licorice stick", the jazz-crazed youth called it) created the Swing era. Goodman, son of Jewish immigrants, assembled a trio. Drummer extraordinaire Gene Krupa's high-energy tom tom playing on "Sing, Sing, Sing" may have been history's first recorded drum solo. Master pianist Teddy Wilson was black which meant the trio couldn't travel together in the racially segregated American south. Goodman said it was the South's problem, not his trio's problem, as they played in the American north and west.

Add a Link, Benny to Gene

Next step is to add a faux Benny link (grayed, or "disabled," since we are on the Benny page, followed by a real link to Gene. (History: Benny played with Gene before they joined with Teddy.) The HTML, at the top of the <body> of benny.html will look like this:

    <body>
        <font color='gray'>Benny Goodman</font> -
        <a href='gene.html'>Gene Krupa</a>

        <hr>

The navigation (one-way) looks like this:

Navigation from benny to gene.

Complete the Links

Follow the same pattern to link Benny to Teddy, Gene to Benny and Teddy, and Teddy to Benny and Gene.

The complete teddy.html navigation code looks like this:

    <body>
        <a href='benny-3.html'>Benny Goodman</a> -
        <a href='gene-3.html'>Gene Krupa</a> -
        <font color='gray'>Teddy Wilson</font>

        <hr>

In your browsers, the top of the Teddy page should like like this:

Links from Teddy to Benny and Gene

Add a Page?

If you feel you've "got it" and can't wait to get to your own project, skip this step.

If you'd like a little more practice, Lionel Hampton joins the band and the Benny Goodman Trio becomes the Benny Goodman Quartet (1936). Create lionel.html and link the other pages to it; link it to the other pages.

History: Lionel played "vibes" (the vibraphone, a cousin to the xylophone). Like the others in the trio, he was a famous virtuoso. He was also black, which brought complete racial balance to the group. Goodman, we suspect, invited Lionel to join because he was the very best of the age.

Link Your Project Pages

Now you know how to create a multi-page navigation bar across the top of each of your pages. Create one that links your index.html to each of your other pages. Then copy it and edit appropriately until all your pages are linked together, website fashion.

Check every one of your links. An old webmaster saying: "An untested link is a broken link."

Character Entities—Greek Letters

As you can see in the table, this is an elegantly simple system.

Use Name HTML Result
in Browser
Uppercase Alpha Alpha &Alpha;
Α
lowercase alpha alpha &alpha;
α
Uppercase Beta Beta &Beta;
Β
lowercase beta beta &beta;
β
And so on¹

¹alpha, beta, gamma, delta, epsilon, zeta, eta, theta, iota, kappa, lambda, mu, nu, xi, omicron, pi, rho, sigma, tau, upsilon, phi, chi, psi, omega




Feedback: MartinRinehart at gmail dot com

# # #