So why are we teaching XHTML/CSS to 13 and 14-year-olds? Because I, like Eric, want to help people put things up on the web. The web should be easy and it should be accessible

Until someone manages to build a decent WYSIWYG standards-compliant web-building tool, the best way to do that is to handcode XHTML/CSS (or HTML, Anne, but I know which I think is easier to teach to a class)

After a few lessons, most of the students have a 6-page site filled with information and styled with hideous clashing colours (they are in Year 8). All of which validate perfectly

My problem is that I want to generate standards compliant, accessible sites, and I don’t know any other way to do it other than hand coding.
Because there is no other way to do it.As far as I know, there isn’t any wysiwyg editor that produce clean smart semantic code. NVU, the new GNU wysiwyg editor doesn’t seem too either.

By the way, this debate and these uses are not from the web. It’s exactly the same about word processors… you could design your documents with nice first line indenting (non-break spaces and tabulations), smart page using (invisibles tables), and so on. Or you could define styles, and use them on semantic elements.

With generations of kids using tables and nbr-spaces/tabulations for layout in MS Word, we need really good webediting tools. Really, really, really.

so i taught myself css the same way i had taught myself html: by sitting down in front of my computer with a plain-text editor (not even syntax-highlighting). fortunately, i had a great guidebook this time — Cascading Style Sheets: The Definitive Guide published by o’reilly.

and it is much simpler … as long as you can give some things up, like anal-retentively pixel-perfect layouts. i found my simpler way and i’m never going back.

where does this perception come from, that CSS is promoted a way to make the Web harder and HTML more difficult?

Unencumbered by the facts, my guess is that there are many people who make websites with frontpage, or photoshop, or other wisywig tools. Many of these people don’t know or care about html, css, etc. It scares them. Many of these people hold corporate positions, or have images as ‘experts’ to uphold, and so they vocally ‘dis’ what they don’t have skill in, or understand because it scares them. If it is necessary to understand a bit about what is going on behind the screen, then they are in a sense frauds. So I think it has to do with survival in a very difficult economic time.

It is possible to have left-side site navigation occur semantically below right-side content. Consider the following table, 2 rows by 2 columns:

ab
cd

Cell a contains a one-pixel spacer gif.
Cells b and d are joined via rowspan, aligned top, and contain the content.
Cell c contains the site navigation and is aligned top.

Works fine for SEO.

And now I look at people trying to change widths of spacers and pity them, because I know I can do it so much faster. CSS is not a hard language to learn – most of the keywords are in plain english, and there’s only a few rules like LVHA to remember. And semantically correct XHTML is so much easier to produce and understand than tables within tables within tables…

you should build a 20-field form using floats and crazy amounts of CSS instead of a simple table-based grid.

There are plenty other ways of styling forms that like using dls, for example. I guess that making a for by using CSS is just to show it can be done (i’ve done it). But if using a table, it is important to make it not nested and accesible, something that few developers pay attention to, in part because web design tools don’t promote it either, so, it is a “craft fault” right from the beggining.

On other thoughts; true, better WYSWYG tools are needed to make the use of CSS a common pracitice. But we are on track, thanks to people like Eric and the members at the WaSP project. We (and I count myself for promoting the use of standads as much as I can) are participating in a slow transition. But we are, in fact, better than three years before: the browswer developing companies are more into supporting standards and there is some kind of hype for using them on pages around the world.

It’s like a wave, the more we promote the use of standards (for the right reasons such as accesibility as noted on a previous post) the bigger it gets and people/companies will take action into making better browsers and better tools to support what the consumer wants! (or needs).

In the mean time, “technical people”, like web developers/designers, have the responsability to make the change happen for it will affect directly our line of work. The method is not by elitism and looking down on people (as it seems is the common perception) that use tables for layout purposes but by showing the benefits of using and maintaining standards.

-jl

p.s. IMHO it is not so technical to understand that a p tag is used for a paragraph and not for leaving a blank space.

I have taught people from scratch both to do table-layouts (I no longer remember how I used to do them though) and css-layouts. Although sometimes the rules which are needed are a bit obscure, the basic principle of a 3col layout is simple: have main content in the middle, put the rest in the margin.

I did this again last night: took us one hour from scratch to code a semantically marked up sample page, with embeded sub-menus, javascript, the lot. For someone who has never coded html before, the current ways of doing it make sense. In other words, the cost of entry is not high.

Ooh damn, I seem to be reiterating the same thing as Nathan. This is no coincidence…

In three days (three hours each day) I taught them about XHTML and CSS. They only knew going into this class that it would be about making websites.

In those three days each student understood the concepts and was building sites with Dreamweaver, Notepad, or anything else you can think of.

It was easy to explain to these people what a ‘tag’ was and a ‘style’ and what it did. I explained that as living objects that you put in a document to do things.

This proved to me that it is far easier to use CSS to style something, I have people saying the entire time This just makes alot of sense.

If you want to see my slides from the class, I can post them.

In some ways I agree with Sriram that there is a technical barrier to moving to this new way of thinking. If you are not comfortable using a text editor to write CSS you may as well give up; and don’t get me started on the pain of learning the browser hacks.

With that said, I believe that for a web designer/developer the benefits of thinking in “web standards” are worth the cost of being retrained. We are probably years away from having good tools that allow non-technical folk to design web sites that rely on CSS positioning. But let’s be honest, how many well designed sites that today are based on HTML tables are maintained by non-technical people? Even with Dreamweaver and other tools you can’t escape having to get into the HTML code and mess with the percentages, pixel width and height of TABLE, TR and TD tags as well as .gif spacer sizes.

What sold me on using web standards was when I started viewing source of sites that were styled in CSS and were valid XHTML. If I could actually read the source and understand what was there, then a Google robot or a blind user would have an easier job of “reading” the source as well. The icing on the cake was the increased efficiency to using smaller source files and browser caching of CSS and images.

After having read scores of sites and blogs maintained by web standards advocates I must admit that there is a common attitude of web standards being the RIGHT way and that you suck if you don’t use CSS. This might have something to do with Bosworth’s and other’s labeling of CSS fanatics. Yet someone at the CTO level should be able to see past the passionate blog entries and recognize the true benefits of the principles of using web standards.

It think a key fact a lot of people are missing is that the complicated ways to do 2 and 3 column layouts in CSS are needed because IE does not support the easy ways CSS provides (using table display types with semantic markup).

Yes, I agree with your point that the complicated ways are caused by IE not supporting the easy CSS ways. However, I do not agree that table display types are the solution. In order for them to work well, they bind you to a specific document markup. For example, you can’t put a menu at the bottom in document order if you want to place it on the left using a table display type.

The proper thing to use is absolute positioning. Because IE is such a pain in the ahem with its stupid box model and lack of support for resolving “left:100px; right:100px; width:auto;” and understanding stuff like min-width, creating layouts has become much more difficult than it should be.

However, I wouldn’t just blame it all on the browser – CSS has its deficiencies too. They would be less of a problem, sure, but you still run into problems. Just try making one of those layouts for a browser which does support most CSS properly, like Mozilla.

~Grauw