Guide to HTML5, CSS3, and JavaScript (Computer Science 4 All Version)

Chapter 12: Creating a Custom 404/500 Error Page

HTTP Response Status Codes

When I think of a well-designed user-friendly web site, one thing many sites fail to implement is a well designed error page. HTTP status codes provide a way to advise your users if they are trying to reach a page that is not available (error Code 404) or you do not have permission to access a certain page (error code 403). When you are developing a PHP/MySQL web site you may also encounter a 500 error code (Internal Server Error) which usually means you have some typo or incorrect syntax in your PHP code such as a missing quotes (") or closing brace (}). See Wikipedia for a detailed list of response codes.

Setting Up a 404 Error Page

The first step is to create a .htccess file in the root directory of your web site (probably public_html or www or htdocs). The .htaccess provides many settings for the web server, including where to find your 404 error page. The Apache web site provide a more complete explanation of the possible settings in a .htaccess file. Below is a very basic .htaccess file to handle 404 errors.

ErrorDocument 404 /error_404.html
ErrorDocument 500 /error_404.html
ErrorDocument 502 /error_404.html
ErrorDocument 503 /error_404.html
ErrorDocument 504 /error_404.html

Figure 12-1: Sample .htaccess File

The next step is to create your error_404.html error page file. You should design your error page to match the look and feel of your we site pages. This page should inform the user what might have happened and how to rectify the issue. You should also include contact information so the user might be able to contact someone from your web team for additional information and help.

<!doctype html>
<html lang="en">
  <head>
    <title>Jim's Web Site 404 Error Page</title>
    <meta name="Generator" content="Notepad++" />
    <meta name="Author" content="Jim Gerland" /> 
    <meta name="Keywords" content="web programming, HTML, CSS, JavaScript, PHP, MySQL" />
    <meta name="Description" content="Windows Consulting and Training" />
    <meta charset="windows-1252">
    <link rel="stylesheet" type="text/css" href="/includes/styles.css" />
  </head>
  <body>
    <div id="main">
      <p style="color: #F00; font-weight: bold;">Sorry :-(<br/>
      <span id="href"><span>)
      <script>document.getElementById("href").innerHTML = "The file you tried to access"
      + "(<em>" +  window.location.href + "</em>) does not exist.";</script></p> 
      <p>If you have any questions about a computer application, 
      please <span style="font-style: italic; color: #00f;">contact us via email 
      (put you email address here)</span> and we will do my best to find an answer for you.<br />
      Thanks,<br />
      Jim...</p>
    </div> <-- end id="main" -->
  </body>
</html>

Figure 12-2: Sample error_404.html Code

You should also consider creating separate error pages for each possible error code and then modifying your .htaccess file to point to the appropriate page for each error.

Task - Create an HTML5 Error Code Page

For this task you will create a set of well-designed error pages to handle 404 and 500 errors.

Each page should contain (at a minimum):
1. your contact information,
2. the error code with a possible explanation,
3. a link for the user to report this error or obtain additional help.
Use well-designed navigation on each page so that the user can get to any other page in your site. You may want to add a function nav() in your functions.js file and use the HTML <script>displayNav();</script>) to invoke your JavaScript function to use the same navigation throughout your site.
Modify your HTML code in your functions.jsfile that creates an array of the Assignments for this course and defines a function to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me view and grade your work.

You *MUST* use the W3C Unicorn Validator to validate your HTML5/CSS3 code.