P2P | IT Discussions Forum

Quote:This is an XHTML tutorial I wrote for my site, Shadowfang.
I have posted this tutorial on only one other forum prior to this, and I hope it helps you guys.

[CENTER]XHTML Tutorilal
by Lucas Toledo

[/CENTER]
To start off, there are a few Major changes from HTML to XHTML:
• All documents must have a doctype
• All documents must be formatted properly
• All attributes must be added properly
• The name attribute has changed
• Attributes cannot be abbreviated
• All tags must be in lower case
• All tags must have a closing tag
• All tags must be properly nested
This might seem like a lot to take in at first, but once you get started you’ll never go back to basic HTML.

Doctypes
This is the first change shown in your web document. Unlike HTML, XHTML requires a doctype.
For the purposes of a regular XHTML document, a standard DTD from the W3C can be used. If you are planning to learn XML, you will learn about creating an actual DTD file. The DTD tag goes at the start of your coding before the starting html tag. There is no closing tag for the DTD tag.
There are 3 Doctypes usable by an XHTML document. Strict, Transitional, and Frameset.


XHTML 1.0 Strict
Use this when you want really clean markup. This should be used with Cascading Style Sheets.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
This makes it so that browsers will still display "bad" code. Meaning that if you use depricated tags, capitalize tags, forget quotes, dont close a tag right, etc. It will still work.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
This is used when you want to have your sites frames locked on the browser.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



Document Format
After the Doctype tag, you can start scripting the XHTML content. XHTML has
OTHER HEAD DATA
CONTENT
It is important that you use that format for correct XHTML standards.



A major part of XHTML is that all tags must be properly formatted. If you are used to HTML, it is likely that your coding is sloppy, with unclosed, uppercased or badly formatted tags.
Lowercase
The first difference in XHTML, all tags must be in lowercase.
If you are using a WYSIWYG editor, such as Dreamweaver MX, you can set this as a default by going to
Edit - Preferences - Code Format
and changing default tag case to:

And Default Attribute Case to:
lowercase =”value”


Nesting
The second change in XHTML is that all tags must be properly nested, meaning that if you have multiple tags applying to something in your document, you have to close them in the correct order.
For example, when you are trying to bold, italicize and underline a sentence, you would use:
Your sentence here.
You should have noticed that I closed that last tag first, and continued in that order.
An example of nesting the wrong way is:
Your sentence here.


*The 2 previous changes should not affect a person who uses HTML 4.0.1 properly.


Closing Tags
Closing Tags are the final thing in making a document XHTML compliant. All tags in XHTML (excluding DCD tags) must be closed. Although most tags in HTML are closed, for example:




There are a few “standalone” tags, like:

---

There are two ways to close these tags.
You can make a new tag with a backslash after the opening bracket:

---

This is the more obvious technique for those who have used HTML before. Make sure there is nothing between the two tags.
Or you could add a space and a backslash before the closing tag:

---

This is the recommended technique set by the W3C who set the standards for XHTML. The space before the backslash is included, to make the tag backwards-compatible.


This part of the tutorial will teach you how to make changes to HTML attributes in HTML. Attributes are the extra parts that can be added to tags to change the way data is displayed. There are 2 changes from HTML to XHTML.

Lowercase
I can’t stress this enough. All tags must be completely in lowercase in order to be XHTML compatible. This is a very common mistake that is made without being realized.


Quotations
Another change from HTML to XHTML is that now you have to quote all your attributes
In HTML, you could use:
And there would not have been any capability issues,
But in XHTML you would use:

These are the two main attribute changes you would use in XHTML.
I hope this quick tutorial helps.

Recon

02-22-2007, 02:31 PM

Heh, wow, thanks for posting my tutorial, but you should like put it under quotes, because people will probably think your Lucas Toledo.

Also, dont you need my permission to post this?

Deviatore

02-23-2007, 08:28 AM

Hmmm...Nice tutorials.But is that tuorial of Recon?Then I agree with Recon...You should have taken permission from him.Well any ways thanks admin for posting and Recon for the good tutorial

eondxd

03-18-2007, 01:09 PM

hmm.. this is really nice inroduction for a nOOb like me !!
thanks a l t

Nikola

03-18-2007, 02:20 PM

Sorry for the inconvenience Recon.
I edited AjEe's post.

Thank you for writing the tutorial and thank you AjEe for posting it here.

P2P | IT Discussions Forum > Tech Inside > Scripts, Programming Languages Corner > Web Development Tutorials > XHTML Tutorial

Reference URL's

• P2P | IT Discussions Forum: http://www.post2paid.com/index.php
• :

Powered By MyBB, © 2002-2008 MyBB Group