The H8ers Club

Now that you have downloaded the programs from the previous Chapter. Lets make them work as one cohesive unit.

In Wampserver the basic files for your “mock website” should be located in c:\wamp\www\ . If you left-click the meter in the task-bar this is known as “Localhost” at the very top.

Now open and run HTML-kit go up to your work space ( the rectangle with the list of files i.e Templates, Snippets etc. ) and right-click. A menu should pop-up. Go down until you are over the “Add/Remove FTP/ folder” a side menu should pop-up and show “Add FTP Server.. , Add Local Folder.. , Remove Server/Folder”. Move your cursor over “Add Local folder..” and left-click. A properties box will show up with the title “add folder”. Under “folder properties” add the path to your wamp\www. You can click on the folder icon to browse for the path. Next to  description you can leave the default or you can change it to whatever you like. I usually use “localhost”, of course without the quotes. Now click on the General tab. Under General Options enter in the Web Root Address box either “http://localhost/” or “http://127.0.0.1/”, it doesn’t really matter they both mean the same thing. Now you have a folder that will show you the contents of c:\wamp\www\.

But wait the fun has only begun. while still in HTML-kit go up to the top-navigation bar ( i.e. the one that has file, edit, etc., ). Left-click edit and go all the way down to preferences and you guessed it click. A panel will open up with the title, give you three guesses, that’s right “Preferences..”.

First thing we want to do is go to “Save” in the menu of “Preferences..”  and find “allow undo after save” it’s located under “File Save options” , please click that check box you’ll thank me later.

Second thing is you want to go-to menu item “Programs” and click the “Edit Browser List” button. A new panel should open. Now click the “Add” button. In “General” click the open folder button in “Program Path”. Click the my computer icon on your left. Click local disk (c:) or whatever your local disk is. now click the “Programs Files” folder. Find “Mozilla FireFox” and click that file ( Please note I am not trying to break your mouse ). Now , finally for the love of god, click the FireFox icon and click the “open” button. After a fun filled trip of navigation go down to the “Advanced” next to “Parameters” click the arrow and click “”{{FILE}}” go down and click the “O.K.” button. Now you have successfully added a new browser, for previewing your work, to Html-Kit. if you have made it this far a big high five goes out to you.

Third thing. While still in “programs” go down to where it says “image and scripts editor” in the text-box click on the open folder icon. Now locate “PaintDotNet.exe” it is usually under c:\Program Files\Paint.NET\PaintDotNet.exe . This will allow you to open your images with Paint.NET and save them in the file where they were edited.

Fourth and last thing. Go ahead you can say it “Thank God”or “Allah” or whatever your diety is, if your an atheist you can say “bout f#*$ing time”. This is where it gets technical ( just kidding). Go tothe “Preview” menu item and go down to the “Edit Preview Rules” button ( I think we have a general understanding of what to click by now ). Under the “Path to server mapping” click the “add..” button. Next to “file path” you could either browse for your c:\wamp\www\ folder or if you already know the path by heart you can enter it. Next to “Server Path” enter “http://localhost/” or “http://127.0.0.1/”. Now every time you preview one of your files it will run the file through Wampserver, so you can start learning any web based programing you like and see the results.

Now we have a cohesive unit of programs that help each other out, while helping you learn the fun and exciting world of staring in front of a computer and figuring out your code. But if you’re like me I think this is fun.

You might be asking yourself “Now What?”. Well now we can begin Learning the ancient basic language of the HyperText Markup Language and then we can build from there in the next chapter. All of these languages, that I will try to help you learn, compliment each other and are the basic blocks of web-site developement and design.

If you have any questions or comments please feel free to ask. Can you digg it?