DeSIGn

How to write HTML code part 2

by Andrew Armstrong

HTML was initially conceived as a means to make information available
in an electronic form.† The available tags were concerned more with structure,
such as paragraphs and headings, than with rendering. †As the Internet became
more widely used, and particularly as it gained commercial content, web page
designers became more concerned with the look of a page than with using the
tags in their structurally correct manner.† It is now becoming possible to
achieve both the correct structural use of tags and a well designed and controlled
page appearance by employing cascading style sheets.

Even at best with the use of cascading style
sheets, there are some types of layout of which are difficult or impossible
to produce without using tables.† Some web pages consist off a huge table
which contains other tables which themselves can contain the yet other tables
in order to execute a complex and visually attractive layout.† In many cases,
a layout almost as attractive can be produced a great deal more simply with
the use of cascading style sheets and, maybe, some small tables.

A disadvantage of pages consisting of a large
table is that the browser may be unable to start rendering the page until
it has all downloaded. The visitor to the site sees nothing, sometimes for
long enough to get bored and find somewhere else to go. If all the table cell
widths are defined, then a browser may start to render the content before
the entire table has downloaded. The colgroup tag can also be used, but not
all browsers recognise it. For more information on this, and on other table
tags and arguments not covered here, look at www.aaelectron.co.uk/desig/ where there are examples,
or at the w3c website where the full standard is available.

Tables

Remember that in the first part I said that most
HTML tags are containers.† The outer container for a table is a table tag.
Inside a table tag may be a number of table rows, and inside each table row
may be a number of tables cells.† Each table cell may be a header or a data
cell, and such cells may be mixed in a row.† The one important thing is that
there must be the same number of cells on each row.

How can this be?† You see many page layouts in
which tables cells do not appear to conform to this rule.† One way in which
this is achieved is to put an entire table inside a table cell.† Sometimes
this is the only way to achieve a particular layout.† However, another approach
is to use the "colspan" and "rowspan" arguments in the
cell tags.† Here is the code for a simple illustration, showing a heading
which spans two colunns, and another which spans two rows.

<table>

<tr>

†††††††† <td>&nbsp;</td>

†††††††† <th colspan="2">This heading spans two columns</th>

</tr>

<tr>

†††††††† <th rowspan="2">This heading spans two rows>

†††††††† <td>This is ordinary cell contents</td>

†††††††† <td>And so is this</td>

</tr>

<tr>

†††††††† <td>This cell is also by the heading above</td>

†††††††† <td>This is the bottom right hcell</td>

</tr>

</table>

The drawing here illustrates some of the parameters:

Here is a list of some of the other arguments
used in table tags and table cell tags.† Not every user agent honours every
argument.† Internet Explorer, in particular, often treats the width as a recommendation,
and will resize cells to make things fit.† Sometimes this can be helpful,
but occasionally it can ruin a perfectly designed layout.† There are tricks
to get around this, for example using single pixel images set to a specific
size to force the table cell to conform to that size.

Tag

Argument

Notes

Table

border

The border around cells and the table. The value is a number (of pixels)
eg border="0" (no visible border)

cellpadding

Space between the text and the cell border

cellspacing

Space between adjacent cells

width

eg width="600" or width="99%". If a figure of 100"%"
is used, some browsers will always have a bottom scroll bar.

bgcolor

eg. Bgcolor="#ccccff" gives light blue background colour

Td or th

width

In pixels or percent

colspan

Spanning the cells below or above

rowspan

Spanning the cells to the right or left

bgcolor

Cell background colour overrides table background.

height

In pixels or percent. Height is not always honoured.

Lists

Lists are another good way to organise information.
Here is an example of code, and how it could render:

<ul>

<li>Meeting room or rooms.</li>

<li>Caf&eacute;</li>

<li>Shop, selling:

<ul>

<li>Books, and souvenirs</li>

<li>Cold drinks</li>

</ul>

</li>

</ul>

This is an example of nested lists, in this case unordered ones. Note how
the second list is inside a list item tag.

Character codes

Also note in the list example the use of the code &eacute;
for a character otherwise not handled correctly on all computers in different
language regions. Many characters must be replaced with codes in this way,
for example the double quote " should be represented by &quot;. This
is essential, because double quotes are used in the code, and if they appear
in the content, strange errors can occur.

Ordered lists can number 1,2,3, or I, II, II, or a,b,c and so
on.

Doing it with style

There are means within html to control the rendering
of a document, but for most purposes the use of css (cascading stylesheets)
is better. One alternative that I do not recommend is the font tag. This tag
cannot contain paragraphs, so each paragraph must have its own set of font
tags. If such tags are widely used, changing the typography of a page can
be a large task. I would only choose to use a font tag as a very short term
means to highlight a few words, for example:

<p>This offer is only available <font
size="+1" color="red">until tomorrow morning.</font></p>

Even then I might use an inline style instead,
for example:

<p>This offer is only available <span
style="color:red;font-size:120%">until tomorrow morning.</span></p>

There are three ways to add stylesheets to a
web page. All are placed in the header section.

A stylesheet can be imported, but if a style
is needed for only one page, then a good method is to place the stylesheet
within the head, for example:

<style type="text/css">

<!--

@import url("mystyle.css");

P {font-family:georgia,"times new roman",times,serif;

†††††† color: #000033;† font-size: 11pt; }

-Ė>

</style>

The comment markers prevent very old browsers
that do not recognise the <style> tag from displaying the contents of the stylesheet.. A stlylesheet
can also be linked, for example:

/*The 30px is for netscape 4.7 only, it isredefined in the
url linked style sheet */

margin : -30px;

padding : 0; }

