(5) Checking for Correctness

• HTML's structure is defined by a Document Type Definition (DTD)
  • formally speaking, a DTD defines the grammar of the HTML language
  • (and if you really want to know, SGML defines the syntax)
  • colloquially speaking, a DTD defines how to combine elements and attributes

<!-- Unordered Lists (UL) bullet styles -->
<!ELEMENT UL - - (LI)+                 -- unordered list -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LI - O (%flow;)*             -- list item -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ENTITY % flow "%block; | %inline;">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

(6) Tool-Based Validation

• Testing HTML makes sure that it is well-defined
  • any errors have to be corrected by the browser
  • the results of browser-side corrections are hard to predict
• HTML editors allow validation within the tool
  • in theory, using the public DTD [http://www.w3.org/TR/html4/loose.dtd], in practice, using a local copy [src/html4-loose.dtd]
• In theory, HTML editors should always produce valid HTML
  • things today are not as bad as they used to be
  • creating valid HTML can be a challenge for complex Web pages

(7) Web-Based Validation

• Tool-Based Validation [Tool-Based Validation (1)] requires locally installed tools
  • maybe hard to install and hard to maintain across computers
  • for power users, locally installed tools are hard to beat
• Web-based tools allow validation from anywhere
• W3C [http://www.w3.org]'s markup validation service [http://validator.w3.org/] supports three modes:
  1. validation by URI (pointing at a random Web page)
  2. validation by file upload (allows validation of non-Web files)
  3. validation by copy/paste (lightweight mode for small experiments)
• Markup validation is only one facet of checking Web content
  • checking CSS code for validity [http://jigsaw.w3.org/css-validator/]
  • checking Web pages for mobile content (i.e., simpler HTML) [http://validator.w3.org/mobile/]
  • checking Web pages for broken links [http://validator.w3.org/checklink]

(8) Firebug & Web Inspector

• Browser-based inspection (much better than view source)
• Learning Web design by looking at Web design
  • Firefox's View → Page Source provides access to a page's source
  • Firefox's Tools → Page Info provides access to all ancillary files
• Understanding how complex HTML works is hard
  • looking at the source requires brain-based rendering
  • looking at a rendered document makes it hard to see the source
  • Firebug provides a convenient inspection feature for Web pages
• Inspection allows both directions of understanding HTML
  • inspecting the rendered page and looking at the source part
  • inspecting the source and seeing how it is being rendered
• Firebug also displays the associated CSS [Cascading Style Sheets (CSS)] code
• Safari and Chrome offer a similar tool called Web Inspector [http://trac.webkit.org/wiki/WebInspector]

(10) Text

• h1-h6 are different levels of headings [http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5]
• p contains paragraph text [http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.1]
  • whitespace and line wrapping are ignored
  • paragraphs are set as boxes containing a number of lines
• Text inside paragraphs can use additional markup (phrase markup [http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1])
  • em for emphasized text
  • strong for text with a strong emphasis
  • sub for _{subscript text}
  • sup for ^{superscript text}
  • q for quoted text (try nesting quotes)
  • code for code examples
• rendering of all these elements is built into the browser
  • more sophisticated issues probably are more browser-dependent [http://dret.typepad.com/dretblog/2008/04/internationaliz.html]

(11) More Advanced Text

• Quotations can be explicitly marked up as such
  • blockquote for block-level quotations
  • q for inline quotations (part of a block)
  • cite provides support for pointing to the source
• Preformatted text allows text formatting in the HTML source
  • pre leaves whitespace intact and usually uses monospaced fonts
  • word wrapping may be turned off by default

    <br/>
    <pre>This is some text that will not be wrapped because of pre's default behavior,
  at least in most browsers.</pre>
    <br/>
    <pre class="wrap">This is some text that will be wrapped because of pre's overriden behavior,
  at least in most browsers.</pre>
    <br/>

  • pre.html (line 11-17)

(12) Lists

• HTML supports three kinds of lists
  • ul for unordered lists [http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2] containing li
  • ol for ordered lists [http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2] containing li
  • dl for definition lists [http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.3] containing dt/dd

  <dl>
   <dt>Unordered Lists</dt>
   <dd>
    <ul>
     <li>Unordered lists contain just lists of items</li>
     <li>Itemization symbols are chosen by the browser</li>
    </ul>
   </dd>
   <dt>Ordered Lists</dt>
   <dd>
    <ol>
     <li>Ordered lists contain ordered lists of items</li>
     <li>The numbering scheme is chosen by the browser
      <ol>
       <li>Lists may be nested as deeply as required</li>
      </ol>
     </li>
    </ol>
   </dd>
  </dl>

(13) Tables

• Tables are the most complex visual structure in HTML
  • table [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1] represents a table as a sequence of rows
  • tr [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.5] represents a table row as a sequence of cells
  • td [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6] represents a table cell containing table data
  • th [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6] is a special cell containing header data

  <table>
   <tr>
    <th>Date</th>
    <th>Topic</th>
   </tr>
   <tr>
    <td>2009-01-28</td>
    <td><a href="../html-basic">HTML Basics</a></td>
   </tr>
   <tr>
    <td>2009-02-02</td>
    <td><a href="../html-advanced">Advanced HTML</a></td>
   </tr>
  </table>

(14) Merging Table Cells

(15) Merging Rows

• Table cells can span more than table row
  • rowspan specifies how many rows a cell is spanning
  • subsequent table rows must leave that space empty

  <table>
   <tr>
    <th>Date</th>
    <th>Topic</th>
   </tr>
   <tr>
    <td>2009-03-23</td>
    <td rowspan="2">Spring<br>Break</td>
   </tr>
   <tr>
    <td>2009-03-25</td>
   </tr>
  </table>

(16) Merging Columns

• Table cells can span more than table column
  • colspan specifies how many columns a cell is spanning
  • following cells in the same row must be left empty

  <table>
   <tr>
    <th>Date</th>
    <th colspan="2">Resources</th>
   </tr>
   <tr>
    <td>2009-01-28</td>
    <td><a href="../html-basic">HTML Basics</a></td>
    <td><a href="../2009-01-28-html-basic.pdf">PDF</a></td>
   </tr>
   <tr>
    <td>2009-02-02</td>
    <td><a href="../html-advanced">Advanced HTML</a></td>
    <td><a href="../2009-02-02-html-advanced.pdf">PDF</a></td>
   </tr>

(17) Images

• The Web is an open hypermedia system
  • hyper refers to the term hypertext for linked content
  • media refers to the fact that multiple media types are supported
• For a long time, the Web only supported text and images
  • images can be used in a variety of formats (GIF, JPEG, PNG)
  • audio and video are possible today, but not part of the Web
• Images are not part of a Web page, they are included by markup
  • img [http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2] is an empty element for including images
  • src is a URI pointing to the image (often a relative URI)

<img src="../img/portrait.png" alt="Portrait">

(18) Image Details

• Images must use a format supported by the browser
  • GIF, JPEG, and PNG are pretty safe choices
  • HTTP allows the browser to understand the image format
  • limited browsers might have size/complexity restrictions
• Image information increases accessibility of a page
  • alt contains a short description of the image
  • for icons it is essential to provide this information
• Image dimensions and image rendering
  • width/height specify the dimensions of the image
  • allows the browser to start rendering the page before the images are received
  • will be used to resize the image if the real image size is different
  • browser-based scaling of images often is not a good idea [http://offog.org/articles/image-scaling/]

(19) Links

• Links are the most important feature of the Web
  • conceptually, the Web is one large hypermedia document
  • links are based on Web identifiers, the Uniform Resource Identifier (URI)
• a is a link anchor and links to a URI (the link target)

  <a href="http://www.berkeley.edu" title="UC Berkeley">UCB</a>

• URIs can have various forms
  • http: points to resources available on Web servers
  • https: is the same but uses encrypted connections
  • URIs can use a variety of other URI Schemes [Web Foundations (URIs & HTTP); URI Schemes (1)]
  • URIs can be relative (in the same was as file names)
  • relative URIs are evaluated relative to the URI of their occurrence
  • relative URIs can use path segments such as / and ..

(21) HTML Matters

• HTML is not just getting text displayed
• Good HTML allows better browsing
• First represent as much as possible in HTML
• Then add what is missing as CSS [Cascading Style Sheets (CSS)] and/or microformats
• Graceful degradation is important