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
13
Embed
Chapter 4 - Introduction to XHTML: Part 1 · • Extensible HyperText Markup Language (XHTML) – A markup language based on HTML – Separates document presentation from information
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
– 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"
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"
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 -------->>>>
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"
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" " " " />/>/>/>
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"
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" />/>/>/>
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"
6 <!<!<!<!-------- Inserting special characters. Inserting special characters. Inserting special characters. Inserting special characters. -------->>>>
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
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; -------->>>>
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"
6 <!<!<!<!-------- Unordered list containing hyperlinks. Unordered list containing hyperlinks. Unordered list containing hyperlinks. Unordered list containing hyperlinks. -------->>>>
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 -------->>>>
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"
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. -------->>>>
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>
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 -------->>>>
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.