While updating my ancent website (started in the 1995’s .. so very html 1.0), I decided to look into the current state of the art of web publishing.
Imagine my surprise when I found that the cruddy table based mess the .com sites used to achieve their unnatural, pixel perfect goals had been replaced by a very clean separation of content and structure (xhtml) and the looks and style of the page (css).
I put together several examples for a talk to our local technical team. Here’s the talk’s “slides” .. pages of reference material and demos.
Note: The talk included considerable CSS magic by making simple changes in the style sheet using CSSEdit and having immediate response in the preview page. So some of that is missing for folks just looking at these pages.
The Basics
Here we look at old html and new xhtml and css.
- Basic & Simple HTML
- DocTypes
- New XHTML/CSS
- Our Basic XHTML Doc
- Our Doc’s Structure
- Mozilla’s Editor’s Structural View
Before we start: Some of The Heros
These folks, and many others, brought order back from the chaos of the early, table-centric (read “Gawd Awful”) mess our poor web wandered into. Notice how design played a strong role in achieving this revolution. Techies — be humbled.
The Tutorial
Note: During this part, I used the very simple document discussed above, simply changing its style sheet. Between step 1 and 2 I added a bit more material to show the impact of the styling.
- Play0.html, our starting point
- Styling 101 – The CSS Box Model
- Play1.html styled with Play1.css
- Play2.html styled with Play2.css
- Play3.html styled with Play3.css
- Play4.html styled with Play4.css
Help: The Great CSS Community
Here’s the tip of the help iceburg. My recent experiences converting to xhtml/css and then Textpattern as a CMS really made me appreciate all the help out there. Angels, we thank you!