Page 1 of 1

Making a basic XHTML web page Rate Topic: ****- 3 Votes

#1 Creecher  Icon User is offline

  • I don't care
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Posted 11 February 2011 - 06:02 PM

Welcome to my tutorial on making a basic web page with XHTML.


About XHTML:

XHTML is HTML, but more proper (and cleaner, too!). You have to close your tags, your tags cannot be UPPERCASE, and you must include a DOCTYPE(DTD).


XHTML stands for EXtinsible HyperText Markup Language. Extinsiblity is a system design implentation where future growth is taken into consideration, meaning it's been taken into account for future scripting. Extinsibility is for maintainability and avoiding obsolescence. So XHTML was made for easy usage and clean syntax.

Every web browser is compatible with XHTML. XHTML is also the W3C recommendation when it comes to designing your websites. XHTML is also compatible with HTML 4.01 and above, meaning it'll comply with your fancy new HTML 5 website, so there are no worries if you decide to mix the two around, just be careful with your syntax, though.



There are four DOCTYPEs (or DTDs) for XHTML. These are Strict, Transitional (Most commonly used),Frameset, and regular XHTML 1.1 .

Strict is for when you want nothing but XHTML, thus making it the cleanest of the DOCTYPES, to be used with CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Transitional is for when you want to mix HTML and XHTML together. This is the most commonly used DTD, mostly because it is the easiest.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Frameset is for when you want to use HTML frames on your web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML 1.1 is the same as Strict, but it allows you to add modules to your web pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">




XHTML pages are saved just like HTML pages, with a .html or .htm, or with the XHTML file extensions .xhtml or .xht


Here is a basic XHTML web 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">
<head>
<title>XHTML 1.0 web page</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
<p>Hello, world!</p>
<blockquote>Blockquotes</blockquote>
<img src="http://crackle.imageshack.us/images/blue/home_cooltool.png" alt="Firefox IE" />
</body>
</html>





As you can see, the above page includes a DOCTYPE, nested tags (<html> <head> whatever), lowercase tags, and a properly inserted image. XHTML also needs a xmlns (XML Namespace), if you don't include one, you won't get any errors with the W3C validator, but you will get a warning. It's best to include one anyways.

The biggest difference between HTML and XHTML is that XHTML requires closed, lowercase tags, while HTML does not. A lot of people like to mix HTML with XHTML, I call that 'HTML incest'. It can get very confusing if you don't know what your doing.

One of the biggest problems people have with XHTML is that they want to get sloppy like you can in HTML, so they tend to not get their web pages validated or don't even bother with any of it.

Now, lets add some simple styling to our XHTML 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">
<head>
<title>XHTML 1.0 web page with styling</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
body
{
background-color: green;
}
}
h1 
{
color: red;
font-size: 25;
}
p 
{
color: blue;
border-left-style:dotted;

}
</style>
</head>
<body>
<p>Hello, world!</p>
<blockquote>Blockquotes</blockquote>
<img src="http://crackle.imageshack.us/images/blue/home_cooltool.png" alt="Firefox IE" />
</body>
</html>



Though this page isn't very pretty, it is still stylized using CSS. XHTML is compliant with CSS, XML, PHP, and Javascript.

You can use any HTML tag in XHTML (depending on your DTD, or DOCTYPE). Check here for a complete list of HTML/XHTML DTD compliance.


Some extra resources that may help you out:

http://www.w3schools...tml/default.asp
http://xhtml.com/en/xhtml/reference/
http://validator.w3.org/

Is This A Good Question/Topic? 3
  • +

Replies To: Making a basic XHTML web page

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,231
  • Joined: 08-June 10

Posted 12 February 2011 - 09:00 AM

I don’t want to be picky (although I have to comment), this all is just for personal coding practice.

unless you use the .xhtml/.xht file extensions or send the "application/xhtml+xml" or "text/xml" MIME header (when creating the page by a server-side language) it will be ordinary invalid HTML.

additionally, Internet Explorer (any version) does not support XHTML at all (XHTML 2.0 was not cancelled for no reason).

this document (test.html) should quit with an error:
<!-- name the file "test.html" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>This is not XHTML</title>
    </head>
    <body>
        <p>open ended paragraph …
        <p border=1>invalid attributes and not even a namespace</b>
        yet it renders
    </body>
</html>

surprise, surprise …

This post has been edited by Dormilich: 12 February 2011 - 10:02 AM

Was This Post Helpful? 2
  • +
  • -

Page 1 of 1