Frontend Engineering, Volume I

HTML Chapter 10 Companion

History—HTML 5

Ongoing browser wars: www.w3counter.com/trends.

Languages are long-lived : www.martinrinehart.com/pages/genealogy-programming-languages.html.

Websites—Credits

If you've not done so recently, take another look at our Credits page. Notice how the portraits and the text beneath the portraits are both links to the appropriate Wikipedia source. This is the source for one scientist:

    <th>
        <a href='http://en.wikipedia.org/wiki/Galileo_Galilei'>
            <img
                alt='Portrait of Galileo'
                border=0
                height='200px'
                src='graphics/galileo-head.jpg'
                title='Portrait: Justus Susterman, 1636'
            >
            <br>
            Galileo
        </a>
    </th>

There are two things to note, here. Second (we'll go back to first in the next paragraph) the content of the <th> around each scientist is an <a> link that includes the http:// (URL scheme) to link to a foreign page. By putting both the image and the name inside this link, both are clickable links to the Wiki source. The   ensures that graphic and text are each on their own line. Remember: images are an inline element.

First, the entire group is wrapped in <th> and </th> tags. This is the second row of the table. (The first row is the "Thank you" message for Wiki.) The <th> usually tops a column, of course. Two features of a <th> common to all browsers are that the text is emphasized and the content is centered. Non-visual browsers may be encouraged to use the <th> content in descriptions of the table column, too. All of these are just right for our semantic and presentational intentions.

Last, note the use of the alt and title attributes. The alt description is appropriate for reading by an aural browser (or, never forget SEO!, by a search engine crawler). The title is a tooltip, useful for a sighted visitor's additional information.

Tools—Minifier and FTP

HTML, before HTML5, had no access to your local disk. This was a sensible security precaution. The simplest workaround, if your visitor was dependably tech savvy, is to ask for a file via copy/paste. This is not as cumbersome as it sounds for those of us who already have our source code loaded into our text editors. To minify source, try one of these:

FTP utilities are programs you download and install. The most popular freeware FTP is FileZilla. We use it daily. (Download the client version.)

Our favorite FTP freeware: filezilla-project.org/.

Favicon

We make a favicon once every year or two (or three, if we can avoid it). Reducing a website to a 16x16 image is no easy task. Recommending the best editor for this task would take a lot more experience than we have. Your best bet is to google for a free favicon editor, then use one to create a very simple favicon. (Try the French flag with the word "Test" written on it.)

Once you have a graphic, you are practically done. Upload it to your site's home folder. Name it favicon.ico and you avoid several problems. Link it to your pages this way:

    <link
        rel='shortcut icon'
        href='http://www.MartinRinehart.com/favicon.ico'
    >

WARNING: Most browsers will ignore that link if you are running a page from your own disk. Test the online version to see what your visitors will see.

HTML 5 Blocks

In addition to caniuse.com we have a page regarding the three HTML5 meters. It is self-serving in that we recommend our own alternative. It is accurate in that we investigated, reported on our investigation and then wrote our own code.

State of the HTML5 meters: martinrinehart.com/frontend-engineering/artists/other/meters-h5.html.

Character Entities—`¿` and ` `

Inverted Question Marks

May we ask you a question?

¿Comprende?

The second question, in HTML, is: ¿Comprendre?.

Non-Breaking Spaces

Now for your own edification, try these:

Indent a paragraph with a few non-breaking spaces:
     Test para.
Indent another paragraph with CSS:
Test para #2.

Now open the page with these two tests in different browsers. The second paragraph will be indented, on most desktop monitors, about 2cm (¾ inch). The first one will be indented very differently in different browsers.

And that, we confess, is a plug for Volume II in this series. See why you want to go on to CSS?

Congratulations on finishing HTML. See you in Volume II!

Feedback: MartinRinehart at gmail dot com

# # #