Making Your Own Web Page

A Guide to Effective Web Page Construction

by Ray Girling

This page has resulted from a number of Frequently Asked Questions (FAQs) that I receive in the course of designing and managing Web Sites. It is not intended to be a sole source of information, or the definitive article on the subject, but I hope it will encourage you to carry out further research, further reading, or further development of existing pages.

Some initial "Aims and Objectives" may give you a clearer picture in what I hope to provide. You can work through the page a section at a time, or jump to where you like by using the links in this list:

How Pages Work

Web Pages use HyperText Mark-up Language, or HTML, as their initial programming code. You will have seen hypertext before - probably without realising it - as it is a very commonly-used method of navigating around large amounts of text. The majority of Microsoft Windows™ "Help" pages, together with a variety of commercial programs, use hypertext, with "links" that stand out like this from the remainder of the text. Clicking on the link - using your mouse - takes you to another related area, or to a different page, or performs a function for you.

This is what hypertext does and to do it in a Web Page, it must receive its instructions in HTML code. Web pages reside on a server - a large-capacity computer that stores data for use by more than one other computer - and this server will either belong to your Internet Service Provider (ISP), such as "AoL" or "MSN," or it will belong to another organisation which provides page space, such as "Yahoo." In order to make your page accessible to others, it must also reside on such a server, so it needs to be "sent up" to the server (uploaded) and this is done by a File Transfer Protocol (FTP) program. There are a number of these FTP programs, mostly available for free download. I have provided a downloading link for you, within the "Resources" section, at the foot of the page.

Whilst you can construct a perfectly adequate page using just "Windows Notepad" or your word-processing software, by far the best way is to use a program designed for the task. Such programs are often known generically as "Web Editors" and their speciality is that they produce HTML in an instantly-usable form, without any of the (often hidden and unwanted) characters that some word-processing programs insert without your knowledge. These editors can be found free on Computer Magazine Cover Disks, or can be downloaded from the Web. I have provided a downloading link for you, within the "Resources" section, later in the page.

It would be a good idea to obtain such a Web Editor before attempting to write any code, as trying to do the job in a word-processor can be extremely frustrating, unless it can "Save As HTML," although this option is not always without problems. Web Editors allow you to configure your browser for viewing your efforts as you go, which is, by far, the best route to take. However, if you must use Microsoft Word™ and you are running Microsoft Office™, make sure that you download the Office HTML Filter, which strips out unwanted characters and renders the code quite a bit smaller in the process.

A word of caution regarding "graphical" Web Editors, such as Microsoft's FrontPage™. This sort of program allows users to build their page by dragging and dropping text, graphics, links, etc., which - at first glance - sounds fine. There is a problem, however, in that such programs may require specific extensions to be available on the server on which the finished files will reside. If you do not know in advance whether your ISP's server supports these extensions, you could produce a really good-looking page, only to find that your server won't run it!

Web Page files are saved with the extension ".htm" although some ISPs require the file extension to read ".html" - this needs sorting out prior to uploading. Your "Home Page" - the one which displays first, if you have more than one - must be called exactly what your ISP decrees that it must. Some require it to be called "index.htm", others want "index.html", others still want "home.htm". The point is, whatever the ISP wants must be complied with, in order to make the page work. All other pages that work with, or which you intend to link to, your Home Page, can be called whatever you like (provided that the file extension is ".htm" or ".html"), but the first page name is critical. If you've saved your efforts as something else, you can always rename it, using normal computer file handling conventions, but it is as well to know the ISP requirements before going too far. Be sure to create a separate directory (or "Folder") on your hard drive, in which to store your Web Page files. They will mount up, so it is best to know exactly where they all are, right from the beginning!

An Introduction to Page Design Considerations

Before beginning to write your code, you need to be able to visualise what it is that you want your page to do, say and be capable of. Simply put, what should it look like (background color, overall layout, text size and placement, pictures, etc.), what content will be included and what functions will you have available (direct e-mail link, jump to another part of the page/to another page, link to other page[s], include a link to your own page, visitor counter, etc.)? Some frequently-asked questions include:

Can I have a colorful background?

Yes, you can - but remember that your text needs to be able to be read easily in front of it! The background to this page says "HTML" but it does not intrude enough to interfere with reading this text. White text on a dark background may appear attractive at first glance, but - unless your visitor has their browser set up to print all text as black - then it will not be capable of being printed out on their printer. Page backgrounds do NOT print unless you specifically set your browser (think of the ink involved!), so if the text is formatted as white, then a conventionally-set browser will not be able to make it print (can your printer print white?). As a direct result of this, I have my browser set to print all text as black. Links still appear in color, by the way, so this is a good way to configure your browser, as it takes account of those page authors who have not considered this point, or simply do not know about it.

Can I have a variety of fonts?

Yes, you can if you wish, but remember the principles of good book design is not to have too many fonts! Usually, one font is used for the main part of the content (known as "Body Text"), with another font used for headings and sub-headings. This is the case with most Web Pages, using existing default settings in the code (see "Headings" later). We will keep things relatively simple, ensuring that your text can be seen by everyone who visits it, not just those with the very latest browsers.

Can I use pictures and animations?

Yes, you most certainly can. The balance that you need to strike with pictures (image files) is dependent upon a simple fact - the more complex or large in size the picture is, the longer it will take to arrive (download to) your visitor's computer. Some visitors may be prepared to wait for a picture to arrive, some will simply give up and move on. I'm sure you have found how frustrating it can be when waiting for some pages to load. Some of that is caused by the amount of people using the Web (known as "traffic"), over which you have no control. However, some loading time can be reduced by careful design and the smaller your image files are, the more swiftly your page will download to your visitor's browser.

Once these design considerations are taken into account, have a look around a few pages that you like and ask yourself: "What is it that makes this page appealing or attractive?" I expect that you will find that - in the main - it is the written content that is the most interesting part, everything else being secondary. Frankly, if it is only the whizzy graphics or animations that appeal, then that appeal will soon dwindle. Written content is the basis of most good pages, the only extra gizmo required is a way to help the visitor to access it all, or navigate around it.

This can be accomplished in several ways, but the most common are:

  • Using a "Jump" to another part of the same page
  • Using a "Link" to another page in your site
  • Using a "Link" to another page in another site

Other features, such as the use of scripts written in Java, ActiveX controls, or CGI (Common Gateway Interface) scripts, are becoming quite commonplace, but they will not feature in this basic overview. See the "Resources" section later in this page for details of further information about these topics.

Basic Placement of Text and Graphics

Now we will start to use some HTML code. You can have a peek at some first, if you like. Go to the "View" menu, then click on "Document Source" (Netscape), "Page Source" (Firefox) or "Source" (Microsoft Internet Explorer), to see the code in another window. Close the new window when you have finished to return here.

As you will see, HTML language consists of pairs of "lesser than" ( < ) and "greater than" ( > ) brackets, which enclose the code, in order to separate it (mark it up) from the text that is to appear on the page. Code enclosed in brackets in this way is known as a "Tag." When you examine the structure more closely, you will see that most tags are repeated, that is to say they are used in pairs, but that the second instance of the tag is preceded by a forward slash ( / ). For example:

<TITLE>Making You Own Web Page</TITLE>
What is happening here is that the first tag <TITLE> acts like an "On" switch, instructing the code to begin working. The tag's pair, the one preceded by the forward slash, </TITLE> acts as the "Off" switch, instructing the code to stop working at that point. Everything that appears between the pair of tags is affected by the instruction that the particular tag is giving.

