Introduction to xhtml
•Als PPTX, PDF herunterladen•
0 gefällt mir•880 views
XHTML is a stricter version of HTML that defines HTML as an XML document. It is almost identical to HTML but requires proper nesting, closing of all elements, and lowercase element names. XHTML ensures documents are structured properly and can be rendered on various devices. Key differences between HTML and XHTML include mandatory DOCTYPEs and namespaces, required elements, proper nesting and closing of all elements, and lowercase element names and attribute names in quotes. The <meta> tag provides metadata like keywords, descriptions and authors in the <head> to help with search engine optimization and indexing. Character entities must be used for reserved characters like < and >.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (14)
Ähnlich wie Introduction to xhtml
Ähnlich wie Introduction to xhtml (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Introduction to xhtml
- 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