Introduction to XHTML
• XHTML stands for EXtensible Hyper
Text Markup Language

•
•
•
•

XHTML is almost identical to HTML...
Why XHTML?
• Many pages on the internet contain "bad" HTML.
• code will work fine if you view it in a browser (even
if it does NOT follow the HTML rules):

<html>
<head>
<title>This ...
• Today's market consists of different browser
technologies. Some browsers run on computers, and
some browsers run on mobi...
Difference between HTML
&XHTML
• Document Structure
• XHTML DOCTYPE is mandatory
• The XML namespace attribute in <html> i...
• XHTML Elements
• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be ...
• XHTML Attributes
• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is f...
• XHTML Elements Must Be Properly Nested
wrong
<b><i>This text is bold and italic</b></i>
correct
<b><i>This text is bold ...
• XHTML Elements Must Always Be Closed
Wrong
<p>This is a paragraph
<p>This is another paragraph
correct
<p>This is a para...
• Empty Elements Must Also Be Closed
Wrong
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy...
• XHTML Elements Must Be In Lower Case
wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
correct:
<body>
<p>This is a parag...
• Attribute Names Must Be In Lower Case
wrong:
<table WIDTH="100%">

correct:
<table width="100%">
• Attribute Values Must Be Quoted
wrong:
<table width=100%>

Correct
<table width="100%">
• Attribute Minimization Is Forbidden
Wrong
<input checked>
<input readonly>
Correct
<input checked="checked">
<input read...
<meta> Tag
Meta information – information about information
 Provides useful information about the content of your
Web s...
• Providing this type of information will increase the
chance that users will find your documents -- the
information they ...
• <meta> tags always goes inside the <head> element
• It has a start tag but does not have a corresponding
end tag

• more...
META Tag Attributes
Attribute
Name or
http-equiv

content

Value
Keywords
Description
author
text

Description
Specifies a...
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS,
XML, XHTML, JavaScript">

• Define a descr...
• Define the author of a page:
<meta name="author" content="Hege Refsnes">

• Refresh document every 30 seconds:
<meta htt...
Character entities
• Reserved characters in HTML must be replaced with
character entities.

• It is not possible to use th...
• Example
<html>
<head>
<title>meta tag</title>

<meta name="keywords" content="HTML, CSS, XML,
XHTML, JavaScript">
</head...
• A character entity looks like this:
• &entity_name;
OR

• &#entity_number;
Useful Character Entities
Result

Description

Entity Name

Entity
Number(ASCII
Value)

Non-breaking space

&nbsp;

 

<

...
Effect of Using Character Entities
and ASCII Values

&quot;Success is counted sweetest….

Copyright © 2004. Kelly Valqui.
...
Upcoming SlideShare
Loading in …5
×

Introduction to xhtml

385 views
275 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
385
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to xhtml

  1. 1. Introduction to XHTML • XHTML stands for EXtensible Hyper Text Markup Language • • • • XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML 4.01 XHTML is HTML defined as an XML application XHTML is supported by all major browsers.
  2. 2. Why XHTML? • Many pages on the internet contain "bad" HTML.
  3. 3. • code will work fine if you view it in a browser (even if it does NOT follow the HTML rules): <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body>
  4. 4. • Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. • Smaller devices often lack the resources or power to interpret a "bad" markup language.
  5. 5. Difference between HTML &XHTML • Document Structure • XHTML DOCTYPE is mandatory • The XML namespace attribute in <html> is mandatory • <html>, <head>, <title>, and <body> is mandatory
  6. 6. • XHTML Elements • 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
  7. 7. • XHTML Attributes • Attribute names must be in lower case • Attribute values must be quoted • Attribute minimization is forbidden
  8. 8. • XHTML Elements Must Be Properly Nested wrong <b><i>This text is bold and italic</b></i> correct <b><i>This text is bold and italic</i></b>
  9. 9. • XHTML Elements Must Always Be Closed Wrong <p>This is a paragraph <p>This is another paragraph correct <p>This is a paragraph</p> <p>This is another paragraph</p>
  10. 10. • Empty Elements Must Also Be Closed Wrong A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> correct A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />
  11. 11. • XHTML Elements Must Be In Lower Case wrong: <BODY> <P>This is a paragraph</P> </BODY> correct: <body> <p>This is a paragraph</p> </body>
  12. 12. • Attribute Names Must Be In Lower Case wrong: <table WIDTH="100%"> correct: <table width="100%">
  13. 13. • Attribute Values Must Be Quoted wrong: <table width=100%> Correct <table width="100%">
  14. 14. • Attribute Minimization Is Forbidden Wrong <input checked> <input readonly> Correct <input checked="checked"> <input readonly="readonly">
  15. 15. <meta> Tag Meta information – information about information  Provides useful information about the content of your Web site META tag is primarily used to help search engines better index a document by supplying additional information about the document. META tags includes an author's name, a description or short abstract of a document, or a set of keywords for indexing a document.
  16. 16. • Providing this type of information will increase the chance that users will find your documents -- the information they want -- on the Web. • In addition to providing indexing information, META tags can also be used to refresh a Web page.
  17. 17. • <meta> tags always goes inside the <head> element • It has a start tag but does not have a corresponding end tag • more than one META tag can be used within a document
  18. 18. META Tag Attributes Attribute Name or http-equiv content Value Keywords Description author text Description Specifies a name for the metadata Gives the value associated with the http-equiv or name attribute
  19. 19. • Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> • Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS">
  20. 20. • Define the author of a page: <meta name="author" content="Hege Refsnes"> • Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">
  21. 21. Character entities • Reserved characters in HTML must be replaced with character entities. • It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. • To actually display reserved characters, we must use character entities in the HTML source code.
  22. 22. • Example <html> <head> <title>meta tag</title> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> </head> </html>
  23. 23. • A character entity looks like this: • &entity_name; OR • &#entity_number;
  24. 24. Useful Character Entities Result Description Entity Name Entity Number(ASCII Value) Non-breaking space &nbsp;   < less than &lt; < > greater than &gt; > & ampersand &amp; & © copyright &copy; © ® registered trademark &reg; ® ™ trademark &trade; ™
  25. 25. Effect of Using Character Entities and ASCII Values &quot;Success is counted sweetest…. Copyright © 2004. Kelly Valqui. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25

×