To the Left of Bill

Terra, frequent reader of mine (and I of course am a frquent reader of hers), asked left me a comment yesterday that inspired me to write a post. Its about web programming. I’m all politic’ed out and since this blog is also about web programming (because I run it and I say so) I think I’ll inform anyone who is into that stuff or wants to learn more about it.

So, you have a great idea for a web site. You know you’re idea is so good that its going to be at the top of Google’s search results even if people aren’t searching for the subject of your site. You’re going to make billions off it and retire to an island in the Bahamas ( watch out for the Bermuda Triangle, please, its very dangerous). But where to start? Before Steve Jobs starts calling you for advice you need to know how to make your idea a reality. Luckily I know a thing or two about this stuff. Read on and learn.

If you want anyone besides the people who use your computer to see the site you’re going to need a web host. Basically a web host is like an apartment for your site. You pay a yearly fee for the domain name (www.yourSitesName.com) and a monthly fee for storing your site on the hosting companies servers. A server is basically a computer dedicated to sending out web pages to those who request it. So you typed in http://leftofbill.wordpress.com and Wordpress’s server (computer) sent out all information needed to display this page. I recommend Go Daddy. I hosted two web sites with them and I had no problems. They are pretty cheap too. I used a .net domain name because its usually cheaper than a .com or a .org but just as easy to remember. People can usually remember those big three. For even cheaper domains you can go with .info, .tv, and a few others but generally people will only remember .com, .org, and .net. Right now .net domains on Go Daddy are $12.99. In addition to the yearly domain name fee you must pay for monthly hosting. Go Daddy has three packages (all web hosts usually have three packages). If you’re not sure which hosting plan is right go with the cheapest. The basic plans usually provide more space than you need and come with everything you need to get up and running. If you’re just starting out definitely go basic. You can always upgrade at any time if you feel you need more space, more bandwidth (bandwidth is the amound if information sent from the server to all the computers visiting the site. You have a finite amount of bandwidth which means the server will send out information, measured in megabytes, until you reach the monthly limit. The server will then stop sending “serving” your site until the next month when your bandwidth is refilled. Think of it as a prepaid cell phone plan. You talk until you reach the limit and then you have to refill the minutes. Except in this case the “minutes” are refilled automatically each month.) or support for more programming languages. Basic hosting with Go Daddy is between $4.25 / month for a year and $5.00 / month for three years.

Another hosting option is the free route. There are a ton of free web hosts out there. I won’t recommend any one because I’m not a fan of any of them. If you’re new to this whole thing and your site is very simple like a personal home page or a site with pictures of you and your family, if your site’s purpose is to stay in touch with family and friends then a free host might be just fine. Most free web hosts place ads at the top of your page. This is how they make their money. Free hosts generally don’t give you a lot of storage space. So if your band has a bunch of mp3’s they want to host you probably won’t have enough space. Some hosts don’t even allow mp3s. Some only allow web pages and pictures. If you are trying to build an online store or want a members only section on your site a free host won’t allow it because they don’t support PHP, the language generally used for those purposes. Again, if your site is just a hobby, for family and friends only, or if you’re not trying to bring a lot of traffic to your site, free hosting is a real option.

There is a third option. It may sound scary at first but it honestly isn’t as hard as it seems. You can host your site on your own server. You don’t need a big fancy computer with fifty processors and an infinite amount of RAM to host a site. You can use that old computer that’s been sitting the crawl space collecting dust. This option is almost free. You could buy a new computer for this and if you do I recommend buying one specifically built for web hosting like Apple’s Xserve or even an Apple PowerMac. I recommend Apple not because of the fanatic that I am but because of the system itself. Macs come with server software installed already. Apples OS X 10.5 Leopard comes in a server edition built especially for hosting. But you don’t need to get a new computer. You can use your old one. I’m going to run through the steps to get you up an running for a few different setups:

