XHTML Tutorial

• Part 1 - Introduction
• Part 2 - XHTML Tags
• Part 3 - Attributes

INTRODUCTION :

Although many people have never heard of it, XHTML is really the future of the internet. It is the newest generation of HTML (coming after HTML 4) but has many new features which mean that it is, in some ways, like XML. In this tutorial I will explain how XHTML differs from HTML and how you can update your pages to support it.

Note: It is necessary to already have a basic understanding of HTML before reading this tutorial as it deals with the differences between XHTML and HTML.

What is XHTML

XHTML stands for eXtensable HyperText Markup Language and is a cross between HTML and XML. XHTML was created for two main reasons:
1. To create a stricter standard for making web pages, reducing incompatibilities between browsers
2. To create a standard that can be used on a variety of different devices without changes

The great thing about XHTML, though, is that it is almost the same as HTML, although it is much more important that you create your code correctly. You cannot make badly formed code to be XHTML compatible. Unlike with HTML (where simple errors (like missing out a closing tag) are ignored by the browser), XHTML code must be exactly how it is specified to be. This is due to the fact that browsers in handheld devices etc. don't have the power to show badly formatted pages so XHTML makes sure that the code is correct so that it can be used on any type of browser.

XHTML is a web standard which has been agreed by the W3C and, as it is backwards compatible, you can start using it in your webpages now. Also, even if you don't think its really necessary to update to XHTML yet, there are three very good reasons to do so:
1. It will help you to create better formatted code on your site
2. It will make your site more accessable (both in the future and now due to the fact that it will also mean you have correct HTML and most browsers will show your page better)
3. XHTML is planned to replace HTML 4 in the future

There is really no excuse not to start writing your web pages using XHTML as it is so easy to pick up and will bring many benefits to your site.

What is CSS

There are essentially two parts to Cascading Style Sheets:
• the styles
• the stylesheet
What this means is that when you want to learn CSS, you need to learn both the style properties - the styles - and the placement of those properties - the stylesheet.
Style properties are covered in detail in the styles library and other articles. In this article, you will learn exactly how to place your stylesheets so that you can use them both on one page and all throughout your Web site.
Inline CSS Styles (Without a Stylesheet)
Inline styles are styles set within one tag. They only affect the current tag, every other similar tag on the page will have the default styles. For example, if you want one paragraph to have a grey background, you can use an inline style:

This paragraph has an inline style to change the background color to grey.

The style is defined by the "style" attribute on the element itself.
One Document CSS Stylesheet
If you want to set up a stylesheet to affect one Web page, you can do that with a stylesheet in the head of your document. For this you use thetag in the of your Web document.
Here are some tips for working with these stylesheets:
• Start them out right
Use attributes of the

• think about your styles
In many cases, you don't need to set many different styles, just basic ones that cover how your text and other elements should be displayed on your page. If you don't plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of bandwidth.
Site-Wide Stylesheets
Externally linked stylesheets allow you to use one stylesheet across your entire site. There are two ways to do this:
1. linking

2. importing (Internet Explorer only)

The fact that importing is only supported by Internet Explorer allows you to create multiple stylesheets that are browser independent, but without relying on DHTML and JavaScript to detect the browser.
Create three stylesheets:
• a generic one that will cover most basic stylesgeneric.css
• one for Internet Explorerie-styles.css
• one for Netscapens-styles.css
In the head of your document load them in this order:
1. The generic stylesheet

2. The Netscape stylesheet

3. The IE stylesheet (using the import command)

Because of cascading, the IE stylesheet will "overwrite" style rules found in the Netscape stylesheet, when viewed in Internet Explorer. And Netscape won't load the imported stylesheet at all.
-->