All browsers that understand stylesheets can
use styles declared or linked in the header, but Netscape 4.x cannot understand
@import. The @Import statement must precede the rest of the stylesheet or
it will be ignored by some browsers.

Since Netscape 4.x has rather flaky stylesheet
support, @Import is sometimes useful to prevent it from seeing styles it canít
render properly, and having a hissy fit. In particular, Netscape 4.7 has difficulty
with the CSS techniques to layout a page with less or no resort to tables.
However, it is possible to make layouts that look very good in modern browsers,
and render plainly but useably in version 4 browsers.

Among the things that can be controlled by style
sheets are: background and text colours, fonts and font sizes, margins and
padding, and positioning.† Divisions that are absolutely positioned can also
be the subject of dynamic HTML transitions, such as changes of visibility,
wipes and the like.† An example of this is shown on web site supporting this
article. Feel free to look at the source code to see how it was done.† I have
tried to choose variable names in the JavaScript to be self-explanatory.

Both import and link may be used in the same
document.† Styles which cannot be rendered correctly in Netscape 4 may be
placed in the style sheet which is imported, while other styles, for example,
to set heading or body text typography, may be placed in the style sheet which
is linked.

By using style sheets, it is possible to alter
the appearance of an entire web site by making small changes to one file.†
There is an example of the web site supporting this article of two pages with
identical HTML, but different style sheets.

CSS can also be used to position elements on
the page in much the way that tables have been used.† Because of bugs in the
support for stylesheets, even in well respected browsers like Opera, some
considerable care is required to check that the code is not too badly rendered.†
In most cases, where positioning is done by CSS, it is necessary to write
the page in such a way that it can be rendered acceptably without the style
sheet, and then import the main style sheet so that Netscape cannot see it.†
The page may look as plain as an Amish coat when it displayed in Netscape
4, but few people use this browser now, so it is probably acceptable if the
page is readable.

In reality, although positioning using CSS is
possible, because support for it is flawed, it is still advisable for most
pages to use tables for some of the layout. Here is simple code to place a
column of links down the left of the page, with the content to the right.
This works acceptably even in NN4.7, though NN6+ and IE5+ render it better.

This stylesheet illustrates several things that can be done, and the
website will show more. The content division has a background colour set,
and the text is aligned to the left (ranged left in publishing terms). The
padding, specified individually for top, right, bottom, and left individually,
is the space between the edge of the block, and the content inside it.

The sidebar division has additional properties
of width, which is self explanatory, and float.

Float-left allows text to wrap around the right
of the division, as it wraps around the box containing the code here. Otherwise,
block level elements start on a new line, and the element following a block
level element starts on a new line. Block level elements include headings
and paragraphs, <div>, <li> while inline elements include <strong>
and <em>. However, this property can be changed by a stylesheet using:†
display:block or display:inline.

Even list elements can be made it to display
all on the same line, instead of on separate lines as a list.† Equally, elements
which would normally be displayed inline, can be made to display on separate
lines by declaring them to be block elements.† That could be useful to allow
an older or non-visual user agent to render the page sensibly. There is an
example using the <em> tag as a block level highlight on the website.

Contextual style definitions are used, e.g. #menu li a which refers
to an anchor element contained inside a list item, which itself is contained
in an element with the unique identity of menu. Anchor elements in any different
place are not affected. Armed with this knowledge, you should be able to understand
most of the function of the stylesheet by reading it carefully

Standards compliance

The layout of block level elements is determined
by the box model.† In versions of Internet Explorer prior to 6, this did not
conform to the specifications.† The padding should be in addition to the specified
width and height parameters, and in earlier versions it was instead subtracted
from the width and height.† For most purposes this is not matter, but if you
are trying to specify an element of a particular width, with padding, it is
important to know whether it will add to the overall width or not.† In the
case of the link menu example, the anchor element has padding so that the
text will not be touching the edges of the element.† It is generally accepted
that if it is closer than seven pixels to the edge, the text can become more
difficult to read for anyone without good eyesight.

Unfortunately, in the first implementation of
the style sheet, I had specified that the width of the anchor element should
be 100%, to make it the full width of the sidebar.† This is works unless
a doctype declaration is added.† A valid doctype switches Internet Explorer
6 into a more standards compliant mode, in which the padding is added to
the
outside of the box.† In this case a width of 100% makes the anchor element
fit perfectly until the padding is added, but the padding was then in excess
of
the width of the sidebar.† Setting width:auto; gets around this problem,
without impairing the rendering in previous versions where the box model
is broken.

One problem that can occur with a fixed width
menu is that the text can overflow the width if the magnification is set to
high.† If the menu is set to a percentage width or is specified in ems, this
problem may not occur.† For layouts which need a fixed width, the best answer
that I have found is to check that the words are able to wrap within the width
at the highest magnification that Internet Explorer supports.† This is not
a perfect answer, because other browsers may enable higher magnifications,
but it should cause a problem for very few people.

When version 4 browsers were current, I preferred
writing for Internet Explorer, because Netscape was so far from meeting many
of the CSS requirements.† Now that we have reached version 6, I find that
Netscape (six and seven) and Mozilla normally do what the specification says,
while Internet Explorer has strange failure modes in which an insignificant
change can cause it to fail to render correctly.† I'm sure that I have not
yet found all problems, and I would urge anyone doing a layout of any complexity
to check it in both Netscape and Internet Explorer, preferably in more than
one version.

Many of the "workarounds" that can
make Internet Explorer render the page as you would have wished cause Netscape,
Mozilla, Opera, and probably other browsers, to fail. In these articles I
have tried to touch n some of the more important aspects of current and future
web page design, but the subject is too large to cover properly in less than
a book. I will try to extend the information on the wsebsite (http://www.aaelectron.co.uk/desig/)
a little beyond these articles.