-//W3C//DTD HTML 4.01 Transitional//EN">

Header Text

Paragraph Text

* Given the DOM tree, the browser produces a render tree: a tree of visual elements in the order that they are painted. For the purpose of this course, think of these visual elements as rectangles (one for each HTML block) that the browser will paint. As mentioned before, the rules used by the browser for displaying the visual element (e.g. the background color of the rectangle) are provided by the presentation style associated with that element. The standard practice is to not include the presentation style information directly in the HTML tags (as was done above), but instead to describe the presentation style for each HTML tag used in the web page in a separate file, called the stylesheet. This reduces the HTML page size, and makes it easier to specify or change the style for an entire website (all web pages will refer to the same style sheet). The stylesheet that defines the style for every element of the DOM tree is given by the Cascading Style Sheet (CSS) for that document. For example, as defined by the W3C box model (http://www.w3.org/TR/CSS2/box.html), each rectangle corresponding to certain HTML tags (known as block tags) will be surrounded by additional rectangles (namely padding, border, and margin). In addition, the style can contain information like fonts used, color of the text, style of the text, and so on. The term “cascading” in CSS refers to the order in which presentation rules are applied. The presentation rule applied to an element of the render tree is automatically applied to its children in the render tree, unless the child nodes have different presentation rules specified in the CSS. All browsers will have a default stylesheet that defines the presentation style for DOM elements not included in a particular web page’s stylesheet. CSS will be useful for us later in this tutorial, when we discuss the new graphics-specific features of CSS. * After the render tree is generated, most browsers have a separate “layout” process that assigns a position (X and Y location within the browser window) and width and height to each element of the render tree. Think of this as a process of placing rectangles at certain locations within the browser window and assigning a width and height to each rectangles. After the layout process, the individual elements of the render tree are painted in the browser window in the order specified by the render tree. Javascript Javascript is script language used to programmatically (i.e. dynamically) add or change content for a web page or change the properties of existing content. For example, if you wanted to change the text color contained in this tag:

Sample Text

when the user’s mouse pointer hovered over the text, you could write a “onmouseover” handler like this:

Sample Text

which will change the “Sample Text” color from red to blue on mouse over. Through Javascript, we can access the DOM for the web page by calling functions like “document.getElementById”. Over the years, the scope of Javascript has grown significantly. Instead of being a language only for making small changes to a mostly static web page, it is now used for performing significant calculations or building large web frameworks. This growth in scope is due, in large part, to the huge improvement in the performance of the Javascript interpreter in web browsers (a performance improvement of roughly 25% per year). The improvement in the Javascript interpreter performance is one of the things that enables us to write complex graphics applications for the web.