HTAccess

htaccess is a very useful way to accomplish things that HTML and CSS can't, however it is very rarely allowed on free-servers. You should check with your system administrator to make sure that .htaccess is allowed/enabled before trying out these tutorials.

Error Pages
Customize your 404 and other error pages.

Private Directories
Password protect your private folders.

Anti-Leech
Stop people from remotely linking to your image files.

Anti-Leech test
See if your .htaccess anti-leech is working here.

Hotlinking
All about leeching files and why it is wrong.    

Custom Error Pages

We all know what a 404 "Not Found" error page looks like. This tutorial will show you how to make those error pages anything you desire.

First you'll need to create your error pages. Just make some normal HTML pages, one for each error type. The error types and their definitions are:

• 400: Bad Request. The server doesn't understand the request.
• 401: Authentication Failed. The password was not accepted.
• 403: Access Forbidden. Access to the area is forbidden.
• 404: File Not Found. The requested file could not be found.
• 500: Internal Server Error. Usually the result of a misconfigured script.

Once you've made your error pages, upload them to a directory called error or something of the sort.

Now the important part. Create a file called htaccess.txt in Notepad. Add these lines to the file:

ErrorDocument 400 http://yourdomain.com/error/400.html
ErrorDocument 401 http://yourdomain.com/error/401.html
ErrorDocument 403 http://yourdomain.com/error/403.html
ErrorDocument 404 http://yourdomain.com/error/404.html
ErrorDocument 500 http://yourdomain.com/error/500.html

Change yourdomain.com to the location of your website. Save the file and upload it to your top-most web directory. Once it's there, rename it with your FTP program to .htaccess - complete with the dot starting it out, and with no .txt extension this time.

If the .htaccess file is in your top-most web directory, then all errors that occur in that directory and all its subdirectories will be referred to the appropriate error page.

That's it! Try it out by going to a page on your website that you know doesn't exist.

Anti-Leech

If you've ever gone through your site logs and found someone hotlinking to your image files, stealing your bandwidth, then you need the following lines in your .htaccess file:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://yourdomain.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.yourdomain.com/.*$ [NC]
RewriteRule .*\.(gif|GIF|jpg|JPG|bmp|BMP)$ - [F]

Change "yourdomain.com" to your own URL, and upload the .htaccess file to the directory containing your images. Once it is in place, only people coming from "yourdomain.com" will be able to view the images; everyone else will only see a broken image placeholder. If you have an image you'd like to display instead of the placeholder, use the version below.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://yourdomain.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.yourdomain.com/ [NC]
RewriteCond %{REQUEST_URI} !^/theif.gif [NC]
RewriteRule \.(gif|GIF|jpg|JPG)$ http://yourdomain.com/theif.gif [R]

"theif.gif" is the image you want to load whenever someone attempts to hotlink an image from your server. You only need to add the RewriteCond %{REQUEST_URI} !^/theif.gif [NC] line if the image you want to load is in a directory that the .htaccess file effects. Otherwise you can remove the line, and it will still function.

Anti-Leech Test

If you've set up a .htaccess file with an anti-leech function to prevent people from linking directly to your images, you'll want to test it out to see if it's working correctly. To do so, enter the full URL of an image on your server (i.e.http://www.yourdomain.com/images/example.gif) into the box below.

 

Private Directories

Ever wanted a password protected directory? Click here for an example, use kali as your username and green as the password. With .htaccess and .htpasswd you can create as many users and passwords as you need.

To have one of your own, download this cgi script: password.cgi.
To use it, unzip the script and upload it to your cgi-bin.
CHMOD it 755 and run it from your web-browser. 

Instructions will be detailed in the script.

What is Hotlinking?

You hear people with websites complaining about hotlinking all the time. It has a number of names besides hotlinking, such as leeching, direct linking and bandwidth stealing. The problem is, the majority of offenders don't realise what they're doing, or that it's stealing at all.

In fact, when I made my first website, I did it myself. I found a great background image on a free graphics site, so linked to it directly in my HTML. About a week later I found, to my horror, that my lovely background image had been replaced with a notice that said something along the lines of "This person is an evil bandwidth theif!" How could this happen?! Bandwidth theif? What is that? What have I done to deserve this awful fate? Oh no.. I've been hacked!!

But of course I hadn't been hacked, what had happened was this: By linking directly to someone else's image, and pulling it off their server instead of my own, I was using up their "bandwidth" instead of my own. So the site owner simply renamed the background image, and replaced it with the bandwidth notification, so that my site pulled that image instead.

So what is bandwidth, and why is using someone else's bandwidth wrong?
Bandwidth is actually a misused term referring to data transfer. Data transfer is just that, the transfer of data between a website host and a websurfer's computer. When you download a webpage or an image to view on your browser, you are using up that websites data transfer, which can get very expensive. Data transfer is actually the most expensive aspect of having a website, so having it used up by direct linkers can be very frustrating.

So how can you tell if you're hotlinking?
Take a look at your HTML code. If the code for your image looks like this:
<img src="http://www.webht.blogspot.com/image.gif">
Then you are hotlinking to an image on http://www.xentrik.net, and using up that siteowner's data transfer, which is wrong.

So how do I stop direct linking?
When you find an image you like, and that you're allowed to use, right-click on it and select Save As. Store it somewhere on your hard drive, where you'll be able to find it later, for the moment. Then upload the image to your web-server, and call it using the following code:
<img src="image.gif">
Now you're linking to an image on your own server, using your own bandwidth, rather than stealing someone else's! Doesn't it feel good?

Javascript

Javascript can be a lot of fun, adding interactivity and cool effects to regular HTML pages. It's a little more complicated than HTML, but below are some examples of the best things it can do.

