Frontend Engineering, Volume I

HTML Chapter 6 Companion

© 2012, Martin Rinehart


History—HTML Standardized

A Table with <th> Column Heads


Character # of
Teeth
Appetite
Little Red Riding Hood 32 dainty
Big Bad Wolf 132 carnivorous

<table bgcolor='#f0f0ff' border=1 cellpadding=3>
    <tr>
        <th>Character</th>
        <th> # of<br>Teeth</th>
        <th> Appetite </th>
    </tr>
    <tr>
        <td>Little Red Riding Hood</td>
        <td align='right'>32</td>
        <td>dainty</td>
    </tr>
    <tr>
        <td>Big Bad Wolf</td>
        <td align='right'>132</td>
        <td>carnivorous</td>
    </tr>
</table>

Emphasis with <em> and <strong> Tags

This paragraph is tagged. Your browser will emphasize this sentence. Your browser will strongly emphasize this sentence.

View this page in different browsers to see the result.

Our Sample Project Image Map

The image and associated image map for our sample project (17th century European scientists map) are built this way:

    <img
        alt='European map, five scientists scattered around the continent.'
        border=0
        src='graphics/europe.jpg'
        title='European map, five scientists scattered around the continent.'
        usemap='#europe'
    >
    <map name='europe'>
        <area
            alt="link to Newton page"
            coords="172,172,249,203"
            href="newton.html"
            shape="rect"
            title="Sir Isaac Newton, taught in Cambridge"
        >
        <area
            alt="link to Descartes page"
            coords="301,165,403,195"
            href="descartes.html"
            shape="rect"
            title="Rene Descartes, born in France, worked in Amsterdam"
        >

(three more scientist-areas in here)

    </map>

Note that the image includes the usemap attribute: usemap='#europe'. The name of the map (<map name='europe'>) is prefixed with a # in the usemap> attribute.

Your Sample Project

Some people learn to swim with some quick instruction and then they jump into the deep end of the pool. Some start at the shallow end and work up their skills (and confidence) before trying the deep end. For the latter group, we present a step-by-step approach. If you are in the former group, skip right to "The Deep End" heading. Good luck!

A Sample Image Map

The sample pages (menu above) show the HTML ("6a1", "6b1", etc.) and then show the result from the HTML ("6a2", "6b2", etc.). Make your own version of the "1" pages, then view them in a browser. They should look like the "2" pages.

Samples "a"

Edit your template. Save immediately as "sample-map.html". Replace the "???" with "sample-map" and save again. You should now be matching the "a" samples.

Samples "b"

Before you make a map, you need an image. We're going to grab one from Wikipedia. Before you use a Wiki image, copy it to your own disk. (Wiki is strictly non-profit. They pay for those servers. Don't waste them!)

We went to en.wikipedia.org/wiki/File:The_Nightwatch_by_Rembrandt.jpg and clicked on the 576 x 480 version, and saved it as nightwatch.jpg. Then we added the <img> tag to show it in our sample-map.html page.

You should now have a sample-map.html that shows the image you've chosen.

Samples "c"

Of course, if you click on an area in your image you want to see something happen. This means you need a page to which to link. Again, edit your template and save, immediately, as "linked-page.html" (or something more to your taste). Replace the "???" with "linked-page.html". Then add a heading that says something like <h1>Linked to Link Page!</h1>. Save and you are ready for the next step. Our work is in "6c1" and "6c2".

Samples "d"

Now you've got a page with an image and a page to which you can link. All that remains is the map, which is the easy part. We've "drawn" a circle, centered at 100, 100. (Your monitor may be running 72 pixels per inch. 100 is about 1.5 inches, around 4 centimeters.) Our radius is 50 pixels (so our diameter is also 1.5 inches, or 4 centimeters.) This is a blackish corner of The Nightwatch. But you can see it clearly if you move your mouse pointer in that corner. Over the mapped part your arrow pointer turns into the hand pointer. The tooltip also changes. You have a map!

If you have issues, check the code in "6d2". Did you forget the usemap attribute for the image? Or the # that goes in front of the name in the usemap (but not in the map name)? Smaller devices are higher density. (Hold out your hand to touch your desktop monitor. Grab your phone and hold it out, too. We bet your phone is much closer to your eyes.)

Now, the two most prominent men are captain Frans Banning Cocq (left) and lieutenant Willem van Ruytenburch. Add area tags for these two and a little something about them (lorem ipsum would be fine) in your linked page. You'll find an image map tool (see below) makes finding the coordinates easier. Use circles or rectangles around their heads, as you prefer. The right size is a compromise between precision pointing and easy clicking.

Now it's your turn, so swim on down to the other end of our pool.

The Deep End

Go ahead and make your own project's image map page. Use circles if you have a choice. Use a tool to make it easy to find the coordinates.

Our source code also includes a "thank you" comment to the map tool we used to get our coordinates. Unfortunately, the tool is no longer there. A google for "html imagemap tools" will get you a generous selection of choices, but we do not have, at present, a recommendation.

Character Entities—Ligatures

Named character entities handle a few common English ligatures:

Many more are available using numbered character entities. Google for whatever font you want.


Feedback: MartinRinehart at gmail dot com

# # #