Jump to content


Photo
- - - - -

Xhtml Introduction


  • Please log in to reply
11 replies to this topic

#1 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 06 May 2005 - 08:00 PM

Well you've started to hear more and more about this XHTML stuff and you want to make all your HTML pages XHTML compliant. But where to start?
This introduction should send you well on your way.

XHTML is basically HTML's strict father. (If I may use that analogy)

First things first put the following at the very top of your html document:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note if you use frames you'll have to change that. See my resources for more information.

Then turn your html tag into this:
<html xmlns="http://www.w3.org/1999/xhtml">

Then add this line in the head of your document:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


All tags that dont have a end tag such as:
<link rel="StyleSheet" type="text/css"...>
<img src="img.jpg" alt="my image">
<br>

Must be 'ended' with a trailing slash at the end like so:
<link rel="stylesheet" type="text/css" .. />
<img src="img.jpg" alt="my image" />
<br />

You must use quotes now to define all tag attributes no more width=300 it must be width="300"; no more align=center it must be align="center".
All img tags must have a alt attribute.
No more font tags, bold tags, italic tags, strikethrough tags. Basically anything that has to do with the 'look' of your site must now be defined in the styles tag in the head of your document or in a external CSS sheet.

TIP: Learn to use CSS class's and id's often as you'll probably use them for table backgrounds, color and alignment of text, font-controls, etc.

So once you've closed all your tags, took all those font and other non-needed tags out, upload it to your webhost and use this page Markup Validator to see if your page passes or not. If not fix the issues they tell you about and try again.

Although a little frustrating at first XHTML is a snap once you get all the little problems worked through.
Example of a extremely simple XHTML compliant page:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My First XHTML Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div align="center">
<h2>My First XHML Page!</h2>
</div>
<p>
This is some content text and such.<br />
This is a XHTML compliant document.
</p>
</body>
</html>

I hope this helps everyone on their way to XHTML compliance.
Resources:
For more information read: W3C's XHTML 1.0
Note: The information I have provided is from my experience with XHTML 1.0 Strict rules. I presented the examples in transitional to make it a bit easier.

#2 Tudi

Tudi

    Young Padawan

  • Members
  • Pip
  • 42 posts

Posted 09 May 2005 - 10:19 AM

I'm not very familiar with xhtml, although I know my way around plain HTML. Still, what I don't know, is why exactly is xhtml better than plaing html? being stricter, will it provide a better stability in different browsers? Does it provide additional tags? Does it work better with Style Sheets? etc.

And why would I want my site to be xhtml compliant? (no, it's not a dumb question)


Oh, BTW one xhtml "rule" I know of, which you didn't specify in your (otherwise cool) tut, is that tags need to be self-embedded (dunno if that's the right term). For example if your have <font><B><u>This text you;ll need to close the tags in the exact inverse order in which you started them: so it will need to be <font><b><u>This text<u/></b></font>

This ain't criticism, just a small trick I pulled a long time ago from some other forum (not that I ever used it as I'm as noob as the next cowboy when it comes to xhtml)


tnx for the tut and plz answer my questions

Enlighten the stupid ones and you shall be enlightened :P (Tudi, chapter 4, verse 3)

#3 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 09 May 2005 - 10:32 AM

Im still learning everything about it myself, but I will try and answer your questions to the best of my ability.

