HTML, CSS, and DOM

Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)

Erik WildeUC Berkeley School of Information, UC Berkeley School of Information
2010-02-01

[http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde: HTML, CSS, and DOM

Contents

2Abstract
1 Hypertext Markup Language (HTML)
- 4HTML Definition
- 5HTML Validation
- 6HTML and WYSIWYG
- 7Web Browsers
- 8Web Browser History
2 Cascading Style Sheets (CSS)
- 10CSS in Action
- 11HTML and CSS
- 12Formatting Model
- 13CSS Properties
- 14CSS Selectors
- 15Cascading
- 16Inheritance
3 Document Object Model (DOM)
- 18From HTML to DOM
- 19Browser Handling of HTML
- 20Document
- 21Object
- 22Model
- 23Markup to Trees
- 24DOM History

Erik Wilde: HTML, CSS, and DOM

(2) Abstract

The Hypertext Markup Language (HTML) is the most important content type on the Web. Modern browsers are expected to support HTML, CSS for styling the content of a HTML page, and scripting so that server-supplied scripting code can run in the browser, update the HTML and/or CSS, and interact with the user or the browser. This lecture presents an overview of how the building blocks of HTML, CSS, DOM, and scripting fit together to provide Web applications with a standardized and robust platform.

Hypertext Markup Language (HTML)

Outline (Hypertext Markup Language (HTML))

Hypertext Markup Language (HTML) [5]
Cascading Style Sheets (CSS) [7]
Document Object Model (DOM) [7]

Hypertext Markup Language (HTML) Erik Wilde: HTML, CSS, and DOM

(4) HTML Definition

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

html4-strict.dtd (line 513-517)

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

html4-strict.dtd (line 521-524)

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

html4-strict.dtd (line 258)

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

html4-strict.dtd (line 254-256)

Hypertext Markup Language (HTML) Erik Wilde: HTML, CSS, and DOM

(5) HTML Validation

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]

Hypertext Markup Language (HTML) Erik Wilde: HTML, CSS, and DOM

(6) HTML and WYSIWYG

Thinking of HTML as a layout-description language is wrong
HTML has been designed as a structure-description language
- structured contents can be reformatted and reflowed
HTML rendering depends on a many client properties
- screen/window size, resolution, and color depth
- different available fonts
- fonts with the same family name but different metrics
- different hyphenation algorithms
- hyphenation setting defaults
- hyphenation dictionaries
- different size spaces
- different line-breaking algorithms
- different widow/orphan/keeptogether rules

Hypertext Markup Language (HTML) Erik Wilde: HTML, CSS, and DOM

(7) Web Browsers

Web Browser Usage

██ Internet Explorer (59.21%)

██ Mozilla Firefox (28.29%)

██ Chrome (5.02%)

██ Safari (4.54%)

██ Opera (1.68%)

██ Other (1.26%)

Hypertext Markup Language (HTML) Erik Wilde: HTML, CSS, and DOM

(8) Web Browser History

Web Browser History

Cascading Style Sheets (CSS)

Outline (Cascading Style Sheets (CSS))

Hypertext Markup Language (HTML) [5]
Cascading Style Sheets (CSS) [7]
Document Object Model (DOM) [7]

Cascading Style Sheets (CSS) Erik Wilde: HTML, CSS, and DOM

(10) CSS in Action

<body id="css-zen-garden">
<div id="container">
 <div id="intro">
  <div id="pageHeader">
   <h1><span>css Zen Garden</span></h1>
   <h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
  </div>
  <div id="quickSummary">
   <p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
   <p class="p2"><span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
  </div>
  <div id="preamble">
   <h3><span>The Road to Enlightenment</span></h3>
   <p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p>

zengarden.html (line 17-30)

Cascading Style Sheets (CSS) Erik Wilde: HTML, CSS, and DOM

(11) HTML and CSS

CSS specifies how HTML [Hypertext Markup Language (HTML) (1)] elements are formatted
1. formatting can be attached to every element (redundant inside document)
2. formatting can be included in document (redundant across documents)
3. separate CSS files describe the formatting (best reuse)
Any combination of these methods is possible

 <head>
  <title>CSS Usage</title>
  <link href="http://dret.net/dretnet.css" rel="stylesheet" type="text/css"/>
  <style type="text/css"> li { color : red } </style>
 </head>
 <body>
  <p>some text in a paragraph..</p>
  <ol>
   <li>an ordered list's first item</li>
   <li style=" text-decoration : underline ">and the second one</li>
  </ol>

css-usage.html (line 3-13)

Cascading Style Sheets (CSS) Erik Wilde: HTML, CSS, and DOM

(12) Formatting Model

CSS Properties [CSS Properties (1)] are central to the CSS formatting model
1. create a document tree (the DOM [Document Object Model (DOM) (1)] tree)
2. identify the media type (e.g., screen or print)
3. retrieve all stylesheets required for the media type
4. assign values to all properties in the document tree
5. generate a formatting structure (a different tree)
6. render the formatting structure on the target medium
Properties control the rendering of elements
Styling in CSS means assigning values to properties

Cascading Style Sheets (CSS) Erik Wilde: HTML, CSS, and DOM

(13) CSS Properties

Properties define how elements are formatted
- they define a specific facet of formatting
- they may have interdependencies with other properties
- they can be assigned explicitly
- they may be defined through Cascading [Cascading (1)] or Inheritance [Inheritance (1)]
A property has a name and is used in a name/value-pair
- the name identifies the property that is being set
- the value space depends on the property
- some properties accept complex values
- sets of values: p { font : bold italic large Palatino }
- sequences of values: p { font-family : "Segoe UI", verdana, helvetica, arial, sans-serif }
Property specifications can be grouped
- .thinboxed { border-width : 1px ; padding : 10px ; margin : 5px }

