Frontend Engineering, Volume I

HTML Chapter 7 Companion

© 2012, Martin Rinehart


History—HTML 4[.01] Lasts

Websites—Frontend Enginners

In print this is a discussion of the "village" of experts who have a hand in frontend design work. (Frontend engineers are also defined as the programmers who create the frontend. This occupation is discussed in Chapter 8.)

Information Architects

User Interface / User Experience

Web Designers

Completing the Template

Add the lines shown here to your template.html. When you save it, don't forget to also save it over your backuup copy.

<!doctype html>

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

<html>

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

        <meta name='author' content='your name here'>
        <meta name='description' content='SERP description here'>
        <meta name='keywords' content='keywords, and phrases, here'>
        <meta http-equiv=”content-type” content=”text/html; charset='UTF-8'”>

        <style>

        </style>
    </head>

    <body>

        <script type='text/JavaScript'>

        </script>
    </body>

</html>

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

While we have never stopped "completing" our own templates, the one shown here will be generally useful. Don't hesitate to add more as you learn more and your needs change. For examples, when you create a favicon you may want to add a link to it; when you learn more <meta> tags you may want to add one or more of them.

Why UTF-8

Linking Within a Page

On our sample project's home page, each scientist is linked to "Newton's words" about that scientist. (From Newton it's Latin, of course. You might guess it's lorem ipsum, and you would be right. Newton actually wrote kind words about several of these men. He gave Fermat credit for opening the door to calculus, for instance.) We quoted Newton at some length so we could demonstrate the use of in-page anchors. They are done like this:

Several inches (or 2.54 times several centimeters) of text, here.

<a name='anchor 1'></a>

Several more inches (or 2.54 times several centimeters) of text, here.

<a name='anchor 2'></a>

Etc.

You can now use these anchors as href values, if you precede them with # characters. For example:

<a href='#anchor 1'>This links to anchor 1</a>.

You can also link to these anchors from other pages. Assume that your page with anchors is page-with-anchors.html and you wish to provide a link to a spot with an anchor from another-page.html. This will do the trick:

<a href='page-with-anchors.html#anchor 2'>Link to page-with-anchors, anchor 2</a>.

In general, the #anchor_name suffix can be applied to any page, including pages that are part of other sites. As a rule, however, linking to named anchors on sites you did not create is a way of creating links that will soon be broken. (Do you have the other site's written commitment to maintain their named anchors? Does the next person who will be responsible for that site know about this commitment?)

Now, add some anchors to one of your pages. Fill a page with lorem ipsum if you have no better choice. (Linking directly to a picture on a page full of pictures is a good alternative.) Let your site be anchor-filled!

And a word to the wise: Do not forget to close those anchor tags with </a> tags, as we show, above. Some browsers will not work without these (otherwise meaningless) closing tags. This will be on the quiz. (And it will be lying in wait, ready to anger real visitors, too.)

More on Fragment Identifiers

Character Entities—A Few Fractions

A very nice system was established for fonts that have fraction characters. It wasn't carried very far, however. You can only count on these:

There is also a named entity for the slash between numerator and denominator: &frasl;. For example, five ninths can be written 5⁄9 (5&frasl;9) or 59 (<sup>5</sup>&frasl;<sub>9</sub>).


Feedback: MartinRinehart at gmail dot com

# # #