If you wanted to make a word stand out by emboldening it and in the sentence: "What I would really like to do is ... " you want to make the word "really" appear as bold text, then you need to enclose that word between a pair of "bold" tags. The pair of tags that does this is: <B></B> (you can use: <b></b> as they are not case-sensitive, but I will use Upper Case throughout this tutorial, for ease of reading). So, the encoded sentence would read:

"What I would <B>really</B> like to do is ... " and it would appear as: "What I would really like to do is ... "

The same applies to italicising the text, using <I> to start, with </I> to close. The tags can be used in combination, just as in word-processing, thus: "What I would <B><I>really</I></B> like to do is ... " In this example, the word "really" would be emboldened AND italicised, appearing as: "What I would really like to do is ... "

That is the basis of all common HTML code structure, so all you need now is a reference of the available tags, together with a description of what they do! Whilst this is true, perhaps you would like a little more explanation? Yes, I thought so. Read on!

OK, bearing in mind that tags work in pairs (with a few exceptions), it is as well to realise that every Web Page must start with the tag <HTML> and end with </HTML> Without these opening and closing tags, the server will not recognise the source code as a Web Page and the page will not work. Usually, following the <HTML> tag is the <HEAD> tag, which can contain information about a style to be used, the keywords to be used when registering for search engines and the page title (shown in the title bar at the top of the browser - not on the page itself). Of these, only the page title is required.

We will now move on to the <BODY> tag, within which most of your page code will be written and contained. This has a closing pair of </BODY> which you will find at the foot of most pages, just before the closing </HTML> tag. All the text (known as "Body Text") that you want displayed is typed (or pasted in) between the <BODY></BODY> tag pair.

