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
.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.
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.
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):
- your contact information,
- the error code with a possible explanation,
- 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
- 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.