Scribd Logo
Importer

Bienvenue sur Scribd !

  • Week 3

    Transféré par

    Shahad Tallab
    24 vues30 pages
    XHTML is the newest version of html eXtensible HyperText Markup Language. Xhtml uses: the elements and attributes of html the syntax of XML (extensible markup language) XHTML 1. Transitional This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts.

    Description originale:

    Titre original

    week3

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    XHTML is the newest version of html eXtensible HyperText Markup Language. Xhtml uses: the elements and attributes of html the syntax of XML (extensible markup language) XHTML 1. Transitional This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    24 vues30 pages

    Week 3

    Transféré par

    Shahad Tallab
    XHTML is the newest version of html eXtensible HyperText Markup Language. Xhtml uses: the elements and attributes of html the syntax of XML (extensible markup language) XHTML 1. Transitional This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 30

    Introduction to XHTML

    Chapter 2

    Learning Outcomes
    In this chapter, you will learn about:
    XHTML syntax, tags, and document type definitions The anatomy of a web page Formatting the body of a web page Formatting the text on a web page Special Characters Connecting Web pages using hyperlinks

    What is HTML?
    HTML: The set of markup symbols or codes placed in a file intended for display on a Web browser page. The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages.

    What is XHTML?
    The newest version of HTML eXtensible HyperText Markup Language. XHTML uses:
    the elements and attributes of HTML the syntax of XML (eXtensible Markup Language).

    XML Syntax
    An XML document must be well-formed.
    Use lowercase Use opening and closing tags

    <body> <hr />

    </body>

    Close stand-alone tag with special syntax

    First Web page

    Document Type Definition (DTD)


    W3C Recommendation: Use a Document Type Definition to identify the type of markup language used in a web page.
    XHTML 1.0 Transitional This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. XHTML 1.0 Strict Requires exclusive use of Cascading Style Sheets. XHTML 1.0 Frameset Required for pages using XHTML frames. We will not use this.

    Head & Body Sections


    Head Section
    Contains information that describes the Web page document
    <head>

    head section info goes here


    </head>

    Body Section
    Contains text and elements that display in the Web page document
    <body>

    body section info goes here


    </body>

    Anatomy of an XHTML Element


    Opening tag

    <h1>content</h1>
    Closing Tag The closing tag always needs a slash before the tag name.

    XHTML Attributes
    Attributes always go inside the opening tag.

    <h1 id=blah class=big> content</h1>


    Tags can have multiple attributes, each separated by a space.

    XHTML Elements
    Top-level elements: html, head, and body Head elements: title, meta and script Body elements:
    Block-Level elements : take the tagged text and separate it from the rest of the document flow Inline elements : they can be nested almost anywhere within a block-level

    XHTML <title> and <meta /> tags


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>My First Web Page</title> <meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more."> <meta name="keywords" content="eurosport,sports, sport,sports news,live scores,football,cricket,f1, golf,rugby,tennis,uk,yahoo"> </head> <body>

    .... Body info goes here


    </body> </html>

    The Heading Element


    <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6>

    XHTML <p> tag


    Paragraph element <p> paragraph goes here </p>
    Groups sentences and sections of text together. Configures a blank line above and below the paragraph

    XHTML <br /> tag


    Line Break element
    Stand-alone tag
    text goes here <br /> This starts on a new line.

    Causes the next element or text to display on a new line

    XHTML Special Characters


    Display special characters such as quotes, copyright symbol, etc.

    Character < > &

    Code &copy; &lt; &gt; &amp; &nbsp;

    XHTML List Basics


    Definition List Ordered List Unordered List

    XHTML Definition List


    Useful to display a list of terms and definitions or a list of FAQ and answers
    <dl> tag
    Contains the definition list

    <dt> tag
    Contains a defined term Configures a line break above and below the text

    <dd> tag
    Contains a data definition or description Indents the text

    XHTML Ordered List


    Conveys information in an ordered fashion <ol>
    Contains the ordered list type attribute determines numbering scheme of list, default is numerals

    <li>
    Contains an item in the list

    XHTML Ordered List Example


    <ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol>

    XHTML Unordered List Example


    <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul>

    Checkpoint

    Describe the features of a heading tag and how it configures the text.

    XHTML <a> tag


    The anchor element
    Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page.

    <a href="contact.html">Contact Us</a> href Attribute


    Indicates the file name or URL Web page document, photo, pdf, etc.

    23

    Absolute link
    Link to other Web sites

    XHTML <a> tag

    <a href="http://yahoo.com">Yahoo</a>

    Relative link
    Link to pages on your own site <a href="index.htm">Home</a>

    24

    More on Relative Linking


    Relative links from the home page: index.html

    <a href="contact.html">Contact</a> <a href="products/collars.html">Collars</a> <a href="../index.html">Home</a> <a href="../services/bathing.html">Dog Bathing</a>


    25

    Opening a Link in a New Browser Window


    The target attribute on the anchor element opens a link in a new browser window or new browser tab.

    <a href="http://yahoo.com" target="_blank">Yahoo!</a>

    26

    XHTML Linking to Fragment Identifiers


    A link to a part of a Web page Also called named fragments, fragment ids Two components:
    1. The element that identifies the named fragment of a Web page. This requires the id attribute.

    <div id=top> .. </div>


    2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute.

    <a href=#top>Back to Top</a>

    Note the use of the # in the anchor tag!


    27

    Checkpoint

    Describe when to use an absolute link. Is the http protocol used in the href value? Describe when to use a relative link. Is the http protocol used in the href value?

    28

    Writing Valid XHTML


    Check your code for syntax errors
    Benefit: Valid code more consistent browser display

    W3C XHTML Validation Tool


    http://validator.w3.org

    Summary
    This chapter provided an introduction to XHTML. It began with an introduction to the HTML, discussed the transition to XHTML, continued with the anatomy of a web page, introduced inline and block-level formatting, and demonstrated the XHTML techniques used to create hyperlinks. You will use these skills over and over again as you create Web pages.

    Vous aimerez peut-être aussi