HTML, CSS and APL with Classes

TableOfContents

Overview

This is about (X)HTML and CSS, and how to create XHTML code from APL and why classes are very handy for this task. It also includes a short introduction into HTML and a short introduction into CSS. Feel free to skip them if you are already familiar with the concepts of HTML and/or CSS.

A Short Introduction to HTML

The original idea of HTML was to mark up content. Therefore, HTML offered so called tags to mark up a piece of text as, for example, a header, together with a particular level: h1, h2, h3, h4, h5 and h6. Other examples are:

and many others.

A tag must be enclosed between < and > to be recognized as such by a browser. An opening tag is written as <H1>, while a closing tag is written as </H1>.

Because one must be able to use a "greater-than" as well as a "less-than" within an HTML page there must be a mechanism to tell a browser where to use those special characters, of course. For this, escaping is used. That means that a string which is enclosed by special characters is treated differently by a browser. The two characters recognized by browsers for switchching escaping on and off are the "&" and the ";" characters.

A string like 

The result of the <I>APL expression</I> "5 &lt; 3" is a 0

might therefore be displayed like this:

The result of the APL expression "5 < 3" is a 0

But actually we don't know about the exact appearance.

By using <H1> and </H1> one could mark up a piece of text as a header of level 1. In the first version of HTML it was completely up to the browser to decide how to present such a piece of text.

To have no control about the appearance of a site was something many could not stand. They asked for opportunities to tell the browser how a piece of text should be displayed, at least to some extend. Unfortunately, in a first approach this was implemented as part of the HTML tags. So later versions of HTML offered the opportunity to do something like this: 

<H1 font-family="Arial" color="Blue">Main Caption</H1>

At the same time people started to use (you can also use the word abuse here) tables and images to implement a kind of positioning mechanism to achieve a particular layout. As a result, tables were found within tables within tables within tables…

To put it mildly, the HTML code got bloated and very hard to read and maintain. The people at W3C, who are in charge for defining the standards, then decided that this was the wrong way from the start and that mark up and design issues should be kept apart from each other.

CSS – Cascading Style Sheets

At that point the idea of CSS was introduced. With CSS, one can specify the exact appearance of one particular element, identified by a name called an id in CSS, or the exact appearance of a particular HTML tag called a class in CSS. Later CSS also offered the opportunity to position the content of any HTML tag within a browser's view, which is basically the area were a browser displays an HTML page.

Although this was a brilliant idea, it took years until CSS was recognized and taken into account by the main browsers in a predictable way. This process was prolonged by the disastrous implementation of CSS in Netscape Navigator 4. Internet Explorer also slowed the process down because Microsoft ignored many of the CSS specifications while other parts of CSS got implemented as a kind of bug.

However, over the years the situation got better and better. With Internet Explorer 7 Microsoft eventually managed to implement CSS in an acceptable way. So today, the CSS specification 2.x is more or less implemented in all modern browsers. Yes, there are a few exceptions, but it works well anyway.

What the hell is XHTML then?

All the color= and font-family= stuff introduced in HTML could not be removed once introduced. The W3C marked those attributes as "deprecated", but people still can use them, and the browsers need to deal with this stuff. So somebody invented the idea of a new, clean version of HTML. That new version was designed as a kind of XML child. That is the reason why it was called XHTML in opposite to HTML.

XHTML differs from HTML in a number of ways. These topics are discussed in detail:

Strict syntax rules

Browsers are following some sort of "forgiving" policy when dealing with HTML. That means that in case of an ill-formed tag a browser tries to work out what the intention of the author might have been. Some browsers are more tolerant than others, but all accept invalid HTML code to some extent.

For example, HTML tags supposed to be uppercase like <H1> but all browsers except lowercase tags as well. If a closing tag is forgotten, Internet Explorer tries hard to work out how to display the page anyway, in many cases successfully.

XHTML rules are strict. If something is wrong or forgotten, nothing is displayed at all – the user gets an empty page.

Lowercase tags

In XHTML, tags must be written in lowercase letters. <h1> will do but <H1> will not.

