HTML Tutorials

written Sept 2000 being revised May 2006

Google site search

ContentsIntroductionBasicIntermediateAdvancedFuturePolicyInfrastructure

1   HTML - the foundation

Material in this section has accumulated from 2000. The sections deal with various issues around HTML itself and also on HTML/CSS.

The technicalities of writing webpages has gone from a hobbyist level in 1995, to something of a skill in 1999 with HTML standards in place. With the advent of CSS it became an art and the additional introduction of javascript(JS) to add actions made it a very arcane art indeed. With the further reliance on CSS and JS in todays world (2006) it can now best be called a black art. Flash is also making its presence felt on the webpage, with slick simple video strips and also with more sophisticated Flash features such as SitePal. Much of the pretty things we see are the product of skirting round many bugs in many products and writing extraordinarily obscure things to fix other things. This is definitely black magic and not science or even art.

At the same time more new applications are appearing which take a slice out of your computer resources - webcasting, P2P file sharing, media playing etc. And your state of the art computer of 2 years ago can no longer keep 6 IE browser windows open without falling flat on its face. People fall back on lite webbrowsers. They dont really need all that flash stuff to do the job that they need to do, but they do need webpages that load easily and have their necessary funcionality to do the job they are there for.

There has been a trend to load entertainment content into webpages, but people are getting their entertainment content on their computer by other means which gives them more choice about what they hear and see, rather than being driven by the page content that is pushed to them in conjunction with a particular webpage function. For example, people play mp3 music files on their computers while they work. A webpage that delivers streaming audio at the same time is an intrusion. People would rather hear what they wish to, their own choice, rather than have a webpage force what they hear. The only exception is if they go to the webpage to listen to the music on the webpage. The same applies to video content for example pop music videos which you can now play in the media fold-out of your BIG browser.

The move to lite browsers is a reaction to the media pushiness of the BIG browser and its capabilities and its power to intrude. As well as to the BIG browsers impact on a computer that is having to do more than it did when you first bought it.

Lite browsers typically do not support CSS or JS, only HTML! THis means that your HTML must be written as well today as it had to be in 1995.

A third factor which re-establishes the fundamental importance of HTML is its use in many other applications for information sharing, documentation and reporting. The HTML widget brings HTML presentation of information into every application. It is no longer the preserve of the dedicated web-browser. The creation of this material is generated by computer grograms, and is kept relatively simple and as straight forward as possible. Layers of CSS and JS are a burden to the application development and the rinning of the application. The appearance and general use of the HTML widget also returns us to the fundamentals of writing good HTML that requires no added extras.

This means that no matter what fancy tools you are using to buils your beautiful webpages, CSS and JS of course, you must always take care of essentials. The following subsections look at these essentials.

Because of the move to lightness, away from CSS, in lite browsers, there is still a willingness to embrace as much functionality in HTML as is practical. This means that many features deprecated in HTML 4 standard, it being envisioned that will be forced out into CSS, are being maintained in lite browsers.

An example of a lite browser built on an HTML widget is BrowseX which uses the TkHTML widget which can be included in most scripting languages, perl, python and of course tcl. TkHTML is pretty basic but good enough to present any well besigned webpage. It omits fancy features that are in HTML 4 standard as we shall soon see. It is a good example of what a basic HTML page should be designed to render in. If your webpage does not look good in BrowseX then it needs some reworking - its an acid test.

When you read the HTML 4 standard, in light of these trends, you can see that it is in fact a strongly political document that seeks to undermine basic functionality in HTML and replace it with layers of complexity. Today, to manage a large website, the stylesheet and javascript code is as much subject is as much a product of functional programming as the HTML. Using CSS does not release the author from having to write complete HTML. It only adds another level of complexity that provides additional features to the basic bread and butter.

This in turn creates an extra management problem - to make sure the HTML and CSS stay in sync.

2   BODY Tag

Webpages have a BODY tag that looks like this:
<BODY onload='javascript_init()' >
The author is using CSS with its body tag to define the page format and a javascript function to set up all sorts of stuff. An HTML widget sees no spec at all. What is missing is bgcolor, plus some decrepated attributes: background (image), text, link, vlink and alink. All these should be provided in sync with your CSS spec. They are typically held in the body, a:link, a:visited and a:active elements of the stylesheet.

In HTML the background image tiles across and down the window, and does not provide for any special placement. Note that background is often available in TABLE, TR, TH and TD elements, though this is not in HTML 4.

