Scribd Logo
Upload

Welcome to Scribd!

  • Chapter 4 - Introduction To XHTML:: 2004 Prentice Hall, Inc. All Rights Reserved

    Uploaded by

    Produttore Twistedvision
    9 views36 pages

    Original Title

    2008-2-1-XHTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views36 pages

    Chapter 4 - Introduction To XHTML:: 2004 Prentice Hall, Inc. All Rights Reserved

    Uploaded by

    Produttore Twistedvision

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 36

    Chapter 4 - Introduction to XHTML: Part 1

    Outline 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11 Introduction Editing XHTML First XHTML Example W3C XHTML Validation Service Headers Linking Images Special Characters and More Line Breaks Unordered Lists Nested and Ordered Lists Web Resources

    2004 Prentice Hall, Inc. All rights reserved.

    Objectives

    In this chapter, you will learn:


    To understand important components of XHTML documents. To use XHTML to create Web pages. To be able to add images to Web pages. To understand how to create and use hyperlinks to navigate Web pages. To be able to mark up lists of information.

    2004 Prentice Hall, Inc. All rights reserved.

    4.1 Introduction Extensible HyperText Markup Language


    XHTML A markup language Separation of the presentation of a document from the structure of the documents information Based on HTML
    Technology of the World Wide Web Consortium (W3C)

    2004 Prentice Hall, Inc. All rights reserved.

    4.2 Editing XHTML 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

    2004 Prentice Hall, Inc. All rights reserved.

    4.3 First XHTML Example XHTML comments


    Start with <!-- and end with --> html element
    head element

    Head section Title of the document Style sheets and scripts body element Body section Pages content the browser displays

    Start tag
    attributes (provide additional information about an

    element)
    name and value (separated by an equal sign)

    End tag
    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.1: main.html --> <!-- Our first Web page -->

    Outline
    main.html (1 of 1)

    <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body>

    16 </html>

    2004 Prentice Hall, Inc. All rights reserved.

    4.4 W3C XHTML Validation Service Validation service ( validator.w3.org )


    Checking a documents syntax
    URL that specifies the location of the file Uploading a file to the site
    validator.w3.org/file-upload.html

    2004 Prentice Hall, Inc. All rights reserved.

    4.4 W3C XHTML Validation Service

    2004 Prentice Hall, Inc. All rights reserved.

    4.4 W3C XHTML Validation Service

    2004 Prentice Hall, Inc. All rights reserved.

    4.5 Headers Six headers ( header elements)


    h1 through h6

    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.4: header.html --> <!-- XHTML headers -->

    Outline
    header.html (1 of 1)

    <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Headers</title> </head> <body> <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>

    2004 Prentice Hall, Inc. All rights reserved.

    2004 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

    <strong> tag
    Bold

    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.5: links.html -->

    Outline
    links.html (1 of 2)

    <!-- Introduction to hyperlinks --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Links</title> </head> <body> <h1>Here are my favorite sites</h1> <p><strong>Click a name to go to that page.</strong></p> <!-- Create four text hyperlinks --> <p><a href = "http://www.deitel.com">Deitel</a></p> <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> <p><a href = "http://www.yahoo.com">Yahoo!</a></p>

    2004 Prentice Hall, Inc. All rights reserved.

    26 27 28

    <p><a href = "http://www.usatoday.com">USA Today</a></p> </body>

    Outline
    links.html (2 of 2)

    29 </html>

    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.6: contact.html -->

    Outline
    contact.html (1 of 1)

    <!-- Adding email hyperlinks --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Contact Page</title> </head> <body> <p> My email address is <a href = "mailto:deitel@deitel.com"> deitel@deitel.com </a> . Click the address and your browser will open an e-mail message and address it to me. </p> </body>

    24 </html>

    2004 Prentice Hall, Inc. All rights reserved.

    2004 Prentice Hall, Inc. All rights reserved.

    4.7 Images
    Three most popular formats
    Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) img element
    src attribute Specifies the location of the image file width and height

    Pixels (picture elements) Empty elements


    Terminated by character / inside the closing right angle bracket (>), or by explicitly including the end tag
    br element Line break
    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.7: picture.html -->

    Outline
    picture.html (1 of 1)

    <!-- Adding images with XHTML --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p> <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover" /> </p> </body>

    22 </html>

    2004 Prentice Hall, Inc. All rights reserved.

    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.8: nav.html -->

    Outline
    nav.html (1 of 2)

    <!-- Using images as link anchors --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Navigation Bar </title> </head> <body> <p> <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 />

    2004 Prentice Hall, Inc. All rights reserved.

    26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 </body> 49 </html> </p> <a href = "form.html"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> </a><br /> <a href = "table1.html"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> </a><br /> <a href = "header.html"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> </a><br /> <a href = "contact.html"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br />

    Outline
    nav.html (2 of 2)

    2004 Prentice Hall, Inc. All rights reserved.

    2004 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)

    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.9: contact2.html -->

    Outline
    contact2.html (1 of 2)

    <!-- Inserting special characters --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body> <!-- special characters are entered --> <!-- using the form &code; <p> Click <a href = "mailto:deitel@deitel.com">here </a> to open an e-mail message addressed to deitel@deitel.com. </p> <hr /> <!-- inserts a horizontal rule --> -->

    2004 Prentice Hall, Inc. All rights reserved.

    26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 </body> 42 </html> <p>Note: <strong>&lt; &frac14;</strong> of the information presented here is updated daily.</p> <!-- to strike through text use <del> tags <!-- to subscript text use <sub> tags <!-- to superscript text use <sup> tags --> --> --> <p>All information on this site is <strong>&copy;</strong> Deitel <strong>&amp;</strong> Associates, Inc. 2002.</p>

    Outline
    contact2.html (2 of 2)

    <!-- these tags are nested inside other tags --> <p><del>You may download 3.14 x 10<sup>2</sup> characters worth of information from this site.</del> Only <sub>one</sub> download per hour is permitted.</p>

    2004 Prentice Hall, Inc. All rights reserved.

    2004 Prentice Hall, Inc. All rights reserved.

    4.9 Unordered 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

    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.10: links2.html -->

    Outline
    links2.html (1 of 2)

    <!-- Unordered list containing hyperlinks --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Links</title> </head> <body> <h1>Here are my favorite sites</h1> <p><strong>Click on a name to go to that page.</strong></p> <!-- create an unordered list --> <ul> <!-- add four list items --> <li><a href = "http://www.deitel.com">Deitel</a></li> <li><a href = "http://www.w3.org">W3C</a></li>

    2004 Prentice Hall, Inc. All rights reserved.

    26 27 28 29 30 31 32 </html> <li><a href = "http://www.cnn.com">CNN</a></li> </ul> </body> <li><a href = "http://www.yahoo.com">Yahoo!</a></li>

    Outline
    links2.html (2 of 2)

    2004 Prentice Hall, Inc. All rights reserved.

    4.10 Nested and Ordered Lists Represent hierarchical relationships Ordered lists (ol)
    Creates a list in which each item begins with a number

    2004 Prentice Hall, Inc. All rights reserved.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 4.11: list.html -->

    Outline
    list.html (1 of 3)

    <!-- Advanced Lists: nested and ordered --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Lists</title> </head> <body> <h1>The Best Features of the Internet</h1> <!-- create an unordered list --> <ul> <li>You can meet new people from countries around the world.</li> <li> You have access to new media as it becomes public:

    2004 Prentice Hall, Inc. All rights reserved.

    24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

    <!-- this starts a nested list, which uses a --> <!-- modified bullet. The list ends when you --> <!-- close the <ul> tag. <ul> <li>New games</li> <li> New applications <!-- nested ordered list --> <ol> <li>For business</li> <li>For pleasure</li> </ol> </li> <li>Around the clock news</li> <li>Search engines</li> <li>Shopping</li> <li> Programming <!-- another nested ordered list --> <ol> <li>XML</li> <li>Java</li> -->

    Outline
    list.html (2 of 3)

    2004 Prentice Hall, Inc. All rights reserved.

    49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 </body> 66 </html> </ul> </li>

    <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol>

    Outline
    list.html (3 of 3)

    </ul> <!-- ends the nested list of line 27 --> </li> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> <!-- ends the unordered list of line 18 -->

    2004 Prentice Hall, Inc. All rights reserved.

    2004 Prentice Hall, Inc. All rights reserved.

    4.11 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

    2004 Prentice Hall, Inc. All rights reserved.

    You might also like