Your SlideShare is downloading. ×
0
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Introduction to xhtml
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to xhtml

233

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Why XHTML? • Many pages on the internet contain "bad" HTML.
  • 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. • 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. 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. • 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. • XHTML Attributes • Attribute names must be in lower case • Attribute values must be quoted • Attribute minimization is forbidden
  • 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. • 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. • 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. • 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. • Attribute Names Must Be In Lower Case wrong: <table WIDTH="100%"> correct: <table width="100%">
  • 13. • Attribute Values Must Be Quoted wrong: <table width=100%> Correct <table width="100%">
  • 14. • Attribute Minimization Is Forbidden Wrong <input checked> <input readonly> Correct <input checked="checked"> <input readonly="readonly">
  • 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. • 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. • <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. 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. • 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. • Define the author of a page: <meta name="author" content="Hege Refsnes"> • Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">
  • 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. • Example <html> <head> <title>meta tag</title> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> </head> </html>
  • 23. • A character entity looks like this: • &entity_name; OR • &#entity_number;
  • 24. Useful Character Entities Result Description Entity Name Entity Number(ASCII Value) Non-breaking space     < less than < < > greater than > > & ampersand & & © copyright © © ® registered trademark ® ® ™ trademark ™ ™
  • 25. Effect of Using Character Entities and ASCII Values "Success is counted sweetest…. Copyright © 2004. Kelly Valqui. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25

×