| XHTML - Tutorial | [Archive]

Dan Williamson

26-12-2005, 03:20 AM

Hey guys.

Normally I write PHP tutorials, but recently i've come across websites who are still using all dirty unclean HTML so i'm here too write a tutorial on cleaning up your code and making it XHTML compatible.

Ok now people might say... Whats the difference between HTML and XHTML.

And i'd say:

There are a number of differences, all XHTML tags must be closed.

XHTML is formatted or something in XML too reduce browser problems. Which is good :)

Starting XHTML, now i'm assuming that all you Habboxilians know HTML ( HyperText Markup Language )

XHTML is basically a stricter cleaner HTML.

Now starting off.

You'll need a w3 approved XHTML Doctype.

There are three doctypes, there are strict, transitional and Frameset

Strict

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Now.

The harder thing which took me a bit too get used too and I still don't do this now. It's write your HTML format in lowercase letters I tent too use capitals for a lot.

DOCTYPE HERE
<html>
<head>
<title>my XHTML document</title>
</head>
<body>
Some random text
</body>
</html>

Thats a very standard and basic XHTML document.

See how it's all lowercase and nicely set out. You have too be very careful in XHTML when nesting things as well you cannot make the simplest mistake, this is how strict it is.

Some random snippets which might make your life a tad easier

Bold Text

Makes your text bold

Italic Text

Makes your text italic

>
The text that will be underlined here

Now, this one may confuse you a bit. Valid XHTML has removed the old tag and replaced it with a CSS tag which I personally and many would agree with me thing it's sooo better.

Even images have changed in XHTML no more silly short ones.

example:

<img src="pic.gif" style="width: 10px; height: 10px;" alt="pic.gif" />

And you can do all the other cool things, like link external style sheets etc.

So hope this has given you a quick insight into the world of XHTML, try using it for better websites.

- Dan

whatisinternet

26-12-2005, 03:22 AM

Thanks - I'll read though it after I get dressed.

Dan Williamson

26-12-2005, 03:23 AM

Thanks - I'll read though it when I get dressed.

Just needed too know that lol!

- Dan

whatisinternet

26-12-2005, 03:24 AM

Lmao :P I edited my post, read through it.

Dan Williamson

26-12-2005, 03:25 AM

Still says that.

LOL!

- Dan

whatisinternet

26-12-2005, 03:26 AM

No, now it says "AFTER" :P

Dan Williamson

26-12-2005, 03:27 AM

ahh,

Yeah I see now lol.

Bit dirty lol

Anyways comments on the tutorial.

- Dan

whatisinternet

26-12-2005, 03:28 AM

It's very understandable - I'll probobaly remember it, but just in case I'm booking marking ;P

Dan Williamson

26-12-2005, 03:29 AM

Cheers.

I try too explain it so even the newbies at HTML and XHTML can understand it.

- Dan

Tomm

26-12-2005, 08:25 AM

I got a book on Upgradeing to XHTML some time ago xD Nice guide its useful

Dan Williamson

26-12-2005, 08:29 AM

I got a book on Upgradeing to XHTML some time ago xD Nice guide its useful

Cheers.

It's a cleaner more effective way of HTML :)

- Dan

Sam

26-12-2005, 12:01 PM

In the time its taken me to click add reply n type this message. i've forgotten it ''/

- Sam

timROGERS

26-12-2005, 12:10 PM

You can't just use , you have to use

Dan Williamson

26-12-2005, 04:15 PM

You can't just use , you have to use 

Well I thought i'd explained that with saying you have too close every tag which means closing 

- Dan

nets

26-12-2005, 07:36 PM

I wouldn't go rushing to convert all your websites to XHTML, not using tables for layout is something which needs more attention.
Every tag you've mentioned in the above can be used in HTML 4.1, and CSS isn't validated under the rules of the XHTML DTD anyway.
Using the tag is bad use of semantic mark-up, and instead you should use the correct element in its place (e.g. em for emphasising something, or cite for when you're citing a word). Also I would use instead of if you wanted to be really fussy.

<img src="pic.gif" style="width: 10px; height: 10px;" alt="pic.gif" />
The above code would not validate as XHTML strict on its own, as you would need to place it inside of another tag (e.g. inside of a heading tag or a paragraph).

Dan Williamson

26-12-2005, 07:54 PM

I wouldn't go rushing to convert all your websites to XHTML, not using tables for layout is something which needs more attention.
Every tag you've mentioned in the above can be used in HTML 4.1, and CSS isn't validated under the rules of the XHTML DTD anyway.
Using the tag is bad use of semantic mark-up, and instead you should use the correct element in its place (e.g. em for emphasising something, or cite for when you're citing a word). Also I would use instead of if you wanted to be really fussy.

<img src="pic.gif" style="width: 10px; height: 10px;" alt="pic.gif" />
The above code would not validate as XHTML strict on its own, as you would need to place it inside of another tag (e.g. inside of a heading tag or a paragraph).

Well your the expert :)

I'm just giving people an insight too XHTML.

- Dan