My pals Nick and Dan, perhaps coincidentally, have both started learning HTML recently. I know a little HTML, CSS, JS, and PHP, so I'm going to post a few mini-guides to help people get started.
The first thing to do is gather some software.
Web browsers read HTML files and render the web page based on the code in it, but not every browser does it the same way. There are three main rendering engines: WebKit (Safari, Chrome), Gecko (Firefox), and IE (Internet Explorer, of course). So in order to test your site you'll need to have several browsers installed.
For Windows users this is easy. IE comes pre-installed, Firefox is easy enough to find, and you can pick Safari or Chrome based on whatever one looks neater (I like Chrome). For Mac and Linux users it gets a little more complicated. Both have access to WebKit and Gecko, but IE doesn't run native on either OS, so you'll need to have a Windows PC handy, dual-boot, or virtualize Windows with QEmu, VMWare, or something similar. Virtualizing is the quickest way to test a site in IE, which is what I do. I'm not going to explain how to virtualize Windows, but there are many guides online that can help you get set up. Don't think you can get away with just using Gecko and WebKit. IE is the worst browser ever, and its the one most likely to break your site. Unfortunately its still the most popular browser. Its imperative that you test your site in IE before publishing it.
Now that we have a means of viewing our HTML, we need something to help us write it.
You can write your website using nothing more than Notepad, but it will be a huge pain. Luckily, people have made programs that make HTML much easier to write. These editors color the code so its easier to navigate, number your lines, show validation errors, etc.
One of the best free editors is Kompozer. In Kompozer you can see a live preview of the HTML you are editing, have several pages open in different tabs, and all sorts of cool stuff. It doesn't support JS in the live preview (you can open the page in your browser to see the JS work, though), and CSS is kind of a pain to work with, but for free you can't find a better program.
If you don't mind investing in software you have many more choices. For Macs, Coda and Espresso are very popular (personally, I love Coda). They aren't cheap (~$100), but both are excellent. You can download a demo of each to see if its worth buying or not.
I haven't done any work in Windows recently, but CoffeeCup is a well-featured editor that is priced very well ($49). It also has a demo you can try first.
There are also WYSIWYG (what you see is what you get) editors like DreamWeaver, iWeb and, to a certain extent, Photoshop (with the slice tool). I hate them. Its very easy to slide elements around on the page and make it look pretty, and you can throw together a site in about 10 minutes, but you'll have no idea why things work the way they do. You'll be lost if you need to edit a line of code by hand. Take the time to learn HTML the hard way and you'll run in to far less problems.
You are ready to start writing your site. I'm not going to get into that right now, i'll start showing some code in my next post. Once you have your site written you have one more step: validation.
Like any code, your HTML must follow certain rules. Tags have to be closed properly, certain elements can't exist inside of others, etc. You need to make sure you didn't violate web standards. To do this you can visit W3C. Upload your HTML document and the site will show you any errors you may have made. Don't panic if you have a ton of errors, most of the time it is a simple mistake like not closing an img tag. Review your errors, fix them, and validate again. After you learn what the rules are you'll be able to write a website that validates on the first try. Theres also a CSS validator at W3C. Don't forget to check your style sheet for errors as well. Keep both of those sites bookmarked, they will come in handy.
If you plan on uploading your site to a server online you'll need an FTP client. FTP stands for File Transfer Protocol and is simply a way to send all of your site's resources to someone else's server. Filezilla is great, free, and cross-platform (Windows, Mac, and *nix), so keep it in mind for when you get to this step. Later on I'll show you how to find a free server and domain name to host your site on, but for now this isn't super important.
So now we have all the tools we need to get started. In my next post i'll get into the actual HTML code, CSS, and how it all works together.
No comments:
Post a Comment