Testing HTML5 & CSS3

Welcome

Welcome to my very basic but much fun to build website that looks at some of the basics of HTML5 and CSS3. By taking five minutes to read this page it should make your time spent on this site more useful and enjoyable.

The first important point to make; this is only the basics! I've concerntrated on some the new HTML5 elements and CSS3 styles. This website is by no means a comprihensive introduction to everything new.

Playing audio and video, API's for drawing graphics on screen, dragging and dropping data and storing data off line are a few of the other new tricks, but that's another website (hopefully)!

Browsers

Neither HTML5 nor CSS3 have been fully implimented, given the WC3 seal of aproval or even finished as yet! Work was begun in 2004 and its still in progress. As such the mass of browsers now available have implimented the new code to various degrees. By far and away the best results are attained using the Google Chrome Browser and I would ask you to view this website using it, hence the link in every top right page corner.

Whilst it can be interesting to see the differences in browser rendering and some of the ways we can work around this at present I have only put links to other browsers within the text of pages, where apropriate.

Hyperlinks

Anywhere within the text of a page where you see a word highlighted as such means that this word is hypertext link. Clicking on it will take you to more detailed info on the specific subject highlighted, for example; Home will take you to the top of the home page.

This is intended to make this website a more useful and functional source of information for you. You can pick and choose your way through the information as you wish or go through it page at a time.

The Page

As you can see this website has a homepage (your on it) a sitemap and five main pages. On each page you have a navigation bar at the top and the new intro div with a green background image below it. On the right hand side of the page you have some secondary navigation links within the aside section, explained here.

Right at the bottom of the page you have the comments section, the form section and at the bottom the footer section in darker gray.

For a diagram of the page structure have a look here.

The Five Main Pages

The first of the five main pages shows you a diagram of the overall page structure and introduces six of the new elements you can use in HTML5. They apear in a list in the top section of the page and follow below, one at a time, in individual sections and explained in some detail.

The second main pages, "Main Content & Multiple Columns" explains two things. Firstly how to mark up and style the page to have a main body in the centre of the page with an aside section on the right hand side. Secondly it shows you how you can create the dual column layout for the main content, for example the content your reading now.

The third page goes through how we can bulid the new Intro division you see at the top of every page with the green background Image. It then outlines three new styles? you can apply to images; background-size, border-radius and setting second background images.

The fourth of the main pages is in two sections. The first gives examples of some miscelanious style rules that were needed to creat this website. Some of them are not new to CSS3. Rather than read this section as an individial page it would be best to let this information come to you organicly, via the relevent hyperlinks you'll come across on the different pages of the site.

The second part of the page shows you how to create the zebra-stipe effect you can see in the commetns section, toward the bottom of every page.

The last page shows you how to creat box shoadows for images within the content of your webpages. I hope this site is fun to use and easy to explain, it was certainly fun making it.

Visit the first page and get started here!