------------------------------------------------------------------------------
MC logo
Starting XHTML
[^] CSc 302 Outlines
------------------------------------------------------------------------------
<<Using The Server Linking>>
  1. SGML, HTML, XHTML.
    1. SGML: <us>Brackets R</us>
    2. HTML: Simplified.
      Most pages are HTML. (Including this one.)
    3. XHTML: New and improved.
      1. Stricter rules.
      2. Easier for clients to parse.
        Computers like strict rules.
      3. More control for the designer.
      4. More about this later
  2. Where do you get this whatever-ML stuff?
    1. Special WYSIWYG editors: Front page.
    2. Tag-based editors: HomeSite.
    3. Export: Most any word processes.
    4. Create it in a text editor. This will be our approach.
      1. More control.
      2. Helps you understand how things work.
  3. XHTML
    1. Balanced tags: <h1>Major Heading</h1>
      1. Open and closing tags with the same name.
      2. Closing tag has /.
      3. Lower case.
      4. Nesting: <h1>Partly <i>italics</i></h1>
    2. Stand-alone tags: <hr />
      1. No closing tag; use the slash at the end.
      2. The space is required.
    3. Attributes: <p align="center">Hi there</p>
      1. Attributes control the interpretation of the tag.
      2. Name and value, value in quotes.
      3. Even if it's a number, XTML requires it be in quotes, always.
    4. Document structure:
      <?xml version="1.0" encoding="UTF-8"?>
      <!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" xml:lang="en" lang="en">
      <head>
      <title>XTML Document Structure</title>
      </head>
      <body>
      Document contents.
      </body>
      </html>
      1. Mostly boiler-plate.
      2. <?xml ... >: XHTML is a variety of XML.
      3. <!DOCTYPE ...>: Declares what definition the page follows.
        1. ... html ...: Doc enclosed in <html>...</html>
        2. ...PUBLIC ...EN: The name of the document.
        3. http:...dtd: Where to find it.
      4. xmlns attribute: XML Namespace.
        1. Namespaces are collections of names.
        2. Used to manage tag definitions.
        3. Don't worry about it.
      5. xml:lang, lang: Language in XML and HTML.
      6. <head> ... </head>: Descriptive and control.
      7. <body> ... </body>: Contents of the document.
    5. Elements used in <head>
      1. <title>: In the stripe.
      2. <meta>: Describe the document.
        1. Attributes simply say what sort of information is contained in the document. May be used by search engines.
        2. Also used for some random control functions.
        3. Not displayed.
          <meta name="keywords" content="rocks, stones, pebbles">
          <meta name="generator" content="FredGen 4.3">
          <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
      3. <script>, <link>, <base>, <script>: Later chapters.
    6. Comments: <!-- Notes to yourself -->
    7. Block Elements. Control the arrangement of large blocks, such as paragraphs.
      1. <p>, <p align="center">, and left and right.
      2. <h1> through <h6>
      3. <div>: Used with style sheets and alignment.
        <div align="center" style="color: blue">
        <p>First paragraph.</p>
        <p>Another paragraph</p>
        </div>
      4. <blockquote>
      5. <pre>: Preformatted text.
      6. <br />: Line break.
      7. <hr />: Horizontal rule. Attributes: size, width, align.
    8. Inline Elements. Generally control what text looks like.
      1. Logical styles. Say what the text is used for.
        1. <abbr> Abbreviation.
        2. <acronym> Acronym (but you guessed that already).
        3. <cite> Citation.
        4. <code> Sample computer code. Usually set in monospace, often courier
        5. <em> Emphasis.
        6. <strong> More emphasis.
        7. <samp> Sample text. Often works much like <code>.
        8. <var> Variable name. Programming examples.
      2. Physical styles.
        1. <big> .
        2. <b> Bold.
        3. <i> Italic..
        4. <u> Underline
        5. <small>
        6. <strike> Strikeout
        7. <sub> Subscript.
        8. <sup> Superscript.
    9. Lists.
      1. Form, except for <dl>: <type> . . . <li> . . . </type>
      2. <ul>: Unordered (bullet) list.
        Option type: disc, square, circle.
      3. <ol>: Order (numbered) list.
        1. Option type: 1, I, i, a, A.
        2. Option start: Starting number.
      4. Lists may be nested. Default ordered list symbol may change.
      5. Definition lists.
        1. <dl> . . . <dt> . . . </dt> . . . <dd> . . . </dd> . . . </dl>
  4. Some differences between XHTML and HTML.
    1. XHTML tags must be lower case; HTML uses any case.
    2. Unclosed XHTML tags are noted: <hr />
    3. HTML allows some closing tags to be implied; In XHTML, you have to give them.
    4. Attribute values must always be quoted.
    5. Attributes must be key=“value”. HTML allows just the key in some cases.
<<Using The Server Linking>>