Well, the reason I like xhtml over html. Is that it enforces cleaner code standards, and works on all recent browsers (including mobile's that support WAP2). That and personally I just like to work with it. Its all a matter of taste.

Why would you want to be compliant? Well its actually up to you. HTML will work just as well with half the headaches. (if you're no interested in mobile browsers, and use of MathML, SMIL, or SVG, among other 'upgrades')

Ah and thanks for showing how to do the tag-order. I cant believe I forgot that :-p.

Why are browsers so fussy about XML? They were more accepting with HTML.

This is deliberate. HTML browsers accept any input, correct or incorrect, and try to make something sensible of it. This error-correction makes browsers very hard to write, especially if all browsers are expected to do the same thing. It has also meant that huge numbers of HTML documents are incorrect, because since they display OK in the browser, the author isn't aware of the errors. This makes it incredibly difficult to write new web user agents since documents claiming to be HTML are often so poor.


For more information:
XHTML Advantages

#4 Donna

Donna

    Retired P2L Queen!

  • P2L Staff
  • PipPipPipPip
  • 12,330 posts
  • Gender:Female
  • Location:B.C Canada

Posted 09 May 2005 - 10:36 AM

For more information read: W3C's XHTML 1.0
Note: The information I have provided is from my experience with XHTML 1.0 Strict rules. I presented the examples in transitional to make it a bit easier.

Theres also some more indepth explanation on xhtml at W3 Schools
http://www.w3schools...tml/default.asp


Thanks raenef :(

#5 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 09 May 2005 - 10:45 AM

Quite welcome.
I cant believe I forgot about w3schools :( Thanks for the link/reminder.

#6 Tudi

Tudi

    Young Padawan

  • Members
  • Pip
  • 42 posts

Posted 09 May 2005 - 10:45 AM

Heh I figured it was for the purpose of "standardizing" the browsers...probably will slowly set the pace and hopefully we won't need 10 browsers to test our page in the future...

Making code stricter will probably double the sales of products like Adobe GoLive or Macromedia Dreamweaver, as webdesign noobs like myself are too lazy or too dumb to learn to write strict code :(

#7 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 09 May 2005 - 10:49 AM

It would be nice not to have to have 10 browsers. (I just use the basic two IE/Firefox when testing but even thats a headache with cross-browser compatibility)
Hopefully the browser designers start following the standards and start agreeing to follow them. That way we wont have to learn 3 or 4 different ways to do a single thing such as center an img. (Fought with that this morning designing my new layout in xhtml strict where div align=center isnt allowed :-p)

#8 Tudi

Tudi

    Young Padawan

  • Members
  • Pip
  • 42 posts

Posted 09 May 2005 - 11:03 AM

Geez, divs are like the most unscrupulous, nasty, site-breaking tags i ever seen...that's why I try to avoid them. (I noticed Opera really has a grudge on them..)

And let;s not even get started about the center or justify attributes...Come to think of it, I'm starting to realise what xhtml is all about...Will definetely need to sink my teeth in it.

So know I know what xhtml is about, but can you tell me something about dhtml? All I know is that it's some sort of code specification for div tags, but that's where my knowledge on it rests...

#9 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 09 May 2005 - 11:08 AM

dhtml - dynamic html. There really isnt one. I mean its more a term than a standard.
DHTML is a combination of CSS, the DOM, Javascript, and HTML/XHTML.

I will reccomend a great book to pick up on it, it will teach you a lot and is easy to follow:
"DHTML and CSS for the World Wide Web" <Visual Quickstart Guide>
By: Jason Cranford Teague
Publisher: Peachpit Press

#10 Tudi

Tudi

    Young Padawan

  • Members
  • Pip
  • 42 posts

Posted 09 May 2005 - 01:11 PM

Oh I C...tnx for clearing that up.

Hmm might have that in pdf format...just need to take a quick look in my pdf library...tnx again

#11 Donna

Donna

    Retired P2L Queen!

  • P2L Staff
  • PipPipPipPip
  • 12,330 posts
  • Gender:Female
  • Location:B.C Canada

Posted 09 May 2005 - 01:14 PM

Oh I C...tnx for clearing that up.

Hmm might have that in pdf format...just need to take a quick look in my pdf library...tnx again

You have posted this 3 times even after I removed one already, please do not re-post the same thing over and over.

#12 Tudi

Tudi

    Young Padawan

  • Members
  • Pip
  • 42 posts

Posted 09 May 2005 - 02:21 PM

Sorry about that Donna, i'm not really sure what happend....I'm not one to post multiple times for post count, I probably had a glitch in my net connection. Sorry bout that, I'll try to be more careful :(




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users