chapter 4 - introduction to xhtml: part 1 · • extensible hypertext markup language (xhtml) – a...
TRANSCRIPT
1
Adapated from 2008 Prentice Hall, Inc. All rights reserved.
Chapter 4 - Introduction to XHTML:
Part 1
IT350 Web and Internet Programming
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.it.cs.usna.edu$
• Note $ on the end
• Username: cs-websrvr\mXXXXXX
• Need Account Password (from instructor)
– URL for each student website on Department Web-Server is
as follows:
www.mXXXXXX.it.cs.usna.edu
• where "XXXXXX", is the individual student's alpha number
2
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”> Useful links </a>
<br />
3
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig. Fig. Fig. Fig. 4.1: main.html 4.1: main.html 4.1: main.html 4.1: main.html -------->>>>
6666 <!<!<!<!-------- First XHTML example. First XHTML example. First XHTML example. First XHTML example. -------->>>>
7 <html xmlns =<html xmlns =<html xmlns =<html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head> <head> <head> <head>
9 <title><title><title><title>WelcomeWelcomeWelcomeWelcome</title></title></title></title>
10 </head> </head> </head> </head>
11
12 <body> <body> <body> <body>
13 <p><p><p><p>Welcome to XHTML!Welcome to XHTML!Welcome to XHTML!Welcome to XHTML!</p></p></p></p>
14 </body> </body> </body> </body>
15 </html></html></html></html>
main.html
(1 of 1)
Example
Adapated 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
4
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.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?> 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>> 4 5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 4.2: heading.html 4.2: heading.html 4.2: heading.html 4.2: heading.html -------->>>> 6 <!<!<!<!-------- Heading elements h1 through h6. Heading elements h1 through h6. Heading elements h1 through h6. Heading elements h1 through h6. -------->>>> 7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>> 8 <head><head><head><head> 9 <title><title><title><title>HeadingsHeadingsHeadingsHeadings</title></title></title></title> 10 </head></head></head></head> 11 12 <body><body><body><body> 13 <h1><h1><h1><h1>Level 1 HeadingLevel 1 HeadingLevel 1 HeadingLevel 1 Heading</h1></h1></h1></h1> 14 <h2><h2><h2><h2>Level 2 headingLevel 2 headingLevel 2 headingLevel 2 heading</h2></h2></h2></h2> 15 <h3><h3><h3><h3>Level 3 headingLevel 3 headingLevel 3 headingLevel 3 heading</h3></h3></h3></h3> 16 <h4><h4><h4><h4>LLLLevel 4 headingevel 4 headingevel 4 headingevel 4 heading</h4></h4></h4></h4> 17 <h5><h5><h5><h5>Level 5 headingLevel 5 headingLevel 5 headingLevel 5 heading</h5></h5></h5></h5> 18 <h6><h6><h6><h6>Level 6 headingLevel 6 headingLevel 6 headingLevel 6 heading</h6></h6></h6></h6> 19 </body></body></body></body> 20 </html></html></html></html>
4.5 Headers – h1 to h6
5
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
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 4.3: links.html 4.3: links.html 4.3: links.html 4.3: links.html -------->>>>
6 <!<!<!<!-------- Linking to other web pages. Linking to other web pages. Linking to other web pages. Linking to other web pages. -------->>>>
7 <html<html<html<html xmlns = xmlns = xmlns = xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>LinksLinksLinksLinks</title></title></title></title>
10 </head></head></head></head>
11
12 <body><body><body><body>
13 <h1><h1><h1><h1>Here are my favorite sitesHere are my favorite sitesHere are my favorite sitesHere are my favorite sites</h1></h1></h1></h1>
14 <p><strong><p><strong><p><strong><p><strong>Click a name to go to that page.Click a name to go to that page.Click a name to go to that page.Click a name to go to that page.</strong></p>strong></p>strong></p>strong></p>
15
16 <<<<!!!!-------- Create four text hyperlinks Create four text hyperlinks Create four text hyperlinks Create four text hyperlinks -------->>>>
17 <p><a href = <p><a href = <p><a href = <p><a href = "http://www.deitel.com""http://www.deitel.com""http://www.deitel.com""http://www.deitel.com">>>>Deitel</a></p></a></p></a></p></a></p>
18 <p><a href = <p><a href = <p><a href = <p><a href = "http://www.prenhall.com""http://www.prenhall.com""http://www.prenhall.com""http://www.prenhall.com">>>>Prentice Hall</a></p></a></p></a></p></a></p>
19 <p><a href = <p><a href = <p><a href = <p><a href = "http://www.yahoo.com""http://www.yahoo.com""http://www.yahoo.com""http://www.yahoo.com">>>>Yahoo!</a></p></a></p></a></p></a></p>
20 <p><a href = <p><a href = <p><a href = <p><a href = "http://www.usatoday.com""http://www.usatoday.com""http://www.usatoday.com""http://www.usatoday.com">>>>USA Today</a></p></a></p></a></p></a></p>
21 </body></body></body></body>
22 </html></html></html></html>
links.html
(1 of 2)
6
Adapated 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>
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 4.5: picture.html 4.5: picture.html 4.5: picture.html 4.5: picture.html -------->>>>
6 <!<!<!<!-------- Images in XHTML files. Images in XHTML files. Images in XHTML files. Images in XHTML files. -------->>>>
7 <html xm<html xm<html xm<html xmlns = lns = lns = lns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>ImagesImagesImagesImages</title></title></title></title>
10 </head></head></head></head>
11
12 <body><body><body><body>
13 <p><p><p><p>
14 <img src = <img src = <img src = <img src = "cpphtp6.jpg""cpphtp6.jpg""cpphtp6.jpg""cpphtp6.jpg" width = width = width = width = "92" "92" "92" "92" height = height = height = height = "120""120""120""120"
15 alt = alt = alt = alt = "C++ How to Program book cover"C++ How to Program book cover"C++ How to Program book cover"C++ How to Program book cover" " " " />/>/>/>
16 <img src = <img src = <img src = <img src = "jhtp.jpg""jhtp.jpg""jhtp.jpg""jhtp.jpg" width = width = width = width = "92" "92" "92" "92" height = height = height = height = "120""120""120""120"
17 alt = alt = alt = alt = "Java How to Program book cover""Java How to Program book cover""Java How to Program book cover""Java How to Program book cover" />/>/>/>
18 </p></p></p></p>
19 </body></body></body></body>
20 </html></html></html></html>
picture.html
(1 of 1)
4.7 Images
7
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
nav.html
(1 of 2)
Links with images as their content
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 4.6: nav.html 4.6: nav.html 4.6: nav.html 4.6: nav.html -------->>>>
6 <!<!<!<!-------- Images as link anchors. Images as link anchors. Images as link anchors. Images as link anchors. -------->>>>
7 <html xmlns<html xmlns<html xmlns<html xmlns = = = = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Navigation BarNavigation BarNavigation BarNavigation Bar</title></title></title></title>
10 </head></head></head></head>
11
12 <body><body><body><body>
13 <p><p><p><p>
14 <a href = <a href = <a href = <a href = "links.html""links.html""links.html""links.html">>>>
15 <img src = <img src = <img src = <img src = "buttons/links.jpg""buttons/links.jpg""buttons/links.jpg""buttons/links.jpg" widtwidtwidtwidth = h = h = h = "65""65""65""65"
16 height =height =height =height = "50" "50" "50" "50" alt = alt = alt = alt = "Links Page" "Links Page" "Links Page" "Links Page" />/>/>/>
17 </a></a></a></a>
18
19 <a href = <a href = <a href = <a href = "list.html""list.html""list.html""list.html">>>>
20 <img src = <img src = <img src = <img src = "buttons/list.jpg""buttons/list.jpg""buttons/list.jpg""buttons/list.jpg" width =width =width =width = "65""65""65""65"
21 height =height =height =height = "50" "50" "50" "50" alt = alt = alt = alt = "List Example Page" "List Example Page" "List Example Page" "List Example Page" />/>/>/>
22 </a></a></a></a>
23
24 <a href = <a href = <a href = <a href = "contact.html""contact.html""contact.html""contact.html">>>>
25 <img src = <img src = <img src = <img src = "buttons/contact.jpg""buttons/contact.jpg""buttons/contact.jpg""buttons/contact.jpg" width = width = width = width = "65""65""65""65"
26 height =height =height =height = "50" "50" "50" "50" alt = alt = alt = alt = "Contact Page" "Contact Page" "Contact Page" "Contact Page" />/>/>/>
27 </a></a></a></a>
28
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
29 <a href = <a href = <a href = <a href = "table1.html""table1.html""table1.html""table1.html">>>>
30 <img src = <img src = <img src = <img src = "buttons/table.jpg""buttons/table.jpg""buttons/table.jpg""buttons/table.jpg" width =width =width =width = "65""65""65""65"
31 height =height =height =height = "50" "50" "50" "50" alt = alt = alt = alt = "Table Page" "Table Page" "Table Page" "Table Page" />/>/>/>
32 </a> </a> </a> </a>
33
34 <a href = <a href = <a href = <a href = "form.html""form.html""form.html""form.html">>>>
35 <img src = <img src = <img src = <img src = "buttons/"buttons/"buttons/"buttons/form.jpg"form.jpg"form.jpg"form.jpg" width = width = width = width = "65""65""65""65"
36 height =height =height =height = "50" "50" "50" "50" alt = alt = alt = alt = "Feedback Form" "Feedback Form" "Feedback Form" "Feedback Form" />/>/>/>
37 </a> </a> </a> </a>
38 </p></p></p></p>
39 </body> </body> </body> </body>
40 </html></html></html></html>
nav.html
(2 of 2)
8
Adapated from 2008 Prentice Hall, Inc. All rights reserved.
Exercise #1 – “Hello World”
• Create a “Hello World” page that just displays
“Hello World”
Adapated from 2008 Prentice Hall, Inc. All rights reserved.
Exercise #2
• Add to the Hellow World page a link to the IT350
course webpage, and a link to the email address of
the instructor
9
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. &)
• del– Strike-out text
• sup– Superscript text
• sub– Subscript text
• <hr />– Horizontal rule (horizontal line)
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
contact2.html
(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 4.7: contact2.html 4.7: contact2.html 4.7: contact2.html 4.7: contact2.html -------->>>>
6 <!<!<!<!-------- Inserting special characters. Inserting special characters. Inserting special characters. Inserting special characters. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Contact PageContact PageContact PageContact Page</title></title></title></title>
10 </head></head></head></head>
11
12 <body><body><body><body>
13 <p><p><p><p>
14 ClickClickClickClick
15 <a href = <a href = <a href = <a href = "mailto:[email protected]""mailto:[email protected]""mailto:[email protected]""mailto:[email protected]">>>>herehereherehere</a></a></a></a>
16 to open an eto open an eto open an eto open an email message addressed tomail message addressed tomail message addressed tomail message addressed to
17 [email protected]@[email protected]@deitel.com.
18 </p></p></p></p>
19
20 <hr /><hr /><hr /><hr /> <!<!<!<!-------- inserts a horizontal rule inserts a horizontal rule inserts a horizontal rule inserts a horizontal rule -------->>>>
21
22 <!<!<!<!-------- special characters are entered special characters are entered special characters are entered special characters are entered -------->>>>
23 <!<!<!<!-------- using the form &code; using the form &code; using the form &code; using the form &code; -------->>>>
24 <p><p><p><p>All information on this site is <strong><strong><strong><strong>©
25 Deitel & Associates, Inc. 2007.</strong></p></strong></p></strong></p></strong></p>
26
10
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
contact2.html
(2 of 2)
27 <!<!<!<!-------- to strike through text use <del> tags to strike through text use <del> tags to strike through text use <del> tags to strike through text use <del> tags -------->>>>
28 <!<!<!<!-------- to subscript text use <sub> tags to subscript text use <sub> tags to subscript text use <sub> tags to subscript text use <sub> tags -------->>>>
29 <!<!<!<!-------- to superscript text use <sup> tags to superscript text use <sup> tags to superscript text use <sup> tags to superscript text use <sup> tags -------->>>>
30 <!<!<!<!-------- these tags are nested inside other tags these tags are nested inside other tags these tags are nested inside other tags these tags are nested inside other tags -------->>>>
31 <p><del><p><del><p><del><p><del>You may download 3.14 x 10<sup><sup><sup><sup>2</sup></sup></sup></sup>
32 characters worth of information from this site.</del></del></del></del>
33 Only <sub><sub><sub><sub>one</sub> </sub> </sub> </sub> download per hour is permitted.</p></p></p></p>
34 <p><em><p><em><p><em><p><em>Note: < ¼ of the information
35 presented here is updated daily.</em></p></em></p></em></p></em></p>
36 </body></body></body></body>
37 </html></html></html></html>
Adapated 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
11
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
links2.html
(1 of 1)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 4.8: links2.html 4.8: links2.html 4.8: links2.html 4.8: links2.html -------->>>>
6 <!<!<!<!-------- Unordered list containing hyperlinks. Unordered list containing hyperlinks. Unordered list containing hyperlinks. Unordered list containing hyperlinks. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>LinksLinksLinksLinks</title></title></title></title>
10 </head></head></head></head>
11
12 <body><body><body><body>
13 <h1><h1><h1><h1>Here are my favorite sitesHere are my favorite sitesHere are my favorite sitesHere are my favorite sites</h1></h1></h1></h1>
14 <p><strong><p><strong><p><strong><p><strong>Click on a name to go to that page.Click on a name to go to that page.Click on a name to go to that page.Click on a name to go to that page.</strong></p></strong></p></strong></p></strong></p>
15
16 <!<!<!<!-------- create an unordered list create an unordered list create an unordered list create an unordered list -------->>>>
17 <ul><ul><ul><ul>
18 <!<!<!<!-------- add four list items add four list items add four list items add four list items -------->>>>
19 <li><a href = <li><a href = <li><a href = <li><a href = "http://www.deitel.com""http://www.deitel.com""http://www.deitel.com""http://www.deitel.com">>>>Deitel</a></li></a></li></a></li></a></li>
20 <li><a href = <li><a href = <li><a href = <li><a href = "http://www.w3.org""http://www.w3.org""http://www.w3.org""http://www.w3.org">>>>W3C</a></li></a></li></a></li></a></li>
21 <li><a href = <li><a href = <li><a href = <li><a href = "http://www.yahoo.com""http://www.yahoo.com""http://www.yahoo.com""http://www.yahoo.com">>>>Yahoo!</a></li></a></li></a></li></a></li>
22 <li><a href = <li><a href = <li><a href = <li><a href = "http://www.cnn.com""http://www.cnn.com""http://www.cnn.com""http://www.cnn.com">>>>CNN</a></li></a></li></a></li></a></li>
23 </ul></ul></ul></ul>
24 </body></body></body></body>
25 </html></html></html></html>
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
list.html
(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 4.9: list.html 4.9: list.html 4.9: list.html 4.9: list.html -------->>>>
6 <!<!<!<!-------- Nested and ordered lists. Nested and ordered lists. Nested and ordered lists. Nested and ordered lists. -------->>>>
7 <html xm<html xm<html xm<html xmlns = lns = lns = lns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>ListsListsListsLists</title></title></title></title>
10 </head></head></head></head>
11
12 <body><body><body><body>
13 <h1><h1><h1><h1>The Best Features of the InternetThe Best Features of the InternetThe Best Features of the InternetThe Best Features of the Internet</h1></h1></h1></h1>
14
15 <!<!<!<!-------- create an unordered list create an unordered list create an unordered list create an unordered list -------->>>>
16 <ul><ul><ul><ul>
17 <<<<li>li>li>li>You can meet new people from countries aroundYou can meet new people from countries aroundYou can meet new people from countries aroundYou can meet new people from countries around
18 the world.the world.the world.the world.</li></li></li></li>
19 <li><li><li><li>
20 You have access to new media as it becomes public:You have access to new media as it becomes public:You have access to new media as it becomes public:You have access to new media as it becomes public:
21
22 <!<!<!<!-------- this starts a nested list, which uses a this starts a nested list, which uses a this starts a nested list, which uses a this starts a nested list, which uses a -------->>>>
23 <!<!<!<!-------- modified bullet. The list ends when you modified bullet. The list ends when you modified bullet. The list ends when you modified bullet. The list ends when you -------->>>>
24 <!<!<!<!-------- close the <ul> tag. close the <ul> tag. close the <ul> tag. close the <ul> tag. -------->>>>
25 <ul><ul><ul><ul>
26 <li><li><li><li>New gamesNew gamesNew gamesNew games</li></li></li></li>
27 <li><li><li><li>New applicationsNew applicationsNew applicationsNew applications
28
12
Adapted from 2008 Prentice
Hall, Inc. All rights reserved.
list.html
(2 of 2)
29 <!<!<!<!-------- nested ordered list nested ordered list nested ordered list nested ordered list -------->>>>
30 <ol><ol><ol><ol>
31 <li><li><li><li>For business</li></li></li></li>
32 <li><li><li><li>For pleasure</li></li></li></li>
33 </ol></ol></ol></ol>
34 </li></li></li></li> <!<!<!<!-------- ends line 27 new applications li ends line 27 new applications li ends line 27 new applications li ends line 27 new applications li -------->>>>
35
36 <li><li><li><li>Around the clock newsAround the clock newsAround the clock newsAround the clock news</li></li></li></li>
37 <li><li><li><li>Search enginesSearch enginesSearch enginesSearch engines</li></li></li></li>
38 <li><li><li><li>ShoppingShoppingShoppingShopping</li></li></li></li>
39 <li><li><li><li>ProgrammingProgrammingProgrammingProgramming
40
41 <!<!<!<!-------- another nested ordered list another nested ordered list another nested ordered list another nested ordered list -------->>>>
42 <<<<ol>ol>ol>ol>
43 <li><li><li><li>XMLXMLXMLXML</li></li></li></li>
44 <li><li><li><li>JavaJavaJavaJava</li></li></li></li>
45 <li><li><li><li>XHTMLXHTMLXHTMLXHTML</li></li></li></li>
46 <li><li><li><li>ScriptsScriptsScriptsScripts</li></li></li></li>
47 <li><li><li><li>New languagesNew languagesNew languagesNew languages</li></li></li></li>
48 </ol></ol></ol></ol>
49 </li> </li> </li> </li> <!<!<!<!-------- ends programming li of line 39 ends programming li of line 39 ends programming li of line 39 ends programming li of line 39 -------->>>>
50 </ul></ul></ul></ul> <!<!<!<!-------- ends the nested list of line 25 ends the nested list of line 25 ends the nested list of line 25 ends the nested list of line 25 -------->>>>
51 </li></li></li></li>
52
53 <li><li><li><li>LinksLinksLinksLinks</li></li></li></li>
54 <li><li><li><li>Keeping in touch with old friendsKeeping in touch with old friendsKeeping in touch with old friendsKeeping in touch with old friends</li></li></li></li>
55 <li><li><li><li>It is the technology of the future!It is the technology of the future!It is the technology of the future!It is the technology of the future!</li></li></li></li>
56 </ul></ul></ul></ul> <!<!<!<!-------- ends tends tends tends the unordered list of line 16 he unordered list of line 16 he unordered list of line 16 he unordered list of line 16 -------->>>>
57 </body></body></body></body>
58 </html></html></html></html>
Adapated from 2008 Prentice Hall, Inc. All rights reserved.
13
Adapated 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