8
I’ve seen a lot of tutorial teaching to customize 404 error screen, but only in CMS as Wordpress, I wanted to know how I do to style a 404 error page*(not found)*, so that the user sees a beautiful page, in the case of a broken link, or for whatever reason.
How would I get the browser to open this page of mine 404.html for example in case of a 404 error?
12
An error page is like any other page on your site, and can be created with the traditional tools you’re used to, using HTML, CSS, and even JS if you want.
Keep in mind that by the nature of the page, you may not limit yourself to merely warning of the error. On the contrary, it is much more interesting that, from the error page, the user can have the basic navigation to find what he needs and who knows even an automatic search, like this 404 of php.net, greatly improving the user experience and valuing the site.
Note some important details below:
An important feature of the error pages is the correct HTTP header. When a web server sends an error page, there is information that is passed to the browser, which is the header of status. This header does not appear in the page’s source code, but is sent as part of the HTTP protocol. The status normal is 200, but in case of error or other special conditions, this value changes.
It is important that the status is always sent correctly, because it is through it that the browsers, and mainly the Engines research as Duck Duck Go, Google, Bing and others guide to properly index your site.
Now we enter the universe of HTTP servers. When you type an address, such as /a/20739/70, the internet browser makes a DNS request to know who is the host address person pt.stackoverflow.com. As soon as you find out the IP address for this one host, the browser makes an HTTP request for the name resource /a/20739/70. At this time, the application that is serving the pages will use its internal methodology to see if the feature is available, and if not, it will use a preconfigured error page.
Finally, in order for you to show off your new creative page, you need to set up the server so that it knows where it is. So, let’s go to the configuration of the most common HTTP servers:
This is not intended to be too detailed an explanation, to the point of replacing the Apache documentation, but is a starting point. Usually when installing Apache, there is a configuration file, usually with the name httpd.conf. In this file, there are several lines like this, corresponding to the standard error pages:
ErrorDocument 404 /404.html
To use your custom page, simply change the path /404.html to the location where you placed your new error page.
If you are not going to change the error pages of all sites, but only a few, or even if you do not have access to the Apache configuration, one way out is to create and/or modify a named text file .htaccess (in the linux version) at the root of the desired site, and include the custom errors in this file using the mentioned syntax, as in this example:
ErrorDocument 404 /meus_erros/erro404.html
ErrorDocument 500 /meus_erros/erro500.html
...
So, when restarting Apache or reloading its configuration, your custom errors should work in place of the originals.
There are several factors that influence these settings, for more details, see the Apache documentation.
In IIS 5.0 the configuration can be done directly by snap-in IIS by selecting the desired website or directory, and clicking "Properties". Then just choose "Custom Errors", select the error you want to change, and "Edit Properties". Then you can choose "File", and point to the custom HTML you created.
Alternatively, in this last step, instead of "File" you can choose "URL", and point to a path within your site, if the page is within the hosting structure. Example /meus_erros/erro404.htm
In IIS 7.5 the solution is similar, but the way is to open IIS Manager, choose the site you want, and select the "Error pages' icon. NET", and in the action bar, click on the edit option, and choose "on". On the edit screen there is a place for a "general" error page, and to customize individually the errors, still in the action bar there is the link "Add", so you choose the desired error and the path of the respective html.
You can see a fairly extensive list on Wikipedia, but here are some of the most common mistakes to customize yourself:
401
Similar to 403, but specifically for use when authentication is possible, but not provided or recognized.
403 Prohibited
The request was a legal request, but the server is refusing to respond. For example, when trying to view a protected folder.
404 Not found
The classic "Not found", page not found.
500 Internal server error
Indicates a server error while processing the request. In the vast majority of cases it is related to the permissions of the files or folders of the software or script that the user tries to access, or even problems in the configuration of the web server.
1
You must create a configuration for this. You can put this configuration on your web server (Apache, Nginx...), or put this configuration in the application itself: you will check if the user tried to access a valid url, otherwise you have 404.html. When building a web application, it is quite common to use some Framework (Zend, Symphony, Cake...), and they already have everything ready for you just to worry about the HTML and CSS of this page. Otherwise, you’ll have to do this redirect manually. Since you put the PHP tag in the question, I imagine you’re making a site with PHP, right? Well, you must have somewhere to put the routes(valid urls) of the site, right? Are you using some framework? Are you doing everything "at hand"?
If you use a framework like Angularjs or Emberjs, in case you are creating a JS application, you can do this check on the client itself, and not on the server.
Well, give more details of your application, so it’s easier to give the way =)
Browser other questions tagged php javascript html ux
You are not signed in. Login or sign up in order to post.