Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to XHTML


Published on

Published in: Education
  • Login to see the comments

Introduction to XHTML

  1. 1. Introduction to XHTML Chapter 2
  2. 2. Learning Outcomes In this chapter, you will learn about: ◦ XHTML syntax, tags, and document type definitions ◦ The anatomy of a web page ◦ Formatting the body of a web page ◦ Formatting the text on a web page ◦ Special Characters ◦ Connecting Web pages using hyperlinks
  3. 3. What is HTML? HTML: The set of markup symbols or codes placed in a file intended for display on a Web browser page. The World Wide Web Consortium ( sets the standards for HTML and its related languages.
  4. 4. What is XHTML? The newest version of HTML eXtensible HyperText Markup Language. XHTML uses: ◦ the elements and attributes of HTML ◦ the syntax of XML (eXtensible Markup Language).
  5. 5. XML Syntax An XML document must be well-formed. ◦ Use lowercase ◦ Use opening and closing tags <body> </body> ◦ Close stand-alone tag with special syntax <hr />
  6. 6. First Web page
  7. 7. DocumentType Definition (DTD)  W3C Recommendation: Use a Document Type Definition to identify the type of markup language used in a web page.XHTML 1.0 TransitionalThis is the least strict specification for XHTML 1.0. It allows theuse of both Cascading Style Sheets and traditional formattinginstructions such as fonts.XHTML 1.0 StrictRequires exclusive use of Cascading Style Sheets.XHTML 1.0 FramesetRequired for pages using XHTML frames. We will use not usethis.
  8. 8. Head & Body Sections Head Section Contains information that describes the Web page document <head> …head section info goes here </head> Body Section Contains text and elements that display in the Web page document <body> …body section info goes here </body>
  9. 9. Anatomy of an XHTML ElementOpening tag<h1>content</h1> Closing TagThe closing tag always needs a slash before the tag name.
  10. 10. XHTML Attributes  Attributes always go inside the opening tag.<h1 id=“blah” class=“big”> content</h1> Tags can have multiple attributes, each separated by a space.
  11. 11. XHTML Elements Top-level elements: html, head, and body Head elements: title, meta and script Body elements: ◦ Block-Level elements ◦ Inline elements
  12. 12. XHTML <title> and <meta /> tags<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="" lang="en" xml:lang="en"> <head> <title>My First Web Page</title> <meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more."> <meta name="keywords" content="eurosport,sports, sport,sports news,live scores,football,cricket,f1, golf,rugby,tennis,uk,yahoo"> </head> <body> .... Body info goes here </body></html>
  13. 13. The Heading Element<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>
  14. 14. XHTML <p> tagParagraph element<p> …paragraph goes here… </p> ◦ Groups sentences and sections of text together. ◦ Configures a blank line above and below the paragraph
  15. 15. XHTML <br /> tag Line Break element ◦ Stand-alone tag …text goes here <br /> This starts on a new line…. ◦ Causes the next element or text to display on a new line
  16. 16. XHTML Special Characters Display special characters such as quotes, copyright symbol, etc. Character Code © &copy; < &lt; > &gt; & &amp; &nbsp;
  17. 17. XHTML List Basics  Definition List  Ordered List  Unordered List
  18. 18. XHTML Definition List Useful to display a list of terms and definitions or a list of FAQ and answers ◦ <dl> tag Contains the definition list ◦ <dt> tag Contains a defined term Configures a line break above and below the text ◦ <dd> tag Contains a data definition or description Indents the text
  19. 19. XHTML Ordered List Conveys information in an ordered fashion <ol> Contains the ordered list ◦ type attribute determines numbering scheme of list, default is numerals <li> Contains an item in the list
  20. 20. XHTML Ordered List Example<ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li></ol>
  21. 21. XHTML Unordered List Example<ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li></ul>
  22. 22. Checkpoint Describe the features of a heading tag and how it configures the text.
  23. 23. XHTML <a> tag The anchor element ◦ Specifies a hyperlink reference (href) to a file ◦ Text between the <a> and </a> is displayed on the web page. <a href="contact.html">Contact Us</a> ◦ href Attribute  Indicates the file name or URL Web page document, photo, pdf, etc. 23
  24. 24. XHTML <a> tag Absolute link ◦ Link to other Web sites <a href="">Yahoo</a> Relative link ◦ Link to pages on your own site <a href="index.htm">Home</a> 24
  25. 25. More onRelative Linking Relative links from the home page: index.html  <a href="contact.html">Contact</a>  <a href="products/collars.html">Collars</a>  <a href="../index.html">Home</a>  <a href="../services/bathing.html">Dog Bathing</a> 25
  26. 26. Opening a Linkin a New Browser Window The target attribute on the anchor element opens a link in a new browser window or new browser tab. <a href="" target="_blank">Yahoo!</a> 26
  27. 27. XHTML Linking to Fragment Identifiers  A link to a part of a Web page  Also called named fragments, fragment ids  Two components: 1. The element that identifies the named fragment of a Web page. This requires the id attribute. <div id=“top”> ….. </div> 2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute. <a href=“#top”>Back to Top</a> Note the use of the # in the anchor tag! 27
  28. 28. Checkpoint Describe when to use an absolute link. Is the http protocol used in the href value? Describe when to use a relative link. Is the http protocol used in the href value? 28
  29. 29. Writing Valid XHTML Check your code for syntax errors ◦ Benefit:  Valid code  more consistent browser display W3C XHTML Validation Tool ◦
  30. 30. Summary This chapter provided an introduction to XHTML. It began with an introduction to the HTML, discussed the transition to XHTML, continued with the anatomy of a web page, introduced inline and block-level formatting, and demonstrated the XHTML techniques used to create hyperlinks. You will use these skills over and over again as you create Web pages.