1 / 19

XHTML

XHTML. Lori Beckstead 2011. History of HTML. 1989 – 1995: HTML 1995: HTML was standardized and named HTML 2.0 1997: HTML 3.2 1998/1999: HTML 4.0 / 4.01 2000: XHTML  recommended by W3C XHTML – combines aspects of XML Syntax is a little more rigid: Must be lower case

manjit
Télécharger la présentation

XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML Lori Beckstead 2011

  2. History of HTML 1989 – 1995: HTML 1995: HTML was standardized and named HTML 2.0 1997: HTML 3.2 1998/1999: HTML 4.0 / 4.01 2000: XHTML  recommended by W3C XHTML – combines aspects of XML Syntax is a little more rigid: Must be lower case All tags must have a closing tag Attributes must have quotation marks, etc. web designers a little put off by rigid structure of XHTML 2004: work begins on HTML5, a new version not as strict as XHTML New structural tags New dynamic tags Video

  3. HTML review Basic document tags? <html> <head> </head> <body> </body> </html> What goes inside head tags? What goes inside body tags?

  4. HTML review <em>this text is emphasized</em> Tags: • used to mark-up HTML elements • enclosed in angle brackets • normally come in pairs like <p> and </p> • The first tag in a pair is the start tag, the second tag is the end tag • The text between the start and end tags is the element content Remember American spelling (color, center, etc.)

  5. Attributes Attribute: additional information placed inside start tag e.g: <table border=“0”>…</table> • Attribute name is border • Attribute value is 0 • Values are always in quotation marks

  6. Attributes Most common attribute is ‘style’ (CSS) • style=“property:value” e.g. <p style=“color:red”> paragraph </p>

  7. Hyperlinks <a href=“http://www.spiritlive.net”> this is a link to SPIRITlive </a> Multiple attributes <table border=“2” cellpadding=“2” cellspacing=“2”> table </table>

  8. Images <img src=“lori.jpg” /> What is this tag missing? <img src=“lori.jpg” alt=“Picture of Lori” />

  9. Comments • Used to insert information into the code that will be ignored by the browser • notes to help the webmaster remember what section is what, etc. <!-- this is a comment that won’t show up on screen --> e.g. <!-- left column navigation begins here -->

  10. Spot the errors: <html> <head> <title>How’s this HTML?</title> <body> <h1>Would this HTML work in a browser? </body>

  11. ‘bad’ HTML still works in most browsers, but not necessarily in other devices such as cell phones, PDAs, etc. • Enter XHTML! • Almost the same as HTML • A little more rigid coding rules • Usable on all browsers, including mobiles • The W3C (World Wide Web Consortium): in 2001 XHTML to replace HTML

  12. What is XHTML? • eXtensible HyperText Markup Language • A combination of: • HTML (used to format text) • XML (eXtensible Markup Language, used to process data) • XML is used in e-commerce and database-driven web sites

  13. HTML vs. XHTML: Main Differences • All tags & attributes must be in lower case • All elements must be closed • All tags must be properly nested • Attribute values must be quoted • All XHTML documents must have a DOCTYPE declaration.

  14. XHTML Rule: All elements must be closed <p>sample paragraph</p> <p>sample paragraph ‘Empty’ tags must also be closed Image tag: <img src=“picture.jpg” /> vs. <img src=“picture.jpg> Break tag: <br /> vs <br> Horizontal Rule tag: <hr /> vs. <hr>

  15. XHTML Rule: All tags must be properly nested Nesting: when multiple tags are used to format an element, they must be closed in the reverse order they were opened in. <p><strong><em>sample paragraph</em></strong></p>

  16. XHTML Rule: Attribute values must be quoted e.g. <body style=“color:blue”>… </body>

  17. XHTML All documents must include a DOCTYPE declaration (DTD) The DTD is a URL that points to a file that outlines the available elements, attributes, and their appropriate uses. It tells a “validator” what version of HTML or XHTML was used. e.g. <!DOCTYPE html public”-//W3C//DTD XHTML 1.0 Strict//EN”http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Just to confuse you, this is the ONLY tag in XHTML that does not need to be closed!!

  18. Basic XHTML document structure: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>name of document goes here</title> </head> <body> </body> </html> More info: http://www.w3schools.com/xhtml

  19. Review: HTML tutorial (blackboard) Tips: Use TextEdit Remember to choose FormatMake Plain Text in the TextEdit menu Save As and type “.html” as the file extension Each time you resave the HTML doc, you can hit ‘reload’ in your browser to see the update Use American spelling Beware of spelling mistakes or typos Check that you type in an opening tag and a closing tag Don’t forget the “/” in the closing tag Use proper nesting

More Related