Understand How a Web Page is Loaded
Let's put it all together. Knowing how to code HTML is half the story. Just like a programmer who needs to understand compilers, you need to understand how a web page is handled, processed, and evenutally served to the end user. I'll use the diagram below to illustrate.
For simplicity, I have broken up the diagram into three tier.
Tier #1 - I am God
Webmasters, Gurus, Administrators, whatever term you use they are essenitually the basement workers keeping your web page running. Looking at the current statistics of webservers used in hosting sites, there are 2 major players. On the top we have the open source, herring eating Linux. Right behind is the always pretty looking Microsoft.
Understand the Penguin
Work in this industry long enough and you're bound to be faced with the penguin. Linux is here to stay. My advice to you, download and burn a live cd. Since the birth of Ubuntu it has been climbing the popularity chart. If you're a beginner, start with Ubuntu.
Burn the iso file on CD and boot your laptop/desktop with the CD. Linux is driven by command line and text files. You can literally configure/modify/fix just about anything in the OS by editing certain files. Load up the OS and play with it for a good week. Print out a list of basic commands and go at it.
The Linux path
If Linux is your OS, then your webserver of choice would be Apache. It's a wonderful webserver, where you can configure all your settings through a config file. The beauty of this means that once you have configure everything, you can backup the config file or port it to another Linux server and all your settings will be the same. Modularity is key.
To get started, install Apache on Ubuntu and check out the config file. The ubuntuguide.org has useful commands to install Apache. I won't cover ssh, htaccess, PHP, mySQL, or firewall topics now. Maybe in the near future.
The Windows path
Windows choice of arsenal is IIS. The steps are fairly simple and you should be able to get one up and running in 30 minutes.
You should install IIS to get familiar with how Microsoft's IIS is configured and setup. Just playing around with the settings will help you understand how the backend works. Install IIS so you can learn the Microsoft way.
If you just want a webserver that won't require installing or modifying your OS, then I suggest uniform server. It's a portable webserver that comes with Apache (for win32), PHP, mySQL, and Perl. If you want to locally test your HTML pages, then this is the route. I run this on my home network and I use it as a tool to teach the co-ops at work ;) Knowledge is key. The more you know, the better web developer you will be.
HTMLTree comment: Please understand there are many different webservers that exist. I have only discussed the two strong holds in the industry. Most will fall under a Unix base operating system where you configure the webserver through flat files or Windows point, click, and configure GUI. Your future employer may have a Solaris, Domino, Zeus, IBM HTTP Server, etc. if you have access to these platforms, go right ahead and play with them. Most applications contains a 30-day free trial.
Tier #2 - Your code please...
This is your playgound. Unfortunely this is a vast playgound. I'll try to cover most of them, but I forsee a more in depth section in the near future.
Server side vs. Client side
Before I dive into the massive pool of web lingo, we need to seperate the various topics into client and server. Back a few years ago, nearly all web technologies was powered by the server. CGI, Perl, SSI. They all were possible through configuration of the webserver. Now with home users owning powerful computers, the web started to leverage the client side. Complex Javascript, CSS, DOM, Ajax, all the code is sent down to your browser. From there the client's PC cycle is used to render, execute, and perform event actions.
| Server Driven | Client Driven |
|---|---|
| CGI/Perl | HTML/CSS |
| PHP/ASP/JSP | Javascript/DOM |
| Server Side Include | Adobe Flash |
HTML
All code destined for the web will contain some kind of HTML syntax. This is the core. If you want full control over your web page, you'll have to code in HTML. The latest stable version is HTML 4.01. Don't hold your breath for the next version. This doesn't mean HTML is going away, in fact it's the opposite. HTML 4.01 is the baseline for XHTML, cHTML, DHTML, etc.
Dynamic Content
Web pages needed to be manually updated. It wasn't smart enough to perform logic. Then came the rise of PHP, ASP, JSP, and all those other acronym. This allowed developers to insert code for login security, file access, database retreival, etc. All this is possible because the engine is on the server and the code is compiled during runtime. See the image below:
Moving images
Back in the old days, the only animation available were displayed in .gif files. Now with the rise of broadband Internet, we have Adobe/Macromedia Flash serving up eye candy animations and custom games. You can try out their application with a 30-day free trial. Or you can purchase a digital camcorder and post your streaming video/audio through YouTube. Tier 2 is all about user content. And video is just a another form of content.
Database
The step child of mainframes, databases. It's all about storage. If your site needs a shopping cart, then expect a database running in the background. But be careful in this realm. If you don't design your database correctly, you'll be facing a massive bottle neck. Database efficiency is key to a large scale site. Imagine how slow ebay would be if they stored everything in one table.
Middleware
Without going overboard, I'll call this section boatware, um i'm sorry, middleware. That would include J2EE, .NET, SOA, etc. Remember the rule 'keep it simple stupid'? Well this is the opposite. Large companies sells these solution only to end up with confused clients paying for support. But it does have some benefits. It can deploy existing applications or databases to other components without massive changes. A customer may have an existing Java project that connects into their secured database. They can purchase a middleware application, plug in their Java project, and within minutes be able to logon a secure portal on the web to execute their Java project.
HTMLTree comment: Ajax, Ruby on Rails, XML. Yes, I skipped a bunch of technologies in this tier. But the only way to cover them all is to dedicate individual section on these topics. Look for these in the near future.
Tier #3 - The client
Web browsers come in all different shapes and sizes. You may not care, but your audience will. Like it or not, your site's look and feel is under the browser's mercy.
MSIE
And in this corner, we have the heavyweight champion Microsoft Internet Explorer. With their latest release, MSIE 7.0, we must make sure our site looks correctly on MSIE. They like to defy the standards, so expect your Javascript/DOM, CSS, and HTML to render differently. Internet Explorer is the elephant and it must not be overlooked.
Mozilla/Firefox
Gaining popularity every year is the infamous Firefox. It's based off the Mozilla code, so both browser will render HTML identically. They do follow the w3 standards, but there will still be a few attributes that are Mozilla/Firefox specifics.
Safari
Them Mac users are taking over the world. Their engine is based off the Linux web browser Konqueror's. With more and more Macs on the rise, you'll have to make sure your site works on Safari.
Opera
What is this Norwegian company doing in the browser war? Well I'll tell you. They are dominating the small footprint sector. This means cell phones, portable devices, anything with an LCD screen and a cpu they will put a browser on it. So if your audience will consist of cell phone users, then make sure you test for Opera browser.
HTMLTree comment: Besides being concern with web browsers, web designers/developers must also think about screen resolution, flash plugins, disabled javascript, cookies, bandwidth, accessibility, and many, many more.