This Page is Poorly Written

There are many things wrong with this page. It's not so bad that it won't work on most browsers, but it has many things that could be written much better. Your job is to use this code as a starting point and improve it.

You could, of course, cheat!

There is nothing wrong with using an HTML cleaner such as HTMLTidy, nor in using an accessibility checker like the W3 site to ensure your code works well. In fact, we would highly recommend that you do this whenever you create web pages because they help to ensure your code is compatible with standards and accessible to as many people as possible. Similarly, it makes perfect sense to use a WYSIWYG HTML editor such as Dreamweaver or the open source KompoZer when actually writing web pages. For the purposes of this exercise, however, you may learn more effectively if you avoid doing that until you are fairly comfortable that you have made as many changes as you can with just the aid of references. The main reason we are learning HTML is so that we can write dynamic JavaScript programs that are embedded within and which use and manipulate HTML, CSS and other browser technologies. If you take short cuts at this point, you will find it much harder later on. Remember, while marks will be lost if you don't take care to deal with the problems on these pages, the main things we are looking for relate to your ability to use the technology well and effectively, paying close attention to the design needs you have already identified.

Adding links

This is a link to the second page in this badly written set of pages. It uses a relative URL to point to a file in the same file system. This is necessary if you are building a site for portability, so that you can move it from one place (say your local computer) to another (say, your website).

This is a link to the third page in this set.

And this is a link to Athabasca's main site. It uses an absolute URL that points to a unique web address. When the site moves, it will still point to that same address.

Using pictures

Pictures are not a part of a web page - the HTML page includes a link that tells the browser to embed the image (if it can) and some extra optional attributes such as its position relative to the text. It is far preferable to use stylesheets for this kind of formatting, but that's a subject for the next unit.

Athabasca University Logo

Making lists

Lists are useful for many things and can be unordered:

They can be numbered:

  1. Like this
  2. And this

They can be indented:

Making tables

Tables should only be used for tabular data and never for layout, but many people do use them for layout. It's not good for accessibility. Stylesheets work much better for this.

Example: Table #1: Speed of First Serves of Tennis Player A

Trial # Speed (km/h)
1 133
2 145
3 142

More samples

See fix up of Sample 2

See what I did when I created my new sample!