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:

List rendering

<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:

<link rel="stylesheet" href=mystyle.css type="text/css">

 

#content {

background : #FCFCE8;

padding : 10px 7px 3px 20px;

text-align : left;


#menu {

float : left;

margin : 0px 0px 0px 0px;

/* The order is top, right, bottom, left*/

padding : 0px 0px 0px 0px; background-color : #90BADE;

color : #333333;

font-family : Verdana, Helvetica, Arial, sans-serif;

padding : 0px;

width : 130px;

}

 

html>body #menu li a {

width : auto;

/*needed for Opera*/

}

 

#menu li {

border-bottom : 1px solid #90BADE; margin : 0px;}#menu li a { background-color : #1958B7; border-left : 10px solid #0948A7;

border-right : 10px solid #407FB4;

color : #FFFFFF;

display : block;

padding : 4px 5px 4px 5px;

text-decoration : none;

width : 100%;

}

 

#menu li a:hover {

background-color : #2586D7;

border-left : 10px solid #1C64D1;

border-right : 10px solid #5BA3E0;

color : #FFFFFF;

}

 

#menu ul {

border : none;

list-style : none;

/*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.

Text Box: The styles not for Netscape 4.x#menu ul {	margin: 0px;	padding: 0px;}#content{	margin-left : 130px;}

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.