Explore topic-wise InterviewSolutions in .

What do you usually do when you click a URL and encounter a "404 - File Not Found" error? Do you:

1. Click on the BACK button of your browser and go somewhere else?
2. Try to back up one directory in the URL and try again?
3. Write to the webmaster of the site and the referring site to inform them of the situation?

If you are like most people, you'll simply click on the BACK button and try another place. The majority of people don't even know that there are any other alternatives.

You thus need to do something so that you do not lose this group of people who come to your site by following an old link or by typing your URL incorrectly.


Requirements for Customizing the 404 File Not Found Page

If your web host has this facility, you will usually find mention of this somewhere in their documentation. In fact, if they mention somewhere that you can customize a file named ".htaccess", it probably means that you can also customize your 404 File Not Found error page.

The .htaccess file is what Apache web servers use to allow you to fine-tune your web server configurations at a directory level. Other types of web servers handle the customization of 404 error pages differently.


1. Creating/Modifying the .htaccess File

This step may not be necessary in all situations. Some web hosts already configure their web server so that it will look for a specific file in your web directory when a certain document cannot be found. If so, simply skip this step.

If your web server is not an Apache web server, you will have to find out from your web host what you need to do to enable the server to serve your customized file when a file cannot be found.

Otherwise, the first thing you need to do is to add the following line to a file named ".htaccess" (without the enclosing quotes and with the preceding full stop). In most instances, no such file will exist, and you can simply CREATE one with a text editor (such as Notepad on Windows).

ErrorDocument 404 /notfound.html

You will of course need to PUT a "notfound.html" file in the main web directory for the above directive to work.

The "ErrorDocument 404" directive essentially tells the Apache web server that whenever it cannot find the file it needs in that directory and its subdirectories, it is to use the document specified in the URL that follows.

One .htaccess file in your main directory will do the trick for that directory and its subdirectories. However, if you want a certain subdirectory to show a different 404 File Not Found message, you can always place a .htaccess file into that directory. This will override any .htaccess files you have in the parent directories.


2. Creating Your Error Document File

What should go into your custom 404 not found page?

It is insufficient to simply LET the visitor know that the file could not be found. In order not to lose that visitor, you will have to provide him some way to locate the document he wanted, or you would have lost him.

Your page should have one or more of the following things:

1. A link to your main page, with a suggestion that the visitor can find what he wants there.
2. If you have a search engine for your website, you should definitely put a search box on that page. Many people prefer to simply type a query than to scan through your site map.
3. A link to your site map, which lists all the pages on your website.
4. If you know of frequently mistyped URLs on your site, you can even put links to the correct location directly on the page, so that visitors who arrive there from outside can quickly get to the correct page. Remember, you don't want to lose that visitor, so do all you can to help him.
5. Any other navigational aids that you may have - for example, if you have a drop down navigation menu on your normal pages, you should probably put one here as well.

If you like, you can even put a simple form on the page to allow your visitors to inform you of the broken link. However, the primary aim of this page is not to help you track bad links, but to make sure your visitor does not leave your site if what he wants can be found there.

Incidentally, you should make your 404 page larger than 512 bytes, even when you are testing. Otherwise INTERNET Explorer (IE) will load what it calls its built-in "friendly HTTP error message" instead of your 404 page.


3. Testing the Error Document

When you're satisfied with your page, upload it together with your .htaccess file to your website. Then test it by typing a URL that you know does not exist.

Your error page should load up. From this error page, test to see that the links here lead to the pages you intended it to lead.


Common Errors with a 404 Custom Error Page

1. The most common error people have with their custom error page is making a mistake in the URL they put in their .htaccess file. This leads the web server into a LOOP when a visitor tries to access a missing file. When a file cannot be found the server tries to load the file specified in your ErrorDocument directive. But that file does not exist too, so it tries to load the file specified in that directive. You get the idea.
Make sure you test your error file by typing in a non-existent URL. Do not test it by typing its real URL - that will of course work but it will prove nothing.

