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/.
Adding a <title>
Begin by editing your
template.html. Make the addition shown in the listing here:
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
By nesting lists within other lists, you can create lots of interesting effects. The simplest one is to nest one unordered list within another.
- Ice Cream
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> 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>
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:
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.
- benny.html aka "The King of Swing"
- gene.html ask any drummer about Gene Krupa
- teddy.html Teddy Wilson (a Negro!)
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
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:
Complete the Links
Follow the same pattern to link Benny to Teddy, Gene to Benny and Teddy, and Teddy to Benny and Gene.
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:
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.
|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
# # #