Converting to CSS and xHTML - how to?

Hi DSSR. I split this off from the other thread because I think it's an excellent question and could be a good resource for all members.

The way I see it, there are several steps in converting your site from old-school HTML to xHTML an CSS.

1. Convert to XHTML - there are a few key differences between xHTML and HTML. Mainly, it's more strict about how things are written so you have to do everything correctly. This means that all tags are lower case, attributes are always quoted, all tags are closed and nested properly etc. W3 Schools.com has more information.
2. At the same time, learn how to use CSS. The W3Schools site I linked above has a good tutorial on that too. At this point you'll want to use CSS for font formatting, colours, links and things like that. Using it for layout is tough so we'll save that for later.
3. Validate - go to validator.w3.org and plug in your site URL. It will tell you what you've done wrong. In order for this to work you'll need to have a doctype. This basically tells the validator what type of HTML you are using. YOu'll probably start out with HTML 4.0 transitional and then move up to xHTML transitional, then xHTML strict. The W3C is the group that makes these rules and decides what the code should be. If you really want the details you can read the documentation on their site.
4. Once you've got that mastered, you can try moving to CSS for layout. There aren't a log of great starter resources on the topic so you have to sort of poke around and play with different techniques. Doing a google search for "CSS 2 column layout" or whatever you are trying to do will bring up a lot of examples to work with. Here are a couple of articles I found to be helpful when I was starting out:

   http://www.alistapart.com/articles/practicalcss/
   http://www.alistapart.com/articles/negativemargins/

I hope that helps, and good luck! If you're having problems at any point just let us know. The results of the validator in step 3 can sometimes be confusing.

When learning HTML remember two things

all tags (things between these < >) should be in lowercase (some bad html tutorials and books still show uppercase) will make switch to XHTML a lot easier

all values must be quoted with double quotes: name="value" - again lots of bad tutorials and books out there

Nesting tags can be used but used properly (made up start tags) should always end the opposite way they started , this also will help the upgrade to XHTML.

If learning from books or websites, NEVER take one site as gosspel, always use minimum of two sources

Get rid of frontpage

Practice, practice and practice, make mistakes and learn from them, learn what how when and before long you'll be putting us out of work

Agreed with the others here, particularly Megan, good mini-article!

DSSR wrote: I am using Front Page 2002.

As Busy pointed out, get rid of Frontpage. It doesn't let you edit html the way you need to, it just doesn't understand good coding!

And never worry about not knowing things, that's why this forum exists: We all have to learn sometime, somehow. The exciting thing about this is that you'll never be an expert at every aspect of web design/development. You'll always be learning!

When you've had a look at what Megan's mentioned, and are comfortable with it, check out the following sites for inspiration (and feel free to check the code to see how these were built):

• http://www.csszengarden.com - Created for graphic designers, but is a good showcase for why using CSS is advantageous.
• http://www.zeldman.com - Web standards guru. Wrote the famous: "Designing with Web Standards"
• http://www.cameronmoll.com - Solid, good design and branding.
• http://www.webstandards.org/ - An organisation dedicated to promoting web standards. Here's a good example of why you should design with web standards. The National Federation of the Blind are sueing Target for having an inaccessible web site.

Don't worry though, they won't sue you for having an inaccessible personal site. Just to let you know it's getting more important to get things right.

Even Microsoft are getting a bit better (not enough IMO) IE7 will have much better CSS support than 6. They're also getting advice from the guys at webstandards.org

Anyway, that's a lot to take in! Just follow Megan and Busy's advice and you'll be ok.

This article has some starting points for doing CSS layouts. So you don't have to start from scratch every time. The best way to learn CSS layout is to copy code from other sites and try to figure out how it works.

http://24ways.org/advent/css-layout-starting-points