2. Another common error is to forget that your 404 error page may be loaded either from the main directory or from a subdirectory or even your CGI-BIN directory. When you put links on your 404 document not found page, such as hyperlinks leading to other pages on your site or links to images (such as your logo), be sure that you use the full URL and not a relative link. That is, use things like

<a href="http://www.example.com/sitemap.html">Site Map[/url] [/b]

instead of

<a href="sitemap.html">Site Map[/url] [/b]

The first will work even if the 404 page appears for a missing file in a subdirectory, but the second will not.

tag is meant for paragraphs, and the quotes are quotes, etc., etc.. However, it is very easy to misuse and abuse these HTML tags by using them for something other than their intended purpose.

Question
Why does it matter what my methods are if the result is good?

Answer
Can you guarantee that? And can you guarantee that it will stay good through time? The big reason not to misuse tags is that browser support for misused code is far from guaranteed. There may be extra spaces in one browser, while it's perfect in another. Simply put, the entire goal of a website is to get it to work on as many browsers as possible while GETTING the right content across. Misused code does the site a disservice in general, and it gets in the way of the main goal of the webmasters, which is to make it work no matter what broswer you use to navigate the web.

Question
But I use [Brand name] designer! I don't edit the HTML code myself!

Answer
I feel your pain. I once wrote a page in a brand name What You See Is What You Get editor. I look back on the code today, and I don't even want to hazard a guess as to what the program was doing when it wrote that code.

To illustrate my point, I opened a leading brand WYSIWYG editor and made the following in Design mode:

Quote

Hello.
This is a sample Web Page.


This is far down...

• The document does not specify which version of HTML it is using in the document. All it would take to make it use the latest in HTML is this line at the top:

But it isn't there. So what's it using? 1.0?


• It uses the META tag, which is deprecated and not necessary.
• It uses "empty" paragraphs and abuses the non-breaking space.

TAG - Everyone knows the

tag, right? it is used to specify paragraphs. However, when people want to make multiple lines of blank space, they often use this code block:

Code: [Select]Words...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>More words...</p>
These "empty" paragraphs serve absolutely no purpose other than to cause a mess out of your web page. Browser support is hazy at best. To the IT guy who insists on building sites this way, I can only say "lotsa luck".

So how do you make multiple lines, you ask? The answer is simple: Use the
tag. That's the whole tag. Nothing goes after it; it's only purpose is to break one line down - like HITTING the ENTER key.

For example: This code

Code: [Select]<p>This is a paragraph with one sentence.</p>
<br />
<br />
<p>This line is two lines down.</p>
Produces this:

Quote

This is a paragraph with one sentence.




This line is two lines down.

tag, and td.fire would only work with the table cell. If you specify an asterisk (*.fire) then this class will work with whatever you assign it to.

TipSo why would you ever use anything besides *.etc, anyway? Well, if you want the same name to mean different things to different tags, you can specify that and only need to use one name.

For example, let's say you wanted to create a fire theme for your web page. Let's also say that you want paragraphs to be red on a black background, and table cells to be black on a yellow background. You could use these CSS classes, even in the same style sheet:
Code: [Select]p.fire { background-color: black; color: red; }
td.fire { background-color: yellow; color: black; }
Both will use the same class name, so when you call classes in HTML you can just specify "fire" across the board and it will effectively apply your theme.

Class: Whatever you want to call it. Ideally, you want it to be short while being descriptive at the same time. In other words, if "one" isn't significant to you, don't name your attribute that.

Attribute: The part of the element you want to modify. Valid attributes include background-color, text-indent, border-style, and more.

Value: What you set the attribute to. For example, a valid text-indent value would be "2%". A valid background-color value could be "black". Acceptable values vary from attribute to attribute.

NOTE: It is not necessary to include the spaces between the { and the code and the }; however, this makes your classes much more readable.

