Elflord's Web Design Tutorial
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:
So How Do I Write A WebPage ??
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.
I guess you're obviously interested in this topic if you even bothered to look at this page.
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
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+X $HOME
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 :
chmod -R a+r $HOME/public_html
Hello. This is my homepage. I hope you enjoy your visit. Please come again.
This is actually a pretty simple looking page. It looks like this :
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 ,
This text has the 'FOO' formatting command applied to it.
This text doesn't.
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:
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>
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
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
<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
|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 Command has the following syntax:
<FONT [SIZE=size] [FACE="typeface1, typeface2, ... ] [COLOR="color"] >
Formatted text </FONT>
|<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|
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:
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 :
The output from the above commands is as follows :
|cell 1||cell 2|
|cell 3||cell 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]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
[CELLPADDING=padding] [BORDER=borderwidth] [ALIGN=alignment] [BGCOLOR=background-colour] [BACKROUND=image-name ALIGN=Alignment]
|cell 1||cell 2|
|cell 3||cell 4|
|cell 1||cell 2|
|cell 3||cell 4|
<TR [ALIGN=LEFT|CENTER|RIGHT] [VALIGN=TOP|BASELINE|BOTTOM] [BGCOLOR="Background colour"] [BACKGROUND="Background Image"]
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:
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.|
<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.|
<TABLE WIDTH=100%><TR><TD ALIGN=RIGHT> This is some right aligned text. </TD></TR></TABLE>
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:||
|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:|
<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 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
|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>firstname.lastname@example.org</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:
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">|
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.
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.
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
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:
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 :
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.
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.
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.
|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.|
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.