Download presentation
Presentation is loading. Please wait.
1
Chapter 24 – Introduction to XHTML Basic: Part I
Outline Introduction Common Elements Headers Linking Images Special Characters and More Line Breaks Internet and World Wide Web Resources
2
24.1 Introduction XHTML Basic
Extensible Hypertext Markup Language, Basic Subset of XHTML used for wireless and small devices W3C recommendation 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
3
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
4
Fig24_01.html Displays a “Welcome” message.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " <!-- Fig. 24.1: Fig24_01.html --> 6 <!-- Our first Web page > <html xmlns = " <head> <title>Welcome</title> </head> <body> <!-- Displays a welcome message --> <p><h1>Welcome to XHTML Basic!</h1></p> </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
5
Fig24_01.html (Courtesy of Pixo)
Pixo Microbrowser displays XHTML Basic document Fig24_01.html (Courtesy of Pixo)
6
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
7
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" " <!-- Fig. 24.2: Fig24_02.html --> 6 <!-- XHTML Basic headers > <html xmlns = " <head> <title>Using Headers</title> </head> <body> <!-- Render text as headers --> <h1>Level 1 header</h1> <h2>Level 2 header</h2> <h3>Level 3 header</h3> <h4>Level 4 header</h4> <h5>Level 5 header</h5> <h6>Level 6 header</h6> </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.
8
Fig24_02.html (Courtesy of Pixo)
Pixo Microbrowser displays XHTML Basic document Fig24_02.html (Courtesy of Pixo)
9
24.4 Linking Hyperlink References or links to other resources
XHTML Basic documents Images Anchor <a> element Creates links
10
<strong> tag creates bold text in most browsers
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " <!-- Fig. 24.3: Fig24_03.html --> 6 <!-- Introduction to hyperlinks --> <html xmlns = " <head> <title>Links</title> </head> <body> <p><strong>Select a Web site</strong></p> <!-- Create a hyperlink --> <p><a href = " Deitel & Associates</a></p> <p><a href = " Hall</a></p> </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
11
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)
12
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
13
Fig24_04.html Displays an image
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " <!-- Fig. 24.4: Fig24_04.html > 6 <!-- Adding images with XHTML Basic --> <html xmlns = " <head> <title>Using an image</title> </head> <body> <!-- Format for inserting an image: --> <!-- <img src = "location/filename" --> <p><img src = "bug.gif" height = "40" width = "40" alt = "bug image" /></p> </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
14
Fig24_04.html (Courtesy of Pixo)
15
24.5 Images Fig Internet Explorer 5.5 rendering an alt attribute’s value.
16
Fig24_06.html Creating hyperlinked images
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " <!-- Fig. 24.6: Fig24_06.html > 6 <!-- Using images as link anchors --> <html xmlns = " <head> <title>Navigation Bar</title> </head> <body> <p> <!-- Creates a hyperlinked image --> <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> </a><br /> <a href = "contact.html"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br /> </p> </body> 33 </html> Fig24_06.html Creating hyperlinked images img element nested within an anchor (a) element br element (line break)
17
Fig24_06.html Images which act as hyperlinks
(Courtesy of Pixo) (Courtesy of Pixo) (Courtesy of Pixo)
18
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:
19
Fig24_07.html Special characters
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " <!-- Fig. 24.7: Fig24_07.html > 6 <!-- Inserting special characters --> <html xmlns = " <head> <title>Special Characters and Line Breaks</title> </head> <body> <p> <!-- Special characters have the form &code; --> All information on Deitel<strong>'</strong>s Web site is <strong>©</strong> Deitel <strong>&</strong> Associates, Inc <hr /> <!-- Inserts a horizontal rule --> <br />Permission is required if you need to use any information from this Web site <br />Statistically, <strong>> ½</strong> of our Web site visitors are from outside the United States </p> </body> 29 </html> Fig24_07.html Special characters Special characters Copyright symbol Fraction 1/2 Greater than (>) character
20
Fig24_07.html Special characters
(Courtesy of Pixo) (Courtesy of Pixo)
Similar presentations
