Your SlideShare is downloading. ×
0
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
Xhtml Part1
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

Xhtml Part1

1,179

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,179
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
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. XHTML Review Part 1 Instructor: Nancy Lee
  • 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. 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. 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. 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. 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. 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. 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. First XHTML Example <ul><li>Comments </li></ul><ul><li><!-- Fig. : main.html --> </li></ul><ul><li><!-- Our first Web page --> </li></ul>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Images <ul><li>nav.html </li></ul><ul><li>Discuss use of buttons for navigation links </li></ul>
  • 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. 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. Nested and Ordered Lists <ul><li>Ordered and unordered lists may be nested </li></ul><ul><li>Example program list.html </li></ul>

×