Frontend Engineering, Volume I

HTML Chapter 9 Companion

© 2012, Martin Rinehart

History—Rescued by WHATWG

Websites—Frontend Engineers

We went to the classified ads for New York City and grabbed the first "help wanted" that specified "frontend engineer." This is the skill set the employer wanted:

This ad was exceptional in that it did not specify platforms: desktop, tablet, phone, etc. It was representative in the breadth of the skillset required. They wanted four years' experience. Compensation was not specified but it would likely be in six figures. Not bad for someone in their mid-twenties.

HTML 5 / Living HTML

Blocks—Fancy Tables

If you've been following our histories, the name Dave Raggett will ring a bell. Back in 1995 he wrote a proposal for HTML tables, which was published as Internet Engineering Task Force 1942. (After the IETF gave up on HTML, and the W3C failed to find consensus on HTML 2 and HTML 3, Raggett wrote the document that became HTML 3.2, the first official standard.) Raggett's table proposal has survived virtually unchanged since IETF 1942. It makes simple tables simple, but doesn't fail when simple is no longer adequate. To our way of thinking, this is HTML at its best.

Row and Column Spans

Example page "9a" (menu, above) shows the first form of the first example table in the print: Chapter 9, Blocks—Fancy Tables. Example "9b" shows the same table using left-side labels that span two rows each. Grab the source (use your browser's View Source and then Save As...). Add a third person to be sure you understand the rowspan attribute.

Example page "9c" (also above) shows the first form of the second example table in the print. Example "9d" shows the same table using multi-column labels in the top row. Again, grab the source and add a "Career" category, as you see in example "9e".

<col> and <colgroup> Tags

Ready to try one without our help? We hope so. If you hadn't noticed, you are writing HTML and there is only one more chapter in this knowit. So take the table you built above and add a couple <col>s to the final table. (You'll google the topic, we trust. This one's easy because we told you the name of the tag. On your own you'll have to work a little harder.)

Got those columns? Now try to create a <colgroup>. (You'll get more use from column groups once you get to CSS and learn to style them.)

Now you're ready to go on to your own sample project's time line page.

HTML 5 Input Widgets

Project—Title and Time Line

In your work above you tried row and column spans. Now it's time to go back to your time line page and add some spans. Your goal: an informative time line. Your secondary goal: a good-looking time line.

To complete your project, take screen shots of your time line and your image map. Use these to arrange a nice-looking title (home) page. Remember, this is your site's landing page. Make it a good one.

Got it done? A bit of leaning back and admiring your own work would be appropriate at this point. Perhaps a bit of showing off for your significant other. Enjoy. You've earned it.

Character Entities—HTML Characters

If you find yourself writing about HTML you'll need these two:

Feedback: MartinRinehart at gmail dot com

# # #