 |  |
| | |
HTML (Hyper Text Markup Language) is used to describe the structure and the content for each webpage that is displayed in your webbrowser. As described in the previous chapters, a brasato application like OLAT generates on the server a hierarchy of components. Each component generates a view using either a renderer or a velocity template. Each renderer or template will generate HTML code that combined alltogether form a proper HTML page. The compiled page is then sent to the client for displaying.
In an ideal world, the HTML code does not say anything about how the content should be represented on the Screen, it's only about structure and content. The formatting and layouting is done by CSS (Cascading Style Sheet) rules that are applied to the HTML structure. This is done on the browser and not on the server.
The coupling of HTML and CSS is very loose: first, the HTML document tells the browser which CSS files should be considered for this document, second, the browser analyses the HTML structure and the CSS rules and applies each matching rule from the CSS file to the elements from the HTML document.
A CSS rule is defined by so called selectors. There are different type of selectors with different precedence. When it comes to rendering, the browser looks at all the rules in the CSS files and builds up a cascade of rules that can be applied to each element. As a rule of thumb one can say that the more specific a CSS rule is, the higher is the relevance of the rule in the CSS cascade.
To understand how the browser layout is created, use the Firefox extension Firebug. Firebug offers great debugging tools and allows you to inspect and even real-time modify the CSS rules that apply to a HTML element.
Viewing a HTML page in your browser involves the following steps:
Parsing of the HTML document and building a browser internal representation, the so called DOM (Document Object Model)
Parsing of the CSS document and building a browser internal representation
Detection of matching CSS rules for each element in the DOM
Detection of conflicting CSS rules that match for the same element and solving the conflicts by using the CSS cascade rules
Rendering of the elements using the resolved CSS rules
The problem a web developer faces is the fact that each of these steps can be implemented slightly different in the various browsers. This is due to bugs (faulty implementation) and different interpretation of the specification (weak specification or engineers that can't read a spec).
Thus, it is not enough to read the HTML and CSS specs, writing web applications involves a lot of expertise, permanent research and testing, testing, testing.
If you want to fully understand or modify the brasato layout or build a custom template you must have HTML and CSS expertise, there is no way around that. To proceed you should first bring yourself up to date with these technologies. There are many, many free resources around in the web that you can use.
The following topics are crucial and must be understood:
Different HTML versions, difference between HTML and XHTML
Various CSS selectors
The CSS cascade (precedence of selectors and the combinations)
The CSS box model including the different interpretation between Internet Explorer and Firefox (Box model bug)
Box display types (inline, block, list-item, none etc) and default values for HTML elements
Element positioning (static, relative, absolute etc)
Concept of a floating element and how the clearing mechanism works
Browser render modes (Standards mode, Quirks mode)
Most relevant browser bugs and how to deal with them
| |  | |
 |