In order to control the color of your page, the color of the text (if not black) and the color of links, you need to use an attribute to the <BODY> tag, but you will also need to refer to colors by their hexadecimal value to be sure all browsers can display them. This is a six-figure number, made up of three pairs of numbers and/or letters that represent the red, green and blue values of the color. For example, the hex value for white is "FFFFFF", whereas black is "000000" (An easy-to-refer-to color chart is available to download and print. I wouldn't be without it - see the "Resources" section for details). Color values are always shown as: "#value", so black would be shown as: "#000000". You must be particular about using brackets, forward slashes and pairs of quotation marks - leave just one out and it will be difficult to spot later, but the rest of the page will not be as you want or expect it to be, because the code is incomplete.

The color-setting tag can contain more than just the background color value. To set this and the colors for text, links, visited links and active links, you would use this format:

<BODY BGCOLOR="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">

where "vlink" is a visited link, "alink" is an active link and "xxxxxx" is the six-figure color code. Whatever you do, don't make the text the same color as the background, or the links the same color as the text! As a suggestion, try this combination:

<BODY BGCOLOR="#CCCCFF" text="#0000FF" link="#008800" vlink="#CC33FF" alink="#FF0000">
which will give a light blue background, dark blue text, green links, purple visited links and red active links, as shown below:


This is the text color
This is the color of a link
This is the color of a visited link
This is the color of an active link
You may have noticed that this color-setting tag appears to have no "closing" tag pair. In fact, because the settings are attributes of the <BODY> tag, it is closed by the </BODY> tag as mentioned earlier. By the way, don't worry if the code you write is too long to fit onto one line. Even if it continues onto the next line in your editor, it will still work perfectly well, as Web Editors (and HTML code) do not recognise line feeds (carriage returns).

To have a background made up of a picture (image file), you need to use a different attribute with the <BODY> tag. This is written as:

<BODY BACKGROUND="bg.gif" text="#0000FF" link="#008800" vlink="#CC33FF" alink="#FF0000">

where "bg.gif" is the image file to be used for the background. This page has a background image file, called "htm_bck.gif" which is only 416 bytes in size. It is a two-colour image of a light-blue "HTML" on a slightly darker blue background. The image was created with no defined border, so it just repeats all the way across and down the screen. I had to experiment with the color contrast that I used, as I didn't want the letters to become too bold, or too bright, because that would have made this text so much more difficult to read. The image files you use will also be stored on the server that hosts your page, so that they can be called into use when required. We will look at image files again later on.

A frequently-used tag for placing both text and images is the <DIV ALIGN="CENTER"> tag. This must be paired with its "closing" tag: </DIV>, otherwise everything following the <DIV ALIGN="CENTER"> tag will be centralised! If you were to write:

<DIV ALIGN="CENTER"><B>This text is in the middle!</B></DIV>

then the result will look like this:
This text is in the middle!

Headings are produced by using the <H#> tag, where # is a number from 1 to 6, which dictates the size of the heading. The convention here is that the larger the number, the smaller the heading, as will be seen below. The <H#> tag must be closed with </H#>, using the same number as its opening tag. The code, then the sizes, look like this:

<H1>Header, Size One</H1>
<H2>Header, Size Two</H2>
<H3>Header, Size Three</H3>
<H4>Header, Size Four</H4>
<H5>Header, Size Five</H5>
<H6>Header, Size Six</H6>

Header, Size One

Header, Size Two

Header, Size Three

Header, Size Four

Header, Size Five
Header, Size Six
These tags can be combined with font color tags <FONT COLOR="#xxxxxx"> to control the header text color. Don't forget to close text font color tags with their closing pair of: </FONT> When you combine tags, this is referred to as "nesting" because you are placing tags within other tags. To be strictly correct, you should "mirror" this nesting, or - in other words - when a pair of tags is "nested" within another pair, the closing order should follow the nesting. So, looking again at the bold italicised text example, used earlier:

"What I would <B><I>really</I></B> like to do is ... you will see the order of tags is that they are in nested pairs:

<B> then <I> then </I> then </B>

and not

<B> then <I> then </B> then </I>.

Another well-used and very simple tag is the <HR> tag. This represents a line (Horizontal Rule) across the page and is another tag that needs no "closing" pair. Inserting a simple <HR> tag gives, by default, a full-width, thin and shaded line, like this:


You can add other attributes to this tag, giving more control over the size, shape and appearance of the line, or rule. Here are some examples, with the resulting line shown beneath each one:

You can use a percentage value for the line, which takes account of differing screen resolutions, so it is a very useful attribute. A "50%" line will fill half of the computer screen, no matter how big, or how small the screen is, or at what resolution it is viewed. If you were to write:

<HR WIDTH="50%"> this would result:


<HR WIDTH="75%"> produces this:
Whereas, if you combine this with the "ALIGN" attribute, as follows:

<HR WIDTH="75%" ALIGN="LEFT"> this would happen:


so you can guess that this:

<HR WIDTH="75%" ALIGN="RIGHT"> produces this:


Now we'll add in the "SIZE" attribute, which alters the line thickness. If you were to write:

<HR WIDTH="75%" SIZE="5"> that would produce this:


which looks wrong, because we haven't "turned off" the default shading. This is done by writing:

<HR WIDTH="75%" SIZE="5" NOSHADE> and the result is:


<HR WIDTH="75%" SIZE="10" NOSHADE> gives:

In case you're wondering, if you see a line that changes color like this:

colorlin.gif, 7.6Kb

then it's not really a "line" at all - it's an image file! (This one is called "colorlin.gif" and is 7.58Kb in size)

Let's move on now to Lists. Many pages use them, so we will look at "bullet" lists and "numbered" lists as the most popular types. A bullet list is one where no item in the list is more important than any other item, or there is no implied or intended priority. The list is, therefore, an Unordered List, so the tag we need is <UL>, but there's slightly more to it than that, because once you've "switched the tag on," you need to identify each of the lines of the list (List Items) with <LI> (no closing tag for list items), before closing the list with the </UL> tag. I know it sounds complicated, but let's see it in writing:

<UL>
<LI> List Item One
<LI> List Item Two
<LI> List Item Three
<LI> List Item Four
</UL>

Here is the result:

  • List Item One
  • List Item Two
  • List Item Three
  • List Item Four
The numbered list is one where there is a very definite priority, indicated by numbers. This is, therefore, an Ordered List, so the tag we need is <OL>, which still uses the <LI> tag to indicate the list items. The code is:

<OL>
<LI> List Item
<LI> List Item
<LI> List Item
<LI> List Item
</OL>

Here is the result. The numbers are inserted automatically, there is no need to type them:

  1. List Item
  2. List Item
  3. List Item
  4. List Item
But what if your numbered list needs to continue at the next number after an intervening paragraph of text? As this is quite a frequent occurrence, I'll show you how to do that, using an eight-item list, split in half by an intervening paragraph. The list starts in the same way as described above and it is closed in the same way too. Type your paragraph of text, then instruct the ordered list to begin at the number you need, by using the following code:

<OL start="5">
<LI> List Item
<LI> List Item
<LI> List Item
<LI> List Item
</OL>

Here is the result. Again, the numbers are generated automatically, once the starting number is selected.

  1. List Item
  2. List Item
  3. List Item
  4. List Item
You can use letters of the alphabet instead of numbers if you wish. It needs an attribute to the <OL> tag, stating the type of letter required. Upper-case letter gives upper-case letters in the list. Lower-case letter in the tag attribute, lower-case letters in the list. Here's the examples, first with upper-case:

<OL TYPE="A">
<LI> List Item
<LI> List Item
<LI> List Item
<LI> List Item
</OL>

Here is the result. The letters are inserted automatically, there is no need to type them:

  1. List Item
  2. List Item
  3. List Item
  4. List Item
Now for lower-case:

<OL TYPE="a">
<LI> List Item
<LI> List Item
<LI> List Item
<LI> List Item
</OL>

Here is the result:

  1. List Item
  2. List Item
  3. List Item
  4. List Item
But what if your alphabetically-ordered list needs to continue at the next letter after an intervening paragraph of text? The method is similar to the numbered example above. The list starts in the same way as described above and it is closed in the same way too. Type your paragraph of text, then instruct the second part of the alphabetically-ordered list to begin at the number in the alphabet of the letter you need (so to start at "e" - which is the fifth letter of the alphabet - you would need to use "5"), by using the following code:

<OL TYPE="a" start="5">
<LI> List Item
<LI> List Item
<LI> List Item
<LI> List Item
</OL>

Here is the result:

  1. List Item
  2. List Item
  3. List Item
  4. List Item
Web browsers are not word-processors and they do not recognise conventional word-processing commands for layout, such as a "carriage return" or "hard break", nor do they take notice of inserted tabs or line feeds. If you prepare text in a word-processor, then copy and paste it into a Web Editor, all of your formatting will be ignored, UNLESS you use the tag for pre-formatted text, which is <PRE>. This uses a closing pair of </PRE> at the end of the inserted text. The drawback with this tag is that it will display the text it encloses in fixed-pitch font (looking like a typewriter), which is a little off-putting nowadays! You may get some strange results using this tag, especially with screen width, where some text disappears off to the right, requiring the screen to be scrolled. I cannot recommend using it, except for weird text layout, like this example:
COME
	DOWN
		AND
			SEE
				ME
					SOME
						TIME
So, how do we separate paragraphs, or force a line feed, as we will surely want to? It's amazingly simple! To force a new paragraph, use the <P> tag. To force a new line, use the <BR> tag. Neither need a closing pair. Incidentally, the <P> tag is equal to two <BR> tags. This is useful if you want a space of 1½ paragraph breaks. You can either use <P><BR> or <BR><BR><BR>

Let's look now at placing images into your page. First, a word or two about image file formats. The two most commonly used image file formats in Web Pages are GIFs and JPEGs. "GIF" stands for Graphics Interchange Format, a graphics file format developed by Unisys. The GIF format offers high-quality bitmap images with good compression, but limited to 256 colors per image. GIF files can be identified by the extension ".gif"

"JPEG" is a graphics file format created by the Joint Photographic Experts Group, after which it is named. The JPEG format produces high-quality, but highly-compressed image files. Filenames that have the extension ".jpg" are JPEG files.

I have already mentioned that you need to balance ease of loading against image file size, so the two formats mentioned here are favoured because of their ability to pack a large amount of information (on how a picture is made up) into a comparatively small size. But what if the image you want to use is not in either of these formats? All is not lost, especially if you have a program such as "Irfan View" noted for its ability to save image files in many different formats. It easily handles all sorts of images, saving them as ".gif" or ".jpg" on demand. Further details will be found in the "Resources" section, later in the page.

One important point, easily overlooked! ALL file names involved in the make-up of a Web Page MUST be completely lower-case, as the servers will not handle UPPER CASE FILENAMES, nor Title Case Filenames. Beware of the Windows™ quirk of capitalizing filenames, particularly after a "restore" operation (when putting back data onto your hard drive that was stored on floppy disks, tape drives, or CD ROMs). Be ABSOLUTELY CERTAIN that the files you send to your Web server are completely lower case, or else be certain that the FTP utility or program you use converts them to lowercase when uploading. This will be covered in detail within the "Uploading Your Web Page Files" section, later in the page.

Right, let's get on with loading an image file into our page! To start, copy the image file into the directory where your page file is saved. Don't "move" it there, always retain the original safely in its original directory (or "Folder"). Now you're ready to insert it.

The tag you need to identify the Image Source is the <IMG SRC> tag. It does not need a closing pair. The format of the tag is very much the same as for color, in that the image file must be contained within pairs of quote marks, after an equals sign, thus:

<IMG SRC="co_email.gif">

This will insert a small (3.49Kb) picture for use as an E-Mail Link (we will use it again later). It looks like this:

co_email.gif,3.5Kb

It will, by default, appear on the left of your page, but we can move it to the center by combining the <DIV ALIGN="CENTER"> tag like this:

<DIV ALIGN="CENTER"><IMG SRC="co_email.gif"></DIV>

This is what is then produced:
co_email.gif, 3.5Kb
Don't forget to insert <P> or <BR> tags to give space before and after the image! Note that you only need ONE copy of the image file in your directory, to produce any number of copies of it on your page.

Pass your mouse pointer from side to side over either of the images a couple of times. You will not see any change of shape in the pointer as you do so, nor will anything happen when you left-click on it, because - at the moment - it is not a "link" of any type (Remember this lack of pointer change for later, when we introduce the image file again, this time as a link). Incidentally, if you right-click your pointer on the image, you will see a fly-out menu that gives you the option to "Save Image As... " That is all it takes to save images onto your computer from the Web, but be sure that they are provided for that purpose, or that you have permission to do so. There are any number of sites from which you can freely download image files and these are shown in the "Resources" section, later in the page.

Now we will create a "Jump" - this is a link that your visitor can click on and which will then take them to another part of your page. You will be familiar with these, I am sure. A common example is "Return to the Top of the Page" To achieve this, we will make our first link, combining it with the <DIV ALIGN="CENTER"> tags, to place it centrally in the page. Here's how it works:

Firstly, you need to identify a "target" for your link to jump to. The link then becomes the point where you jump from. Using the "Return to the Top of the Page" example, we must insert a target at the top of the page, using the <A NAME=""> tag. The "A" is for "Anchor" which the attribute "NAME" allows to become a target for a link. The tag is closed by </A>. We will call the target "top" just to be original! This can be inserted at the top of the <BODY> section of the page and it is written like this:

<A NAME="top"></A>
Once this is in place, we can now construct the jump to it. Whilst HTML code generally is not case-sensitive, links and targets are and must match. So, if your target is "top" then the reference to it must also be "top" and not "Top" or "TOP." The jump uses the "HREF=" attribute to the anchor tag <A HREF=""> Because it is an attribute of the anchor tag, the closing pair is also </A> To make a jump to our target, we will write:

<DIV ALIGN="CENTER"><A HREF="#top"><B>Return to the Top of the Page</B></A></DIV>

You will notice that the text "Return to the Top of the Page" is between the tag and its closing pair, so that this text, which I have also emboldened by nesting the <B></B> pair around it, will become the link, showing in whatever color is set for links to display and will work when anyone clicks on it. Now that you have seen the code, below you will find the actual, working link. Before you click on it, move your mouse pointer over the link, noting how the pointer changes shape to a small hand with a pointing finger. This signifies a link, useful for discovering whether a picture on a page is also a link (remember, the one earlier did NOT cause a cursor shape change?). Look in the bottom left-hand corner of your screen and you will see the address of the link showing in the status bar of your browser (if you have it configured) when your mouse pointer passes over it. Let me remind you that clicking on the link will take you to the top of this page, so you will have to get back here by scrolling, dragging the scroll slider, or clicking on your browser's "Back" button. Go on, then - click the link!

Welcome back! Now that you have seen the basic linking tag in use, we can progress to some other attributes. You can create an e-mail link by adding the "mailto:" attribute, either with a plain text link, or with an image file as the link. Let's tackle the plain text link first.

As before, the text that is to be used as the link must be placed between the tag pair. We will use the example "Click here to send e-mail" BUT we will only make the word "here" the actual link. Therefore, ONLY the word "here" must be between the tag pair, so what about the rest of the text in the example? Here's how it's done:

Click <A HREF="mailto:mymail@email.com">here</A> to send e-mail.

This code will produce this result:
Click here to send e-mail.
Although it is centered on the page, I did this to make it easier for you to read. It is quite simple to make the link part of a sentence, such as "I would be pleased to hear your opinions on this, so just click here to send e-mail." and you will see that both links are "live" by passing your mouse pointer over them. Watch the status bar to see the e-mail address shown as the pointer hits the link. Of course, there is no such e-mail address, but your page will not know that! The point is, even if the link is not capable of being connected to, it will appear as a "live" link because of the code, not because of the address!

The next step is to use an image file as the link. Remember the image file of the earlier example, "co_email.gif" that we used earlier in the page? Now we're going to call on it again, in the center of our page, this time as a "live" link. This is achieved by writing the following code:

<DIV ALIGN="CENTER"><A HREF="mailto:mymail@email.com">
<IMG SRC="co_email.gif" ALT="Click to send email" border="0"></A></DIV>
You will see that, this time, it is the image file that is between the tag pair, so that the image itself forms the link. You'll also notice that I've added another couple of attributes, the "ALT=" which is good practice and good manners when using graphics, as it assists those with text-only browsers to know that an image was intended at that point, as well as aiding those with impaired vision who are using text recognition programs. Also, the border="0" attribute prevents the graphic from being outlined by a link-colored border. Try it with and without this addition - then you'll see what I mean. Hold your mouse pointer still over the graphic - modern browsers will display the file name (or anything else you type as the "ALT=" attribute) in the same way that tool tips are displayed in other programs.

Here it is - try the mouse pointer and watch the status line again.

Click to send email

In today's climate of unsolicited e-mail ("spam"), you may wish to adopt another approach, to prevent your e-mail address from being "harvested" by programmes (known as "spiders" or "web crawlers") that report every e-mail address they find. These programmes are used by spammers to send unsolicited e-mail to you, so the only way to prevent them from harvesting your e-mail address is not to have it on your page in a form that it can recognise. Most harvesters are looking for the "@" sign, included in all e-mail addresses. You will probably want people who visit you to know your e-mail address, so make an image file of it. That way, it will be on display for anyone to copy down, but harvester programmes will be completely ignorant of it. Here's an example ("mymail.gif" 1.78Kb):

mymail.gif 1.78Kb

Whatever you do, don't code it to become a link, otherwise the whole point of the exercise is wasted. The objective is to show the address for those interested enough to copy it down, but prevent spammers from finding it. It is somewhat irksome to have to take measures like this to prevent innocent persons from being able to click to your e-mail address, but if you have been the subject of spamming, you will know that it is most undesirable and to be avoided if possible. This is my preferred method.

Linking to Other Pages

Two more types of link conclude this part of the tutorial. They are: linking to another page on the same site and linking to another page on any other site. Both links use the <A HREF=""></A> tag pairs, it's just the internal addressing that is different.

Let's start with a link to another page on the same site. By this, I mean that the other page is stored in the same directory, on the same server as the page on which the link is to be created. For this, all you need to do is to provide the name of the other page. Let's use Home Page as an example. To make an emboldened link to return to this page (which is within the same directory), we would need to write:

<DIV ALIGN="CENTER"><A HREF="index.htm"><B>Return to the Home Page</B></A></DIV>

This would appear as below:


You could use a suitable image file as the link instead, like this:

rv_back.gif
The only difference in linking to a page outside your own directory is that you need to quote the full Uniform Resource Locator (URL), or, as it's better known, the Web Address. "HyperText Transfer Protocol" may not mean much to many people, but Web Addresses most often start with its acronym, "http" like this: "http://www." and a link to a page outside your own directory would look something like this:

<DIV ALIGN="CENTER"><A HREF="http://www.apple.com"><B>The Apple Web Site</B></A></DIV>

Which would look like this (and it works!):

So, now you have enough information and examples to make a fairly reasonable page. You will find that if you copy the code examples from the page within your browser (NOT from the source code), then paste them into your Web editor, they should work as if you had typed them in.

Using Style Sheets

Put simply, a Style Sheet is a template that you use to set the formats for most of the basic elements on a page, or pages. There are two major advantages in using them.

Firstly, the <FONT></FONT> tag pair is on its way out, as Style Sheets are now being adopted as "the way forward."

Secondly, if you decide to change the "look and feel" of your pages, then by changing just the content of the relevant Style Sheet, all pages that use it change at once - you don't need to make changes on each and every page.

Whilst this may not sound like a big deal, believe me it's a real time-saver, even if your site has a relatively low number of pages. With a large number of pages, it's the only way to go.

So, what does a Style Sheet consist of?

All Style Sheets have the file extension ".css" - which is an acronym for Cascading Style Sheet.

Style Sheets contain rules that apply to "selectors" which use "declarations" to specify the formatting. Each declaration is composed of the property, followed by the value:

H1 { text-align : center; font-size : 200%; color : #0000FF; }

In this example, the H1 selector contains declarations within the curly brackets - { }, which are stated in pairs - the property, followed by its value. The value is separated from the property by a colon (:). Each declaration pair is separated by a semi-colon (;) from the next pair. Although there are spaces shown around the colons, there doesn't have to be - it's done here for clarity.

In the above example, you can see the text-align property, with its value of "center" - then the font-size property and its value of "200%" (twice the size of Body Text) - finally the color property with its value of "#0000FF." These are the rules in effect for H1 in the Style Sheet, so every instance of the <H1> tag within the page(s) will display with this formatting (unless over-ridden, by entering specific attributes for the <H1> tag).

There are several ways you can use styles. The first is simply to create your HTML documents using the <STYLE> attribute, which allows you to define styles on a tag-by-tag basis. But, by applying styles within your tags, you're missing out on the benefits of keeping your page content separate from your page design.

The next method is to embed the style using a style block in the <HEAD> section of your Web page. A style block is composed of an opening <STYLE> tag, followed by a set of CSS rules, followed by a closing </STYLE> tag. For example:

<STYLE>
BODY { color: #330066; }
H1 { font-size: 12pt; }
</STYLE>

While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular page.

The best method, linking to an external Style Sheet, achieves the greatest flexibility.

Linking a Style Sheet to a page simply requires using a <LINK> tag in the <HEAD> section of every document you wish to apply the Style Sheet to.
For example:

<head>
<link rel="stylesheet" type="text/css" href="stylesheetname.css">
</head>

where "stylesheetname.css" is the filename you give to the relevant Style Sheet.

Once you've linked a Style Sheet to your pages, any changes to that Style Sheet will apply to every Web page that it's linked to. This is where the benefits of Style Sheets are most apparent, since you no longer have to update every single page in order to overhaul your site's design.

You can start off with simple rules for common page elements and go on to create more complex styles as you become familiar with the techniques.

Let's look at an example Style Sheet:

BODY {background-color : #E0FFFF;
	color : #000000;
	font-family : Arial, Tahoma, Helvetica, sans-serif;}
	
A:LINK {color : #000099;
	text-decoration : underline;}
	
A:VISITED {color : #AA0000;
	text-decoration : underline;}
	
A:HOVER {background-color : #E0FFFF;
	color : #000099;
	text-decoration : none;}
	
H1 {color : #0000FF;
	font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size : 200%;}
	
H2 {color : #0000FF;
	font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size : 160%;}
	
H3 {color : #DC143C;
	font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size : 140%;}
	
H4 {color : #00008B;
	font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size : 115%;}
	
H5 {color : #990000;
	font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size : 95%;
	font-weight : 900;}
	
H6 {color : #000000;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 75%;
	font-weight : 800;}

Let's look again at the selector that controls Body Text:

BODY {background-color : #E0FFFF;
	color : #000000;
	font-family : Arial, Tahoma, Helvetica, sans-serif;}

Now that you know what the code means, you can see that:

The page background color is set to "#E0FFFF" (which could also be expressed as the named color "LightCyan").

The text color is set to "#000000" (which could also be expressed as the named color "Black").

The font-family is set as "Arial, Tahoma, Helvetica, sans-serif."

The font-family setting translates as: "Use the Arial font if it's available on the (visitor's) computer. If it isn't, try Tahoma font next, then try Helvetica font. If all else fails, use a sans-serif font, in preference to a serif one."

Now let's look at the rules for the "A:LINK," "A:VISITED," and the "A:HOVER" selectors:

A:LINK {color : #000099;
	text-decoration : underline;}
	
A:VISITED {color : #AA0000;
	text-decoration : underline;}
	
A:HOVER {background-color : #E0FFFF;
	color : #000099;
	text-decoration : none;}

You should now be able to work out that:

In this Style Sheet, links start off as a dark blue color and underlined.

When you've visited the link, it changes to a dark red color - still underlined - but when you hold the mouse over them, the underline disappears, because it has been set to the same color as the page background.

The remaining selectors (for the heading tags) are self-explanatory, so let's move on to other uses for Style Sheets.

To set an image file background with a Style Sheet, you need to modify the BODY selector by replacing


BODY {background-color : 
#E0FFFF;
with
BODY {
background-image : url("path to image file name");
as follows:
BODY {background-image : url("images/tilecrackle7.jpg");
	color : #000000;
	font-family : Arial, Tahoma, Helvetica, sans-serif;}

This will give you an image-based background page, or pages, which will look like this:

An image background, set via a Style Sheet.

All pages that refer to the Style Sheet will, by default, have identical backgrounds. However, even though you'll have registered the page to use the Style Sheet, using:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

you can over-ride individual pages by inserting appropriate code into the page itself, for example:

<body bgcolor="#66FFFF" text="#000000">

You can use more than one Style Sheet in your site - just remember to refer the appropriate page(s) to the relevant Style Sheet and you'll be fine!

When first getting used to Style Sheets, it's difficult to remember that you're actually going to save yourself time in the long run!

Persevere, please - and try using more than one Style Sheet so that you can make instant changes to the overall appearance of a page, or the whole site - that's where the savings really come into their own.

A new Style Sheet can really change the overall look and feel to a site, so - once you've composed your pages - experiment with some sample Style Sheets. A really useful site is to be found at http://www.richinstyle.com/, or - better still - write or modify your own and try them out in your Web Page Editor.

If you like the changes enough to make them a permanent change, simply save the new Style Sheet with the same name as the existing one, upload it and - instantly - all pages that refer to the Style Sheet will change in appearance, without you having to re-code a single one.

Remember, it's always a good idea to have a copy of the original Style Sheet in an "Archive" folder, just in case you change your mind later!

You may want to format some paragraphs to stand out in different situations, so we'll now define a "class" for the paragraph property that can be applied wherever and whenever we need it.

To create a new standalone class:

Type a new selector into your Style Sheet, separating the selector from the class name with a full-stop (period). It doesn't matter where you type in, but I've found that if you stick to typing your additions at the bottom of the Style Sheet, then it becomes easier to undo the changes if you want to.

We'll use "P.indent01" in this example, which will initially set up a Paragraph Class to indent the paragraph from the left margin by three-quarters of an inch (then we'll add some extras!).

First, the new selector:

P.indent01

Now, the declaration for the new selector, in curly brackets:

P.indent01 { margin-left : 0.75in; }

If you want to indent the paragraph from both sides of the page, simply add another declaration to the existing one, like this:

P.indent01 { margin-left : 0.75in; margin-right : 0.75in; }

If, whilst you're at it, you want to change the text color too (let's change it to dark green, which is #006400), no problem, add another declaration, like this:

P.indent01 { color : #006400; margin-left : 0.75in; margin-right : 0.75in; }

To use the new paragraph formatting, simply use the <P> tag, adding your new style class just as you would with an attribute, thus:

<P CLASS="indent01">

and the selected paragraph(s) will instantly format to your specifications - neat, or what? See how much quicker this is than, for example, setting up the text in a table that occupies a specific width, with an invisible border? I did say that this was time-saving!

Note that, when adding the class to the <P> tag, you omit the full stop (period) that precedes it - that's just used to separate it when creating the selector - simply enclose your new class in quote marks as shown above.

Tables

Tables are an extremely useful element of HTML, not only for their obvious use, but also for accurate positioning of either text or images, especially in places on a page where otherwise it would be impossible to position them.

Let's start by inserting a simple table, with two columns. The tags involved here are <TABLE> and </TABLE> (not surprisingly!), although there are additional attributes and nested tags involved as well. The <TABLE> and </TABLE> tags enclose the whole of the table element within the page and can be nested within the <DIV ALIGN="CENTER"> and </DIV> tags in order to place any table centrally.

Within the table itself, two other tags are vital. These are <TR> with the closing </TR> tag and <TD> with its closing </TD> tag. These two tags control the appearance of data within the table itself, the "TR" standing for "Table Row." and "TD" standing for "Table Data." Here is an example of a simple two-column table, containing three rows of data:

First Row, First cell First Row, Second cell
Second Row, First cell Second Row, Second cell
Third Row, First cell Third Row, Second cell

Now let's look at the coding involved. Here is the HTML for the above table, enclosed in <DIV ALIGN="CENTER"> and </DIV> tags, to place it in the middle of the page:

<DIV ALIGN="CENTER"><TABLE cellspacing="2" cellpadding="2" border="1">
<TR>
<TD>First Row, First cell</TD>
<TD>First Row, Second cell</TD>
</TR>
<TR>
<TD>Second Row, First cell</TD>
<TD>Second Row, Second cell</TD>
</TR>
<TR>
<TD>Third Row, First cell</TD>
<TD>Third Row, Second cell</TD>
</TR>
</TABLE></DIV>

Here's how it all works:

Within the initial <TABLE> tag, the attributes "cellspacing" and "cellpadding" will be seen. These, respectively, give a little space between the text and the border of the cell and space between cells - using a value of "2" in our example. The more cell padding, the greater the amount of space between text and border. The attribute "border" also has a value of "1" which is the thinnest border available - the larger the value, the thicker the resultant border.

Next comes the <TR> tag - beginning a row in a table.

Next, the first of two <TD> tags, one for each data cell in the row.

This pattern is repeated for each row and each cell in each row. Notice that each row is closed by the </TR> tag and each cell is closed by the </TD> tag.

The whole table is then closed with the </TABLE> tag.

The width of a table can be expressed as a value - the exact number of pixels - but the easiest display option is to express width as a percentage of the overall width, eliminating the problems associated with differing screen setups and resolutions. This is achieved by the attribute WIDTH="(percentage figure)" although this attribute is becoming less favoured as HTML standards improve. We will make the table occupy 60% of the screen width as follows:

First Row, First cell First Row, Second cell
Second Row, First cell Second Row, Second cell
Third Row, First cell Third Row, Second cell

This simply means adding the "width" attribute to the initial <TABLE> tag, thus:

<TABLE cellspacing="2" cellpadding="2" border="1" width="60%">

The advantage of the percentage method is that everyone will see the whole table, no matter what screen size they use. However, the smaller the screen size, or resolution, the narrower the columns, so some text might be "bumped down" to the next line, altering the internal layout, but retaining the data.

Now let's add some enhancements, starting by manipulating the border. This is done with the "BORDER" attribute, thus:

First Row, First cell First Row, Second cell
Second Row, First cell Second Row, Second cell
Third Row, First cell Third Row, Second cell

The relevant code simply meant changing the "border" attribute from a value of "1" to "5" - couldn't be simpler!

<TABLE cellspacing="2" cellpadding="2" border="5" width="60%">

Where we wish to use a border, we can control its color too, by using the attribute bordercolor="#XXXXXX" - where "XXXXXX" is the six-figure color code as used previously within this tutorial. So, a red border is obtained thus:

<TABLE cellspacing="2" cellpadding="2" border="5" width="60% bordercolor="#FF0000"">

The table now looks like this:

First Row, First cell First Row, Second cell
Second Row, First cell Second Row, Second cell
Third Row, First cell Third Row, Second cell

What about the background color? Yes, easily controlled by using bgcolor="#XXXXXX" in this manner:

<TABLE cellspacing="2" cellpadding="2" border="5" width="60%" bordercolor="#FF0000" bgcolor="#66CCFF">

The table then looks like this:

First Row, First cell First Row, Second cell
Second Row, First cell Second Row, Second cell
Third Row, First cell Third Row, Second cell

You can - if you so wish - change the color of individual rows, by setting an individual color attribute for each row. This can be useful to separate headings or titles from data. Here's an example:

First Row, First cell First Row, Second cell
Second Row, First cell Second Row, Second cell
Third Row, First cell Third Row, Second cell

Here's the code - remember that there are two data cells to the row, so the background color attribute needs to be set for both first row cells, within each <TD> tag, thus:

<TABLE cellspacing="2" cellpadding="2" border="5" width="60%" bordercolor="#FF0000" bgcolor="#66CCFF">
<TR>
<TD bgcolor="#FFFF00">First Row, First cell</TD>
<TD bgcolor="#FFFF00">First Row, Second cell</TD>
</TR>
<TR>
and so on.....

What about having an overall title that covers both columns? Yes, also simple to achieve with yet another attribute, COLSPAN="(number of columns spanned)" So, to give our example table an overall title, we'll insert some more code, thus:

<TABLE cellspacing="2" cellpadding="2" border="5" width="60%" bordercolor="#FF0000" bgcolor="#66CCFF">
<TR><TD COLSPAN="2" ALIGN="CENTER"><FONT COLOR="#FF0000"><B>Initial Title Row</B></FONT></TD></TR>
<TR>
<TD bgcolor="#FFFF00">First Row, First cell</TD>
<TD bgcolor="#FFFF00">First Row, Second cell</TD>
</TR>
<TR>
and so on.....

We've added an entire new top row, hence the extra <TR> tag, plus a new data cell in the new row. This cell also shows how it's possible to centralise text in a cell, using the TD attribute ALIGN="CENTER", finished with a change of font color, as previously described earlier in the tutorial.

This results in the table now displaying as:

Initial Title Row
First Row, First cell First Row, Second cell
Second Row, First cell Second Row, Second cell
Third Row, First cell Third Row, Second cell

Why don't we centralise the text in all the cells why we're at it - OK? This involves centering each cell, so the code is:

<TABLE cellspacing="2" cellpadding="2" border="5" width="60%" bordercolor="#FF0000" bgcolor="#66CCFF">
<TR><TD COLSPAN="2" ALIGN="CENTER"><FONT COLOR="#FF0000"><B>Initial Title Row</B></FONT></TD></TR>
<TR>
<TD bgcolor="#FFFF00" ALIGN="CENTER">First Row, First cell</TD>
<TD bgcolor="#FFFF00" ALIGN="CENTER">First Row, Second cell</TD>
</TR>
<TR>
and so on.....

The table now looks like this:

Initial Title Row
First Row, First cell
First Row, Second cell
Second Row, First cell
Second Row, Second cell
Third Row, First cell
Third Row, Second cell

Now for some clever stuff - hiding the fact that a table is being used altogether. This is achieved by setting the "border" attribute to "0" This is obviously only for use on a table that does not have background colors set, so we will revert to our original example to demonstrate this useful wheeze:

First Row, First cell
First Row, Second cell
Second Row, First cell
Second Row, Second cell
Third Row, First cell
Third Row, Second cell

All this requires is for the "border" attribute to be set to "0" - it really couldn't be easier!

<TABLE cellspacing="2" cellpadding="2" border="0" width="60%">

Instead of just text, you can place image files within a table too. If it's a borderless table, then you can vary the width attribute to position the graphics on the page alongside text, or wherever you like, using a little imagination. Here's a couple of image files displayed with text alongside them, first without a border, then with a border to reveal what's happening:

Julia Here's my daughter, Julia, taken whilst she was in the USA.
Here's my Abyssinian cat, Sandy. Sandy

Julia Here's my daughter, Julia, taken whilst she was in the USA.
Here's my Abyssinian cat, Sandy. Sandy

Now that you know the basics, do experiment with tables, as they are both a very useful and a very powerful way of controlling layout!

Using Forms

A form can be used in many ways, two uses described below are receiving data from your visitor, or automating the process of sending e-mail.

Forms use Computer Gateway Interface (CGI) scripting, which sounds complicated, but - like a lot of computer software processes - is really quite simple once you've got the hang of it. The absolutely critical element, however, is that your service provider can handle input from your forms and submit them to you in the form of e-mail. For this, the ISP needs a program that can handle CGI scripts. A popular and simple program is "FormMail" and as I'm familiar with it, the following examples will use the CGI scripts that work with it. If your ISP has a different handler, no problem, the script will only need the slightest of tweaking to work. The one thing you can't do with forms is to nest them (you can't have a form within a form, whereas you can have a table within a table).

First of all, let's look at how the form can appear to your visitor. There are a number of options, including boxes to fill in (input text boxes), lists to choose from, boxes to tick (input checkboxes), radio buttons to click on, or text areas - for your visitor to type their own comments.

Comment form

Your name: Your e-mail address:

I think this lesson content is:

How did you hear of these lessons?

From a friend
In a magazine
On Television
By e-mail
On the Internet

Would you like some more lessons?

Yes, please
No, thank you

If you have any further comments, please enter them here:

                             

So that's what it looks like to your visitor, but what does the code look like? The tag pair involved to construct a form is, not surprisingly, <FORM></FORM>

The opening <FORM> tag needs attributes to make it work. Here is the code, with the text that can be seen by the visitor shown blue to aid understanding:

<form ACTION="http://www.your.ISP/cgi-bin/formmail.pl" METHOD=POST><BR>
Your name: <INPUT NAME="name" SIZE="30">
Your e-mail address: <INPUT NAME="email" SIZE="30">
<P>I think this lesson content is:
<SELECT NAME="Choice">
<OPTION>Mega!
<OPTION>Great
<OPTION>Cool
<OPTION>Not bad
<OPTION>Not good
<OPTION>Pants!
<OPTION SELECTED>Please choose one:
</SELECT>
<P>How did you hear of these lessons?
<P><INPUT TYPE="checkbox" NAME="Friend"> From a friend<br>
<INPUT TYPE="checkbox" NAME="Magazine"> In a magazine<br>
<INPUT TYPE="checkbox" NAME="TV"> On Television<br>
<INPUT TYPE="checkbox" NAME="Elecmail"> By e-mail<br>
<INPUT TYPE="checkbox" NAME="Internet"> On the Internet
<P>Would you like some more lessons?
<P><INPUT TYPE="radio" NAME="lessons" VALUE="Yes" CHECKED> Yes, please<BR>
<INPUT TYPE="radio" NAME="lessons" VALUE="No"> No, thank you
<P>If you have any further comments, please enter them here:
<P><TEXTAREA NAME="Comments" ROWS="10" COLS="80">
</TEXTAREA>
<P><INPUT TYPE=SUBMIT VALUE="Send - Please Click ONCE only">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE=RESET VALUE="CLEAR AND START AGAIN">
<INPUT TYPE="hidden" NAME="recipient" VALUE="youremail@yourISP.com">
<INPUT TYPE="hidden" NAME="subject" VALUE="Comment Form Feedback">
</form>

Now that you've seen all the code, let's examine it a little more closely to see what each part does.

<form ACTION="http://www.your.ISP/cgi-bin/formmail.pl" METHOD=POST>

The ACTION attribute is a URL specifying the location to which the contents of the form data fields are submitted to elicit a response. In place of "http://www.your.ISP" you would use the address of your ISP. Their form server may have a different address to that shown, but it will be along those lines. Check with your ISP for instructions and their specific addresses required to set up a form.

The "METHOD" attribute has two options, "GET" and "POST" - "GET" is OK if there is no processing of the data to do, but as our form contains data to be processed, we'll use the "POST" option.

Your name: <INPUT NAME="name" SIZE="30">

The "Your name:" part is what appears on the screen, to inform and instruct your visitor. This is followed by an input data field, for the visitor to complete.

In order for you to make sense of the resultant e-mail that this form will generate, it pays to be careful with naming each data input field in such a way that it's obvious - hence, in this example, the input data field that will return the visitor's name is called "name" - as shown by the INPUT NAME= attribute above.

The size of the box that your visitor sees is set by using the SIZE= value, in this example it is 30 characters long, but you can set it to whatever you feel appropriate. Be aware that the text within the box will scroll as it is typed, so if your visitor's name is longer than 30 characters, it will still be processed, as the attribute only sets the physical size of the box, not the amount of data it can contain.

Your e-mail address: <INPUT NAME="email" SIZE="30">

As in the input data field for the "name", this one deals with the visitor's e-mail address in exactly the same way, apart from having a different field name ("email") so that it can be identified on the resultant e-mail you'll receive.

I think this lesson content is:
<SELECT NAME="Choice">
<OPTION>Mega!
<OPTION>Great
<OPTION>Cool
<OPTION>Not bad
<OPTION>Not good
<OPTION>Pants!
<OPTION SELECTED>Please choose one:
</SELECT>

This part is the code for the list from which the visitor must choose. The list is controlled by <SELECT> and the NAME= attribute of "Choice" will appear on your e-mail, followed by whatever option is selected (with a list, you can only have one selection).

Each list item is controlled by an <OPTION> instruction, followed by the text that you want to appear in the list.

The <OPTION SELECTED> instruction sets the text which will appear in the box before the visitor clicks on the down-arrow to expose the list.

If the e-mail you receive shows: "Choice: Please choose one:" then you will know that your visitor didn't make a selection from the list at all, or chose to ignore it.

The </SELECT> instruction closes the list box section of code.

How did you hear of these lessons?
<INPUT TYPE="checkbox" NAME="Friend"> From a friend<br>
<INPUT TYPE="checkbox" NAME="Magazine"> In a magazine<br>
<INPUT TYPE="checkbox" NAME="TV"> On Television<br>
<INPUT TYPE="checkbox" NAME="Elecmail"> By e-mail<br>
<INPUT TYPE="checkbox" NAME="Internet"> On the Internet

This section of code sets up the check boxes (INPUT TYPE="checkbox"). These are boxes that display a check mark or tick (tick.gif, 58bytes) when the visitor clicks in them.

Because we may want our visitor to be able to select more than one box, we need to give each box a separate name, as shown above. The e-mail you receive will state alongside each checkbox name "Checked" if it was checked. If it doesn't show that, then it wasn't checked. Note that we've had to use "Elecmail" for the e-mail field, as you cannot have two data fields with the same name and we've already used "email" earlier in the form.

Would you like some more lessons?
<INPUT TYPE="radio" NAME="lessons" VALUE="Yes" CHECKED> Yes, please<BR>
<INPUT TYPE="radio" NAME="lessons" VALUE="No"> No, thank you

This section sets up the radio buttons (INPUT TYPE="radio") - small circles that contain a black center when clicked. Our example uses them where the visitor has a distinct choice to make between two buttons, "Yes" or "No."

If you try the form, you will discover that you simply cannot make both buttons stay selected - it's either one, or the other, but never both. This is because both radio buttons have the same name (NAME="lessons") but different values (VALUE="Yes" and VALUE="No").

Further, you will see that the "Yes" button is checked by default (not essential, but it's easy to do if you want to). This is achieved by the extra instruction "CHECKED" within the "Yes" value button.

If you have any further comments, please enter them here:
<TEXTAREA NAME="Comments" ROWS="10" COLS="80">
</TEXTAREA>

Now we come to the box for the visitor to add any text of their own if they wish to. This is set up using <TEXTAREA>, this example is called "Comments" (NAME="Comments"). The physical size of the box is set by ROWS="10" COLS="80" but once again, you can set whatever area you feel is appropriate. The physical size of the text area once again does not restrict the user - they can simply carry on typing - the window will develop a scroll bar if the user exceeds the amount of text that will fit into the box provided. </TEXTAREA> closes the instruction for the text box.

You can make the text box a little more friendly to use by providing text-wrapping for your visitor and for yourself, if you wish. This is done by adding attributes as follows:

<TEXTAREA wrap=VIRTUAL> - The display will wrap, but long lines are received as one line in your e-mail.

<TEXTAREA wrap=PHYSICAL> - The display wraps and the text is received wrapped in your e-mail.

If you want to prevent all wrapping, there is also the option to do that:

<TEXTAREA wrap=OFF> - Lines are sent exactly as typed, relying on the visitor to insert carriage returns.

N.B: Internet Explorer version 3.0 wraps text by default in a <TEXTAREA> box, while Internet Explorer version 4.0 supports the wrap attributes as described above.

In Netscape version 4.0 and Internet Explorer version 4.0 and above, you can use <TEXTAREA wrap=SOFT> instead of "VIRTUAL" and <TEXTAREA wrap=HARD> instead of "PHYSICAL."

<INPUT TYPE=SUBMIT VALUE="Send - Please Click ONCE only">

Now we come to the button the visitor clicks to send the form off, the "Submit" button, controlled by INPUT TYPE=SUBMIT.

The "VALUE=" attribute sets the text which is to appear on the button (the default is "Submit").

I use "Send - Please Click ONCE only" in order to try and prevent duplicate e-mails where the user keeps on clicking, either because they're not sure that anything has actually been submitted, or because they are unsure how to retreat from the form, or move on within the site. We'll cover those points in more detail a little later on.

<INPUT TYPE=RESET VALUE="CLEAR AND START AGAIN">

This code controls the other button, the "Reset" button (INPUT TYPE=RESET), for clearing the form if the user wants to start again. The downside with using the button is that it resets the whole form, but it's better than having to overtype it manually.

Just as with the "Submit" button, the text that appears is controlled by "VALUE=" and you can use whatever text you like. My example uses "CLEAR AND START AGAIN" as that seems to be fairly unambiguous!

By the way, all the instances of "&nbsp;" that appear between the code for the two buttons is simply repeating non-breaking spaces (that "&nbsp;" is the Special Character for a single non-breaking space), in order to position the buttons on the screen an equal distance from each edge of the text area window - unnecessary, but looks better!

<INPUT TYPE="hidden" NAME="recipient" VALUE="youremail@yourISP.com">

This code will not appear on the screen, because it is INPUT TYPE="hidden". Its function is to send the results of the form to an e-mail address that you specify, hence NAME="recipient".

Generally, this will be your e-mail address, but it doesn't have to be. You can even send to more than one e-mail address, providing that you separate them with a comma (but no spaces), like this:

VALUE="youremail@yourISP.com,anotheremail@anotherISP.com"

<INPUT TYPE="hidden" NAME="subject" VALUE="Comment Form Feedback">

Finally, some code to make the e-mail you receive more identifiable. Once again, the code is hidden and does not appear on the screen. The NAME="subject" controls what appears in the subject line of the e-mail being generated. The actual text is controlled by the "VALUE=" attribute and you can use whatever you prefer.

My example uses "Comment Form Feedback" simply because it makes it obvious, when reading incoming e-mail subject lines, exactly what the e-mail is about.


So, that's the code explained, now on to the problem mentioned earlier - how to tell your visitor that their form has been submitted and to give them a way to continue their visit through your site.

It's fair to say that some CGI script handling software automatically informs the user that their form has been submitted, but not all do, so I like to make sure with some extra code. How I do it is to provide a new HTML page, which tells the visitor that their data has been sent, as well as giving them a button to click for them to continue - you could allow the choice of returning to the page on which the form resides, or move them on to another page altogether - that will depend on how your site is set up.

I'll show you how to do the transfer to a new page first, which uses some more code that will not appear on screen:

<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.yoursite.com/nextpage.htm">

This piece of code redirects the focus to whatever new page is specified, controlled by the "VALUE=" which uses a specific URL. The one in my example is called "nextpage.htm" - so that means creating and saving a new page with that filename.

This new page can be really simple and brief. All it needs to do is to say something like "Thank you, your data has been received. Please click here to continue"

The font needs to be fairly large, so that it's striking and easy to read. Beneath the text, provide a link for the page to which you wish to direct your visitor. As I try to put forms at the foot of my pages wherever possible, I don't see the need - in most cases - to return my visitor there (although they can always use their "Back" button is they wish!).

If the visitor got to the page containing the form via a link within the Home Page, then redirect them back to the Home Page. If they arrived via another page, then take them back to that page - it's a natural route to take, but most visitors are glad to have the route mapped out for them and needing only a single click from them to make it work.

Obviously, you can extend the choices offered by having more links for them to choose from (you could use image files as buttons, if you prefer) - but this will depend upon how many pages you have within your site for them to visit. The more choices, the more links, but the code is identical apart from the address of each page, so I'll keep this example simple and use just one link.

To see how it would work for the visitor, click this button:

You'll notice that I brought you back here (if you clicked the link on the redirect page!), but I could just as easily have led you anywhere else. The route is up to you, now that you know the principles.

Uploading Your Web Page Files

Having constructed your Web Page file(s) and selected your image file(s), it's then time to put them up onto your server, so that they can be accessed. If you make any changes, additions or alterations to any part of your page at a later date, then you simply need to send the page again (together with any additional image files you may have included in the changes), when the new page will simply over-write the existing one. You may need to "refresh" your browser to see the new version, especially if your browser's cache isn't regularly flushed.

If your page is hosted by AoL or Yahoo, then there is a utility that you can use for uploading which you can find in their site management tools. You simply need to enter your member name and password, then go to the relevant screen and follow the instructions.

If your page is to reside on another server, check with your ISP to see if they have a similar uploading facility. If they do, you may be sure that it will be similarly easy to use. If there is not such a utility available, then you will need a File Transfer Protocol (FTP) program - one of which is "FTP Navigator" You can download this from their Web Page quite simply (see the "Resources" section for details) and it is very easy to use, once you have it configured. Most ISPs will have help available to tell you how to configure an FTP program, especially as you need to know the address of the directory on their server which they will want you to send your files to.

Once your files are uploaded, you should now be able to open your browser, type in your Web Page Address and visit your own page, which - after all the hard work - is a really satisfying feeling!

Useful Resources

An amazing quantity of great programs await you! I have provided links to ones that I think you will find useful. If you have discovered a really good one that I have missed, please let me know about it, so that others can benefit.

HTML Editing Programs (Web Editors)

The Very Best Free Web Editor: Blue Griffon

Color Reference Chart

Web Color Charts: Complete Color Chart
216 Safe Colours
Hexadecimal and RGB values

Handling Compressed (Zipped) Files

Get the very best of all: WinZip

Image Handling, Viewing and Conversion

Image Viewing (including animations) and Conversion (Windows): IrfanView

Transferring (Uploading) Files

Free File Uploading Program for Windows and Mac: FZ FileZilla

Programming and Further Reading

The Definitive Page: Java
SME Source: CGI Scripts

Security

Test Your Current Security: Gibson Research Corporation
Free Anti-Virus Software (Windows): AVG

If you have any comments, suggestions or questions, drop me an e-mail

© 1997-2017 Ray Girling