Elflord's Web Design Tutorial
elflord@panix.com
This document started on Fri March 7. Still a bit of a mess. Oh well.
If you would like to leave my frames and just see the document, feel free to escape the frames

Contents
  1. What is HTML ?
  2. So how do I Write A Web Page?
  3. The basics: Hypertext Links
  4. Text Formatting: Font Control
    1. Styles And Logical Markup
    2. Presentation formatting and physical markup
    3. The FONT tag
  5. Text Formatting: Page Layout
    1. Paragraph Formatting Tags
    2. The TABLE tag
    3. Formatting With Borderless Tables
    4. Nested Tables
    5. Coloured Tables
  6. Embedded Graphics
    1. How The Tag Goes
    2. Different Image Formats
    3. Why Use JPEG ?
    4. Why Use GIF ?
    5. Compression: Keeping It Small&Fast
  7. Design Tips
    1. Saving Bandwidth: How To Make A Fast Page
    2. Guidelines On Using Frames- How To Avoid The Pitfalls
    3. Building A Consistent Site
    4. Minimizing Site Maintenance
  8. Appendix
    1. Colors
    2. The Pitfalls of Physical Markup: a manifesto
So What Is HTML ?
Back to contents

Greetings. Here is my HTML guide. Started on March 5, 1998. Let's start at the very beginning. Firstly, a few words on HTML. HTML stands for "HyperText Markup Language". And it is exactly that. Hypertext is a fancy way of describing documents that are "linked" in the sense that you can get from one document to another by using "links" (for example, you click on a link in Netscape and you travel to another document). Markup language ? Well to explain this, we require a brief discussion regarding what goes on behind the scenes. Basically, a HTML file is a text document which consists of a mixture of text that is included in the document, and instructions that "tell" the browser how to display the text. For example,

<CENTER> <BIG> HELLO </BIG> </CENTER>

TElls the browser to print the word "Hello " in the center of the page. It looks like this:

HELLO


There are several other instructions to tell the browser other things such as including inline graphics, including wallpaper, and even including embedded Java applets, which are computer programs that run within a web page.

So How Do I Write A WebPage ??
Back to contents

I guess you're obviously interested in this topic if you even bothered to look at this page.

Unix Specifics

A bit of UNIX specific information: usually, on a UNIX system eg (Solaris, SunOS, IRIX, Linux, SCO, FreeBSD, etc), your web page will go in a directory under your home directory called public_html. (this is true for users at Rutgers, and many other places). It is important that your home directory is accesible for this to work.

If you have no idea what your home directory is, or how to create a public_html directory, or how to edit a text file, take a look at my UNIX tutorial

chmod -R a+X $HOME
will suffice to make the directory accesible after it has been created. The documents in there also need to be accesible. They can be made that way by using
chmod -R a+r $HOME/public_html
For more details on chmod, see my UNIX tutorial

First, I outline a very simple example : the generic HomePage. The name of the file is index.html ( and on most UNIX systems, it goes in your public_html directory) It goes like this :

The Generic Homepage

<HTML>
<HEAD>
<TITLE>
My Page
</TITLE>
</HEAD>
<BODY>
Hello. This is my homepage. I hope you enjoy your visit. Please come again.
</BODY>
</HTML>
This is actually a pretty simple looking page. It looks like this :

Hello. This is my homepage. I hope you enjoy your visit. Please come again.

The contents of the angled brackets are called TAGS and they are instructions that tell the browser how to lay out the surrounding text. Any HTML document should have the initial and final HEAD , BODY and HTML tags. Note the general format of the tags. Some of the tags, like the HEAD tag, mark the beginning of a section of the document. As a rule, this section is closed by the same tag with a / inserted in front of it. For example ,


<FOO>
This text has the 'FOO' formatting command applied to it.
</FOO>
This text doesn't.

Hypertext
Back to contents

The most fundamental aspect of writing a webpage is creating a Hypertext link. This is done by using the following HTML command
<A HREF="http://URL_NAME.html"> Link text </A>
. This creates a clickable link to URL_NAME. An example :
<A HREF="http://www.panix.com/~elflord/webdesign/test.html">Try this !</A>
Works like this : (TRY IT!!!)
Try this ! Note that we could achieve exactly the same thing with
<A HREF="test.html"> Try this!</A> since the pages are in the same webpage account, on the same webserver and in the same directory. You can use directory paths to reference your pages instead of using the full URL to link to pages within your own site. An example :
<A HREF="directory/test2.html">click here</A>
Which works like this : click here