Pop-Up Windows
Pop customized windows from links.

Drop-Down Menus
Use form drop downs for menus, both with a button or without.

Chromeless Windows
The very popular chromeless window.

Mouseover Images
Change your link images when you hover over them.

No Right Click
Disable the right mouse button to stop copycats.   

Pop-Up Window

____________________________________________________________________________

<a href="#" onClick="MyWindow=window.open('window.html','MyWindow','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=no,width=400,height=300,left=200,top=100'); return false;">Click for Pop-Up</a>
____________________________________________________________________________
Here is an example: Click for Pop-Up.
This is what the different variables of the code mean, and how you can customize them:

window.html the URL of the page you wish to pop up.
MyWindow the name you'd like to give to the pop-up window.
toolbar=no set to 'yes' if you'd like the window to have a toolbar.
location=no set to 'yes' if you'd like the window to have a location box.
directories=no set to 'yes' if you'd like the window to have a toolbar.
status=yes set to 'no' if you'd like the window to have no status bar.
menubar=no set to 'yes' if you'd like the window to have a menubar.
scrollbars=yes set to 'no' if you'd like the window to have no scrollbars.
resizable=no set to 'yes' if you'd like the window to be resizable.
width=400 the width in pixels of the window.
height=300 the height in pixels of the window.
left=200 the distance of the window from the left of the screen.
top=100 the distance of the window from the top of the screen.

You can have as many pop-up window links as you like on the same page, just be sure to give every one a different name.

To have a "Close Window" link as in the example above, use the following code:

<a href="javascript:self.close();">Close Window</a>

Drop-Down Menu

A drop down menu is great when you don't have much room for your navigation. There are two types: with a button to activate the link, or an automatic jump with no button at all. First, with a button:

link 1link 2link 3 

Copy the following code into your HTML document wherever you want the drop-down menu to appear. Change "page.html" to the location of the page you want to link to, and "link 1,2,3" to the text you'd like to appear. You can add as many links, or "options," as you'd like.

______________________________________________________________________

<form name="jump">
<select name="menu">
<option value="page.html">link 1</option>
<option value="page.html">link 2</option>
<option value="page.html">link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="go">
</form>

______________________________________________________________________

 A drop-down menu without a "go" button is only slightly different; as soon as you select an option it will jump automatically to that page. Here's the code, customize it the same way:

______________________________________________________________________

 <form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="page.html">link 1</option>
<option value="page.html">link 2</option>
<option value="page.html">link 3</option>
</select>
</form>

______________________________________________________________________ 

Chromeless Windows

A chromeless window is a pop-up window that is completely customized to match your site. Here is an example. It will work on IE 4.5 and up; on other browsers it will open a regular window about the same size.

To make your own chromeless window, download this ZIP file. In it is the JavaScript and the images you'll need.

Add the following code between the <head> and </head> tags.

__________________________________________________________________________

<script src="chromeless_35.js"></script>
<script language="javascript">
function openIT(u,W,H,X,Y,n,b,x,m,r) {
  var cU  ='close_up.gif'
  var cO  ='close_ovr.gif'
  var cL  ='clock.gif'
  var mU  ='min_up.gif'
  var mO  ='min_ovr.gif'
  var xU  ='max_up.gif'
  var xO  ='max_ovr.gif'
  var rU  ='res_up.gif'
  var rO  ='res_ovr.gif'
  var tH  ='<font face=verdana size=1> ÐŒ Window title</font>'
  var tW  =' ÐŒ window title'
  var wB  ='#000000'
  var wBs ='#FFFFFF'
  var wBG ='#FF0000'
  var wBGs='#00FF00'
  var wNS ='toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0'
  var fSO ='scrolling=no noresize'
  var brd =b||0;
  var max =x||false;
  var min =m||false;
  var res =r||false;
  var tsz =20;
  return chromeless(u,n,W,H,X,Y,cU,cO,cL,mU,mO,xU,xO,rU,rO,tH,tW,wB,wBs,wBG,wBGs,wNS,fSO,brd,max,min,res,tsz)
}

function openIT2(u) {
  return chromeless(u,'rarewin',500,300,null,null,
         'close_up.gif','close_ovr.gif',
         'clock.gif',
         'min_up.gif','min_ovr.gif',
         'max_up.gif','max_ovr.gif',
         'res_up.gif','res_ovr.gif',
         '<font face=impact color=#f0f0f0 size=5> |||| THIS IS A TEST ||||</font>','||| WIN TEST',
         '#505050','#ffffff',
         '#707070','#707070',
         'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0','scrolling=no noresize',
         10,false,false,false,35)
}

</script> 

__________________________________________________________________________

To open the chromeless window, use this code:

<a href="#" onclick="mywindow=openIT('window.html',400,200,null,null,'mywindowname')">Open Chromeless</a>

'window.html' is the page you want to open in the window. 400 is the width in pixels of the window, 200 is the height. null means we want it to open in the center of the screen.

To customize the window, open up the graphics from the ZIP file in a graphics editing program and make them look how you want. Then edit the code you placed in the head of the document. This is what the different variables mean:

wB	| Border color.
wBs	| Border color on window drag.
wBG	| Background of the title bar.
WBGs	| Background of the title bar on window drag.
tH	| Title for the title bar of the window.
tW	| Title for the Windows task bar.
brd	| Extra border size.
max	| Maximize option (true|false).
min	| Minimize to taskbar option (true|false).
res	| Resizable window (true|false).
tsz	| Height of title bar.

Please note that I cannot/will not provide support for chromeless windows. If it's not working, I'm afraid you'll have to ask somewhere else.