I wanted to contribute something actually more useful. I am just now starting to blog regularly and receiving comments, which if they are not contributing then I delete them. How I want to contribute is how to make a 100% valid XHTML/CSS site. I’ll be including “homework” for you to do before the next post. Each post will rely on that work you did previously. This guide is expecting you know very basic XHTML and CSS. I will be building a site with you and you can see how to use those elements, but I ask that you know what tags are and just a very basic idea of those main programming languages. If you do not know these visit these sites:
W3 Schools is a great place and learned every bit of (X)HTML and CSS there. You can learn and practice in their editor, but you will need an editor of your own and some other tools.
Tools you will need in developing any website are
- Computer (duh)
- Text Editor
- Web Browser (please not Internet Explorer)
Those are the very, very basic tools. If you are serious about this in any way, and want to put this on the web you will need the following in addition to the above tools:
- FTP
- Vector and/or Bitmap Image Software
- Web Host
- Domain Name
If you are new to web development you probably don’t know what software to use. Feel free to skip each category if you already have software you like in that category. I’ll be giving the recommended software and then a free equivalent of that software. Please remember I am on Mac OS X 10.5 (Leopard). If you are on Windows I don’t have a lot of software compatible on that and I refuse to use it, so you will have to do some research on your own. If you are using a Linux distro I will help you as much as possible. I also own Ubuntu 7.10. I’ll give an example for each app in Linux as well, but the paid software is mostly Mac stuff.
Text Editors
Text editors are a dime a dozen. There are so many out there. If you are on Windows you could very well use Notepad. I would not recommend it, but you can. I personally use TextMate which is my personal favorite and the only editor I would ever pay for. It has color coding and is very minimal which I like. It has great features and is fairly cheap compared to the alternatives. If you are looking for something free, but still powerful get TextWrangler. I can honestly say its a great editor and the best free one out there.
Ubuntu (Linux) users could use TextEditor which is my favorite when using Ubuntu and it’s preinstalled. I also used Screem for awhile as well. You can download this in the add/remove apps.
Web Browsers
Almost all browsers are free, but there are certain browsers you need to make sure you have. The three browsers you will need to test on are:
Firefox (Windows, Mac, Linux, and more)
Safari (Windows and Mac)
Internet Explorer (6&7) (Windows only)
Unfortunately, the most used browser is IE 6 which is a big, gigantic, humongous, piece of crap. You will end up writing an entire separate style sheet just for it and it doesn’t support transparent pngs.
FTPs
How are you going to get files to the server you have chosen? Unless you have your PC as a web server, you will be using a FTP to transfer your files. FTP stands for file transfer protocol. My favorite FTP for the Mac is Transmit from Panic. They make some awesome apps. If you are a student get Fetch which is the FTP I used for a long time until I got Transmit which I like much better. If you want a totally free app for the mac though I would get Cyberduck. I have used it a few times and used it at my work and it’s the best free one out there.
On Ubuntu I never used an FTP. I used the Connect to Server in the Places folder. I then select FTP and fill out the info. I think it work great and it makes it look just like another folder on your OS.
Vector and/or Bitmap Image Software
A website isn’t a website without any images. Even Google’s stark homepage has their logo. How you are going to make these images is your choice. You could always use stock images from sxc.hu which are free, but free vector files are harder find and you might need to create basic images such as rounded corners and such. I usually use two different image editing software. The most used is Adobe Illustrator CS3 and then after that I use Adobe Photoshop CS3. I recommend these, but these are by no means cheap. I will go into the differences of these two and what vector and bitmap mean in a later chapter.
If you can’t afford this, which is understandable, there are two widely used apps for both Mac and Linux. InkScape (replaces Illustrator) and GIMP (replaces Photoshop) Both are very good, but I don’t have a lot of experience in either. More in InkScape then GIMP, but I can say that both are plenty good enough for basic web design.
Web Hosts
You will probably do not need a web host right away and you will be able to edit and program most every file right on your computer. When you are ready for one I have one free option for you. This is the best free option out there and I have been using it to host my various websites and used it as a testing server many times for clients. Trap 17 is it’s name and it’s just great. It supports just about everything and gives you tons of space and more than enough bandwidth. If you are going through more bandwidth than they offer you should be making some serious dough. It’s completely free and no ads. All you have to do is post in their forums. You can find me there as BooZker. I am a regular member there and I am well known, so if you have a question PM me or ask someone there if they have seen me around.
They give you a certain amount of points based on the content of the topic. one credit is equal to one day. I have had 200 credits at one time and didn’t go back there for three months. It’s nice having that security with a free host. You will only need 10 credits before you can ask for web hosting. I would get the biggest package there. Please just go to http://trap17.com for all the info.
I do not know of any other paid hosts, because I have only used Trap 17, Bravehost, and FreeWebs. Trap 17 is by far the best and is the only one without ads and isn’t dead slow.
Domain Names
Last but defiantly not least is a domain name. A domain name is a like a speed dial on a phone. Instead of typing in http://64.233.161.18 you would type google.com. This is crucial for any successful website. Plus it’s super cheap. You can get domain names sometimes for a little over a buck, but godaddy.com is my preferred place to buy domain names and they are super cheap on their .com names. I will go into detail on how to purchase and move the name to your host, which in this blog will be Trap 17, and set the DNS (Domain Name Servers) up.
So this conclude my post and Ch.1. If you have any questions, see any typos, or whatever drop me a comment. You have some homework to do!
- Get a text editor
- Get a FTP
- Get vector and/or bitmap image editing software
- As many of the browsers listed above as I can
- Learn about HTML, XHTML, and CSS. Just the basics!
- Sign up and start posting on Trap 17.
The other stuff can wait such as domain names and web hosts. Just try to get that stuff done and that way next chapter you will be able to jump right in.
Good Luck!