Cascading Style Sheets (CSS) Erik Wilde: HTML, CSS, and DOM

(14) CSS Selectors

CSS Properties [CSS Properties (1)] are applied to elements
- properties can be directly applied in an element's style attribute
- in all other cases, selectors are used to select the styled elements
Selectors are good for reusable CSS code
- identifying the most appropriate formatting classes is not easy
- planning for CSS for a larger site is a difficult task
CSS project management should separate selectors and properties
1. selectors are about which things should be identified and styled
2. properties are about how this styling is implemented

Cascading Style Sheets (CSS) Erik Wilde: HTML, CSS, and DOM

(15) Cascading

Stylesheets may have three different origins
1. page authors associate CSS with their pages
2. users configure their browser to use some CSS
3. user agents (browsers) have built-in CSS how to style content
Conflicts must be resolved using the following algorithm
1. find all matching declarations (matching media type and selector)
2. sort according to importance (browser < user < author)
3. same importance must be sorted by specificity (more specific selectors)
4. finally, sort by order in which they were specified
!important rules can influence the algorithm
- they are interpreted in step 2 (sorting by importance)
- browser < user < author < author(important) < user(important)

Cascading Style Sheets (CSS) Erik Wilde: HTML, CSS, and DOM

(16) Inheritance

Properties often are inherited by children
- setting a table's color sets the color for all contents
- without inheritance, CSS stylesheets would have to be very large
Inheritance is mostly intuitive
- in reality, it is a bit more complicated
1. specified value: what the property specified (Cascading [Cascading (1)], inheritance, or initial)
2. computed value: computed based on the environment (e.g., ex → px)
3. used value: converted to an absolute value (e.g., percentage widths)
4. actual value: specific for the environment (e.g., borders with pixel fractions)

Document Object Model (DOM)

Outline (Document Object Model (DOM))

Hypertext Markup Language (HTML) [5]
Cascading Style Sheets (CSS) [7]
Document Object Model (DOM) [7]

Document Object Model (DOM) Erik Wilde: HTML, CSS, and DOM

(18) From HTML to DOM

HTML [Hypertext Markup Language (HTML) (1)] is a representation for hypermedia documents
- a representation is required to store and transmit the document
- HTML uses markup for representing the document structure
Browsers must render HTML documents (i.e., apply CSS and execute JavaScript)
1. GET HTML from server and receive as text/html document
2. parse document and deal with any errors by fixing them
3. interpret document as if it had been error-free
4. GET all additional resources (CSS, images, JavaScript, …)
5. build internal model (DOM) based on error-free interpretation
6. apply CSS rules to determine styling of document (e.g., margins and font sizes)
7. render into visual structure
8. start executing JavaScript code
9. listen for events (keyboard, mouse, timer) and execute code
10. discard everything and start over when user navigates to a different page

Document Object Model (DOM) Erik Wilde: HTML, CSS, and DOM

(19) Browser Handling of HTML

Browser Handling of HTML

Document Object Model (DOM) Erik Wilde: HTML, CSS, and DOM

(20) Document

The document (HTML) is the interface language for Web applications
Most programming environments have visual interface models
- almost everything has moved to window-oriented interfaces
- Windows, MacOS, and Linux provide similar visual metaphors
Web applications must use HTML as their model for the interface
- HTML forms [../web-fall09/forms] are a simple way to build an interface
- forms can be extended with client-side helpers (validation, repeating entries)

Document Object Model (DOM) Erik Wilde: HTML, CSS, and DOM

(21) Object

Documents are static, programming is dynamic
- documents and code must be connected
- objects are a common abstraction in programming languages
Objects usually have a type and methods
- types for HTML-based objects are based on HTML's elements
- methods define the allowed to interact with objects
- interactions can be read-only or they can change the document structure

    for (var ti=0;ti<document.links.length;ti++) {
        var lnk = document.links[ti];
        if ( lnk.title ) {
            lnk.setAttribute("nicetitle",lnk.title);
            lnk.removeAttribute("title");
            addEvent(lnk,"mouseover",showNiceTitle);
            addEvent(lnk,"mouseout",hideNiceTitle);
            addEvent(lnk,"focus",showNiceTitle);
            addEvent(lnk,"blur",hideNiceTitle);
        }
    }

nicetitle.js (line 22-32)

Document Object Model (DOM) Erik Wilde: HTML, CSS, and DOM

(22) Model

Models are idealized/abstract views of something
Model interfaces allow to expose that idealized/abstract view
DOM introduced a common way of how browsers deal with HTML
- without a DOM, there can be no interoperable scripting
Abstractions are also limitations
- some vendors add/support extensions to the basic DOM model
- any code based on these extensions is not interoperable

Document Object Model (DOM) Erik Wilde: HTML, CSS, and DOM

(23) Markup to Trees

Browsers build a DOM tree from the (fixed) markup
- scripting code never works on the markup text, it works on the tree
DOM trees are an abstraction of the markup
- trees provide convenient navigation facilities
- abstractions provide an insulation against irrelevant markup details
DOM is available in a large number of programming languages
- JavaScript is the language supported in Web browsers
- DOM is also available for Java, C, C++, Python, Perl, C#, Ruby, …

Document Object Model (DOM) Erik Wilde: HTML, CSS, and DOM

(24) DOM History

DOM0 was invented by Netscape (backing LiveScript/JavaScript)
DOM1 was the first DOM version produced by the W3C
DOM2 is the currently available stable version of DOM
- major changes to be compliant with XML and the XML Infoset
DOM3 is highly modularized and still under development
- more XML technologies such as the ability to use XPath
HTML5 extends the landscape of DOM
- HTML5 itself adds new capabilities to DOM
- a variety of additional specs add even more functionality

2010-02-01 Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)