Open the "bad example" page badlayout.html by clicking on this link. You should also download the page and open it in your simple text editor such as notepad or bbedit. This page with different links and identifying text was actually on a web site.
It contains a great many errors of html markup. It is amazing that most browsers actually manage to display it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
</head>tags. They should be placed between those tags.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- comment stuff -->
<newline>is not a tag in the universal HTML standard. It may be a tag confined to a specific propriatary standard, such as Micro$oft's
</TD>but the table is not defined at its beginning.
<font>but there is no matching closing tag
<IMG>tag often lacks size information for the image. This information aids the browser to load the page more rapidly, but is not required.
<a href="Page1.html"> ButtonImage.jpg Link to page 1</a>is all that is needed to link both the button and the text tag.
<align="center">which is meaningless.
<h1 align="center">, etc.
<img SRC>tag has a useless "a" just before the closing >. This happens again, can you find it? Also there is a closing tag for part of a table
</td>and another useless
<mailto:>or for the
<h1>) and the font tags (
<font="gold">) are used in relation to the same block of text, the font tags need to be within the block of text specified by the header tags.
</td>and another useless
<newline>tag. How many can you find?
<h3>. This happens again later in the page? Can you find it?
<html>in that order
A repaired version of the page is here.
The main graphic design problem in this page is that the page is supposed to have graphic design running up the left side. If the browser window is set narrowly enough this occurs. However if it is set wider - say at 600 pixels or 1280, then the design displays up the middle of the page also, making the page hard to read.
This problem is difficult to solve. One can have a much longer background graphic - say 1500 pixels long ( see), one can use tables to format the page and have the edge design be separate from the table( see or one can use cascading style sheets. The last option may not display properly on some browsers. Cascading style sheets are outside the purpose of this lesson.
This is part of a set of HTML lessons from BATW.net and Bonnie Dalzell [bdalzell at Q I S dot net].