The book’s been out for almost two months now, and we’ve been getting some great feedback from certain of our readers. Much of this has centered around minor, nit-picky — and therefore important and noteworthy for us authors — boo-boos in either the examples as printed in the book, or in the actual HTML source code posted right here to the website (or missing in action, as has been the case for a handful of items). This kind of input always gets our attention, so Chris and I have been busy fixing the downloads and ZIP files for the book’s content, to make sure that as we find and fix mistakes, we make repairs, and immediately offer the repaired items for subsequent download to our readers.
Our book has now been in stores and online for one month, and we’ve gotten two reports of minor markup errors in its content so far, both from the same eagle-eyed reader. Despite our best efforts (more on that in the next paragraph) the occasional boo-boo does make it into print. When that happens we have only three burning desires:
1. To correct whatever mistakes may have occurred
2. To share that information with our readers so they don’t suffer from our mistakes
3. To make sure those mistakes get fixed before the next reprint occurs
From time to time on visiting just about any website, you’ll occasionally click on a bad link or make a typo when entering a URL, which elicits the famous 404 error. The HTTP error codes are well-defined, so you can always look this stuff up for yourself if you like. The W3C defines the HTTP status codes that drive all this stuff in RFC 2616, Section 10. Section 10 is labeled “Status Code Definitions,” where you’ll find this text for the 404 error code:
10.4.5 404 Not Found
The server has not found anything matching the Request-URI. No indication is given of whether the condition is temporary or permanent. The 410 (Gone) status code SHOULD be used if the server knows, through some internally configurable mechanism, that an old resource is permanently unavailable and has no forwarding address. This status code is commonly used when the server does not wish to reveal exactly why the request has been refused, or when no other response is applicable.
The key usually is that “…no other response is applicable,” simply because the server has no idea at all about what happened to the page. The generic error page that often appears when this happens can be less than informative, inspiring, or amusing. You can always test your own site by deliberately typing in a bad URL to see what happens. Thus, when I deliberately type
http://www.dummieshtml.com/nofileexisting.html into this very web site, here’s what shows up in response:
You can do better than this, if you like, but it will take some extra work. So first, let me show you some good illustrations of why you might want to do this, and then provide some pointers to potential explanations as to how you might go about making something cool, funny, or more interesting visible when your users trigger the 404 error code.
Giving You Some Good 404 Illustrations
I got the idea for this blog post while chunking through LinkedIn this morning, when I stumbled across this news item there:
These are already pretty funny, with some verging on the hysterical and others on the “Huh?” side of humor. But I’ve been around the Web long enough myself to recognize this as a pretty well-established genre of “geek humor,” as a well-crafted Google search will instantly illustrate. Here’s list of links to some other yuck-worthy compilations of 404 humor:
- Hongkiat Lim’s “60 Really Cool and Creative Error 4o4 Pages“
- Pinterest’s “Best 404 Pages“
- WebHostingBuzz “10 of the best 404 pages“
Run the Google search yourself if this isn’t enough yucks to motivate you to check out the next step — there’s plenty, plenty more where those items came from. As for the purposes of this blog post, I’m going to assume you’re convinced, and are indeed ready to read on — so keep going, please!
How to Customize Your Own 404 Page
A wise man once told me, and I never forgot the veracity of his observation that: “The answer to any good question always beings with the same two words — namely ‘That depends…'” In the case of customizing the 404 error page, you must first and foremost understand that you’re seeking to customize the behavior of the Web server that’s serving up your pages. There’s a great tutorial on how to do this in general at thesitewizard.com, so I won’t treat you to the whole thing here, but I will share three important observations from that source:
- You may not have the ability to customize your 404 page, or other error pages. Your hosting provider must make this facility available to your Website, and most of the really cheapo providers don’t do this simply to save a penny here and there.
- You will probably need to customize your .htaccess file to, as Christopher Heng puts it (he’s the author of the afore-linked 404 tutorial I’m summarizing here) to add an error directive entry into a special file that will tell the server what to do when it encounters a specific HTML error code. For the 404 error, for example, it will typically consist of a line of text that looks something like this:
ErrorDocument 404 /notfound.html. Translated into human-intelligible pseudo-code this means “Server, when you encounter a 404 HTTP error, find and display the file named notfound.html in the requester’s Web browser.” On the other hand, your site operator may have already done this as part of their basic server set-up, in which case you need to find the file referenced in that errordocument statement, and start customizing (this is described in very broad terms in step 3 that follows).
- Creating an error document file means building the Web page you wish your users to see if and when your hosting server encounters an HTTP 404 error. You can build all the great graphics and text that you like, but you should also consider Heng’s advice about what a good 404 page also contains, including a link to a search engine if your site has one (as we do on our 404 page displayed above) along with a link to the site’s home page, a site map, a list of frequently-mistyped URLs for your site with links to the correct pages, and other navigational aids your site might also present to users (like the navigation tabs at the top of the 404 page from our site, for example).
Indeed a good 404 page can be funny and interesting, but it should also do its most important job — that is, help users figure out where they should go next, once they reach a dead end in your pages, for whatever reason. That’s why I’m going to work with Chris Minnick, my co-author for the next edition of our book, to add a text input field to our 404 page that reads like this:
“Please take a minute and tell us what URL you entered when you wound up on this error page. You can use the Back arrow (or backspace key in most Web browsers) to return to the previous page, copy the link that caused the error, and paste it here to help us out. If we can fix it we will, and if it’s a recurring error, we can make it easier for others to get where they really want to go in the future. Thanks!”
It’s not really a wrestling match, but it is something of a face-off:
Dear Mr Noble:
Wow! I hate to admit it, but we’ve found — and cleaned up — evidence of a WordPress-specific attack on this very Website recently. The signs showed up first in descriptive text about the site on Facebook, but then this morning we got word from one of our readers that active links to various payday loan sites were showing up through our home page. And sure enough when I went to “View Source” on that page, here’s what I found:
<p>Within the basic facts including payday cash than payday loanspaperless payday legal citizen of fraud or able to expedite the present valid source however there has <a href=”http://m*rtg*gebankpaydayloans.com/”></a> poor of bad credit borrowers who says it take on what faxless payday personal need some boast lower than average credit this occurs payday advance. Problems rarely check on it at cash advance <a href=”http://ch**pcashadvanceonline.com/” title=”cash advance”>cash advance</a> your will most needed. Low fee for school or worse payday loans <a href=”http://p*yd*yloanchannel.com/” title=”payday loans”>payday loans</a> you gave the country. …other similar text removed for brevity’s sake, asterisks added to URLs to prevent blockage or blacklisting…</p>
Jeff jumped up to the site and killed the offending injection into one of our primary header files that was causing the problem, and then turned up this fascinating article from Sucuri entitled “Common WordPress Malware Infections” from our friends and colleagues over at Smashing Magazine. We’ve put the Sucuri SiteCheck facility to good use to produce the following results report, too:
All of this information is presented to make some important points about web site security:
1. When you turn your platform over to a third party like WordPress you inherit all of its security weaknesses.
2. Keeping your site up to date includes keeping the platform up-to-date and secure, as well as the content.
3. Monitoring site security is easier to do that I originally thought, but also more important than I had thought as well (I have no trouble understanding why site operators pay for multiple daily security checks to limit exposure to exploits should they occur).
If they can hack us, they can probably hack you, too, so you’ll want to take steps to prevent such things from happening. Be sure to talk to your service provider about how they secure your environment, and ask them what steps you must take to help secure your website, too. To do otherwise risks embarrassing inclusions of unwanted content on your web pages (which is what happened to us) as a sort of “best case of the worst case.” But it could also result in users downloading malware when they access your pages, which in turn will either cause them to stop visiting your site (bad enough already) or make search engines like Google or Bing blacklist your URLs as malware infected (if you can’t show up in the engine’s search results, potential visitors can’t find you, which is an instant “kiss of death” for modern websites and thus a “worst case of the worst case” scenario).
Hello! Ed Tittel here, with some interesting news about the next planned edition of our book:
I’m very sorry to report that my co-author and collaborator, Jeff Noble, has decided to drop out of the upcoming revision to our book. We’re probably going to call it HTML5 and CSS3 For Dummies, and it’s going to be a complete rework to get everybody up to speed on HTML5 markup and some of the HTML5 canvas capabilities, along with coverage of Cascading Style Sheet (CSS) markup with an emphasis on CSS3 stuff. Jeff, however, is too busy with his job as Director of Product Design at CA Technologies (the huge conglomerate formerly known as Computer Associates) to bite off and chew upon the upcoming edition. I’m sad about this, because Jeff has been a great influence on and driver for the two previous editions of HTML, XHTML, and CSS For Dummies, sixth and seventh editions, and had already started to gear up with me to get going on the next edition of the book. But he has wisely decided to opt out of this project because he needs to concentrate on his real job, and keep his many and mischievous minions in line.
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
sansStyle.css, we omitted the lower-case
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.
OK, so we’re in discussions with Wiley right now about the next edition of HTML … For Dummies. I’d like to explain what we’re thinking about doing with the next edition of the book, and ask all of you to chime in with your input, ideas, suggestions, and — where necessary — vetoes and objections. Feel free to post comments here, or to e-mail me at etittel at yahoo dot com (you non-robots know what to do with this address) or Jeff at conquestmedia dot com (ditto). All input gratefully accepted, and for those readers who either propose stuff we haven’t thought of, or steer us clear of rocks and shoals we might otherwise have missed, there will be prizes of some kind to come (free copies of the next edition, T-shirts, or perhaps even a steak dinner-sized gift card for somebody who comes up with something especially toothsome). Continue reading
Chris Minnick is my old friend, a former co-author (on a bunch of Certified Internet WebMaster books we did in the late 1990s), and the man behind the book WebKit For Dummies. He’s also the author of the new Ed2Go class entitled “Creating Mobile Apps with HTML5.” The class runs for six weeks, and is available for as little as $89 depending on which school you elect to take it from. The Ed2Go sign up page is geo-sensitive, and shows me that I can take it through Texas State University in San Marcos, TX (of course, it’s online so why should that matter?) for $119.
I’ve known Chris for 15 years, and worked with him on numerous projects, including half-a-dozen books (in fact, I tech-edited WebKit For Dummies). He always does great work, and manages to infuse his technical materials with plenty of laughs and a light touch that goes down easy on heavy subjects. I hope you’ll check out his class, and see if you like what you find there. If you take the class, I’m sure you’ll have a positive educational experience!
About four years ago, I got a phone call from a law firm in Pittsburgh asking me if I was the same Ed Tittel who wrote HTML For Dummies. When I of course replied “Yes,” my interlocutor — let’s call him “Alex” — proceeded to open up an extraordinarily interesting can of worms for my inspection. It seems I wrote the first edition of this book long enough ago — it shows a copyright date of 1995, but was actually released in December of 1994 — that it predated the filing of some patents related to Web technology and e-commerce that had become the focus of a lawsuit that alleged their infringement. I’m not at liberty to disclose the identities of the parties involved, other than to say we had some huge online retailers on the defendants’ side, and a company that specialized in “mining the value of its IP” (intellectual property) on the other side.