About This Site

I created this web site by hand in order to demonstrate the simple markup techniques I teach to my students, using HTML for content and structure and CSS for styling, though because there is no server side technology used only the introductory techniques are demonstrated in these pages.

All the pages were valid HTML 5 last time I checked (using the experimental W3C validator) but as HTML 5 develops there may of course be changes. I am still using an XHTML 1.1 markup style so most of the pages are valid HTML 5 and valid XHTML 1.1 at the same time, apart from the 'Research' page where the embedded iframe links to the YouTube videos that the YouTube site generates are not valid in HTML 5. The CSS is also valid when checked with the W3C validator.

Since there is as yet no W3C icon for a valid HTML 5 page I have added the 'valid XHTML 1.1' icon to the left navigation bar, though the HTML 5 DOCTYPE used has to be overridden for XHTML 1.1 validation. There is, however, the new configurable HTML 5 logo, which I have also added (this is the 'semantics and styling' version!)

Some of the fundamental page design patterns that I cover in my teaching are also demonstrated here, namely:

Site logo at top left
Navigation bar
Side navigation
Three region layout
Footer

Unfortunately it's not a big enough set of pages to use the navigation bar patterns properly - one of the navigation bars is meant to be contextual but that only applies in a larger, more hierarchical web site. For the same reason there's no point trying to demonstrate the 'Site Map' pattern, though all 'real' web sites should have one.

There is a very simple 'show/hide' example used on the 'Publications' page using DHTML (i.e. a combination of JavaScript, CSS and the DOM). This is an example of what is sometimes called the 'accordion' page design pattern (for reasons which I hope are obvious.)