Well-mannered
From Better Practices
Contents |
[edit] The Well-Mannered Document
[edit] Overview
In short, a well-mannered web-based mathematics document is one that uses standard languages (XHTML, CSS, JavaScript) whenever possible, and one that follows better practices.
Mathematical documents, even expository ones, are typically more formal than most documents on the web. In addition to standard document structures such as sections and subsections, many will have the well-defined and somewhat specialized elements that are traditional in mathematics. These include
- definitions
- assumptions or axioms
- theorems, lemmas, propositions, corollaries and similar claims of mathematical truth.
- proofs
- examples and exercises
In addition, web-based mathematical documents should (and often do) have elements that go beyond what is possible with printed documents. Some of these are
- hyperlinking within the document and to other documents and resources on the web
- rich graphics, perhaps animated.
- video and audio clips
- interactive mathlets
- embedded worksheets, source-code files, data files
- "non-linear" document structures with multiple threads and ancillary material
[edit] XHTML
HTML (the HyperText Markup Language) is the lingua-franca of the web. XHTML is the latest version of HTML. It is a member of the general XML family of languages, and thus is cleaner, more rigorous and better structured than original HTML. You should not think of HTML as simply a language for producing formatted text. It does that, of course, but the real power and value of HTML derive from the fact that all sorts of other elements can be embedded in it (graphics, mathlets, other markup languages), and because rich, semantic information can be included. Think of HTML as the basic expository glue of a mathematics document on the web.
HTML is basically an object-oriented language. The language has tags that create document objects such as headings, paragraphs, tables, lists, images, links, horizontal lines, and so forth. In XHTML, all tags must be in lowercase. The tags are of two basic types: unary tags and binary tags.
Binary tags have opening and closing parts that enclose text. In XHTML, both parts are required.
<p>This markup creates a short paragraph.</p>
Unary tags do not enclose text: the following markup inserts an image with filename "myGraph.png". Note the special form of the unary tag; this is required in XHTML.
<img src="myGraph.png" alt="A picture of my graph" />
Each tag has a number of attributes that can be set, depending on the type of object. Typical examples are border (for a table or image), color (for a font or a line), src (the source reference for an image), and href (the protocol and URL for a link).
Every object (tag) has two attributes that are fundamentally important: class and id. The class attribute allows us to create sub-classes of objects. These sub-classes help refine the structure of our document, and as we will see, allow different presentation. The id attribute allows us to give a unique name to an object, so that we can link to the object, or even find and manipulate the object programmatically (with JavaScript, for example).
Obviously, HTML, as a general purpose markup language, cannot include tags for specialized disciplines, such as mathematics. There is no theorem tag, for example. However, there are two general purpose tags that allow us to create our own objects, in a sense; these are the <span></span> and the <div></div> tags. Roughly, the <span></span> allows us to encapsulate small bits of text (an inline mathematical expression, for example), while the <div></div> allows us to encapsulate block level chunks (a theorem, for example).
An HTML document is technically a rooted (and therefore ordered), labeled tree. (What mathematician can't appreciate that?). The root of the tree is the html tag, and immediately below are head and body tags. The children of the body node are typically headings, paragraphs, lists, tables, and so forth. A list has list items as children while a table has table rows as children which in turn have table data as children. Well, you get the idea. The structure of this tree is referred to as the Document Object Model (DOM).
[edit] CSS
CSS (Cascading Style Sheet) is a style language that is used to control the presentation of HTML documents. Essentially, statements in CSS assign style conditions to HTML elements. Different style conditions can be applied to subclasses of an element or to elements with a particular id attribute. This is the reason for the term cascading in the title, and one of the reasons that the class and id attributes are so important in our HTML markup.
To give you an example of CSS syntax, here are the style attributes that could be used for the <var></var> tag and for a vector subclass of the <var></var> tag:
var {
font-style: italic;
font-weight: normal;
}
var.vector {
font-weight: bold;
}
As you can probably guess, text enclosed in the <var></var> tag is rendered in italic style with normal font weight. However, for text enclosed in the <var class="vector"></var> tag, the normal font weight specification is overridden in favor of the bold font weight specification. However, the italic style is still in effect (it's inherited, in language of Object Oriented Programming).
[edit] JavaScript
JavaScript is a powerful scripting language that can be used to extend the basic capabilities of HTML and to manipulate objects in the DOM. JavaScript is a web standard; the actual standards name is ECMAScript, named for the standards organization ECMA International
One of the most basic uses of JavaScript for a typical document is to open an ancillary page in a small pop-up window without the usual menu bar, navigation tools, and address field (sometimes referred to as a window without chrome). Here is the function in our script file that does that:
function openWindow(address, windowName, w, h){
newWindow = window.open(address,windowName,
"toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=2,resizable=1,
width=300,height=200,top=20,left=20");
newWindow.resizeTo(w,h);
newWindow.focus();
}
If you are familiar with Java or similar programming languages, you can probably guess what this code does: it opens a new window and loads a page with the URL given in the address variable. The window is not given a toolbar or menu bar, but is given scrollbars and can be resized. The window is initially sized to the width and height given by the w and h variables, and finally given the focus so that it appears on top.
[edit] Resources
- Markup at W3C
The official home site for HTML and XHTML with links to specifications, tutorials, and much more.
- HTML Validator
This is a tool for validating HTML and XHTML, by URL, file upload, or direct input.
- CSS at W3C
The official home site for CSS with links to specifications, tutorials, and much more.
- CSS Validator
This is a tool for validating CSS by URL, file upload, or direct input.