An old Windows or Mac:
The first thing you want to do on each of these is clear out all the garbage files. Delete any programs that will not be used. Keep in mind that only time you will be playing with this computer is when you are adding files to the site so you won’t need Photoshop or Microsoft Word your server. Defragment the drive on your Windows machine or repair system permissions on your Mac. I’m not going to go into the gritty details of getting things set up so this next part is an overview of the steps. There is a way to set up Windows (any version of it) to run as a web server but since I haven’t worked on a Windows machine for almost four years now I can’t remember. So what you want to do is get a program called Xampp. Its free so just Google it and download. Xampp will create a directory (a folder) where you put all your site’s files. On a Mac that folder is “htdocs” but I’m not sure on Windows. Xampp will install the Apache web server software, MySQL database server and PHP. I know you don’t know what that means. Apache is server software. Don’t be fooled by its price tag. Just because Apache is free doesn’t mean its substandard. Even large coporations use Apache. But in their case they pay. Apache is free to people like you and I who aren’t making money off our site or are making a small profit. I won’t go into how it works. All you need to know is that you need it to run your site, especially as a beginner. I will go into PHP and MySQL later. For now the only thing thats important is that you need Apache and it doesn’t matter why. Just because you have MySQL and PHP installed does not mean you need to use them. You can host a site with HTML pages only. So don’t get upset now, you don’t have to know anything other than HTML. Before I get to the last step let me explain how to do this on a Mac.
On a Mac you can either install PHP and MySQL directly into your system so it works with the Apache software that comes preinstalled or you can get MAMP. MAMP is the Mac version of Xampp. I use it only because I screwed the server software that comes preinstalled. I didn’t have time to fix it. MAMP is great for beginners. All you do is install the program and you are up and running. It installs a fresh copy of Apache, MySQL, and PHP 4 and 5 (you get to choose which one to run in the preferences). Your user name and password to access MySQL and PHP using MAMP is usually ‘root’ for the user and ‘root’ for the password. You might want to change this if you ever decide to use MySQL. The folder that your web site will go into will be “htdocs” which is inside of the MAMP folder which is inside the Applications folder. On Windows or Mac you now need to connect your computer to the internet and keep it connected at all times. If you have dial up you NEED to upgrade otherwise people will be waiting hours to see one page of your site. Now that your Windows machine or Mac have the server software installed all you need to do is sign u

p for a DNS or a domain name server. Basically you pay around $30 as a one time fee for your web site name and for the DNS to send all traffic to your server. You probably just got confused. How does that work? What does that mean? I’m lost! Hang on, let me explain.

A DNS is a server that redirects all the traffic intended for your site to your server. For example, I type in www.hotbabesinbikinis.com. That web address is sent out to a DNS. The DNS has a list of IP addresses and the web site name that corresponds to them. The DNS looks in its database and finds the IP address that goes with the name “hotbabesinbikinis.com” and sends your request to their computer. You’re probably asking “how does it know my IP address?”. Well each time you connect to the internet you are assigned an IP address. Its like a street address except it changes every time you log on or if you have DSL or cable like a lot of people it changes periodically. One reason it does this is to thwart hackers and such. When you sign up for the DNS service it records your IP address and pairs it up with the name of your site. When your IP address changes your computer, or server, “pings” the DNS server. By “ping” I mean it basically calls it up on the phone and has a conversation that goes something like this:

YOURSITE.COM: Hey, DNS? Its me, “yoursite.com”
DNS: Oh hey man, whats up?
YOURSITE.COM: Well I’m calling to let you know my IP address changed
DNS: Oh, alright, dude, I’ll mark it down and give everyone the new directions to visit you

I hope thats clear because I’m done explaining it.

Alright, so by now we either have paid, free, or self hosting. But hosting is nothing without content. To create content you’ll need to know some programming languages. If you’re not interested in learning that sort of thing there are some WYSIWYG editors out there that require no programming at all. WYSIWYG stands for “What You See Is What You Get”. I am against WYSIWYG for a few reasons. I think coding is a very creative experience, you have more control over the look of you content, and there are a lot of things WYSIWYG editors can’t do. But if you are going to use one here’s the scoop. They basically work like Microsoft Word. In fact you can create a web page using Microsoft Word. They are like Word in that you can style text, add pictures, tables, and edit the layout just like how you can use text boxes and other styling tools in Word. There are a lot of WYSIWYG editors out there. There’s NVU. I don’t recommend it as they stopped developing it. Theres Kompozer. Kompozer is an updated NVU. When the company stopped working on NVU one of the developers started working on his own, added to it, and then called it Kompozer for legal reasons. I recommend it. Its nice because you can preview your work and see how it would look in a browser. What I like most about it is that you can actually play with the code too. So if you are creating a web page the WYSIWYG way in Kompozer you can switch to the code view and see what the code would look like. Great for learning. Then there’s Dreamweaver. Very advanced and very expensive. Has WYSIWYG and code views and a shit load of other features. I recommend Kompozer though because its free.

