====== Web Development Introduction ======

Consider the following three things.

  * Content/Data: What does it say or show?
  * Presentation/Style: How does it look?
  * Behavior/Interaction: How does it respond to input?

These three components overlap somewhat, but the better you separate them, the easier it is to maintain a site.  This is also how you tackle a large project, ideally with team members skilled in each area.

Also, keep in mind you do not want to reinvent too many wheels.  If your site has more than a few assorted pages (which you can maintain by hand using a text editor, with full bragging rights) you will likely be much better off installing a suitable full-scale web server application. (Then use your hand-coding skills to customize the application to suit your needs and to troubleshoot it when it barfs.)

Fully hand-coded:
http://bohodance.com
(Count all four pages!)

Modified web server application (Dokuwiki):
http://wiki.waggy.org/dokuwiki/econ/coffee_roast_solar
(I hacked one web application into a plugin for another application to generate the graphs from wiki page content.)

The only interesting web server application I wrote and have online right now needs to be modified to work with a different database driver and to be updated to support current browser capabilities (as does bohodance.com to a lesser degree).  One of the pitfalls of writing your own apps is having to fix all the bugs yourself.

Web publishing software occupies a middle ground, but often does a poor job of separating content, presentation, and behavior; putting them all together is often what the software is designed to do.  This works well for some people doing small sites.

Finally, here is a short list of references.  Think of these as the web's Code (as in Building Code or Fire Code).

Content: HTML, XHTML, DOM, and MySQL

  * http://www.w3.org/TR/html401/
  * http://www.w3.org/TR/xhtml1/
  * http://dev.mysql.com/doc/
  * http://www.w3.org/DOM/

Presentation: CSS Level 2, WAI AAA

  * http://www.w3.org/TR/CSS21/
  * http://www.w3.org/TR/WAI-WEBCONTENT/

Behavior: PHP, JavaScript

  * http://www.php.net/manual/en/index.php
  * http://www.w3schools.com/jsref/default.asp

Here's how it all typically fits together.  Your PHP code pulls data from a database and formats it as WAI-AAA XHTML, accessible and formally structured HTML.  The browser reads the XHTML into a DOM data structure so it can apply your CSS2 to make the page look pretty and JavaScript to make it dance around.