DESIGNING YOUR OWN WEBSITE

Vicky Vickers

PART TWO: BASIC HTML
HTML stands for Hypertext Markup Language. This is quite an intuitive language, fairly easy use, once you get the hang of it, sort of like the Macintosh. Basically, its works like very early word processors did. For example if I wanted to make my name bold on a webpage, I would type it as <B>Vicky</B>. Note that these tags have an open command <B> and a close command</B>. Note: the / (backwards slash) is what makes it a close tag. When viewed in Netscape, the <B></B> tags would not be visible, but my name would be in bold typeface like this: Vicky.

Web pages start with <HTML> and end with </HTML>. There are two major sections of a web page, the head and body. The tags for the head are, guess what, <HEAD> and </HEAD>. Several functions can be programmed to occur in the head, but the one we are interested in is the title. The title appears in the title bar of the web browser and the tags are again simple, <TITLE> and </TITLE>. Note: if you don't put in a title, then the browser will use the name of the document as the default title. I think you'll agree that "Homepage.html" isn't too exciting as a title.

For example purposes, lets go with a great generic name and call the person designing the webpage "John Smith", who, being rather an egomaniac is writing a homepage on his life story.

So lets see what we have so far. The document would now look like this:

<HTML><HEAD><TITLE>Life Story</TITLE></HEAD>

(Body will go here)

</HTML>

As you can see, tags can be placed within other tags (this is called nesting)

So on to the meat of the page, the body. Guess what the tags are for this part? Right, they are <BODY> and </BODY>. All the information and images on a webpage goes between these two tags. Note: there is some advanced webpage programming that doesn't follow this rule, but we will be not going into that.

The first item John will want on his homepage is a title, something like "John Smith's Life Story". Now, naturally, he will want this title to show up prominently. To do this, he can use the headings tags which produce bold face type in six different sizes, H1 being the largest: <H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5> and <H6></H6>. Now as John Smith has a big ego, he decides to use H1 and the document now looks as follows:

<HTML><HEAD><TITLE>Life Story</TITLE></HEAD>
<BODY>
<H1>John Smith's Life Story </H1>
</BODY></HTML>

In a web browser it would look like this:

John Smith's Life Story

Or he could use two different heading sizes so his name stands out more:

<H1>John Smith</H1>
<H2>Life Story</H2>

In a web browser it would look like this:

John Smith

Life Story

Acknowledgements
This article was first published in the April 1996 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line" and in the Summer 1996 issue of the Web Enthusiasts Association of Victoria's quarterly on-line newsletter.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index

Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)