Scribd
Upload
215 views

Introduction To XHTML

XHTML is a stricter version of HTML that is defined as an XML application. It has several rules that HTML does not, such as requiring elements to be properly nested, closed, and in lowercase. XHTML documents must also have a single root element and DOCTYPE declaration. There are several DTD types that define elements and attributes differently, including XHTML 1.0 Strict, Transitional, and Frameset. The next step after learning XHTML is to use CSS for controlling style and layout.

Uploaded by

Kinsa Ko
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
215 views

Introduction To XHTML

XHTML is a stricter version of HTML that is defined as an XML application. It has several rules that HTML does not, such as requiring elements to be properly nested, closed, and in lowercase. XHTML documents must also have a single root element and DOCTYPE declaration. There are several DTD types that define elements and attributes differently, including XHTML 1.0 Strict, Transitional, and Frameset. The next step after learning XHTML is to use CSS for controlling style and layout.

Uploaded by

Kinsa Ko
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
You are on page 1/ 26

LDCU | College of Information Technology

Introduction to XHTML IT 308-11 Free Elective

What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation All Browsers Support XHTML

Why XHTML?

Many pages on the internet contain "bad" HTML. <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body>

LDCU | College of Information Technology

XML + HTML = XHTML

XML is a markup language where everything must be marked up correctly, which results in "well-formed" documents. XML is designed to describe data, and HTML is designed to display data.

LDCU | College of Information Technology

XHTML vs. HTML

XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element

LDCU | College of Information Technology

Elements Must Be HTML: Properly Nested


<b><i>This

text is bold and italic</b></i> text is bold and italic</i></b>

XHTML:
<b><i>This

LDCU | College of Information Technology

Elements Must Always Wrong: Be Closed


<p>This

is a paragraph <p>This is another paragraph is a paragraph</p> <p>This is another paragraph</p>

Correct:
<p>This

LDCU | College of Information Technology

Empty Elements Must Also Be Closed

Wrong:

A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />

Correct:
A

LDCU | College of Information Technology

Elements Must Be In Lower Case

Wrong:
<BODY>

<P>This is a paragraph</P> </BODY>

Correct:
<body>

<p>This is a paragraph</p> </body>

LDCU | College of Information Technology

Documents Must Have One Root Element

Basic document structure:


<html>

<head> ... </head> <body> ... </body> </html>

LDCU | College of Information Technology

XHTML Syntax

Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The XHTML DTD defines mandatory elements

LDCU | College of Information Technology

XHTML Syntax Rules

Attribute Names Must Be In Lower Case


Wrong:

<table WIDTH="100%"> <table width="100%">

Correct:

Attribute Values Must Be Quoted


Wrong: Check:

<table width=100%> <table width="100%">

LDCU | College of Information Technology

XHTML Syntax Rules

Attribute Minimization Is Forbidden

Wrong:
<input

checked> <input readonly> <input disabled>

LDCU | College of Information Technology

Mandatory XHTML Elements

An XHTML document must have a DOCTYPE declaration. The html, head, title, and body elements must also be present.

LDCU | College of Information Technology

XHTML Doctypes

<!DOCTYPE> Is Mandatory An XHTML document consists of three main parts:


the the the

DOCTYPE declaration <head> section <body> section

LDCU | College of Information Technology

An XHTML Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> </body>

LDCU | College of Information Technology </html>

XHTML Different Doctypes

The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag. The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup LDCU | College of Information Technology language, so that the browsers render

XHTML Different Doctypes


XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.1

LDCU | College of Information Technology

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

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

LDCU | College of Information Technology

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as wellformed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm l1-transitional.dtd">

LDCU | College of Information Technology

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm l1-frameset.dtd">

LDCU | College of Information Technology

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xht ml11.dtd">

LDCU | College of Information Technology

XHTML Summary

This lecture has taught you how to create stricter and cleaner HTML pages. You have learned that all XHTML elements must be properly nested, XHTML documents must be well-formed, all tag names must be in lowercase, and that all XHTML elements must be closed.

You have also learned that all XHTML documents must have a <!DOCTYPE> declaration, and that the html, head, LDCU | College of Information Technology title, and body elements must be

Now You Know XHTML, What's Next?


The next step is to learn CSS. CSS is used to control the style and layout of multiple Web pages all at once. With CSS, all formatting can be removed from the HTML document and stored in a separate file. CSS gives you total control of the layout, without messing up the document content.

LDCU | College of Information Technology

Questions?

LDCU | College of Information Technology

Thank You!

Reference:
http://w3schools.com/xhtml/default.asp

LDCU | College of Information Technology

You might also like