XHTML for you

Max DesignMax Design

W3SchoolsW3Schools

W3C AttributesW3C Attributes

Web Standards ProjectWeb Standards Project

Web Headstart Web Headstart

 

Cascading Style Sheets

Without question the best resource to get CSS design inspiration is from the website at the top of this list - this is a must for any serious web designer. Please take a bit of time to go and see just what is possible in using this revolutionary technology. If you really want to see the designs go to the sister website which is the second on the list - I often look here as it's an inspirational delight in my book!

CSS Zen Garden CSS Zen Garden

MezzoblueMezzoblue

A List ApartUser Interface Design

W3C CSS TutorialW3C CSS Tutorial

Max DesignMax Design

books - yeah ya gotta read

There are some real belters in here; I've read a lot of books that simply don't step up to the mark - these do, and in glorious fashion!

CSS AnthologyThe CSS Anthology


HTML, XHTML and CSSHTML, XHTML & CSS


Bulletproof Web DesignBulletproof Web Design

CSS MasteryCSS Mastery

CSS Zen DesignThe Zen of CSS Design

CSS The Definitive GuideCSS The Definitive Guide

and my personal favourite:

Sexy Web DesignSexy Web Design

 

Graphic DesignTypography Accessibility & Usability XHTML & CSS Web 2 Web Integration

So where do you start with some of the most modern technologies in web design? Ah-ha, well let me enlighten you...

You may well be wondering XHTML, CSS - what's all the acronyms about? That's the thing with technical subjects - they bamboozle you with the acronyms and vocabulary, which sometimes puts people off actually engaging with the topic. Anyway, rather than get turned off - lets get turned on!

Below I'll take you through each in turn and explain what these technologies are, what they do, and how we work with them...

 

 

 

 

 

 

What the hell is XHTML?

Well it stands for EXtensible Hypertext Markup Language - now ain't that a mouthful! And it's the absolute corner stay of the web as we know it. You probably haven't needed to know it up until this point but here goes explaining what it actually means...

Before we get stuck in I thought you might want to check out some of the different types of interfaces; these are just a short selection of my own work which uses XHTML and CSS (more on that later).

 

Layout for the Web

This is a Flash animation which aims to encapsulate the kind of things you really should know before you begin either designing for the web. These encapsulate a host of different types of layout for the web. I hope you enjoy - it takes around two minutes of animation and then some designs are showcased; I've also given you links to these external sites as you might want to explore them more fully. Be sure and come back when you've finished though :o)

Web Layout

 

XHTML and You

XHTML and You

Well I hope that last animation has given so inspiration - that's the fun part - now on with the more technical stuff, namely XHTML.

Here's another little animation (about three minutes long) which might put things into perspective a little more. It looks at the following 'pieces' you need to think about as you begin building your webpage. It does start to use some common words associated with webpage creation - please don't let that put you off - you'll soon get the hang of it.

    • the doctype or declaration
    • well formed mark-up which uses lower case letters
    • tags and some examples of them
    • the need to validate your webpages
    • the reasons why you should validate your webpages

Just click on the image on the left to open up the animation (remember to have those speakers on!). Return at your leisure...

Ok, that's just the basics - the real test is actually putting it into practice. You will get there. I really think you should look at the list of tags available at the W3C - this will help you become familiar with the pesky critters.

 

 

 

 

top

Why should I care about this?

Do you have a conscience? Well there are many reasons why you should be aware about what we've looked at previously. The main thing is - it may well be that you are using a high speed internet connection, using a popular web browser such as Internet Explorer, Safari, Firefox etc and are able to access the webpage using a standard keyboard and mouse.

But what if you aren't?

That's why you must consider your audience - they might not have their browser as being Internet Explorer - in fact they may be using their mobile phone to access the webpage - more and more of us are. Any what if you have a physical disability - perhaps you don't have any arms, or have repetitive strain injury which means you can't use a standard mouse and keyboard? What then? Does that mean that people who aren't in the majority get excluded??? Hell no, you should do as much as you possibly can to accommodate all of your web visitors. That's where the clever money is!

Web standards should not be ruled out!

You should really, really try to incorporate the latest web standards into your website design. It's not an add-on, it should be embedded within the design from day one. Another good reason for doing this is the financial implications you could face if you don't try to adhere to them.

You can get sued by current legislation!

Hell yes, and this could mean big bucks too!

 

top

 

Semantic Mark-up

Headings

 

One thing you should be aware of is what's called semantic mark-up. So what does that mean? Well if you look at the image opposite - the heading one will always be bigger than the heading two tag which is bigger than the heading three tag and so on it goes.

The XHTML or tag is shown on the right. So for example the sizes could be:

<h1> = 1.5ems

<h2> = 1.2ems

<h3> = 1.1ems

<h4> = 1.0ems

<h5> = 0.9ems

<h6> = 0.8ems

You should use this when using type on the web; this way you are conforming to current web design principles. For more on this read the Semantic Web.

 

 

top

CSS what's the stress

Well this little beauty has been a web designers paradise. Up until not too long ago web designers used tables to present their layout to the world, and what a bore it was! If you had a website that had 100 pages you needed to change the code manually in all of them - and it could take days to accomplish. The advent of Cascading Style Sheets has truly revolutionised the way we can separate the code (XHTML) from the presentation (CSS). Let me give you a demo...

 

Interface with no Cascading Style Sheet attached

 

Here is a webpage that doesn't have a Cascading Style Sheet attached. All we are seeing here is the result of the mark-up or code. This is only about the information structure and employs very little by way of presentation, formatting or style.

In essence this is very, very boring and although it is totally functional from a design perspective it's just boring, flat and nondescript.

 

 

 

 

 

 

 

Interface with CSS attached

 

This is the same webpage with a Cascading Style Sheet attached - boy does it make a difference!

CSS has really revolutionised how web designers/developer work and I must say I'm totally smitten with the possibilities that this technology has to offer. It just blows apart what is actually possible in current web design.

If you're not using CSS you just ain't in the game!

 

 

 

 

 

 

CSS makes webpages sexy

 

This means of presenting your web information has just been made a whole lot sexier with the advent of this technology. Are you getting the message that I'm raving about this yet?!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

top