Tutorial 2 - Using CSS to separate content from presentation

[matauri]

Why use CSS to separate content from presentation?

This is the discussion thread for the article on
"Using CSS to separate content from Presentation" , posted by Webnauts (February 25th), featured in this weeks tutorials.

The article highlights why web developers should aim to remove all presentation from the html code, leaving it clean and semantically correct.

Please give any comments or discussions on this Article by adding a new post below.

Regards

Matauri - Moderator Site Design

[DigitalDragon]

What amazes me is how bloody long this concept took most people to realise.

That's why DBs are so useful! (Well, one reason ;o) )

Really, web architecture should be separated into structure, content and design. At the very least. That way, you can alter one, either locally or globally, and not have an impact on another, unless it's intentional (such as over riding inherited/global styles).

Not many people do this, and hardly anyone I've ever worked for thinks it's worthwhile, time wise. Yes, it may take twice or even three times as long to build the initial site, but once it's done, it's done right. Changes and updates become hassle free, whether site wide or just on one page.

So I'm for seperating these elements of a site; I don't care how you do it though, as long as it works for you.

Cheers.

[mikmik]

Yes indeed, things are much easier to manage,'SSI' and 'PHP includes', and also using a "root url" in your relative, site links makes it easier still for maintaining navigation includes over differing directory depths. I used to convert my html into java script, and 'href' it as an include, but I still had to have different versions for each subdirectory.

But, no one has mentioned why we are reallygoing through all this bother of changing to compliant code, and xhtml at that, not just html4 strict, because with 4.0, it is not neccessary to make sure all the values in your tags have quotation marks to delineate them.
And it also hasn't been mentioned here about having a correct DTD as part of this all.

But the main reason for the shift is to bridge the gap between html, and XML. Didn't we have some lively banter about this not long ago? :O)

The Wireless Markup Language (WML) is an XML application. It's one of the languages used to build content for the wireless world via WAP. Because XML is the metalanguage from which WML derives, WML is more rigorous than HTML or HDML. You must write syntactically correct documents for WML content to be displayed within a WAP device. As with XHTML, WML demands lowercase, proper tag nesting, a slash to close nonempty elements and terminate empty ones, and the inclusion of the appropriate XML declaration and DOCTYPE definition information.

Got that from here today :http://www.newarchitectmag.com/docum...369/index.html, and I have had this http://www.webproworld.com/viewtopic.php?p=74017#74017 up since the 15th,

Convert HTML table layout to CSS/XHTML Project

I have been talking about this before so we want to go ahead with this 'tutorial' soon.

Myself, paulhiles, and wclew have agreed to help with this presentation, so look for lots of knowledgeable input.

The purpose

We are going to go through the whole process of taking a typical 'what have you' page that uses tables for structure and html tags in the page code for styling and formatting, and convert it into a page that uses xhtml and css valid code for the markup.

It is as much a learning process for me (and all the others I think, to varying degrees) as it will be instructional and educational.

I am planning the tutorial out with the others right now, and we hope to start formally by Wednesday.

We will provide some reading and then some examples of each step about once a week to give everyone plenty of time to follow along and post questions and comments.

Here are a couple of links about the reasons for making this type of change in our designing. It is not meant as a 'proper way of doing design' lecture at all, just a learning tool because there is so much talk about it these days.
It is for informative purposes only!
-------------------------------------------
Background reading - espescially good for people just starting out.

BASICS, general
About website design, three pages: http://www.w3schools.com/site/site_design.asp

Why XHTML? - one page: http://www.w3schools.com/xhtml/xhtml_why.asp

How websites work
Getting acquainted with URIs, and especially URLs. Here's a quick dissection of an http URL: http://www.webreference.com/html/tut.../2.html#HEAD-2 and this is very good to know - a look at a few of the more important headers used by both browsers and servers: http://www.webreference.com/html/tutorial29/

WHY? (we will rely on this excellent tutorial much as we go along)

http://www.createwebmagic.com/css101/history/

I am still all for coordinating this >o)

[Jurgen]

Originally Posted by mikmik

I am still all for coordinating this >o)

I am very much lost.... (pulling my hairs, what evr is left of it).... :-(


Jurgen

[mikmik]

Here is a suggestion for us, but I understand your confusion, seem to be 'multi - threading, or a bit of redundancy over in the "web programming and wise cracking" section.

How does this sound, jurgen. If there is a change of tack on my part, or ANYONE'S for that matter, I will let you know before hand. So, I will double check, but lets anchor our efforts with our project where it is right now and I'm sure it will be pretty stable now, and we will become accostomed to the dichotomy.
But, I certainly would be most uncomfortable if much changed and one or both of us - among others - were left standing with our trousers out of place. LOL

I just think that it is right that we keep what we have always planned, to check back and forth so every concern is address as neccessary.

I am just having an extremely severe bout of "information gluttony" , having stumbled on another string of great discoveries that I can't seem to soak up fast enough.

I started redoing my site about 3 - 4 wks ago, and I already have so much more skill and ego that I sit here prepared to start it over.

In fact, if I can get some shut eye tonight, we can hook up and discuss some collaberating, on your page, and mine. lol

Seems that I can never get enough good advice, so it would be fun.

I am getting some video compiling done, I have great footage to share!

[matauri]

Originally Posted by Jurgen

I am very much lost.... (pulling my hairs, what evr is left of it).... :-(

Sorry you're a bit confused Jurgen. But it was requested that the thread you are working on was to be transferred over into Web Programming, so if you or anyone else are following Miks Tutorial, that is where you will find it.

Maybe this will clear up any dichotomy :-)


Cindy