Tip
In order to keep track of what class does what in your style sheets, you will want to implement comments. Comments in CSS are very simple to put in, and they will help identify what your code is about. Comments are placed between /* and */. For example:

Code: [Select]/* Background for the main site */
BODY { background-color: blue; }
Codes can also be multi-line, as in this example:

Code: [Select]/* Background for the site.
Note to IT: Blue not a good color; blends with images */
body { background-color: blue; }
Use them when appropriate, but be careful of overdoing them. You don't need a paragraph on the table cell element; a sentence or two will do.


Now, you need a place to put all these classes, right? Well, there are several methods of doing this. They are:

• Create an external style sheet. Open Notepad and type in your classes. When done, go to "file" and "save". Under "File types", select "all files(*.*)". Save it in the same folder as your home page. Name it whatever you'd like, but make sure the name ends in .css.

• Create a style sheet inside your web page, called an internal style sheet. To do this, underneath your link to the .css file (if you use it) type the following:
  
  Code: [Select]<***style*** type="text/css">
  <***/style***>
  ***PLEASE NOTE: Wherever I use a style tag, I am forced to put the *** in the tags. Do not use those ***'s in your actual tag!
  
  Between the two <style> tags, place all the classes you would normally put in a .css file.
  
  TipYou may be thinking: "Why would I use this method when I've got this nifty .css file?" And the answer is this: You use this method if you want one page to be the exception to the overall style. More detail on this later.
  
  
• Use inline styles within the tag. To do this requires no additional tags. Let's return to the p.fire example. You can do this within a <p> tag by typing this:

This is a useful file that keeps search engines from indexing pages you do not want spidered. Why would you not want a page indexed by a search engine? Perhaps you want to display a page that shows an example of SPAMMING the search engines. This type of page might include an example of repeated keywords, hidden tags with keywords, and other things that could get a page or an entire site banned from a search engine.

The robots.txt file is a good way to prevent this page from getting indexed. However, not every site can use it. The only robots.txt file that the spiders will read is the one at the top Public HTML directory of your server. This means you can only use it if you run your own domain.

Any other location of the robots.txt file will not be read by a search engine spider.

Now, if you have your own domain, you can see where to place the file. So let's take a look at exactly what needs to go into the robots.txt file to make the spider see what you want done.

If you want to exclude all the search engine spiders from your entire domain, you would WRITE just the following into the robots.txt file:

User-agent: *
Disallow: /


If you want to exclude all the spiders from a certain directory within your site, you would write the following:

User-agent: *
Disallow: /aboutme/


If you want to do this for multiple directories, you add on more Disallow lines:

User-agent: *
Disallow: /aboutme/
Disallow: /stats/


If you want to exclude certain files, then type in the rest of the path to the files you want to exclude:

User-agent: *
Disallow: /aboutme/album.html
Disallow: /stats/refer.htm


If you want to keep a specific search engine spider from indexing your site, do this:

User-agent: <Robot_Name>
Disallow: /


You'll need to know the name of the search engine spider or robot, and place it where <Robot_Name> is above.

You can find the official names of all the known robots on http://www.robotstxt.org/.

So, if you need to exclude something from search engine indexing, this is the most effective tool RECOGNIZED by the search engines, so use it to keep the spiders out of any part of your WEB you want them to avoid.


For more info on the Robots.txt file, click here.

I see a lot of people posting in this forum LOOKING for scripts to run dynamic content on their site...I also did a search for this site I'm about to list and found four references to it.

The moderator may want to sticky this in this forum for easy access for those looking for some great scripts...

http://www.dynamicdrive.com


Enjoy!You know, that really is a USEFUL site.
I bookmarked it - thanks for that!Very nice website. ALOT of usefull tips.Yeah, I used some of the features on my site.
Great post.That is useful. There's a lot of valuable information on that site. Unless anyone objects, I'm going to go ahead and sticky this.great site discovery..Great Job! So many useful things in thins site. thanks for sharing it.

Be BACK for more, KEEP posting.