Thing 1: Thanks to eagle-eyed reader Jed Corman, I was alerted to a typical no-brainer mistake in the HTML examples for Chapter 13 on this Website. Instead of naming the file in the Chapter13/css/ folder sansStyle.css, we omitted the lower-case s after san and named the file sanStyle.css instead. But because the HTML markup references the file as it should have been spelled rather than the way we actually spelled it, the example doesn’t work properly until the offending file gets properly renamed.
This weekend (which is to say, either 11/17 or 11/18) Jeff will upload a corrected version of the Chapter 13 ZIP file (which I just repaired a few minutes ago) and also a corrected version of the Complete Collection file. That’s the way things go on the Web, where we find and fix the easy, obvious errors right away, but where more subtle ones — like this file-name boo-boo — can go uncaught for almost two years (this edition of the book hit the stores on 1/11/2011). All we can do is say: “Thanks, Jed!” and tell the rest of our readers to download new versions of the files if they want them to work the way that they should. Sigh.
Thing 2: Thanks to curious reader Dan Fisher, I was reminded about “favicons” — a method for defining a teeny-tiny graphical element that will show up inside the URL address bar in most browsers along with a site’s URL, something like this (and I chose this very site to provide the illustration):
To the left: Wiley’s well-known “Dummies Guy” appears.
The graphic is kind of hard to see properly at the 2X resolution I use to show it to you here, but if you look at your Web browser you should be able to see what it really looks like in everyday use. There’s a Wikipedia article on favicon that explains what it is, how it works, and how to use them in your Web pages. If you’re curious to know more, it’s worth reading. In the same vein, the clickfire “Favicon Tutorial” is also worth a gander, because it explains how to create and use one in your own Web pages, too.
But if you’re like me, you just want to know three things:
1. You need a 16×16 pixel graphic that uses 16 colors only.
2. You need to save a favicon graphic using the .ico icon format. You can use your favorite graphics editor to shrink your chosen icon and save it as 16 colors — IrfanView is a nice, free tool for Windows users. Next, you must convert it to icon format — IconEdit32 does this quite nicely.
3. You need to include a specific snippet of HTML markup inside a <meta> element that references the .ico file in the <head> section of your HTML documents.
Here’s what that code looks like in the pages from our Website (this site is WordPress based, so we use the handy-dandy All In One Favicon Plugin and let it automate its inclusion for us — much easier than doing things by hand):
<!-- All in one Favicon 3.1 | by Arne Franken, http://www.techotronic.de/ -->
<link rel="shortcut icon" href="http://htmldummies.minnick.com/wp-content/uploads/2011/01/favicon.ico"/>
<!-- All in one Favicon 3.1 | by Arne Franken, http://www.techotronic.de/ -->
Of course, you still have to create a favicon to use, but that’s not too horribly challenging. Give it a try! You might like it…