Chapter 4 - Introduction to XHTML: Part 1 Lab Accounts
advertisement
IT350 Web and Internet Programming Chapter 4 - Introduction to XHTML: Part 1 Adapated from 2008 Prentice Hall, Inc. All rights reserved. Lab Accounts • Student Web Server Accounts – Mapping web-server account to department student account • • • • File Explorer: Tools Map Network Drive (pick drive W) \\cs-websrvr.cs.usna.edu\www.mXXXXXX.it350.cs.usna.edu$ Note $ on the end Username: USNA\mXXXXXX – URL for each student website on Department Web-Server is as follows: www.mXXXXXX.it350.cs.usna.edu • where "XXXXXX", is the individual student's alpha number Adapated from 2008 Prentice Hall, Inc. All rights reserved. 4.1 Introduction / 4.2 Editing XHTML • Extensible HyperText Markup Language (XHTML) – A markup language based on HTML – Separates document presentation from information – Standard defined by W3C • XHTML documents – Source-code form – Text editor (e.g. Notepad, Wordpad, emacs, etc.) – .html or .htm file-name extension – Web server – stores XHTML documents – Web browser – requests XHTML documents Adapated from 2008 Prentice Hall, Inc. All rights reserved. Basic Syntax <a href=“links.html”> <br /> Adapated from 2008 Prentice Hall, Inc. All rights reserved. Useful links </a> Example 1 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> main.html (1 of 1) 4 5 <!-<!-- Fig. 4.1: main.html --> --> 6 <!-<!-- First XHTML example. --> --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> 8 9 10 <head> <title>Welcome <title>Welcome</title> Welcome</title> </head> 11 12 13 14 <body> <p>Welcome <p>Welcome to XHTML!</p> XHTML!</p> </body> 15 </html> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4.4 W3C XHTML Validation Service • Validation service ( validator.w3.org ) – Checking a document’s syntax – Provide URL or upload file Adapated from 2008 Prentice Hall, Inc. All rights reserved. Block vs. inline tags in XHTML • Block tags – Start their content on a new line • Inline tags – Their content continues on the same line • Restrictions – Inline tags (and text) must be nested inside block tags, not directly under <body> or <form> – Block tags cannot be nested inside inline tags ILLEGAL: <b> <h1> Foo </h1> </b> Adapated from 2008 Prentice Hall, Inc. All rights reserved. 4.5 Headers – h1 to h6 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> <!-<!-- Fig. 4.2: heading.html --> --> <!-<!-- Heading elements h1 through h6. --> --> <html xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> <head> <title>Headings <title>Headings</title> Headings</title> </head> <body> <h1>Level <h1>Level <h2>Level <h2>Level <h3>Level <h3>Level <h4>L <h4>Level <h5>Level <h5>Level <h6>Level <h6>Level </body> </html> 1 2 3 4 5 6 Heading</h1> Heading</h1> heading</h2> heading</h2> heading</h3> heading</h3> heading</h4> heading</h4> heading</h5> heading</h5> heading</h6> heading</h6> Adapated from 2008 Prentice Hall, Inc. All rights reserved. 4.6 Linking • Hyperlink – References other sources such as XHTML documents and images – Both text and images can act as hyperlinks – Created using the a (anchor) element • Attribute href – Specifies the location of a linked resource • Link to e-mail addresses using mailto: URL Adapated from 2008 Prentice Hall, Inc. All rights reserved. 1 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> 4 5 <!-<!-- Fig. 4.3: links.html --> --> 6 <!-<!-- Linking to other web pages. --> --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> 8 9 10 <head> <title>Links <title>Links</title> Links</title> </head> 11 12 <body> 13 <h1>Here <h1>Here are my favorite sites</h1> sites</h1> 14 <p><strong>Click <p><strong>Click a name to go to that page.</strong></p> page. strong></p> 15 16 <!-- Create four text hyperlinks --> --> 17 <p><a href = "http://www.deitel.com"> </a></p> "http://www.deitel.com">Deitel</a></p> 18 <p><a href = "http://www.prenhall.com"> </a></p> "http://www.prenhall.com">Prentice Hall</a></p> 19 <p><a href = "http://www.yahoo.com"> </a></p> "http://www.yahoo.com">Yahoo!</a></p> 20 21 <p><a href = "http://www.usatoday.com"> </a></p> "http://www.usatoday.com">USA Today</a></p> </body> 22 </html> Adapted from 2008 Prentice Hall, Inc. All rights reserved. Relative vs. Absolute Links • Absolute links <a href=“http://www.cs.usna.edu/textbooks.htm”>Textbooks</a> <a href=“http://www.nytimes.com”> NYT </a> • Relative links <a href=“textbooks.htm”>Textbooks</a> <a href=“../textbooks.htm”>Textbooks</a> <a href=“../common/dogs.html”>More on dogs</a> Adapated from 2008 Prentice Hall, Inc. All rights reserved. 4.7 Images 1 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 picture.html (1 of 1) "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> 4 5 <!-<!-- Fig. 4.5: picture.html --> --> 6 <!-<!-- Images in XHTML files. --> --> 7 <html xmlns xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> 8 9 10 <head> <title>Images <title>Images</title> Images</title> </head> 11 12 <body> 13 <p> <img src = "cpphtp6.jpg" width = "92" height = "120" 14 alt = "C++ How to Program book cover" cover" /> 15 <img src = "jhtp.jpg" width = "92" height = "120" 16 alt = "Java How to Program book cover" /> 17 18 </p> 19 </body> 20 </html> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 1 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 Links with images as their content "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> 4 5 <!-<!-- Fig. 4.6: nav.html --> --> 6 <!-<!-- Images as link anchors. --> --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Navigation <title>Navigation Bar</title> Bar</title> </head> 10 nav.html (1 of 2) 11 12 <body> 13 <p> <a href = "links.html"> "links.html"> 14 <img src = "buttons/links.jpg" width width = "65" 15 height = "50" alt = "Links Page" /> 16 </a> 17 18 <a href = "list.html"> "list.html"> 19 <img src = "buttons/list.jpg" width = "65" 20 height = "50" alt = "List Example Page" /> 21 </a> 22 23 <a href = "contact.html"> "contact.html"> 24 <img src = "buttons/contact.jpg" width = "65" 25 height = "50" alt = "Contact Page" /> 26 </a> 27 28 Adapted from 2008 Prentice Hall, Inc. All rights reserved. <a href = "table1.html"> "table1.html"> 29 <img src = "buttons/table.jpg" width = "65" 30 height = "50" alt = "Table Page" /> 31 </a> 32 33 <a href = "form.html"> "form.html"> 34 nav.html (2 of 2) <img src = "buttons/form.jpg" "buttons/form.jpg" width = "65" 35 height = "50" alt = "Feedback Form" /> 36 </a> 37 38 </p> 39 </body> 40 </html> Adapted from 2008 Prentice Hall, Inc. All rights reserved. Exercise #1 – “Hello World” • Create a “Hello World” page that just displays “Hello World” as a header Adapated from 2008 Prentice Hall, Inc. All rights reserved. Exercise #2 • Add to the Hello World page a link to the IT350 course webpage, and a link to the email address of the instructor Adapated from 2008 Prentice Hall, Inc. All rights reserved. 4.8 Special Characters and More Line Breaks • Character entity references (in the form &code;) • Numeric character references (e.g. &#38;) • del – Strike-out text • sup – Superscript text • sub – Subscript text • <hr /> – Horizontal rule (horizontal line) Adapated from 2008 Prentice Hall, Inc. All rights reserved. 1 2 3 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> 4 6 <!-<!-- Fig. 4.7: contact2.html --> --> <!-<! -- Inserting special characters. --> --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> 5 8 9 10 contact2.html (1 of 2) <head> <title>Contact <title>Contact Page</title> Page</title> </head> 11 12 <body> 13 <p> 14 Click 15 <a href = "mailto:deitel@deitel.com"> "mailto:deitel@deitel.com">here</a> here</a> 16 to open an email email message addressed to 17 deitel@deitel.com. 18 </p> 19 20 <hr /> <!-<!-- inserts a horizontal rule --> --> 21 22 <!-<!-- special characters are entered --> --> 23 <!-<!-- using the form &code; --> --> 24 <p>All information on this site is <strong>&copy; <p> <strong> 25 Deitel &amp; Associates, Inc. 2007.</strong></p> </strong></p> 26 Adapted from 2008 Prentice Hall, Inc. All rights reserved. 27 <!-<!-- to strike through text use <del> tags --> --> 28 <!-<!-- to subscript text use <sub> tags --> --> 29 <!-<!-- to superscript text use <sup> tags --> --> 30 <!-<!-- these tags are nested inside other tags --> --> 31 <p><del>You may download 3.14 x 10<sup> <sup>2</sup> <p><del> <sup> </sup> characters worth of information from this site.</del> </del> 32 Only <sub>one</sub> </sub> download per hour is permitted.</p> </p> <sub> 33 34 <p><em>Note: &lt; &frac14; of the information <p><em> presented here is updated daily.</em></p> </em></p> 35 36 contact2.html (2 of 2) </body> 37 </html> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4.9 Lists • Unordered list element ul – Creates a list in which each item begins with a bullet symbol (called a disc) – li (list item) • Entry in an unordered list • Ordered list element ol – Creates a list in which each item begins with a number • Lists may be nested to represent hierarchical data relationships Adapated from 2008 Prentice Hall, Inc. All rights reserved. 1 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> 4 5 <!-<!-- Fig. 4.8: links2.html --> --> 6 <!-<!-- Unordered list containing hyperlinks. --> --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> 8 <head> <title>Links <title>Links</title> Links</title> 9 10 links2.html (1 of 1) </head> 11 12 <body> 13 <h1>Here <h1>Here are my favorite sites</h1> sites</h1> 14 <p><strong>Click <p><strong>Click on a name to go to that page.</strong></p> page.</strong></p> 15 16 <!-<!-- create an unordered list --> --> 17 <ul> 18 <!-<!-- add four list items --> --> 19 <li><a href = "http://www.deitel.com"> </a></li> "http://www.deitel.com">Deitel</a></li> 20 <li><a href = "http://www.w3.org"> </a></li> "http://www.w3.org">W3C</a></li> 21 <li><a href = "http://www.yahoo.com"> </a></li> "http://www.yahoo.com">Yahoo!</a></li> <li><a href = "http://www.cnn.com"> </a></li> "http://www.cnn.com">CNN</a></li> 22 </ul> 23 24 </body> 25 </html> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 1 2 3 <?xml version = "1.0" encoding = "utf"utf-8"?> 8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> 4 5 <!-<!-- Fig. 4.9: list.html --> --> 6 <!-<!-- Nested and ordered lists. --> --> <html xmlns xmlns = "http://www.w3.org/1999/xhtml"> "http://www.w3.org/1999/xhtml"> 7 8 <head> 9 <title>Lists <title>Lists</title> Lists</title> </head> 10 list.html (1 of 2) 11 12 13 <body> <h1>The <h1>The Best Features of the Internet</h1> Internet</h1> 14 15 <!-<!-- create an unordered list --> --> 16 <ul> li>You <li> You can meet new people from countries around world.</li> the world. </li> 17 18 19 20 <li> You have access to new media as it becomes public: 21 23 <!-<!-- this starts a nested list, which uses a --> --> <!--- modified bullet. The list ends when you --> <! --> 24 <!-<!-- close the <ul> tag. --> --> 25 <ul> <li>New <li>New games</li> games</li> 22 26 27 <li>New <li>New applications 28 Adapted from 2008 Prentice Hall, Inc. All rights reserved. 29 <!-<!-- nested ordered list --> --> 30 <ol> <li>For business</li> </li> <li> 31 <li>For pleasure</li> </li> <li> 32 </ol> 33 </li> <!-<!-- ends line 27 new applications li --> --> 34 35 36 <li>Around <li>Around the clock news</li> news</li> 37 38 <li>Search <li>Search engines</li> engines</li> <li>Shopping Shopping</li> <li> Shopping </li> 39 <li>Programming <li>Programming list.html (2 of 2) 40 41 <!-<!-- another nested ordered list --> --> 42 <ol> 43 <li>XML <li>XML</li> XML</li> 44 <li>Java <li>Java</li> Java</li> 45 <li>XHTML <li>XHTML</li> XHTML</li> 46 <li>Scripts <li>Scripts</li> Scripts</li> <li>New <li>New languages</li> languages</li> 47 </ol> 48 </li> <!-<!-- ends programming li of line 39 --> --> 49 </ul> <!-<!-- ends the nested list of line 25 --> --> 50 51 </li> 52 53 54 55 56 <li>Links <li>Links</li> Links</li> <li>Keeping <li> Keeping in touch with old friends</li> friends</li> <li>It <li>It is the technology of the future!</li> future!</li> </ul> <!-<!-- ends the the unordered list of line 16 --> --> </body> 58 </html> 57 Adapated from 2008 Prentice Hall, Inc. All rights reserved. Adapted from 2008 Prentice Hall, Inc. All rights reserved. Web Resources • • • • • • • www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML www.w3.org/TR/2001/REC-xhtml11-20010531 Adapated from 2008 Prentice Hall, Inc. All rights reserved.
