What are 404 errors?

[Dan N]

According to Wikipedia:

The HTTP 404, 404 Not Found, 404, 404 Error, Page Not Found, File Not Found, or Server Not Found error message is a Hypertext Transfer Protocol (HTTP) standard response code, in computer network communications, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested. The error may also be used when a server does not wish to disclose whether it has the requested information.

The website hosting server will typically generate a “404 Not Found” web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors encountered on the World Wide Web.

Now, let’s simplify all of Wikipedia info (and almost all articles you might find on world wide web because I don’t write Privacy Policies-like topics) and present the essence of it.
404 error is displayed when a page, article, post, image or other resources for which a link /URL was accessed can’t be found at that address.

Simpler to understand, right?

Me, I’m a web designer with no programming language experience, no network or server management skills but I do want to have a web page hosted online.
I design my page locally offline and want to upload the website/ web page on my host.
Content of my web page includes a couple of images, some css stylesheets to spice up (from visual point of view), texts, links… whatever.

I’ve heard that it’s a good practice to have all resources grouped in folders (or directories) … so all my graphics have their own folder, all my css, has its own folder and if I am to use other resources like js I most probably have this/those files in a separate folder (or directory, whatever name you want to use).

My web page will “call” all these resources via paths. URL path for my image, path to CSS file(s) so on…
All these resources adds functionality and visual styling of my web page.

Let’s jump at What Ifs and how can I use a custom web page to almost work as a 404 (Page/File Not Found).

First things first.
Do you know what hotlinking means?
If not, here it is. Some smartass individual(s) can use your images/graphics, css, js or other files in their own interest leaving you with the bill.
Basically, someone grabs the full URL path of your hosted file and use it outside your host/website and you’ll never know.
Affected by hotlinking (more or less): server’s bandwidth, CPU, RAM…
“Borrowing” resources in this manner is as old as internet so its a common practice you may want to avoid and be prepared for.

How to protect a resource directory on my own host from direct browser access?
There are multiple ways to do it but simplest one which doesn’t require any skills is to have a index file in your directories.

If your hosting provider has setup error pages, then you don’t need to worry much.
Also, if you run a CMS (content management system / WordPress for example) on your host again, you don’t need any additional stuff.
But, if you do just like me, no CMS installed and serve a static website from your host, then you’ll need to implement some “security” measures.

Steps to take:
Before uploading all your folders to host, make sure your resources directories are having at least basic protection from denying access of the directory from browser.
– how to fix: create an index.html or index.php file (I prefer the html extension because HTML is not a programming language and can’t be “manipulated” by shady individuals)
To create such a file (can be empty) open Notepad or any plain-text editor and save it as index.html Don’t forget to manually change the extension of the file .html . After it is saved, you’ll see it changed its icon and now looks like a web page file and can be opened/accessed in your default browser.
Put this index file in all directories containing your resources. Make sure there are no conflicts regarding the name and extension of the file because if you have a file in css directory with the same name and extension but other content… will override .

This is how an exposed directory looks like when accessed via browser. Please note it is a visual representation and not an actual directory path.
This is how a directory is protected with a simple index.html file

Demo – Open Source

Other methods of protection or at least limiting access to directory listings and root path can work.
A pretty good example is using .htaccess file, article posted on blog at this link.

// update
Searching for some inspiration?
Check out our free 404 HTML templates
Download all 7 of them Download link :) or if you fancy some awesome 404 HTML template, try premium ones available on marketerbay.com

• This topic was modified 1 year, 5 months ago by Dan N.
• This topic was modified 1 year, 5 months ago by Dan N.

[Author]

Posts