Xhtml Part1


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Xhtml Part1

  1. 1. XHTML Review Part 1 Instructor: Nancy Lee
  2. 2. Course Objectives <ul><li>To understand important components of XHTML documents. </li></ul><ul><li>To use XHTML to create Web pages. </li></ul><ul><li>To be able to add images to Web pages </li></ul><ul><li>To understand how to create and use hyperlinks to navigate Web pages </li></ul><ul><li>To be able to mark up lists of information </li></ul>
  3. 3. Introduction <ul><li>Internet is 3 decades old </li></ul><ul><li>The internet offers many opportunities </li></ul><ul><li>You will develop your own web site in this class </li></ul>
  4. 4. Introduction <ul><li>You will add pages during the semester </li></ul><ul><li>We will use XHTML for basic web pages </li></ul><ul><ul><li>Extensible Hypertext Markup Language </li></ul></ul>
  5. 5. Introduction <ul><li>We will also use CSS to format pages </li></ul><ul><ul><li>Cascading Style Sheets </li></ul></ul><ul><li>XHTML unlike HTML </li></ul><ul><ul><li>Only content and structure </li></ul></ul><ul><ul><li>Formatting using CSS </li></ul></ul>
  6. 6. Editing XHTML <ul><li>Write XHTML in source-code form. </li></ul><ul><ul><li>Type into text editor </li></ul></ul><ul><ul><ul><li>Notepad </li></ul></ul></ul><ul><ul><li>Files are saved as </li></ul></ul><ul><ul><ul><li>.html </li></ul></ul></ul><ul><ul><ul><li>.htm </li></ul></ul></ul>
  7. 7. Editing XHTML <ul><li>XHTML documents are stored on a web server </li></ul><ul><li>Test Page by opening in a browser </li></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><li>IE6 </li></ul></ul><ul><ul><li>Netscape </li></ul></ul>
  8. 8. First XHTML Example <ul><li>main.html </li></ul><ul><li>Required to conform to XHTML syntax </li></ul><ul><li><?xml version =“1.0”?> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;> </li></ul>
  9. 9. First XHTML Example <ul><li>Comments </li></ul><ul><li><!-- Fig. : main.html --> </li></ul><ul><li><!-- Our first Web page --> </li></ul>
  10. 10. First XHTML Example <ul><li>Element that defines the document </li></ul><ul><li><html xmlns =&quot; http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li></html> </li></ul>
  11. 11. First XHTML Example <ul><li>Head element of document </li></ul><ul><li><html xmlns =&quot; http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li></html> </li></ul>
  12. 12. First XHTML Example <ul><li>Head element of document </li></ul><ul><ul><li>Title </li></ul></ul><ul><ul><li>Style information </li></ul></ul><ul><li><html xmlns =&quot; http://www.w3.org/1999/xhtml &quot;> </li></ul><ul><li><head> </li></ul><ul><li><title>Internet and WWW How to Program - Welcome</title> </li></ul><ul><li></head> </li></ul><ul><li></html> </li></ul>
  13. 13. First XHTML Example <ul><li>Body element of document </li></ul><ul><ul><li>Content and structure </li></ul></ul><ul><li><html xmlns =&quot; http://www.w3.org/1999/xhtml &quot;> </li></ul><ul><li><head> </li></ul><ul><li><title>Internet and WWW How to Program - Welcome</title> </li></ul><ul><li></head> </li></ul><ul><li><body>Key line in program: tells browser to display text </li></ul><ul><li>Tells browser to display text </li></ul><ul><li><p>Welcome to XHTML!</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  14. 14. First XHTML Example <ul><li>All XHTML documents delimit an element with </li></ul><ul><ul><li>Start tag </li></ul></ul><ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><li>End tag </li></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul><ul><ul><ul><li>All XHTML tags must have end tag </li></ul></ul></ul>
  15. 15. First XHTML Example <ul><li>All XHTML documents delimit an element with </li></ul><ul><ul><li>Start tag </li></ul></ul><ul><ul><ul><li><html xmlns=“ http://www.w3.org/1999/xhtml”> </li></ul></ul></ul><ul><ul><ul><li>Start tags may have attributes </li></ul></ul></ul><ul><ul><ul><ul><li>Name </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Value </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Values must be enclosed in “ “ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Syntax error if not </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Upper case is a syntax error </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Separated by = sign </li></ul></ul></ul></ul>
  16. 16. First XHTML Example <ul><li>Documents have two sections </li></ul><ul><ul><li>Head </li></ul></ul><ul><ul><li>Body </li></ul></ul><ul><li>Nested elements should be indented for readability. </li></ul><ul><li>Tags may not overlap </li></ul>
  17. 17. W3C XHTML Validation Service <ul><li>W3C provides a validation service </li></ul><ul><li>validator.w3.org </li></ul><ul><li>Most browsers will attempt to render XHTML documents even if invalid </li></ul>
  18. 18. Headers <ul><li>header.html </li></ul><ul><li><body> </li></ul><ul><li><h1>Level 1 Header</h1> </li></ul><ul><li><h2>Level 2 header</h2> </li></ul><ul><li><h3>Level 3 header</h3> </li></ul><ul><li><h4>Level 4 header</h4> </li></ul><ul><li><h5>Level 5 header</h5> </li></ul><ul><li><h6>Level 6 header</h6> </li></ul><ul><li></body> </li></ul><ul><li>Size may vary by browser </li></ul>
  19. 19. Linking <ul><li>Hyperlink </li></ul><ul><ul><li>Pages </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Sections </li></ul></ul><ul><li>link.html </li></ul><ul><li>link2.html </li></ul>
  20. 20. Linking <ul><li>Links are created with the anchor tag </li></ul><ul><ul><li>anchor element </li></ul></ul><ul><ul><li> <a> </a> </li></ul></ul>
  21. 21. Linking <ul><ul><li>href attribute </li></ul></ul><ul><ul><ul><li>specifies link to URL </li></ul></ul></ul><ul><ul><ul><li><a href =&quot; http://www.yahoo.com&quot;>Yahoo!</a> </li></ul></ul></ul><ul><ul><ul><li>file </li></ul></ul></ul><ul><ul><ul><li><a href =&quot; home.html&quot;>Home</a> </li></ul></ul></ul><ul><ul><ul><li>e-mail address </li></ul></ul></ul><ul><ul><ul><ul><li>uses mailto: URL </li></ul></ul></ul></ul><ul><ul><ul><li><a href = mailto:nancy_lee@ccsn.edu >email me</a> </li></ul></ul></ul>
  22. 22. Images <ul><li>picture.html </li></ul><ul><li>Use img element to place pictures on your web page </li></ul><ul><li><img /> </li></ul><ul><li>Closing slash is required /> or </img> </li></ul>
  23. 23. Images <ul><li>Attributes </li></ul><ul><ul><li>src </li></ul></ul><ul><ul><li><img src=“picture.jpg” /> </li></ul></ul><ul><ul><li>Height, Width </li></ul></ul><ul><ul><li><img src=“picture.jpg” width=“200” height=“200” /> </li></ul></ul><ul><ul><ul><li>Image measured in pixels </li></ul></ul></ul>
  24. 24. Images <ul><li>Attributes </li></ul><ul><ul><li>alt (required in XHTML) </li></ul></ul><ul><ul><li><img src=“picture.jpg” width=“200” height=“200” alt=“This is a picture” /> </li></ul></ul><ul><ul><ul><li>accessible pages </li></ul></ul></ul><ul><ul><ul><li>Speech synthesizers use text </li></ul></ul></ul>
  25. 25. Images <ul><li>Nest img element inside of anchor element to create hyperlink using picture. </li></ul><ul><ul><ul><li>Used to create buttons </li></ul></ul></ul><ul><ul><ul><li>Pictorial links </li></ul></ul></ul><ul><ul><ul><li>Thumbnails </li></ul></ul></ul>
  26. 26. Images <ul><li>Non spacing break element does not have ending tag, but is required for XHTML </li></ul><ul><ul><li><br /> </li></ul></ul>
  27. 27. Images <ul><li>nav.html </li></ul><ul><li>Discuss use of buttons for navigation links </li></ul>
  28. 28. Special Characters and More Line Breaks <ul><li>Some characters are not on keyboard or difficult to type </li></ul><ul><li>Symbols may cause syntax error < > = </li></ul><ul><li>Use &code; </li></ul><ul><li>Example: </li></ul><ul><li><p> if x < 10 then increment x by 1</p> </li></ul><ul><li>Causes syntax error </li></ul><ul><li><p> if x &lt; 10 then increment x by 1</p> </li></ul><ul><li>See Appendix A in text. </li></ul>
  29. 29. Unordered Lists <ul><li>Unordered list element </li></ul><ul><ul><li><ul> </ul> </li></ul></ul><ul><ul><li>List </li></ul></ul><ul><ul><ul><li><li> </li> </li></ul></ul></ul>
  30. 30. Nested and Ordered Lists <ul><li>Ordered and unordered lists may be nested </li></ul><ul><li>Example program list.html </li></ul>