Chapter 24 – Introduction to XHTML Basic: Part I Outline 24.1 Introduction 24.2 Common Elements 24.3 Headers 24.4 Linking 24.5 Images 24.6 Special Characters and More Line Breaks 24.7 Internet and World Wide Web Resources
24.1 Introduction XHTML Basic Extensible Hypertext Markup Language, Basic Subset of XHTML used for wireless and small devices W3C recommendation www.w3.org/TR/xhtml-basic WAP 2.0 Specifies XHTML to replace WML Maintain WML extensions Derived from XML Excludes processor intensive features of XHTML Write with a text editor Pixo Microbrowser renders XHTML Basic documents
24.2 First XHTML Basic Example Tags Name element contain text to display or commands to perform Start tag <> Defines beginning of text enclosure End tag </> Defines end of text enclosure Atrributes Provide additional information about tag element Name and value separated by = Tags must be nested and cannot overlap
Fig24_01.html Displays a “Welcome” message. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> 4 5 <!-- Fig. 24.1: Fig24_01.html --> 6 <!-- Our first Web page --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Welcome</title> 11 </head> 12 13 <body> 14 15 <!-- Displays a welcome message --> 16 <p><h1>Welcome to XHTML Basic!</h1></p> 17 </body> 18 </html> Commenting (notes) within the code which the browser ignores title element is used to name Web documents Required lines for proper XHTML syntax head element contains information about the document End tag Open tag Fig24_01.html Displays a “Welcome” message. Blank lines ensure readability, browser does not recognize them body element contains document content. Paragraph tags <p> and </p> mark up text for browser display. </html> tag closes XHTML Basic document
Fig24_01.html (Courtesy of Pixo) Pixo Microbrowser displays XHTML Basic document Fig24_01.html (Courtesy of Pixo)
Header elements indicate relative importance of contained text 24.3 Headers Header elements indicate relative importance of contained text h1 through h6 Each is a relatively smaller font size
Fig24_02.html Displays text using header tags to change font size. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10dtd"> 4 5 <!-- Fig. 24.2: Fig24_02.html --> 6 <!-- XHTML Basic headers --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Using Headers</title> 11 </head> 12 13 <body> 14 15 <!-- Render text as headers --> 16 <h1>Level 1 header</h1> 17 <h2>Level 2 header</h2> 18 <h3>Level 3 header</h3> 19 <h4>Level 4 header</h4> 20 <h5>Level 5 header</h5> 21 <h6>Level 6 header</h6> 22 </body> 23 </html> Fig24_02.html Displays text using header tags to change font size. Header tags encapsulate text As header number increases, font size decreases.
Fig24_02.html (Courtesy of Pixo) Pixo Microbrowser displays XHTML Basic document Fig24_02.html (Courtesy of Pixo)
24.4 Linking Hyperlink References or links to other resources XHTML Basic documents Images Anchor <a> element Creates links
<strong> tag creates bold text in most browsers 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd"> 4 5 <!-- Fig. 24.3: Fig24_03.html --> 6 <!-- Introduction to hyperlinks --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Links</title> 11 </head> 12 13 <body> 14 <p><strong>Select a Web site</strong></p> 15 16 <!-- Create a hyperlink --> 17 <p><a href = "http://www.deitel.com"> 18 Deitel & Associates</a></p> 19 20 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> 21 22 </body> 23 </html> Fig24_03.html <strong> tag creates bold text in most browsers Defines a link to the Deitel & Associates Web site using the href attribute (specifies location of linked source) Text between <a> and </a> appears as the link on the Web page
Fig24_03.html Creating a hyperlink with XHTML Basic Hyperlinks are underlined blue. Fig24_03.html Creating a hyperlink with XHTML Basic (Courtesy of Pixo) (Courtesy of Pixo)
Use images with XHTML basic Create own with graphics software Adobe Photoshop Jasc Paint Shop Pro GIF and JPEG Download free images from the Web gallery.yahoo.com Incorporate images into a Web page Must be small for wireless Web clients
Fig24_04.html Displays an image 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd"> 4 5 <!-- Fig. 24.4: Fig24_04.html --> 6 <!-- Adding images with XHTML Basic --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Using an image</title> 11 </head> 12 13 <body> 14 15 <!-- Format for inserting an image: --> 16 <!-- <img src = "location/filename" --> 17 <p><img src = "bug.gif" height = "40" width = "40" 18 alt = "bug image" /></p> 19 </body> 20 </html> alt attribute (required) provides alternative text to browsers that cannot render images. Fig24_04.html Displays an image Self-closing tag. Same as using <img></img>. Can only be used on tags which do not contain any text img element used to place image in a Web document src attribute specifies image file location height and width attributes specify image dimensions
Fig24_04.html (Courtesy of Pixo)
24.5 Images Fig. 24.5 Internet Explorer 5.5 rendering an alt attribute’s value.
Fig24_06.html Creating hyperlinked images 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd"> 4 5 <!-- Fig. 24.6: Fig24_06.html --> 6 <!-- Using images as link anchors --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Navigation Bar</title> 11 </head> 12 13 <body> 14 <p> 15 16 <!-- Creates a hyperlinked image --> 17 <a href = "links.html"> 18 <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /> 20 </a><br /> 21 22 <a href = "list.html"> 23 <img src = "buttons/list.jpg" width = "65" 24 height = "50" alt = "List Example Page" /> 25 </a><br /> 26 27 <a href = "contact.html"> 28 <img src = "buttons/contact.jpg" width = "65" 29 height = "50" alt = "Contact Page" /> 30 </a><br /> 31 </p> 32 </body> 33 </html> Fig24_06.html Creating hyperlinked images img element nested within an anchor (a) element br element (line break)
Fig24_06.html Images which act as hyperlinks (Courtesy of Pixo) (Courtesy of Pixo) (Courtesy of Pixo)
24.6 Special Characters and More Line Breaks Characters and symbols which are difficult to embed into XHTML Basic document Syntax errors <p>if x < 10 then increment x by 1</p> Less than character (<) returns a syntax error Reserved for opening and closing tags Special characters Entity references (&code;) Corrected line:
Fig24_07.html Special characters 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 3 "http://www.w3.org/TR/xhtml-basic/DTD/xhtml-basic10.dtd"> 4 5 <!-- Fig. 24.7: Fig24_07.html --> 6 <!-- Inserting special characters --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Special Characters and Line Breaks</title> 11 </head> 12 13 <body> 14 <p> 15 16 <!-- Special characters have the form &code; --> 17 All information on Deitel<strong>'</strong>s 18 Web site is <strong>©</strong> Deitel 19 <strong>&</strong> Associates, Inc. 1995-2001. 20 21 <hr /> <!-- Inserts a horizontal rule --> 22 <br />Permission is required if you need to use 23 any information from this Web site. 24 <br />Statistically, <strong>> ½</strong> 25 of our Web site visitors are from outside the 26 United States. 27 </p> 28 </body> 29 </html> Fig24_07.html Special characters Special characters Copyright symbol Fraction 1/2 Greater than (>) character
Fig24_07.html Special characters (Courtesy of Pixo) (Courtesy of Pixo)