If you really want full control over your code you can be awesome and learn a programming language like HTML. There are a bunch of them out there but I’ll go over the essentials. These are the easiest and most useful to learn.

HTML and XHTML are pretty much the same language. When HTML was first developed it was used by scientists as a way to communicate papers and test results. When the rest of us got a hold of it we wanted more than just plain text. We wanted to make our web sites pretty with animated gifs (remember those?) and all manner of scrolling and blinking text. But thats not what HTML was designed for. Nowadays HTML or HyperText Markup Language is in version 4.0. This is supposed to be a transition to XHTML. Before I explain what that is let me tell you how to use HTML 4.0 properly. HTML is to be used for information only. Meaning you generally only want to use HTML to write text, add links, and add photos to web pages. You don’t want to use it change background colors, align paragraphs or do other comsmetic stuff. As you learn HTML you’ll understand what I am talking about. As it stands now HTML will allow you to do all that cometic stuff but browsers will stop supporting those functions in the near future so start learning CSS and XHTML as soon as you can. XHTML is basically HTML with a few differences in syntax. If you know HTML then you can learn XHTML in a day or two. XHTML strictly enforces the “no cosmetic stuff” rule. If you write a web page in XHTML and use it like you would regular HTML one of two things may happen. If you did everything right and the browser recognizes your page as XHTML then all the cosmetic stuff will simply not show up. The other thing that could happen is that the browser doesn’t recognize your page as XHTML and treats it like regular HTML in which case nothing really bad happens but you have to live with the fact that you are an XHTML loser.

CSS (Cascading Style Sheets) is an absolutely essential language that is used along side HTML and XHTML. If you followed the HTML and XHTML rules and didn’t try to make your web page look pretty then you’re in for a treat. You’ve avoided the temptation to adjust your site’s layout, background color, etc. and now you get a prize. CSS gives you waaayyy more control over the look and feel of your site than HTML or XHTML ever could. CSS’s purpose is specifically to work alongside HTML and XHTML. Usually the two files are seperate. One advantage to this is faster loading times. Since your (X)HTML pages aren’t full of cosmetic code and only the actual information appearing on the site is contained within them your files are much lighter and thus much faster. CSS is as easy to learn as (X)HTML (which is pretty damn easy) so there’s no reason why you shouldn’t use it.

MySQL is a language and software that is installed on your server. It basically runs databases that you design. If you want to install a program like Wordpress on your site you don’t need to know anything about MySQL, you just need it along with PHP installed on your server. Wordpress will do the rest. If you are going to create your own web applications like a blog, a members only section of a site, an online store, or even your own personal online to-do list or phone book you will need to know MySQL along with PHP. Its not a difficult language to learn, in fact its one of the easier ones, but its also not that easy. If you have mastered HTML, XHTML, and CSS then you are ready for PHP and MySQL.

PHP works hand in hand with MySQL to run your database. MySQL handles the creating of the databases, their columns, and storing content while PHP runs in your HTML pages to retrieve the information contained within the database. You’d be surprised to learn how many websites that you visit every day use PHP and MySQL. The page you are reading now uses them. MySQL stores my posts in a database table and PHP retrieves the information from the title, date, author, and content columns of the database when you request this page. Pretty cool huh?

You should first learn HTML, then CSS, then XHTML to start. Once you are comfortable with those languages you might want to start building some more complicated web pages. Thats where PHP and MySQL come in. Remember that there are a lot more languages than the ones I discussed here. I happen to know all of these but you don’t have to. HTML, XHTML and CSS are absolutely necessary but you don’t have to use PHP and MySQL. There’s Perl, Pear, Ruby, Rails,Python, Java, Javascript, and many others.

Now that you’ve learned the necessary programming languages you can now create the files that will become your si

te. I recommend creating the entire site on your computer using Xampp or MAMP even if you aren’t going to host yourself just so that you can see what the site will look like online. Please complete the site on your home computer before putting it online - people hate to see a site that says “Under Construction” or even worse a site that doesn’t even warn you and you only find out after half the links don’t work. People won’t visit a site like that again. So make sure you complete it at home, test every link, then upload it. There are a plethora of FTP programs for windows and mac. If you’ve gotten this far I don’t think I need to explain how to upload. For Mac I recommend CyberDuck as an FTP client. If you are using free hosting you usually have to go to the host’s web site, login to your account and use a browser based uploading system. If you are self hosting then just drop your HTML files into the site folder (”htdocs” for Macs running MAMP) and you’re ready to go.

Happy coding.