Another way of creating hypertext links is creating them within a page. To create a hypertext anchor, we use this:
<A NAME="anchor">
and to link to the anchor, you put in something like
<A HREF="#anchor"> go to anchor</A>
<A HREF="#hypertext"> go back to top of hypertext section</A>


And it works like this: (TRY IT!!!)
go to anchor
go back to top of hypertext section
You can also go to an anchor within a page by going
<A HREF="URL_NAME.html#anchor_name">click here</A>
Notation
Back to contents We write the tags in the following format to describe the syntax:
<TAG [ATTRIBUTE a1] [ATTRIBUTE a2] ...
[ATTRIBUTE b1=value] [ATTRIBUTE b2=value2 ...
[ATTRIBUTE c1|ATTRIBUTE c2] [ATTRIBUTE c3|c4] ... >
The square brackets correspond to an optional component of the tag. The words in italics correspond to numbers or options (eg RIGHT or LEFT) and the vertical bar | is a logical or. For example, the above means the tag

  1. Has to include the word 'TAG'
  2. Can optionally include attribute a1
  3. Can optionally include attribute a2
  4. can optionally include attribute b1(b2). Attribute b1(b2) needs to be set to some value, denoted by value1(value2)
  5. Can optionally include attribute c1 or c2 but not both. Same applies for c3 and c4.
Text Formatting and font control
Back to Top
We begin by introducing a way of classifying different markup styles. The two fundamental markup styles are logical and physical. Any form of markup fits into one of those categories.

The philosophy behind logical markup is this: you tell the browser what your text "is", whether it's a heading, subheading, citation, emphasised text or whatever. The browser then lays it out appropraitely. Since the browser ultimately lays out (and hence controls the appearance of) your document, this philosophy is consistent with the design of the HTML language.

With the recent invention of style sheets, one can create user defined styles (that is , add appropriate meanings to the heading level tags among other things) to add more flexibility.

The obvious alternative is physical markup, which involves direct control on the part of the user over the page layout. This is the kind of markup that beginners cling to, as it is the type used in most major word processors, and most users are familiar with it.

So the next question is this: which is better? The short answer is that logical markup is much more powerful, but current implementations of logical markup (other than style sheets) in HTML are not. In paractice, the <STRONG> tag looks just like the <B> tag, so it doesn't make any difference which one you use. Note that style sheets are worth trying, but you risk leaving Netscape 3 users looking at a fairly dull page. Check what browser your visitors use. If they are all using Netscape 4, IE 3 and 4, then you can safely use style sheets.

Styles and logical markup

Back to contents

The Heading-level tags

The `heading' tags are as follows:
<H1>Heading Level 1</H1>

Heading Level 1
<H2>Heading Level 2</H2>

Heading Level 2
<H3>Heading Level 3</H3>

Heading Level 3
<H4>Heading Level 4</H4>

Heading Level 4
<H5>Heading Level 5</H5>
Heading Level 5
<H6>Heading Level 6</H6>
Heading Level 6

This renders as follows:
Other logical markup tags are:

Emphasis

The format for this tag is
<EM>Emphasised Text</EM>
Which looks like this:
Emphasised Text
Note that it is basically italic text.

Strong Emphasis

The format for this tag is
<STRONG>Strong Text</STRONG>
Which looks like this:
Strong Text
It looks a lot like bold face text.

Keyboard

The format for this tag is
<KBD>Keyboard Text</KBD>
Which look like this:
Keyboard Text

Presentation formatting and physical markup

Back to contents There are four basic physical markup tags:
Tag name What it does Example Output
<B> Bold text <B>Bold text</B> Bold Text
<I> Italic text <I>Italic text</I> Italic Text
<TT> Typewriter text <TT>Typewriter text</TT> Typewriter Text
<STRIKE> Strikethrough text <STRIKE>Strikethrough text</STRIKE> Strikethrough Text

The Font Tag

Back to contents

The FONT Command has the following syntax:
<FONT [SIZE=size] [FACE="typeface1, typeface2, ... ] [COLOR="color"] >
Formatted text </FONT>

Some more on attributes of the FONT command :

EXAMPLES of the FONT tag

Input Output
<FONT SIZE=+1>A large font</FONT> A large font
<FONT SIZE=4>Another large font</FONT> Another large font
<FONT SIZE=+3 FACE="Arial, Helvetica" >A Headline Font</FONT> A Headline Font
Text Formatting: Page Layout and Tables
Back to contents

Basic Paragraph Fromatting Tags

Back to contents

The basic Paragraph formatting tags are P (paragraph), CENTER (centered text), BLOCKQUOTE (quoted text), PRE (preformatted text). These deserve to be discussed in a little depth:

Paragraphs The best way to lay out normal paragraphs of text is to use the <P> tag. This begins a paragraph, and puts a blank line between the preceding text. Since this is the tag that is designed for laying out paragraphs, it seems a more elegant solution than trying to achieve the same result by using multiple forced linebreaks. While you are technically supposed to close the tag with a </P> tag, in practice, it rarely matters.

An example of the <P> tag ? well you just saw one there. Let's look at the source:
it rarely matters </P><P> An example of the ...

Centered text Use the CENTER tag to producecenter text. an example:
<CENTER> This is centered text</CENTER> produces this:

This is centered text

The TABLE Tag

Back to contents

Probably the best formatting tool that HTML has to offer (other than style sheets) are tables. Tables are probably the most effective way to control the layout of text on a page. Since tables are not required to have a border, you can use them to simply layout text, a table needn't really "look like" a table. An example of the kind of use a table gets is this: suppose you want right-aligned text in html. How do you do this ? Believe it or not, the way to do it is to usea table. You can also nest tables inside one another and give the cells different colours giving rise to a rich and powerful formatting technique (again probably the only useful page layout tool that will work with older browsers such as Netscape 3). We will talk more about tables in this section.

A simple implementation of the TABLE tag goes like this :
<TABLE >
<TR><!-- TABLE ROW 1-->
<TD> Table cell 1 </TD>
<TD> Table cell 2 </TD>
</TR>
<TR><!-- TABLE ROW 2-->
<TD> Table cell 3 </TD>
<TD> Table cell 4 </TD>
</TR>
</TABLE>

The output from the above commands is as follows :

cell 1cell 2
cell 3cell 4

The <TR> and <TD> tags denote table rows and table cells respectively. These tags have a lot of attributes (like the font tag) but we defer discussion of this to comment on the TABLE tag itself.

Note that the table tag has several optional attributes. The syntax is as follows:
<TABLE [WIDTH=width] [[CELLSPACING=spacing]|[HSPACE=hspace] [VSPACE=vspace]]
[CELLPADDING=padding] [BORDER=borderwidth] [ALIGN=alignment] [BGCOLOR=background-colour] [BACKROUND=image-name ALIGN=Alignment] [BORDERCOLOR=bordercolour|BORDERCOLORDARK|BORDERCOLORLIGHT] >
Note that the BORDERCOLOR, BORDERCOLORDARK and BORDERCOLORLIGHT attributes are only supported by Microsoft Internet Explorer, while the BACKGROUND attribute is only supported by Netscape Navigator 4. Where To illuminate, we offer a few more examples:
<TABLE WIDTH=100% BORDER=3 BGCOLOR="#CCCCCC" CELLPADDING=20 >
<TR><!-- TABLE ROW 1-->
<TD> Table cell 1 </TD>
<TD> Table cell 2 </TD>
</TR>
<TR><!-- TABLE ROW 2-->
<TD> Table cell 3 </TD>
<TD> Table cell 4 </TD>
</TR>
</TABLE>
cell 1cell 2
cell 3cell 4
<TABLE WIDTH=60% ALIGN=LEFT BORDER=3 BGCOLOR="#FFFFFF" BACKGROUND="../gifs/elf.gif" CELLSPACING=30 CELLPADDING=60 BORDERCOLORDARK>
<TR><!-- TABLE ROW 1-->
<TD> Table cell 1 </TD>
<TD> Table cell 2 </TD>
</TR>
<TR><!-- TABLE ROW 2-->
<TD> Table cell 3 </TD>
<TD> Table cell 4 </TD>
</TR>
</TABLE>
cell 1cell 2
cell 3cell 4



Table Rows, Captions, Headers and Cells We now Move on to the details: the syntax for the "inside" of the table. The table row tag has the following syntax:
<TR [ALIGN=LEFT|CENTER|RIGHT] [VALIGN=TOP|BASELINE|BOTTOM] [BGCOLOR="Background colour"] [BACKGROUND="Background Image"] [BORDERCOLOR="Bordercolour"|BORDERCOLORLIGHT|BORDERCOLORDARK] >

This tag is fairly self explanatory since most of the options are from the table tag. The Table cells use the following syntax:

<TD [ALIGN=LEFT|CENTER|RIGHT] [VALIGN=TOP|BASELINE|BOTTOM] [BGCOLOR="Background colour"] [BACKGROUND="Background Image"] [WIDTH=width] [COLSPAN=colspan] [ROWSPAN=rowspan] [NOWRAP] >
Where:

The TH follows exactly the same syntax as the TD tag. TH defines a "header" cell. What this means is that the contents usually appear in bold. It's often used in the first row of a table (when the first row contains 'headings').

The CAPTION tag goes inside a table tag. The syntax is very simple:

<CAPTION ALIGN=TOP|BOTTOM>

Layout With Borderless Tables

Back to contents

Have you ever wondered how you can make right justified text in HTML ? How about multi-column text and images ? These detailed forms of page layout seem impossible in HTML at a first glance. Anyway, to make a long story short, the answer to questions regarding advanced page layout can be summarised in one word: TABLES.

Using tables to lay out multi-column text: You can use a table to lay out multi column text in the following manner:

This is a multi-column table. The purpose of this table is to lay out multi column text, it is not intended to look like a "table" in the normal sense of the word. This enables web authors to use the same kinds of intricate layouts more commonly seen in print media. This is in fact very useful when attempting to do almost anything besides the most rudimentary page layout.
The HTML source looks like this : 

	<TABLE WIDTH=100% BORDER=0 CELLPADDING=5>
	<TR>
	<TD WIDTH=34% VALIGN=TOP>
	This is a multi-column table.
	The purpose of this table is to lay out multi column text,
	it is not intended to look like a "table" in the normal sense of the word.
	</TD>
	<TD WIDTH=33% VALIGN=TOP>
	This enables web authors to use the same kinds of intricate layouts more
	commonly seen in print media.
	
	</TD>
	<TD VALIGN=TOP>
	This is in fact very useful when attempting to do almost anything besides the most
	rudimentary page layout.
	</TD>
	</TR>
	</TABLE>

Note that the cellpadding is a fairly good idea, so that the text from the different columns is spaced widely enough so as not to be too hard on the visitor's eyes. Note also that the text is aligned using VALIGN so that the text starts at the top of the column (Most browsers use LEFT as the default horizontal alignment, and use CENTER as the default vertical alignment )

Another simple example of where tables can be useful is in producing right-aligned text:

This is some right aligned text.
The HTML source goes like this : 
	<TABLE WIDTH=100%><TR><TD ALIGN=RIGHT>

	This is some right aligned text.

	</TD></TR></TABLE>

Nested Tables

Back to contents

One of the nice things you can do with tables is nest them. This means putting one table inside another. Nesting tables turns out to be very useful. You can use one table to break your page into three columns, and put a table in those columns. An example:

One of the nice things you can do with tables is nest them. This means putting one table inside another. Nesting tables turns out to be very useful. You can use one table to break your page into three columns, and put a table in those columns. An example:
Cell 1Cell 2
Cell 3Cell 4
 One of the nice things you can do with tables is nest them. This means putting one table inside another. Nesting tables turns out to be very useful. You can use one table to break your page into three columns, and put a table in those columns. An example:
The HTML looks like this: 

 <HR>
<TABLE WIDTH=100% BORDER=0>
<TR>
<TD>
	One of the nice things you can do with tables is <EM>nest</EM> them. 
	This means putting one table inside another. Nesting tables turns out to be very useful. 
	You can use one table to break your page into three columns, and put a table in those
	columns. An example:
</TD>
<TD WIDTH=30%>	
	<TABLE WIDTH=90% BORDER=3><TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
			 <TR><TD>Cell 3</TD><TD>Cell 4</TD></TR>
	</TABLE>
</TD>
<TD>
	One of the nice things you can do with tables is >EM>nest>/EM> them. 
	This means putting one table inside another. Nesting tables turns out to be very useful. 
	You can use one table to break your page into three columns, and put a table in those
	columns. An example:
</TD>
</TR>
</TABLE>
<HR>

Coloured Tables

Back to contents

Coloured tables are one of the more effective ways to add colour and sparkle to your page without using the more bandwidth-hungry images. In fact go to the homepages of the likes of Sun Microsystems, Microsoft, and Netscape, and you will see that they routinely use such techniques to bring their pages to life. I use this technique liberally too, as it is a low-cost (download-time wise) means of producing a classy looking page.

This is best illustrated with an example. Here is a table

A groovy Coloured table By Lord of the Elves
http://www.panix.com/~elflord
elflord@panix.com
Coloured tables can serve your page in a number of ways. you can use them to draw attention to particular items on the page, or simply to give your page a more lively appearance.

And here is the HTML source for it. 


	<TABLE WIDTH=100% CELLSPACING=0 BORDER=0 CELLPADDING=15>
	<TR>
	<TD ALIGN=LEFT WIDTH=30% BGCOLOR="#000000">
		<FONT COLOR="#33CCFF" SIZE=+3 FACE="Arial, Avant Garde, Helvetica">
 		A groovy Coloured table 
		</FONT>
	</TD>
	<TD ALIGN=RIGHT BGCOLOR="#660000">
		<FONT COLOR="#CCCCCC">
		By Lord of the Elves<BR>
		<I>http://www.panix.com/~elflord</I><BR>
		<I>elflord@panix.com</I>
		</FONT>
	</TD>
	</TR>
	<TR>
	<TD COLSPAN=2 BGCOLOR="#330066">
	<FONT COLOR="#FFFFFF">
	Coloured tables can serve your page in a number of ways. you can use
	them to draw attention to particular items on the page, or simply to 
	give your page a more lively appearance.
	</FONT>
	</TD>
	</TR>
	</TABLE>

A few pointers:

Embedded Graphics
Back to contents

How The Tag Goes

Back to contents

The graphic tag goes as follows:
<IMG SRC="graphic-file" HEIGHT=xxx WIDTH=yyy ALT=" alternating text >
Where graphic file is the location of the image (ie the filename, and the directory name if the image is located in a different directory), HEIGHT and WIDTH specify the HEIGHT and WIDTH in pixels at which the image should be displayed. For example,

<IMG SRC="../gifs/elf.gif" HEIGHT=50 WIDTH=50 ALT="Elf"> Elf
It is very important to include these tags, since HEIGHT and WIDTH enable the browser to "set aside space" for the images on the page, and lay out the page, then down load the text prior to downloading the image. Otherwise, the text often has to "wait for" the image, which from the visitors point of view is annoying. The ALT tag also performs a useful function: it displays text while the image is loaded, so that the visitor has some idea of what image is loading before it has finished loading.

Image Formats

Back to contents For the purpose of designing a web-page, there are really only two different image formats: JPEG (JPG) or GIF. They both have their pros and cons.

Why use JPEG ?

Back to contents

There are essentially two types of images: "logo-type" and "photo-type". "logo-type" images are like logos: not many colours (usually 64 or less), require a high level of definition (for example, text). Photo-type images, on the other hand, usually require a high colour depth. JPEG is suited to photo-type images, while GIF is more suited to logotype images.

The advantage of JPEG is that it produces very well compressed images on the more "photo-oriented" images with lots of colour. The JPG compression algorithm does not rob you of any colour depth (the images have 16 bit or more colour). The compression works by a kind of smootihing. What this means is that a bright, glossy logo will not compress well in JPEG format, but a photograph image will.

Why use GIF ?

Back to contents

GIF produces very good image compression on low colour depth images. GIF will also produce smaller images given a smaller colour palette, since it is an "indexed" format (that is, each pixel is assigned one of a group of available colours) The indexed format is not very suited to handling high colour images. on the other hand, images like logos work much better than GIFS, the smoothing that JPG format puts these images through makes it unsuitable as a way of compressing high contrast images.

Another advantage of the gIF is that it has scope for some further features. For example, one can easily create an animated GIF. Also, GIFS allow for partial transparency, while JPGs dont.

Compression: keeping it small&fast

Back to contents

This section is about how you can minimize the size of an image to make it load faster. As any experienced web surfer can tell you, nothing is more tiresome than waiting seemingly an eternity for some-one's page to load. Pages with large amounts of inline graphics often are a problem here. However, fortunately, JPG uses a very efficient compression algorithm and you can produce very compact images. Same with GIF.

To optimise the size of images, first, remember that making an image smaller, ie scaling it downwards lowers the size fairly quickly. For example , 75x75 takes up about half as much space as 100x100. When using JPEG images, most image editing packages allow you to save the image at a certain quality, and there is a point to which one can usually reduce the "quality" with no visible loss (usually about '80-90%' whatever that means). Wallpaper images usually can take more compression as they are low contrast (hence less data is lost in compression) and the viewer doesn't subject them to the same level of scrutiny.

The trick to optimising GIF sizes is choosing the right amount of colours. The trade-off is such that available colours increase exponentially as a function of image size, so it's often tempting to use high colour depth. Don't do this! If you need your image to have high colour depth, you will usually be better served with a JPEG. As a rule, GIF images may need as few as 8 colours for a logo, or as much as 256 colours for something fancier. I don't recommend using more than 256 colours (it's usually unnecessary).

Design Tips
Back to contents

Saving Bandwidth: How to make a fast page.

Back to contents

At some stage, you have probably run into a website that took forever to download. It is important to remember that your visitors only have a limited supply of patience, and will only wait so long for your page to load. There are many things you can do to make a less bandwidth-hungry site:

  1. Keep your images small! - Too many web designers put 65536 colour GIFS on their websites. Compress the images as much as you can without losing quality. Also, when using JPEGs, play around until you have found the optimal size (ie compressed them as much as possible). Go up the page to compression to read more about this.
  2. Re-use images Yes, re-cycling is a great way to economise. When I say re-use, I don't mean re-use some-one else's images! I mean use the same image several times on your page. The browser only loads it once, whether you use it once or 100 times. So milk that image for all it's worth. Images like buttons, bars and wallpaper can be used several times over. This also makes your site look more consistent. It is tempting to include every single graphic you see on geocities, " 'CoZ it LookZ soooo kEwLLLL ! " but this simply results in a slow site that lacks consistency (and looks like every other page designed by someone who swiped the same images).
  3. Compress the *##@ out of your wallpaper images Remember that the wallpaper has to sit behind the text, not in front of it. Hence it should be very low contrast. Using JPEG format, you can get very good compression on your wallpaper without too much loss of quality (usually wallpaper can be compressed almost twice as much as a regular image.) For the most part, wallpaper should just act as a backdrop for the text, the only possible example being on a page which doesn't have enough text for readability to be a major issue. Flip up the page to compression to read more about this.
  4. Use ALT, HEIGHT and WIDTH tags . THis doesn't make your page download any faster, but certainly creates the illusion that it is. The HEIGHT and WIDTH tags allow the browser to layout the page (make space for the image) before the image is loaded, so that the text loads before the image does. The nice thing about this is that your visitor is not left sitting in front of a blank page. The "ALT" tag displays some text in place of your image before it loads. There are two nice things about this:
    (a) people with text only browsers have some idea as to what is going on and
    (b) Your visitors know what they are waiting for when they see the blank space onto which the image is loading...

Frames: avoiding the pitfalls

Back to contents The two big traps you can get into when using frames are these:
  1. Getting your user caught in nested frames This happens when your user manages to surf around your site and somehow go from one frames page to another, the result being that they are caught in "frames within frames". If this has ever happened to you, you will know what I am talking about and understand how annoying it is.
  2. Making your user a captive within your frames What I am talking about is sites that don't allow the user to escape from frames, and the visitor is stuck in your frames even after they have clicked on links that are supposed to leave your site.

So what can be done about this ? firstly, take care that any external links TARGET attribute. This is implemented as follows:
<A HREF="foo.html" TARGET="_top"> or <A HREF="foo.html" TARGET="_TOP">
The latter opens up the page in a new window. The former opens up the page in the main window and get's rid of the frames.

Building a consistent site

Back to contents

Why build a consistent site ? It makes your site much more browsable and also makes it look much more professional. It is important to both include unifying themes throughout your site and at the same time, include enough distinguishing features that your visitors can tell the difference between pages. Some things that you can do :

  1. Consider using the same template for the heading on each page. For example, for a page heading, I use almost exactly the same layout throughout my entire site: Left aligned image, and right aligned text, with my email underneath it. The fonts for the heading (FACE="Arial, Avant Garde, Helvetica" ) are the same throughout the site as is the font size. Flipping through a site designed like this is like flipping through a book. The pages are laid out in the same manner.
  2. Include the same navigation items throughout your site. For example, my "links collection" includes 10 buttons that are in the same place on every page. So if you flick through that part of the site, it gives the impression that the buttons "aren't moving". This is a nice fature, it's like driving a car: you don't want the steering wheel to move while you are driving.
  3. Use the same fonts and colours consistently. Don't use 20 different fonts on one page. It looks goofy and most users probably don't have all those fonts installed anyway. Also, if you are consistent with your colours, you can very easily change them with a "search-and-replace" command.
  4. Use the same graphics repeatedly. Things like navigation buttons, horizontal bars, etc. Less is more. The fewer different items you use, the more consistent your site looks.
  5. Use your wallpaper to establish a consistent look. Don't use completely different wallpaper on every page. The approaches I've seen so far that are effective are:
    1. Use exactly the same wallpaper for each page.
    2. Use differently coloured versions of the same wallpaper on every page . For example these images are differently coloured versions of the same wallpaper.
    3. Use different wallpaper, but keep the colour consistent. A good example of this is having every page with an almost-white background, and using wallpaper to give a watermark-like appearance.

Minimizing Site Maintenance

Back to contents

Maintaining large websites can be extremely difficult, as HTML is really not that well designed when it comes to tasks such as maintaining large collections of documents. The design seems more geared to single stand-alone documents, which is unfortunate, because it is used for a much larger purpose.

One would hope that a benevolent third party software vendor would produce some tools related to site management, but by and large, the web developement tools on the market place more emphasis on making it easier for clueless people to write webpages, and these packages tend to have limited use for experts. So site management is often left to the webmaster.

There are several points which may be helpful when maintaining large sites.
  1. Keep it consistent! use templates for pages! You should save the templates in files for reference. The kind of things you want to use in templates are ideas such as the HEAD of the page, the BODY tag, and the top of the page .

    For example, I use a table 200 pixels high at the top of every page with the left and right sides left and right aligned respectively. The writing on the right hand side is in "Arial,Avant Garde,Helvetica" Font depending on what fonts the visitor has. The mailto link is just below the heading. 200 pixels down, the text starts. Colours for fonts are applied throughout the site.

    One advantage of consistency is that it makes it easier to do large scale edits on files with (possiby site-wide) search/replace commands. Consistency becomes more and more crucial as the website becomes larger.

  2. Consider learning a little programming I am just talking about fairly simple things here, quick hacks to automate a lot of tasks that would otherwise be very time consuming. A simple 5 line sed script could save hours of work. It is easy to say "replace every instance of 33CCFF with 44CCFF" and indeed, it's very easy to say it to a computer. But to actually do it manually? Over 100 or so html files? OUCH!. If you are feeling brave, it is possibly even worth learning PERL , or if you are using UNIX, awk and sed (which are simpler than per but not as powerful). , so that you can write little scripts to make site-wide changes. Personally, I am in the process of writing site maintenance scripts that update my entire site. Data is read from configuration files, then applied to the entire site (or selected URLs).

  3. Consider Using Style Sheets. Cascading style sheets (CSS) allow you to "store" all of your formatting in a file called a "style sheet". These things are very useful, because all your formatting is stoored in one document as opposed to being stored in 20 different documents. You can change a whole site by editing one document. Cascading style sheets also degrade gracefully, meaning that using them will ensure that your pages are readable in any browser, though the browsers that don't support them will give viewers a fairly plain looking page. See http://www.webdeveloper.com for some links to style sheets pages.
  4. Write clean code Yes, if your code is unreadable , it is very hard to change your page. Some guidelines:
    1. Indent your HTML file. Just like a computer program. The browser basically ignores TABS and linebreaks (it treats them as a space, and doesn't print more than one consecutive space unless you use the &nbsp; command.
    2. "Optimise" your code. Don't use 3 tags when one does the same thing. For example, this
      <FONT SIZE=+3><FONT FACE="Arial"> is much less readable than <FONT SIZE=+3 FACE="Arial"> and when you write like this, you are less likely to make the mistake of losing track of how many nested font tags you have used. By and large, nested font tags are a bad idea, because they make your code hard to read.
    3. Beware of WYSIWYG (what you see is what you get) HTML editors. A lot of them produce unreadable code (especially Netscape composer). When you use them, procede with some caution.
    4. Always write your tags in capital letters. This makes your HTML easier to read and also can simplify large scale search and replace operations.

  5. Be judicious in your use of WYSIWYG HTML editors They might seem like a tempting shortcut and a good way to get off to a quick start, but too many of them generate unreadable code. You need your code to be readable for purposes such as making large scale changes to files, inserting Java applets and writing Java scripts.

    Some WYSIWYG tools (such as Microsoft's Visual interdev and Net Objects Fusion) are actually vary useful, and include site management tools that make maintenance much easier if you use them sensibly. On the other hand, some of the cheaper tools , such as Netscape composer , do little more than spew out unreadable code, making life very difficult in the long term.

  6. Site management software tools are pretty cool! Tools like link checkers, etc, can be big time savers. These tools are well worth having
Appendix
Back to contents

Colors

Back to contents

Additive versus subtractive mixing

We commence with a brief discussion of RGB colours. No doubt you are familiar with mixing paint to obtain colors. Red and Blue make purple, Red and Yellow make orange. Red, Yellow, and Blue are the primary colors. This mixing is called subtractive mixing Each time you add more pigment to the mix, you are "blocking out" more light with the pigment (or more correctly, the more dense the pigment, the more light is absorbed and the less is reflected.) On the other hand, you are using a different process when mixing colors on the screen of the monitor. Colors mix differently when you add them. The following results are obtained:

How color mixing works

Back to contents
GreenBlue
Red Yellow/OrangePurple
Green   Aqua
So in additive mixing, red and green make either yellow or orange depending on the ratio. More red means closer to orange.

A brief intro to hexadecimal numbers

The Hexadecimal number system is one where 16 different digits (as opposed to 10 in the decimal number system) are used. The digits are, in increasing order of size:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
So the number "F" in hexadecimal is the same as the number "15" in the decimal number system.
For most purposes, you will just need to remember 6 hexadecimal numbers, in increasing order:
00,33,66,99,CC,FF
Since distinctions finer than this will only show on 16 bit color displays.
NOw colours are represented as 6 digit hexadecimal numbers. For example,
<FONT COLOR="#33FFCC">
Uses the number 33CCFF. The 33 is the amount of red, the second two digits (CC in this example ) represent the amount of green, and the last two digits represent the amount of blue.
The color looks like this. This is because the color is made up mostly of blue, which tends to dominate the (relatively large) amount of green.

Examples

000000 000066 0000CC
006600 006666 0066CC
00CC00 00CC66 00CCCC
660000 660066 6600CC
666600 666666 6666CC
66CC00 66CC66 66CCCC
CC0000 CC0066 CC00CC
CC6600 CC6666 CC66CC
CCCC00 CCCC66 CCCCCC
Back to contents

A Manifesto: The pitfalls of Physical Markup

Back to contents

Physical markup is at a first glance a very attractive approach to web design, especially with the recent arrival of several "WYSIWYG" (What you see is what you get) html editors. Unfortunately, In HTML, what you get may not be the same as what your viewers get. Unfortuantely, it is fallacious to assume that you can control the way a browser lays out text and graphics to the extent that you can control the layout of a printed document. There are several variables to contend with: browser window size, display size, colours available to the user, the type of browser (not all browsers can display different fonts), the fonts installed on the users system. Every browser , every screen, every video card and every operating system does it differently, and to aim to control too precisely the rendering itself is a futile task. What is more profitable is to write HTML that will allow the browser to render it nicely in its own way.

However, all that said, While it's more `philosophically' correct to use the logical markup tags, in practice, these tags are the same as their physical equivalents, eg
<B> = <STRONG>
This is because something as simple as asking for a bold font is fairly safe though, as all browsers support this. Asking for the "Matura MT Script Capitals" font is a more ambitious (possibly even unreasonable) request though.
However, the Heading tags are highly recommended. It is probably better in this era of HTML to use logical markup in general as it will be easier to move up to style sheets when you are ready to do so. This in itself probably makes the other logical markup tags a littl more worthwhile than the physical alternatives. But for now, other than the heading level tags, the logical commands in HTML aren't powerful enough to be very useful.
Of all the physical markup tags, the <FONT> tag is the most widely depployed and indeed the most useful. However, it is important to use it judiciously. as it is also among the most widely abused tags. The FONT command has some potential pitfalls. Common errors that beginners make include making silly assumptions about the fonts the target audience have available, and using several different fonts through a document with the result that consistency is lost.

Another intrinsic flaw with this tag that is almost unavoidable is that the tag greatly adds to site maintenance by making sure that you need to make several (maybe hundreds or thousands) of edits to change the look of a large to medium sized website. Technically speaking, a far superior alternative to using the <FONT> tag is by using "style sheets". What Style sheets are is a way of enabling you to just use the standard heading (<H1> , <H2>, etc) tags, and include a file (the 'style sheet') that effectively defines these tags. The nice thing about this is that you can change your page by editing one line of one file, rather than making what could be thousands of edits across hundreds of files. Unfortunately, Netscape 3 doesn't support style sheets. So webmasters wishing to include good Netscape 3 support are forced to commit a minor design flaw by resorting to the old <FONT> tag. Such is life.