Burton Rosenberg
Feburary 2012
This is a page of HTML, annotated to explain concepts, and giving a number of example HTML tags, CSS styles, and javascript programs, so as to be a useful starting point for understanding DHTML. To see the annotations, either "show source" on your browser, or use this link to view the source. There is a lot of comments that you only see in the source.
List structures are described by three tags. The "unordered list" uses the ul tag. Each element in the list is introduced by an li tag. Lists can be nested. The browser will layout the list, according to built-in rules, modified by the style sheets.
Tags such as P, UL and H4 are block. They are typeset by separating from the flow of the text. Tags such as EM and I are in-line. The typesetting collects in-line elements into lines.
The generic block element is a DIV element. The generic in-line element is a SPAN element.
Casading Style Sheets, CSS, has a separate definition from HTML. It sets the style to be applied to the HTML template. It sets colors, fonts, page width, typesetting style, and so on. CSS can be embedded in the page, or given by a URL in the src attribute of a link tag in the header of and HTML page, or it can be clipped right on an HTML element using the style attribute of the element.
A CSS is a list of rules each with a selector that determines which element will recieve the rule, and a sequence of declarations where are the style elements. Each declaration is a property-value pair. The cascade is about which rule applies, when there are several rules that can apply. The several sources of rules cascade in order to overly new rules over old rules, and more specific rules over more general rules.
If the rules are applied to the tag, then the selection is implicitly to the element. Here is an example.
Rules can be applied through selectors on rules that are either specified in the header of the page, or brought in through an external style sheet. In the cascade, external style sheets are at the bottom on the cascade and have the least priority. Selectors can indicate a tag, an id or a class. To apply a selector to an id, the tag has attribute id with the selector's name. The selector appears in the CSS with a # before it. To apply a selector to a class, the tag has attribute class with th selector's name as value. The selector appears in the CSS with a . before it.
Jump to the section About anchors and hyperlinks.
Jump to my home page.
Invoke a short javascript program.
Characters which cannot othwise be represented by typing can be placed in the text using entities. An entity is a character squence beginning with an ampersand and ending with a semicolon. Here is a table showing what is in the text in the left column, and how that letter sequence appears in the browser in the right column.
| entity | glyph |
|---|---|
| & | & |
| > | > |
| < | < |
| é | é |
| — | — |
| ↵ | ↵ |
Actually, we are not going to cover floats, they are too complicated. We will go over tables. And we will introduce one DHTML technique, using javascript.
Tables elements are enclosed in TABLE tags. Inside a table are row elements enclosed in TR tags. Inside each row are data cells enclosed in TD tags, or header cells enclosed in TH cells. The only difference between data and header cells is the default formatting that is applied. Although proper HTML will close TR's, TD's and TH's with closing TR's, TD's and TH's, it usually doesn't matter.
| boys | girls | |
|---|---|---|
| trucks | 6 | 4 |
| dolls | 3 | 6 |
Javascript programs can use document.write to put data into the page exactly where the script is run. Script tags are needed to enclose a script, and it will run. This table is dynamically generated by a javascript program that loops creating rows in the table.
| i | fib(i) |
|---|
Copyright (C) 2012 Burton Rosenberg. All rights reserved.