Ever tried to access a particular URL and instead of seeing what you expect
you see there you see a strange message that says something about a 401 or
a 404 error? To show you more specifically what I mean, go to http://www.3-squares.com/,
the old domain of a now-defunct catering company in
Portland, OR. When you go there, instead of displaying the company's
old home page, your browser will display a page that says something about
how the server can not be found. What's happening, in fact, is that the web
server is getting a request from you, the visitor, that it simply can not
process and so it displays one of several error messages to notify you of
the server's findings.
are over a dozen different kinds of error messages, but the two most common
error messages you'll see are the 401 Unauthorized Access message,
which is displayed whenever an attempt is made by a visitor to access a password
protected web page without permission, and the 404 File
Not Found message,
which you'll see anytime you enter in a misspelled or inaccurate URL in the
address bar or happen to click a broken hyperlink on a web page.
Without adding any kind of customization, the server and browser determine
which message gets displayed, and
depending on which browser you're using, the exact message you read might be
somewhat different. To illustrate, view the http://www.3-squares.com/ page
in a different browser than the one you used before so you can compare how
the messages are different in each. For example, if you viewed the URL using
Firefox first, open up a second browser such as Internet Explorer, Opera, or
Safari to compare the messages. Now ask yourself this, “Wouldn't it
be better to have a single, customized error message for visitors, regardless
of the browser they are using?” Yes! With a customized page,
visitors see exactly what you want them to see.
Building Your Own 401 and 404 Error Pages
What many new web designers don’t know is that
both of the 401 and 404 error message pages can be fully customized to match
the exact design and layout of any existing Web site. Even better, with
just a little help from the host provider, both 401 and 404 error pages can
be installed and functioning within 24 hours of being uploaded to the remote
So just what, exactly, should go on these pages? Well, that's mostly up
to you, but there are some general guidelines you can follow:
401 Unauthorized Access
The 401 Unauthorized Access page often includes a
the refresh <meta> tag in the head of the code to force the page to
transfer to a different, working URL within a specified number of seconds,
such as, <META
The rest of the page will contain a message similar to the following:
You have attempted to access a page for which you are not authorized. This
page will automatically redirect to the [INSERT DOMAIN NAME] Home Page in 10
seconds, or click the following link to manually redirect this page to [INSERT
404 File Not Found
The 404 File Not Found page can be as customized as you like and can include
links to other pages on the site as well as feature advertising for featured
products and services. At minimum, however, it should include content similar
to the following:
The page cannot be found:
The page you are looking for might have been removed, had its name changed,
or is temporarily unavailable.
Please try the following:
- If you typed the page address in the Address bar, make sure
that it is spelled correctly.
- Open the www.DOMAINNAME.com home page, and then look for links
to the information you want.
- Click the Back button to try another link
Go to http://www.luckychair.com/lemon.html to view an example of a customized
404 File Not Found error page, like the one shown here in Figure 1-1.
Figure 1-1. A Custom 404 Error Page.
To customize your own 401 and 404 error message pages:
Presuming you've already designed and built the web site you'll be adding
the customized error pages to, all you'll need to do to create customized 401
and 404 error pages is to make two new web pages based on existing pages
on the completed site. This ensures that the new error pages use the same
exact layout and design. Save the two new files with the filenames
error401.html and error404.html respectively. Then, simply
edit the content areas for both pages using the copy shown above or
customize the content to suit your site’s
particular needs. For instance, rather than only showing the home page URL
on the error page, consider also displaying links to all the main pages
on your site, such as Home, About, Services, and Contact. Add links to featured
products, services, portfolios, client lists, a site map, a site search tool —anything
you think a visitor might be interested in viewing or finding after seeing
the error message. Since this page content is completely under your control,
use it in any way you like to assist visitors (your future
customers!) in finding the information they may be seeking.
After you've created the new custom error pages, you'll then need to edit
existing .htaccess file on your server. The .htaccess file is a simple
ASCII text file that resides at the root level of the host directory and gives
instructions to the host server about how to process information for the domain,
such as blocking named IP addresses, providing password protected access to
some or all of the site, and displaying custom error messages.
To see if your remote host server already has an .htaccess file installed,
establish an FTP client session to the server and look for the file at the
root level. If you do see an .htaccess file, download
a copy of it to your local computer so you can edit it. If
see an .htaccess file at the root level, follow the steps below to create a
To create an .htaccess file, follow these steps:
a text editor (such as notepad or textedit) and exactly type in the following
two lines of code, including all the odd spaces and punctuation:
ErrorDocument 404 /error404.html
ErrorDocument 401 /error401.html
the file with the filename htaccess.txt into the root level of your
local site. In other words, save the file in the same place as the index.html
homepage for the site you'll be adding the new error pages to.
- Establish an FTP client session to the host server and upload a copy of
the htaccess.txt file to the
root level of your host server. While still connected, edit the
file name of the htaccess.txt file on the remote server to .htaccess by
removing the .txt extension and adding a period in front of the
- Again, while still connected, upload
both your new error401.html and error404.html files to the root level of
your host server.
- End the FTP client session.
- The last step after creating your error pages and .htaccess file, and uploading
them to the root level of your remote server is contacting your host provider
for further instruction on how to make these new error files replace the
default error message pages. The host provider typically needs to configure
some software on its end before the new pages will work. They might also
request that you log into your site’s control panel or site utility
page and make some adjustments to your site’s configuration yourself.
To view live examples of (and grab the source code for) both a 401
HTTP Protocol Unauthorized Access and a 404 HTTP
Protocol File Not Found error page,
go to the new Web
Design: The L Line, The Express Line to Learning book's author's tips
page at: http://www.luckychair.com/l-line.
Readers and Instructors who purchase the book will have additional online access
to a (password protected) Web site providing a test bank with hundreds of questions,
PowerPoints with course and book outlines, and course syllabi and code.
Sue Jenkins is a freelance web designer, graphic designer,
artist, writer, and illustrator, she teaches Dreamweaver, Illustrator, and
Photoshop classes at Noble Desktop in New York City, and offers
private training and web consulting to companies across the USA. Her
first book, Dreamweaver
8 All in One Desk Reference For Dummies, is a must-have reference
book for all Dreamweaver users. Her second book, Web
Design: The L Line, The Express Line to Learning, available Feb 2007,
is a rigorous Web Design classroom-in-a-book that includes preassessment
questions, tutorials, glossaries, and test questions as well as several online
tools such as test banks, additional tutorials, and question and answer sessions.
If your company needs a website, website redesign, logo, or illustration,
page for more information,or go directly to her
website learn more about her design services. http://www.luckychair.com.