No Design Properties

All the attributes introduced in HTML for design purposes like "color" or "font" are not available in XHTML. Instead, CSS must be used to achieve a particular design.

Declaration

An XHTML page must declare itself as such with a line like this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The idea behind this was that as soon as a browser comes across such a declaration, it can switch of all the messy code that tries to deal with ill-formed HTML code and rely on a clean, well-defined syntax. Well, that idea, also it was brilliant, never happened to spring into existence.

Of course there is more to say about the differences between HTML and XHTML, but this is beyond the scope of this discussion.

The future of XHTML

The idea of XHTML especially attracted programmers who often are looking for better, cleaner, nicer ways to do something. Unfortunately, XHTML did not offer much to improve the design aspects of a web page. In other words, it did not attract web designers.

The majority of web sites are created by web designers, not by programmers, and that's why XHTML was not accepted as widely as hoped. For example, the exiting opportunities offered by CSS can also be used from ugly and even ill-formed HTML-code. But XHTML is treated well by all modern browsers, although more or less accidentically, so it can be used.

CSS

We cannot discuss CSS in detail, that is very much beyond the scope of this discussion, but I would like to tell you about the general concept of how XHTML and CSS work together.

We need something to deal with – a particular XHTML tag: 

<h1 id="thish1" class="allmyh1" >Main Caption</h1>

To give this h1 tag a particular design you can choose from a number of different approaches: You can specify a rule which is taken into account…

The sequence of this list also defines the precedence of these rules: at first, the most general one is processed. Then the class-specific rules are processed. At least the most specific ones are processed. That means that a rule associated with a name overwrites class rules which overwrites general rules.

Example: 

h1 {
        color: blue;
        font-family: Helvetica
        font-size:x-large;
}
h1.allmyh1 {
        color: red;
        border: 1px green solid;
}
h1#thish1 {
        font-size:xx-large;
        color:gray;
}

According to the rules our header would take these attributes: 

color:       gray;
font-size:   xx-large;
font-family: Helvetica;
border:      1px green solid;

You may believe this or not, so let's prove it. CSS rules can be associated with a particular web page in two very different ways: either by putting the CSS rules in its own file, using the extension ".css" or by putting it into the HTML page itself.

Only to simplify the matter we use the latter approach. Given this html code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>  
        <style type="text/css" media="screen">
h1 {
                        color: blue;
                        font-family: Helvetica
font-size:x-large;
}
h1.allmyh1 {
                        color: red;
                        border: 1px green solid;
}
h1#thish1 {
                        font-size:xx-large;
color:gray;
}
</style>
</head>

<body>
<h1 id="thish1" class="allmyh1" >Main Caption</h1>
<p>
                A simple example
</p>
</body>
</html>

The CSS rules are enclosed by a <style> tag declaring itself as containing CSS rules by the type="text/css" attribute, and it defines these rules as valid for the screen by the media="screen" attribute. It could be something else, for example "print", which tells you that you can have two different sets of CSS rules in place for screen and for print.

That allows you to prepare the HTML page in very different ways, even suppressing elements completely, like navigation elements for example, by specifying "display:none" on them.

In theory, the sequence of html tags is not important. The reason is that you can rearrange the different parts of the HTML page by CSS. As so often, in practise there is a difference between theory and practise: There are some annoying limitations. In other words: sequence matters!

APL and Classes to the rescue

Fortunately, there is a tag available designed to put some stuff together which is logically related, for example to make them available for some CSS rules: <div>

Most pages on the web offers some if not all of the following concepts:

The idea is to define these elements independent from each other as <div> tags giving them unique names called IDs in CSS speak by assigning the appropriate HTML code to particular properties in. That can be done in the instance of a class designed to create and accept syntactically valid XHTML code only. This is especially important because invalid XHTML code has a fairly good chance to result in a very simple very white very empty page which your visitors will not appreciate as I can assure you.

Having defined all the different parts of the web site you are interested in, they can be compiled together in whatever sequence you like.

Needs some doing

Created by KaiJaeger at 2008-02-27

CategoryDyalog