css layout with html5
HTML5 introduces a set of new tags that let mark up your content with better semantics. For example, instead of using meaningless divs like:
we can use these shiny new elements:
Download that package and unzip it. Make sure you end up with a folder called "layout_tutorial". The folder structure you see inside should look like this:
layout_tutorial css style0.css style1.css style2.css ... img js index0.html index1.html index2.html ...
The numbered html and css documents are linked to each other. As you work your way through this tutorial, you can either:
- Stay in
style0.cssthe whole time, copying and pasting updates, working your way up to a finished product
- Switch between files progressively (index1.html, then index2.html, etc.), studying the changes along the way
The first method is a bit more hands-on, but some readers will find that it's easy to make mistakes. The second method is more fool-proof, but possibly a bit less educational since you won't be actually making the changes yourself.
I'll list the page version at the top of each tutorial section in case you want to use method #2. From here on, I'll just refer to
style.css - it's up to you to determine whether you should be in a numbered file or are working on your own.
To get started, open up
css/style0.css in your favorite text editor. If you use TextMate for Mac, just drag the whole tutorial folder onto the TextMate icon.
Now open up the same HTMl document in the browser of your choice (pull down File | Open and navigate to the HTML document we're currently working on. You'll see a blank document - that's OK.
We're not going to make any changes in this step - just take a look around to familiarize yourself.