CSS tagCSS attributeDomainHTML tagHTML attribute
bodybackground-colorcolorbodybgcolor
bodybackground-imageurlbodybackground
bodycolorcolorbodytext
a:linkcolorcolorbodylink
a:visitedcolorcolorbodyvlink
a:activecolorcolorbodyalink

First we need the proc that converts a .css file into a tcl style array.

#creates a new global array name which begins with the word in arg p followed by an integer
proc globalarray p {
    for { set i 1} { [uplevel #0 info exists ${p}$i] } { incr i } {}
    global ${p}$i
    set ${p}${i}(0) {}
    unset ${p}${i}(0)
    return ${p}$i
}

# creates a tcl style global array object from a CSS file
# returns the name of the tcl style global array (object)
proc css2tcl file {

    set f [ open $file r ]
    set css [ read $f ]
    close $f

    # create the array object
    set style [globalarray style]
    global $style

    # first we get rid of comments - css comments are not allowed to go over a line
    regsub -all {/\*[^\n]*\*/} $css "" newcss

    # we want to grab every string of the form 
    #     "foo foo1 . . { attr1: val1 val2 ...; .... attrn: valn1 valn2 ...[;] }" 
    # and turn it into 
    #     "style(stmt# foo foo1 ...) { attr1 {val1 val2 ...} .... attrn {valn1 valn2 ...} }
    
    for { set i 1 } {[regexp {^([^\{]*)\{([^\}]*)\}} $newcss match elements attrs]} { incr i } {
        # strip the match from newcss
        set newcss [ string range $newcss [string length $match] end ]
        # parse the attrs - "attr: val1 val2 ...; .... attrn: valn1 valn2 ...[;]" 
        # becomes "attr {val1 val2 ...} .... attrn {valn1 valn2 ...}"
        # split and trim each element
        set newattrs {}
        foreach  j [ split $attrs ":;" ] {
            lappend newattrs [ string trim $j ]
        }
        # remove the odd trailer if there was a terminating ;
        if { [lindex $newattrs end ] == {} } { set newattrs [ lrange $newattrs 0 end-1] }
        # dummy test of array list
        if { [ catch {array set a $newattrs} msg ] } {
            global errorInfo
            bgerror "Error in stylesheet $file
The following attribute list does not pair up and has been ignored:
$newattrs
$errorInfo"
        } else {
            set "${style}($i [string trim $elements])" $newattrs
        }
    }
    # newcss should now be empty
    if { [string trim $newcss] != {} } { 
        global errorInfo
        bgerror "Error in stylesheet $file
The following was not parsed:
[string trim $newcss]
$errorInfo"
    }
   return $style
}

Here is a css2html procedure that produces a body tag from a tcl style sheet array.

 # this routine reads tcl array versions of a style sheet and returns an html BODY tag
 # style is the name of a tcl array containing the CSS style
 proc "css2html body" style {
    upvar $style css
    # set defaults
    array set body {bgcolor #000 text #fff link #00f vlink #0ff alink #f00}
    # get the body
    foreach s [ lsort -integer [array names css "* body*" ]] {
        array set cssbody $css($s)
        foreach {c h d} { background-color  bgcolor color 
                                  background-image background url 
                                  color text color
                                } {
            if { [info exists cssbody($c)] } {
                set body($h) [ "css2html $d" $cssbody($c) ]
                unset cssbody($c)
            }
        }
        # have not handled the CSS background attribute     

        # put remaining body attributes into style     
        set str ""
        foreach {i j} [array get cssbody] {
               append str "$i: $j; "
        }
        if { $str != {} } { set body(style) $str }
        unset cssbody
    }
    
    foreach {i j } { a:link link a:visited vlink a:active alink } {
        if { [ info exists css($i) ] } {
            array set cssbody $css($i)
            if { [ info exists cssbody(color) ] } {
                set body($j) [ "css2html color" $cssbody(color) ]
            }
            unset cssbody
        }
    }
    return [ "css2html make" body ]
 }

The above routine looks for some basic CSS attributes and converts them to HTML attributes. But for this to work we need to convert or check some of the attribute types (url and color) and to generate a tag from an array.

 # make the html opening tag for the tag type named tag
 proc "css2html make" tag {
    upvar $tag t
    set str ""
    foreach i [ array names t ] {
        append str " $i='$t($i)'"
    }
    return "<${tag}$str>"
 }

 # for now assume that CSS only uses HTML color specs
 proc "css2html color" color {
    return $color
 }

 proc "css2html url" url {
    regexp {url\((.*)\)} $url a b
    return $b
 }

3   HTML Heading Tags

4   HTML and CSS

The following tutorials examine some of the issues in using HTML and CSS. They should be read in at least two browsers at the same time so as to compare the different results that different browsers produce for the same HTML. The browsers specifically referred to here are Netscape 4.7, Internet Explorer 5.0 and the beta release of Netscape 6. But it should be remembered that many people, specially those with smaller older machines may not (cannot) upgrade to newer software and HTML must still be written which looks reasonable on older browsers.

4.1   HTML Heading Tags and CSS

Firstly, some simple headings. If you are used to using only one browser, say Netscape and not IE, or IE and not Netscape, you may be surprised to find such big differences in how browsers interpret HTML and how these differences effect the impact your HTML has on the page.

Firstly the simple header tag. Here are the six header elements:

h1 Header

h2 Header

h3 Header

h4 Header

h5 Header
h6 Header

No surprises here. The ALIGN attribute in headers is now deprecated and if you want to dress up your header in any way you should use the style attribute with the CSS specification suitable for a heading. CSS offers border specifications (border-width , border-style, border-color), and also background specifications (background) and text colour (color).

Here is a first simple use of 'style':

<h1 style='border-width: 4;'>h1 Header</h1>

h1 Header

IE does not interpret style attributes in tags, you ask? The answer is not that simple. IE's rendering is in fact correct to the standard because the default border-style ought to be 'none'. Netscape 6 also conforms to the standard. If you designed your webpage using Netscape you might assume there would be a border showing on other browsers, but not so! So let us add a border-style of say double (for which a border-width of at least 3 is required).
<h1 style='border-width: 4; border-style: double;'>h1 Header</h1>

h1 Header

Now we can note three differences, the weight of the border, the padding of the text within the border, and the size of the box allocated to the header. IE gives a heavy formal impression suitable for a textbook, while the Netscape rendering is more immediately acceptable for general documents. Netscape 6 also looks the same as IE, conforming to the notion that headings occupy their whole line. Both needs to have their padding adjusted in any event. But now the question arises - is it even possible to get a header with a border that looks roughly the same on all browsers?
<h1 style='width: 50%; border-width: 4; border-style: double;'>h1 Header</h1>

h1 Header

The simple answer appears to be No! The width attribute confuses Netscape 4.7. The only attributes that can be assumed to be rendered consistently are text colour (color) and font attributes. Even within fonts only three of the five generic families produce reliable results. 'serif' maps to 'Times', 'sans-serif' maps to 'Helvetica', and 'monospace' maps to 'Courier'. The generic families, cursive and fantasy, do not map to anything reliably. Other font families that are popular and usually available are Arial and Verdana, which are both sans-serif type fonts. So we can safely use something like:
<h1 style='font-family: verdana, sans-serif;  font-style: italic; 
          color: red; text-decoration: underline;'>h1 Header</h1>

h1 Header

You have probably seen enough in this small exposition to appreciate the problems involved in writing HTML which will look like what you intend on different browsers (user agents). www.w3.org which develops the standards for HTML and CSS have a Test Suite which you can check out on your browsers. Microsoft claim to have implemented IE to be conformant to CSS1 to a large degree, however a check of the horizontal formatting test reveals that even this implementation is seriously flawed to the point that it determinedly produced wrong results. In the first test sample on this page the paragraph does not line up with the image template. This is because the Microsoft programmers has misread the specification and made the 'width' attribute span the content, padding and border areas. But according to the definition, 'width' refers to the width of the content only. However, view the same test using Netscape and you may wonder why you bother learning about Style Sheets.

To use borders and backgrounds in reliable ways in headings we must instead use the <table> element combined with the <div> element to align the table. Note that Netscape 6 uses a font scale that is smaller and looks a little more compact than IE and Netscape 4.7.

h1 Header

<div style='text-align: left'>
<table cellspacing=0 cellpadding=0 ><tr>
<td><p style='border-width: 4; border-color: red; border-style: ridge; 
         font-size: x-large; font-weight: bold; padding: 2 8 2 8; color: green'>h1 Header</p>
</td></tr></table>
</div>
Here is a centre-aligned version, but with a background colour added. The IE version is correct in this case, the background is defined to cover the area of the border, padding and content, excluding only the transparent margin. Netscape 4.7 applies the background only to the padding and content area and even then leaves a small gap. Netscape 6 corrects this error.

h1 Header

<div style='text-align: center'>
<table cellspacing=0 cellpadding=0><tr>
<td><p style='border-width: 6; border-color: red; border-style: double; 
          font-size: x-large; font-weight: bold; padding: 2 8 2 8; color: blue; 
          background-color: yellow; ' >h1 Header</p>
</td></tr></table>
</div>
Here is a right-aligned heading with an image background:

h1 Header

<div style='text-align: right'>
<table cellspacing=0 cellpadding=0><tr>
<td><p style='border-width: 8; border-color: red; border-style: groove; 
         font-size: x-large; font-weight: bold; padding: 2 8 2 8;  
         background: url(Cottcndy.jpg)  pink;  '>h1 Header</p></td></tr></table>
</div>
Shadow for headings is a nice effect and it is part of the CSS2 specification, but commonly used browsers dont implement it. Since even Netscape 6 is not implementing this attribute, it is safe to assume that this effect will have to be acheived some other way for a while yet. It can be fudged to some extent by using absolute positioning within a box which has relative position.
Shadow Heading
Shadow Heading
 
<div style='position: relative'>
<div style='position: absolute; top: 3; left: 3; font-size: x-large; 
          font-weight: bold; color: silver;'>Shadow Heading</div>
<div style='position: absolute; top: 0; left: 0; font-size: x-large; 
          font-weight: bold; '>Shadow Heading</div>
</div> 
This makes use of the position attribute which was added as an extension to CSS1, and which was developed in CSS2. When a tag is given a position attribute it is considered to be a positioned block. Blocks with absolute positions are positioined with respect to their immediately enclosing block which has a position attribute, or the whole page by default. IE has implemented this to some extent but does not properly manage the space used. Netscape 4.7x has a bug in its handling of positioned blocks which means that seperate uses of this code wont work. Netscape 6 does work.

In this example the position attributes for the black heading are the default attributes. You might think you can leave them out, but then they get processed first and the 'silver shadow' ends up on top. This fudge of text-shadow does not provide for the blur effect which is described in CSS2.

One might expect that using <div style='position: relative; text-align: center'> would center the shadow heading, but not so. To do this reliably it must be set inside a centered table, just as for the border headings shown above.

4.1.1   Exercise

Write a Tcl procedure HTML::heading that produces plain, boxed and/or shadowed headings for h1 to h6. Its parameters may be expressed in HTML or CSS terms but the procedure produces reliably robust HTML that will look as good as possible.

5   Decorated Tables

Another interesting topic is how to get decorative looking tables. Again IE seems to be better equipped than Netscape 4.7 to produce the goods. Here is a portion of the Table of W3C Positioning Property Extensions to CSS1.

Using different text colours and backgrounds in each cell is not so much a problem. You can slice up an image and distribute it among table data items easily too by setting cellpadding and cellspacing to 0. But getting a colour border throughout the table is more difficult. Here is an initial attempt which works for IE.

Positioning Properties

Property Values Applies to Inh.
position absolute | relative | static all elements no
left <length> | <percentage> | auto absolutely and relatively positioned elements no

Netscape renders boring grey intercell borders even for Netscape 6. To get coloured cell borders we need to specify a coloured background. But coloured backgrounds are handled differently by different browsers. This is for two reasons, firstly because Netscape applied background to the cells only, not the spaces between the cells, so 'background' really means 'cell backgrounds'.

Secondly Netscape 4.7 doesnt use use the same rules of colour inheritance as prescribed by style sheets. The table inherits its intercell background colour only from enclosing tables or the body. To get Netscape 4.7 to join the party we must enclose the table in another table.

Positioning Properties

Property Values Applies to Inh.
position absolute | relative | static all elements no
left <length> | <percentage> | auto absolutely and relatively positioned elements no

This gets us close. The cellspacing is required to let the coloured background show through, except that IE fills this with the background color of white. This may be an acceptable compromise, but if not the background colour can be specified for each cell and the border can be collapsed to 0.

Positioning Properties

Property Values Applies to Inh.
position absolute | relative | static all elements no
left <length> | <percentage> | auto absolutely and relatively positioned elements no

5.1   Exercise - coloured table borders

Write a Tcl procedure HTML::table which generates HTML for coloured borders and uniform backgrounds for all cells.

6   Using <div>

CSS provides for a number of positioning schemes. <div> is generally a block structure element. Block structure means that one block follows the next vertically down the page, with whatever space insertion is defined for that type of block. You can change <div> to be an inline element by using the CSS style='display: inline'. Inline elements are arranged across the line and can be adjusted for alignment using a variety of options.

This is a fixed position div box which should not scroll with the screen. However this does not work with IE or Netscape.

Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

 
Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

©2000 - 2006 WEBSCOOL This page last updated 11 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.