Blogging our XML and CSS workshop

2.40pm Alex has just started his workshop on XML, XHTML and CSS, and it has already become clear that XML and CSS separates style from content in a way that is very different to what we saw in the HTML workshop.
2.51pm We've just had a look at an XML schema and we can start to see how these would be the fundamental code and tags of a semantic web - as we began to describe last term.
3.56pm XHTML is now the default document type in Dreamweaver.
3.02pm 'CSS is a more compact form of coding that HTML' [Alex]
3.04pm Alex shows National Museums Liverpool as a good example of RSS (Really Simple Syndication) in action on a museum site.
3.06pm Liz Plummer’s textile art blog (Dreaming Sprials) as example of a Google mash-up in action.
3.08pm The National Media Museum (Bradford) provide a good example of a museum using a Flickr group.
3.10pm 'Well, let's have a go! We're going to use Dreamweaver 8 ...' [Alex]
3.13pm Alex drives around Dreamweaver highlighting how the application is different to Frontpage (the Web editor we used last term in the HTML workshop). You can move between a 'design' view (WYSIWYG - What You See Is What You Get) as well as a 'code' view and a 'split' view.
3.20pm So far the editing and formating in XHTML feels just like the HTML editing we have done before. But as soon as we assign a colour to some text, then suddenly we can see the coding setting up a 'style' in the header of the document. Dreamweaver has automatically set up some CSS. 'But every time you do this it will add a new style. It becomes very bloated. So we need to start defining our own 'styles' for this document and for other documents outside of this document.' [Alex]
3.27pm We've now created a CSS page to control style on this new document.
Redefining HTML tags across a site.
3.33pm We run through Hex-codes (hexadecimal) codes for defining colours on Web pages; three pairs of digit numbers from 00 to FF (full) define each mix of Red, Green and Blue. We use this in our new CSS files to define a colour.
3.43pm We are now getting our XHTML file to identify and use our CSS file by adding to the header:
link href="workshop.css" rel="stylesheet" type="text/css"
This is like real coding now! Feels like we are stepping up a bit. We need to take a bit of time to make sure we have all got this ok.
3.50pm Everyone now has an XHTML page formatted using a CSS doc!
4.07pm Now it's time to start thinking about defining specific styles for specific types of content that fall outside the usual structural elements such as 'headings' (h1, h2 etc.) or 'paragraphs' (p) - and for this we need '. tags'.
4.15pm We can also now start to see how these .tags can allow us to identify content to which we might give attributes - stylistic, or, potentially, semantic.
4.17pm 'CSS can be used for fairly simple things such as this .. but it can also be used for layout' [Alex]
4.25pm Everyone's now on their own, building their own styles and playing with the CSS Reference file to help explore different tags and styles. Let's try defining a style that will place text in a floating box with a different background colour ...