If you have talked with anyone about Internet topics, you may have heard the term "HTML". It's an acronym standing for Hypertext Markup Language. HTML is a sub-set of SGML, Standard Generalized Markup Language. A markup language is a tool used by publishers to make a document display a certain way.
If you have ever used the "Reveal Codes" feature of WordPerfect, you have seen your document with all the embedded formatting codes visible. For example, text that appears in BOLD will be surrounded by codes to let WordPerfect know to display that text in bold. Likewise, text that you want centred will be surrounded by codes that tell WordPerfect to centre the text. For those who are not familiar with WordPerfect, I'll do my best to explain what all this means.
This document will present an introduction to HTML, and hopefully will
give the reader enough to begin their own coding. It is not an
exhaustive reference manual, as it does not attempt to cover all terms
or commands.
PageBuilder
If you wish to see how a simple web page is coded, I have built a tool
called "PageBuilder" in Perl. You fill out a form, indicating
certain features you want your web page to have, and "PageBuilder"
builds it for you and you can see it right away! You can then save the file on your computer and use a text
editor to play around with it.
PageBuilder is here whenever you want to play with it.
Where it all began
Hypertext is a way of making information that exists in a separate
electronic document available from within an existing document. One
document is "linked" to another one by a special reference in the first
document. Codes are placed in the document that tell the computer what
to do when an active link is clicked with the mouse button. The codes
are HTML.
You would be mistaken if you thought hypertext was a fairly new development. In 1945, Vannevar Bush, an advisor to US President Roosevelt, wrote an essay titled As We May Think. It was published in the Atlantic Monthly, and described a machine called the Memex which would be used as a repository of information by future scholars. He described "associative trails", by which one could link passages in one document to passages in another document. Needless to say, Mr. Bush was a very forward-thinking individual.
It wasn't until 1965 that Ted Nelson coined the term "hypertext" for the kind of nonsequential writing he envisioned, and computers would be the medium. Finally, in the mid-1980's, his vision was realized by Apple Computer in the form of HyperCard. This was a database program included free with every Macintosh computer sold. Today hypertext is what the World Wide Web is based on. What a long, strange trip it's been.
The Hypertext Model
As mentioned above, hypertext allows us to "link" to other documents or
resources from within the current document. The other resources could
be documents, or even image files, sound files, video clips, or one of
a variety of other types of resources.
Hypertext is a non-linear method of viewing a document. A
real-life example might help explain what non-linear means.
Let's say you are browsing through your favourite encyclopedia and find a reference to a particular type of exotic bird. You read that it is indigenous to a particular area of some foreign country. You know where the country is, but you would like to know exactly where this area is. If the encyclopedia doesn't provide you with a diagram or map of the area, you might hunt around for your own map. Then you would look up the country and determine where the area is.
So, now you go back to your encyclopedia and continue reading about this bird. It shows you a picture of the bird and talks about its beautiful morning song, but of course you have no way of hearing this. But let's say you really want to know what this bird sounds like. You put a bookmark in the encyclopedia to keep your place and head out to the local library. There you find an audio tape of the bird's song and listen to it. Now you return home and go back to your bookmarked spot and again begin reading more about this bird.
If you take a look at all the steps you took to get this far in your
explorations, you would discover that:
With hypertext, we could provide the user with all the resources s/he needed from within the original document (provided they really exist and are available to us). I'll show you how to do this in the following sections.
The Structure of an HTML Document
A document that has been "marked up" will have a certain structure. For
example, every document should have the following basic codes:
<HTML>
<HEAD>
<TITLE>Your Title Would Go Here</TITLE>
</HEAD>
<BODY>
In here is where your text or images would appear. This text will wrap around to fit whatever size of monitor the user has. At the end of this sentence is a line-feed, but it is done with the BREAK code, like this.<BR>
This sentence will always start on a new line because of the previous <BR> code. If I wanted to add a blank line, as in starting a new paragraph, I would add a PARAGRAPH code, like this <P>.Now, this is a new block of text with a blank line above. We need the <P> code and the <BR> code because HTML does not recognize the extra lines we may have added in our text - it throws away extra "white space" (tabs, spaces, carriage returns).
Finally, at the end of our document, we close off the two "container" tags <BODY> and <HTML> by putting a leading forward slash (/) in front of the keyword, like this ...
</BODY>
</HTML>
The very first tag in any HTML document should be the opening <HTML>. While most browsers will probably let you leave out this tag, it is good form to always include it. Don't forget its matching </HTML> as the very last tag in the document.
The section between the <HEAD></HEAD> tags is where you place information about the document. Typically, you will have a <TITLE></TITLE> section in which you enter some meaningful text describing the document. This does not appear as part of the document, but in the "title bar" of your browser. It is also used by search engines to index your page.
The largest section is the one wrapped in <BODY></BODY> tags - it contains everything you want to display as part of your page.
As you can see there is no "magic" in HTML. Every HTML document is
simply a plain text file (ASCII) created by
someone using a text editor or special authoring program.
There are lots more HTML codes, or tags, which we will cover as we go
along.
Uniform Resource Locator - URL
This is something you will have to get a good understanding of if you
are going to be doing any amount of surfing on the Internet, or HTML
coding. A URL is the exact location of a particular resource. It's like
the call number of a book. A URL can have up to 4 sections. Here is a
sample URL with the different sections coloured:
protocol://name.of.machine/folder/filename.ext:8080
The fourth section is a specific port number, but is rarely used.
The first section in red is the type of
connection, or protocol, needed to access the
resource. There are a
number of different protocols available, but the most popular is http://. Note that the colon and two forward slashes
are part of the protocol. The most popular protocols are:
The next section in violet is the name of the computer on which the resource resides. In our example that is name.of.machine. This will usually be something close to English, although you may find the odd reference to the IP (Internet Protocol) address. If so, it will look something like: 205.180.65.1.
The section in blue is the full path to the
resource, including any directory (folder) names and a filename if necessary. Our
file is located at: /folder/filename.ext. Since
most web servers are hosted on either UNIX machines or Windows NT
machines, be sure that your path and filename use the exact case
of the actual names. For example if our folder was named /Folder, you would have to specify exactly that.
Note: If you want your file to be viewable in a browser, it MUST have an extension of either .htm or .html. If it doesn't your browser will display the source code of the page.
In some cases you might find a URL that is missing both a path and a
filename. Browsers are set by default to look for a file named
index.htm, index.html, default.htm, or
default.html in a particular folder on the web
server. If you have this arrangement, then you don't have to specify a
filename, only the path to the folder containing the file. In that case
you would just specify http://name.of.machine/folder/
Making a Text Link
This is the heart and soul of an HTML document. This set of tags allows
us to "link" another document from ours. Remember that at the other end
of the link we can have another HTML document, an image, a sound clip,
a video clip, or a number of things.
Anchor tags have the following structure:
<A
HREF="protocol://name.of.machine/folder/filename.ext">Visible
text goes here</A>
They are called "anchor" tags because they provide an anchor, or reference point in a document. The A stands for "Anchor" and the HREF stands for "Hypertext Reference".
Using our "real world" example of the encyclopedia, to make a link to our map, we could do something like:
A map of the country is available for you. We also have an audio recording of the bird's morning song.
The code that produced the above sentence looks like this:
A <A HREF="images/latest_g8irhem.gif">map</A> of the country is available for you. We also have an <A HREF="images/error.wav">audio recording</A> of the bird's morning song.
You might ask "How does my browser know what to do with a GIF file?". Also, how does it know what to do with the sound file? The graphical browsers are "image-enabled". That means that they know that if a linked resource is either a GIF or JPG/JPEG file (another image file format), it will display the file properly without outside help. The sound file is also "played", but a little "magic" is required in the form of a "plug-in" for your browser.
Note that a text link is a different colour and is under-lined. Also, if you move the mouse cursor over top of it, the pointer will turn into a little hand. You can also make a link out of an image. The "Top of Page" and "Back to Contents" images in this document are "hot", that is, they are links themselves. When you click on them, the browser takes you to wherever the image is linked to.
You may have noticed that we left out a lot of the stuff in the anchor tag. Since the files both existed on our local computer, and in our current working directory, we didn't need to specify the protocol or machine name, - just the relative path and filename. However, the power of hypertext and the Internet allows us to link to documents that reside on computers around the world.
To take our example a step further, let's say both files existed on a computer called some.computer.on.the.net in a folder named freestuff. In this case we have to follow this format:
A <A
HREF="http://some.computer.on.the.net/freestuff/mapofX.gif">
map</
A> of the country is available for you. We also have an <A
HREF="http://some.computer.on.the.net/freestuff/birdsong.au">
audio
recording</A> of the bird's morning
song.
Linking within the same document
What if you have a document and wish to make links to other sections in
it? That is a very common situation, as is demonstrated by this
document. The syntax is similar to linking to an external resource. An internal link has two "ends" - the starting point, and the destination.
To indicate the destination, or where we want to link to, we place an
"anchor" tag at the location we want to end up at. For example,
clicking on the "Back to Top" image takes you to that section
of this document. Clicking on other text links takes you to that location
in this document.
To link to the top of this document here's the code to specify the destination end of the link:
<A NAME="Top"</A> <== This is the destination link. You place this code at the location in the document you want to end up at. In this case, I placed the code immediately inside the <BODY> tag.
To make the starting point, or referring end, we use another "anchor" tag, but point it to the name we just created using the familar <A HREF= tag:
<A HREF="#Top">Top of this document</A> <== This is the source link.
Note that the only difference between the source and the destination "value" is the addition of the octothorpe (#) in the <HREF> name. However, the exact same name must be specified in both places - it is case sensitive. When you click on the source link, the browser starts at the top of the HTML document and looks for the tag named in the link, much like the GOTO statement works in a program file or DOS batch file.
If you are going to use this feature, it is a good idea to code each destination tag first, then add the source tag in the appropriate spot.
Note:
For most HTML tags it doesn't matter whether they are entered as lower case or upper case. But, just to keep you on your toes, there are some special instances (cases) where case is important. Generally this is when you are referring to a name of something, such as a file, frame name, target name.
We now know how to make a link to a location within the same document, so this part is easy. We still have to have the destination code in our document as explained above. The difference is that our source tag now goes in the document we are referring from.
For example, in the Table of Contents file, to link to this section of this document I have the following code:
<a href="body.htm#Combine">Combining an external link and a target location</a>
We can see that I've merely added the destination name (starting with the octothorpe) immediately after the name of the destination file:
<A HREF="body.htm but within the closing quotes and bracket ">
of the tag.
Displaying Images
When an image is created and saved in a graphics application, we are
usually given a choice as to the size of the image, given in pixels.
Since images take time to download, it would make sense to choose a size
that is sufficient to do the job, and no more. Also, at this point, it is good form to use as few
colors as possible, and to choose the proper format (GIF or JPG) to save the file in.
Putting in the height and width can greatly speed up the display of a page due to the nature of how the browser displays the page. If no size is assigned to an image, the browser doesn't know how much room to allow for it until is completely downloaded. If there is text on the page, and there usually is, it will not appear until all the images on the page have been downloaded. By putting in a height and width for an image, the browser now knows how much room to leave, and can display any text as it appears. It also keeps the rest of the page formatted properly if the user has their browser configured not to display images.
Note that the physical size of the file (in bytes) is not changed - only the image size once it gets to our viewer.
To use the "Contents" image example, the code used for it is:
<img src= "images/htmltoc.gif" width="57" height="64">
Note that we've had to include the directory name that the file is contained in as well. If the image resides on a different computer, we would have to provide the full URL for it, just as we would if we were making a text link to a document on a different computer.
Along with the size in pixels, we can also define where the image appears on the page in relation to any surrounding text. Granted, the choices are limited without using more elaborate methods, such as tables.
<ALIGN=LEFT> (the default) and <ALIGN=RIGHT> place the image to the respective margin, and flow text around it, starting at the top of the image.
Using <ALIGN=LEFT>, note how this first line of text
starts at the top of the image and then wraps under the image to the left margin. If there is enough text it will wrap under the image, as in this
example.
The code for this example is:
<img src="images/htmltoc.gif" width="57" height="64" align="left">
Using
<ALIGN=RIGHT>, the image is now at the right
side of the screen, and this text will flow around it, starting at the
top. If there is enough text it will wrap under the image, as in the
above example. I've had to add a quite a bit more text to this paragraph to see the effect. In fact,
I've had to add this sentence!
<ALIGN=TOP> <ALIGN=BOTTOM> <ALIGN=MIDDLE>
These tags align the image vertically in relation to any surrounding text.
Using <ALIGN=TOP>, note how this first line of text
starts at the top of the image and then wraps under the image to the left margin.
Using <ALIGN=MIDDLE>, note how this first line of text
starts at the middle of the image and then wraps under the image to the left margin.
Using <ALIGN=BOTTOM>, note how this first line of text
starts at the bottom of the image and then wraps under the image to the left margin.
One more tag that is considered a "must have" (along with WIDTH and HEIGHT) is ALT. If a user has their images turned off, what they will see if this tag is not defined, is a small icon that looks similar to a bathroom tile in a large blank area of their screen. The <ALT> tag is used to display an "alternative" to the image. Without graphics, the alternative obviously must be text, so we use this tag to describe what the image is or does.
now has a description
of what the image does or is as the alternative text, which becomes visible during the download, and
also takes the place of the image when they are turned off. The alternative
text is also visible when a user places their mouse cursor over the image.
The code to do this is:
<img src= "images/htmltoc.gif"width="57" height="64" alt="Back to Contents">
In the above example we introduced another "locating" tag: <ALIGN=MIDDLE>. This lines up the surrounding text to the middle of the image. We can also specify <ALIGN=TOP> or <ALIGN=BOTTOM>.
Linking Images
As you will have noticed by the "Top of Page" and "Back to Contents" graphics, we can also
make a link out of an image. We do this basically the same way as
making a link from some text. It is an ANCHOR tag, so we start with the
<A HREF= tag. The commands to link an image
are:
<A HREF="a URL goes here"><IMG SRC="location
of
file"></A>.
The code in red makes the image linkable; the code in blue points to the image file. This will result in a colored border around the image, usually in blue, just as linked text is usually blue. To lose the border, specify BORDER=0 inside the <IMG SRC> tag. Of course to be consistent, we should always specify a HEIGHT and a WIDTH for the image inside the <IMG SRC> tag. Don't forget the ALT tag either!
One of the most frustrating things on the Web is waiting for a page to load. Even the most patient person with the fastest modem will eventually wish they could speed things up. Without a faster connection, it is up to the page designer to ensure their pages load as fast as possible. One of the ways to do this is in the handling of images, however that is a topic for the reader to pursue elsewhere.
Image Maps
An excellent use of images is as a clickable area which can point you to other documents, or other sections of the same document. An example would be a menu comprised of an image, which would take you to different parts of a web site, depending on what part of the image you clicked.
Making an image map is a little bit of work, but well worth it. You will need to have a graphics program which can show you the X and Y coordinates of your position on an image. The "Paint" program that comes with Windows 95 will do if you have nothing else, but be warned that it only works with BMP images.
The image you use can be a photo, drawing, text (as a graphic), or clip art, and it can be in either GIF or JPG format, although there may still be a few browsers that don't handle JPGs.
The type of image maps I'm going to discuss are called "client-side image maps" because they are generated by codes embedded in an HTML document, which as we know is displayed on a user's monitor by using a "client program" (browser).
First, assume we have an image which we want to "map" into 3 distinct areas. Clicking within the boundaries of each area will take the user to the specified resource. For our examples I'm going to use the following image:
![Canadian Flag [canada.gif 128x64]](images/canada.gif)
Next we must decide how we want to divide up the image. In our case, I'm going to use the obvious divisions: the two red panels at each end and the middle panel containing the Maple Leaf will be our three areas. The red panel on the left will take us to a document called "bc.htm" (for British Columbia); the middle panel will take us to a document called "ottawa.htm"; and the red panel on the right will take us to a document called "nf.htm" (for Newfoundland).
The next step is to map out the image, which has to be done in a graphics program capable of letting us know where we are on the image (the X and Y coordinates). Before you get started, you should know that most graphics programs call the top-left corner of an image 0,0. Therefore, using our example image of 128 x 64 pixels, the bottom-right corner of the whole image would be 127,63.
Since our image is going to be mapped into rectangular areas, we only need to specify two points for each area: the top-left corner and the bottom-right corner of each rectangle. It is a good idea to specify rectangular coordinates starting from the left, and working to the right.
Using my software, I've determined that the X,Y coordinates for the three areas should be:
0,0 and 32,63 for the first (left) area;
33,0 and 98,63 for the second (middle) area;
99,0 and 127,63 for the third (right) area.
These may differ slightly from your figures, but they shouldn't be out by much. Note how the first X coordinate for the middle area is 1 pixel greater than the second X coordinate of the left area, and also in the next area. You should try to avoid having overlapping coordinates, as this may cause confusion in some browsers.
Once you have the coordinates, you have to come up with a name to call the image map. The obvious name for our map is "Flag". We already know the name of the file (canada.gif) and it's size (128 x 64), so we have all the information needed to write the code that creates the image map. Here's what it looks like:
|
<IMG SRC="images/canada.gif" WIDTH="128" HEIGHT="64" BORDER="0" USEMAP="#Flag"> <MAP NAME="Flag"> <AREA SHAPE="RECT" COORDS="0,0,32,63" HREF="bc.htm" TARGET="_blank" ALT="British Columbia"> <AREA SHAPE="RECT" COORDS="33,0,98,63" HREF="ottawa.htm" TARGET="_blank" alt="Ottawa"> <AREA SHAPE="RECT" COORDS="99,0,127,63" HREF="nf.htm" TARGET="_blank" alt="Newfoundland"> </MAP> |
I've placed the code for the image file ahead of the code for the map, but it can be placed after it, or even within the MAP section.
The first line of the code is the familiar <IMG SRC> tag with the usual height, width, and border attributes. The only new attribute is the USEMAP where we refer to the map by name. This is necessary, since we may have more than one image map in the same document.
The next line sets up the map section and names it (seems backwards, but we're talking computers here). Note the opening <MAP> tag. Also note that the name given here must be exactly the same as the one referred to by the USEMAP tag, without the octothorpe (#).
Finally, we get to the meat of the code: where we actually specify an AREA SHAPE, which in our case is RECT for "rectangular".
On each of these lines we specify the X,Y coordinates with the COORDS attribute, and specify the document to be loaded when we click in that area. Note that we don't use the <A HREF form, just the HREF.
On the same line as the coordinates, I've added another attribute TARGET, which is given a value of "_blank". This forces the new link to be viewed, or targeted, in a new window of the browser. And of course, we musn't forget the ALT tag.
The last line of the code is the closing container tag, </MAP>.
And the finished product:
Well, that works well for simple rectangular areas. What about other shapes? To accomodate this situation, there are two more "shapes" we can use: POLY and CIRCLE.
Obviously POLY is used for polygons, or shapes other than rectangles. This includes triangles, which only require 3 sets of X,Y coordinates. Polygons can get very complicated to map, and care must be taken at each step of the way. Imagine mapping the maple leaf in the above image! It is probably good advice to keep your image maps as simple as possible.
CIRC is of course for circular shapes. For this one we only need to specify 2 sets of coordinates: the X,Y coordinates of the center, and the radius (in pixels).
There is one final attribute that can be used, but I've rarely seen it. What if you have an area of an image that you do not want linked to anything? The simple solution would be to not map that area. But, if you plan on using that portion in the future, and you already have the coordinates, you can specify the coordinates, but instead of the HREF tag, use the NOHREF one. This allows you to change the code at some point in the future, without having to re-map the image just for that portion. Here's how it would look:
<AREA SHAPE="RECT" COORDS="33,0,98,63" NOHREF ALT="Ottawa">
Using our flag example, the result is as follows:
Just as in a word processor, we have various control codes that we can use to emphasize text. Here are some text attribute codes:
If you are quoting
computer code, this font will
make it stand out.</CODE>
As you may have noticed by now, we can also display text in different colors. We use the <FONT COLOR=> tag. The values after the "=" determine the color. For example I used <FONT COLOR="RED"> for this text.</FONT>
There are two ways to specify a value for the color: either by typing in the actual name of the color, or using the RGB code of the number. Not every color is available to you by typing in the name. Many of them are (Netscape recognizes over 140!), but there will come a time when the color you want to use is just not there. This is when you will have to use the RGB value.
The RGB value is based on the fact that colors are made up of
combinations of the three primary colors Red, Green, and Blue. By
mixing various proportions of these three colors we can create any of
the millions available to us. The values for the RGB code are in hexadecimal, and the
range is 0 to FF, which in decimal is 0 to 255. The code is a six-digit
number actually made up of the values for Red, Green, and Blue. The
absence of all color is white, so in RGB that would mean we are using
no Red, no Green and no Blue. So the RGB code for white is 000000.
Similarly the RGB value for black is FFFFFF - all Red, all Green, and
all Blue.
Making Headings
Many documents have different sections, each with its own heading, and we have tags that allow us to define these in HTML. They are the "Heading" tags, and there are six to choose from:
Of course, you are now asking "OK, how do I re-size my text?". Follow the link to find out!
Re-size Your Text
Glad you made it!
To tell our browser to display text at a certain size use the <FONT SIZE=> tag. The size value can either be an absolute value from 1 to 7, or it can be a relative value from -4 to +4.
An example of an absolute value would be something like
this:
<FONT SIZE=4>This is font
size 4</FONT>
However, if we said <FONT SIZE=+2> we would get</FONT> a very different result. That is an example of a relative size: it forces the text to be displayed 2 sizes larger than whatever the previous size was.
I've just made this as large as
possible.
First I made the absolute size 7, then used a relative size of +4 like
this:
<FONT SIZE=7 SIZE=+4>I've just made this
as large as possible.</FONT>
Remember that the <FONT> tag is a
"container" tag and must
be closed with a </FONT> tag.
Block Formatting Codes
Not only can we control what our text looks like, we also can tell our browser how to format blocks of text. To control line-breaks we have:
This is a useful container tag to let you break out text, such a quoted paragraph. For example, this section is formatted using them. It typically indents the quoted text from the both margins.
We all know how boring it is to scan page after page of text. Not only that, but sometimes it's hard to know where one logical section of text ends and another begins. Paragraphs can be used to indicate logical blocks of text, but what if we want some other visual clue to break up sections of a document?
In HTML we can make use of what is known in the print industry as a "horizontal rule", which simply means a horizontal line.
The simplest version of this HTML tag is <HR>, which puts a line across the screen like this:
Before and after an <HR> tag there is an implied line-break tag <BR>, so you don't really need to put one in yourself.
There are a few things we can do with the <HR> tag, such as control the width, or how much of the screen the rule spans. We can also dictate whether the rule is aligned left, center, or right. Of course this only makes sense when we have specified that it is less than 100% of the screen width.
|
Here's a list of the tag attributes: <HR WIDTH="50%"> <HR SIZE="5" WIDTH="50%"> <HR ALIGN="RIGHT" WIDTH="20"> <HR ALIGN="LEFT" WIDTH="50%" NOSHADE> <HR COLOR="BLUE" NOSHADE> |
|
And here's what it looks like:
|
Note that in the first two examples above, the rule was centered horizontally in the middle of the table panel. This is the default alignment.
The SIZE attribute in the second example is the thickness of the rule given in pixels. The default size is 2 pixels.
Also note that the WIDTH attribute can be specified as a percentage of the screen width or as a number of pixels.
In the fourth and fifth examples, I used the NOSHADE attribute, to get rid of the drop-shadow effect.
Finally, there is one other attribute, but it currently is only recognized by Microsoft Internet Explorer. That is the COLOR attribute. The last (fifth) example above specifies a blue horizontal rule, but it will only be colored in Internet Explorer. This is an example of how software companies are trying to influence the consumer by introducing their own proprietary HTML tags. Netscape has a number of "private" tags as well. If you are doing HTML coding you must be aware of what tags are truly compliant to the recognized HTML standard.
Organize your Document with Lists
Ordered Lists
We're all familiar with lists. Grocery lists, telephone directories,
instructions, table of contents, etc. I make extensive use of lists in
this document, so it's time I showed you how it's done.
There are different types of lists available to us:
For each list item we identify it as such by preceding the text with <LI>. To produce the first two items in the above list, I used this code:
<OL>
<LI>Ordered lists
<LI>Unordered lists
</OL>
Two things immediately come to mind. First, I didn't have to specify what number to start with, it automagically started at #1. Second, I didn't to put a <BR> command at the end of each item. Note also that the text is indented from the left margin slightly.
Technically the <LI> tag is a container tag but realistically, the closing tag is hardly ever used. If you wish to though, use </LI> at the end of each item.
What if we don't want to use numbers, but letters instead? We do this by using the <OL TYPE=> tag. Here are the various values for TYPE we can use:
We don't always want our lists starting from #1, or the first letter in the alphabet. In our definition of the list we can specify what value to start with. To do this we use the <START=> tag.
Instead of starting at #1, let's say we want to start our list at #12. Here's the code to do it:
<OL TYPE="1" START="12">
<LI>This is line #1, but it starts at item #12
<LI>Line two is really item #13
<LI>Item #14 ...
</OL>
This code produces the following output:
Just as we can specify what number to start our list at, we can use the same method to start at a different letter by defining that letter as the START= value.
The astute reader will realize this is how the Table of Contents was created.
Many times we don't necessarily need or want an ordered list. If we just want to itemize a list of things with bullets, this is the method to use. The syntax is similar: <UL> to start the list, and </UL> to end the list. Our choice of type is DISK | CIRCLE | SQUARE.
Here's an example of a simple unordered list:
|
and the code that produced it:
<UL> <LI>Item number 1 <LI>Item number 2 <LI>The number 3 item. Notice how this line wraps around and indents automatically. </UL> |
The same list using squares:
|
and the code ...
<UL type="square"> <LI>Item number 1 <LI>Item number 2 <LI>The number 3 item </UL> |
... circles:
|
... code: <UL type="circle"> <LI>Item number 1 <LI>Item number 2 <LI>The number 3 item </UL> |
and disks: (the default)
|
...code: <UL type="disk"> <LI>Item number 1 <LI>Item number 2 <LI>The number 3 item </UL> |
Sometimes we have a situation where we need a sub-list, as in the Table of Contents for this document. To get a sub-list, we just define another list inside the first one. Here's some examples and the code:
|
|
<OL TYPE=SQUARE> <LI>Organize your Document with Lists <OL TYPE="A"> <LI>Ordered Lists <UL TYPE=CIRCLE> <LI>How many nested lists? </UL> <UL TYPE=DISK>Ordinary bullets again <LI>Unordered Lists </UL> <LI>Nested Lists </OL> |
Note that we can also change the "type" of counter in our nested list. If a type is not specified in each list definition, the browser will automatically use a different type. However, if you want the same type of bullet you must explicitly specify that. We can also mix and match Ordered and Unordered lists.
To make lists even more useful, we can wrap a list item in an anchor
tag,
as in the Table of Contents of this document. In this particular case
we are
linking to a location in the same document. See the section on
linking text to see how this is done.
Page Layout Using Tables
Some of the best pages on the Internet use a tool called tables to organize elements on the page. Tables, as the name suggests, are similar to grids, or the cells in a spreadsheet. They let you map out your page into rows, columns and cells, which can be a very powerful layout tool. Each row, column, and cell can be sized separately, and may contain either text or images.
Tables are container tags, using <TABLE> </TABLE> to wrap around the whole definition. Within the opening tag, we can place other tags, including:
Before sitting down to code your table, it's a very good idea to draw a schematic first, to show position and relative sizes of the various rows, columns, and cells. Remember that cells may contain images or text. Also, a table may contain another table, much as a list may contain another list.
Inside the <TABLE></TABLE> tags we need to define rows and cells. The row tags are <TR></TR> for Table Row, and <TD></TD> (Table Definition) defines a cell. Note that the row and cell tags are containers, so you must have a closing tag for each opening one. If you forget to close a row or cell, weird and not so wonderful things may happen.
Here is a simple table layout labelled to help us:
TABLE
+------------+----------------------------+
| TR | TD |
| TD | COLSPAN 2 |
| ROWSPAN 2 | CELL 2 |
| | /TD |
| +-------------+--------------+
| | TR | TD |
| CELL 1 | TD | |
| | | |
| | CELL 3 | CELL 4 |
| | | |
| /TD | | |
| /TR | /TD | /TD /TR |
+------------+-------------+--------------+
/TABLE
Begin at the top of your diagram and start labeling from left to right.
Once you have your diagram labeled, you can enter the tags into your
document. That way you will know that they are all there and properly
closed. Then, in the <TD>...</TD>
sections, enter the code for whatever content or image you want to
place
in that cell.
With each <TD> tag we can also include various related tags that give us more control over the cell.
Another tool which can be used to break up your page into distinct areas is frames. You may have seen frames already - they usually break up the full window into two or three smaller ones. Each one may have scroll bars at the side and / or bottom. One thing to consider when deciding whether to use tables or frames is that tables can be inserted anywhere in a document; when you go with frames, your whole document (or collection of them) is in frames.
Like tables, a bit of design work done on paper first will pay off later. Unlike tables, each frame's contents are a separate HTML file. The initialization or setup for the frames is also a separate HTML file. In one sense this makes it easier to manage frames than tables. However, don't use this as an excuse to use frames if tables are really what you should be using.
Starting with the setup HTML file, we still have do a certain amount of coding to do. After the usual <HTML> <HEAD> <TITLE>..</TITLE> tags, we skip the <BODY> tag altogether. Again, we skip the <BODY> tag.
Frames are container tags (it seems most HTML tags are), and as such we
have an opening tag <FRAMESET> and a
closing tag </FRAMESET>. Like tables, we
define how many rows and / or columns we want in the opening tag. We
can use either pixels or a percentage of the screen height, or mix
both! Start at the top of the diagram and work from left to right.
Below is a simple diagram of a possible arrangement for frames:
+------------------------------------------------------+
| setup.htm |
| +-------------------------------------------+ --- |
| | banner.htm | |
| | | 10% |
| +------------+------------------------------+ --- |
| | | | |
| | menu.htm | | |
| | | | |
| | | | |
| | | content.htm | |
| | | | |
| | | | 90% |
| | | | |
| | | | |
| | | | |
| +------------+------------------------------+ --- |
| |<--- 25% -->|<------------ 75% ----------->| |
| |
+------------------------------------------------------+
To produce this we will need four HTML files: one for each frame, and
the main index file. Here is the code for the setup.htm
file:
(note that this file may be your main entry point, so it would be named
index.htm)
|
<HTML> <HEAD> <TITLE>A Framing Experience</TITLE> </HEAD> <FRAMESET ROWS="10%,90%"> <FRAME SRC="banner.htm"> <FRAMESET COLS="25%, 75%"> <FRAME SRC="menu.htm"> <FRAME SRC="content.htm"> </FRAMESET> </FRAMESET> <NOFRAMES> </NOFRAMES> </HTML> |
Before immediately trying to see what this looks like, you should have created the files that setup.htm is looking for, namely banner.htm, menu.htm, and content.htm. They don't have to have all the content you need at this point, but they should be viewable HTML documents; without them, your browser will likely throw out some nasty error messages. Adding a different background colour to each file will help you determine which is which, and whether the layout is what you want.
Since each frame is a separate HTML file, everything to do with a frame after it's created is controlled by the HTML file for that frame. Think of it as being able to see all the documents at once, which is essentially what is happening. To add some confusion to the issue, each separate HTML file may itself contain a frame definition. Caution is what's called for when you start nesting frames within frames though.
In the code above, we start out with normal HTML tags, without the <BODY> tag. The first <FRAMESET> tag defines the relative sizes of each frame, and their orientation to each other. Inside the <FRAMESET> tag we define the number of rows, and what their relative heights should be. In our example above we've set up two rows, the top one to be 10% of the screen's height, and the bottom one to be of course 90%. Note that the number of rows is determined by the number of "arguments" we give to the ROWS= tag. Obviously if one row takes up 10% of the screen, the other takes up 90%. So we could use a shorthand symbol for this, the asterisk (*), to mean "whatever is left". Here's what it would look like:
<FRAMESET ROWS="10%,*">
Deciding whether to use percentage or pixels will depend on the content of each frame. If you have a corporate logo that you want to be fully visible all the time, you should probably use pixels, as that will guarantee the logo will be visible, no matter what the resolution is on the user's monitor.
Next we tell the browser what HTML file to put in that frame using the <FRAME SRC="banner.htm"> tag.
We start another frame within the first one by using another <FRAMESET tag, this time defining two columns, the left one 25% of the screen's width, and the other 75% of the width. We could have used the asterisk here.
Again, we tell the browser what HTML files to use. Remember we are moving left to right, and top to bottom: put the correct HTML file into the correct frame.
Close off the middle pair of frames using a </FRAMESET> tag, then close the outer frame using another </FRAMESET>.
The <NOFRAMES></NOFRAMES> tags are for browsers that don't know what to do with frames. Some older releases of both Internet Explorer and Netscape Navigator, as well as text-based browsers such as Lynx, are not frames-enabled. This pair of tags allows you to place any HTML code between them you want to. They essentially replaces the missing <BODY></BODY> tags. Browsers that are frames-aware will ignore anything between these two tags.
If the content of a frame cannot be viewed in one screen, scroll bars automatically appear down the right side of the frame, and perhaps across the bottom of it. You can control whether you want your viewers to scroll or not by adding a SCROLLING= tag in the opening <FRAME tag (not the <FRAMESET tag). If you set it to YES, scroll bars will always be visible. Setting it to NO will not allow scroll bars, no matter what. The default value is AUTO, which is usually what you want, so it can be left out. This will turn them on or not, depending on whether content is completely viewable or not.
One thing to note is how to make a particular frame "active" when viewing them. You may have tried to print something in a frame, only to have it print the contents of a different frame. This is because the other frame was active. By clicking the mouse anywhere in a frame, you make that frame the active one; only one frame can be active at one time. If the frames have borders, you should see a difference in them as you click in different frames on the screen.
If you have visited a site using frames, you may have noticed that you can grab the borders of a frame with the mouse, and drag it around, thus resizing the frames. If you don't want viewers to be able to do this, add a NORESIZE tag in the <FRAME tag.
Here's the same frames example above, with the added tags:
|
<HTML> <HEAD> <TITLE>A Framing Experience</TITLE> </HEAD> <FRAMESET ROWS="10%,90%"> <FRAME NORESIZE SRC="banner.htm"> <FRAMESET COLS="25%, 75%"> <FRAME SCROLLING=YES SRC="menu.htm"> <FRAME SRC="content.htm"> </FRAMESET> </FRAMESET> <NOFRAMES> </NOFRAMES> </HTML> |
A common use for frames is to have one frame showing some kind of list, or selections from a table of contents. When a user clicks on a link in one frame, the contents appear in a different one, usually larger. This is targeting, and you must have a thorough understanding of how it works if you are going to be working with frames. Targeting is how users navigate around in your frames.
Before we can target a frame, we have to give it a name. This is done in the <FRAME tag like this: <FRAME SRC="content.htm" NAME="content">.
Now, in a different frame, we can make a link to this frame using tags we already know, plus one new one. Let's say we have a menu of choices in the file named menu.htm. If we want a link in that file to display itself in our main "content" frame, here's what is needed:
<A HREF="content.htm" TARGET="content">Click here to see contents</A>
Just so we're clear:
It is imperative that you refer to the identically same name in the NAME tag and the TARGET tag.
There are four names which are reserved. They all start with an underscore (_): _blank _self _parent _top
To see frames in action, follow this link. It
will display something like the example above. To get back to this
document, press the "Back" button on your browser.
Interactive Pages Use Forms
If hypertext is the heart and soul of the World Wide Web, then interactivity is the eyes, ears and mouth. By making your web pages interactive, you allow the viewer to send information back to you. This could be a simple comment about your page, or a complicated survey you wish filled out. Forms are the way to do this.
Please note that in order to make your documents truly interactive, you would have to invoke either a Java applet, or a script written in one of the scripting languages (JavaScript, Perl). This document only deals with the HTML side of things, and building forms is done in HTML. What happens when a user clicks a "Submit" button is dealt with using either Java, JavaScript or a CGI script, all of which are beyond the scope of this document.
Like their paper-based cousins, HTML forms are used to elicit some information from a viewer. Once filled out, the form is "submitted", or sent to the owner or maintainer of the page. There are basically only three ways to allow a user to impart information: either checking some kind of box, picking items from a selection, or entering their own data into a specific area. Even with only these weapons, a good form designer can cover any detail and complexity of topic.
As with many HTML structures, forms are container elements. Every form must begin with a <FORM> tag and end with a </FORM> tag. One of the simplest ways to get information is by checking a box of some kind. First we will introduce the "radio button", so called because of its similarity to the buttons on car radios to lock onto a specific station. Like these buttons, only one can be active at one time - they are mutually exclusive.
Here is a simple form:
Here's the code for the above form:
|
<FORM NAME="MUSIC"> What type of music do you like?<BR> <INPUT TYPE=RADIO NAME="SOMEFORM" VALUE="ROCK" CHECKED>Rock and Roll<BR> <INPUT TYPE=RADIO NAME="SOMEFORM" VALUE="COWBOY">Cowboy<BR> <INPUT TYPE=RADIO NAME="SOMEFORM" VALUE="BLUES">Blues<BR> <INPUT TYPE=RADIO NAME="SOMEFORM" VALUE="JAZZ">Jazz<BR> <INPUT TYPE=RADIO NAME="SOMEFORM" VALUE="CLASSIC">Classical<BR> <INPUT TYPE=RESET NAME="SOMEFORM" VALUE="Reset"> </FORM> |
Every form must have a name, defined in the opening <FORM> tag. Ours is named "music". On the same page, you can't have two forms with the same name.
After an explanation of what the form is about, we place our buttons with the <INPUT TYPE=RADIO tag. Each button has a NAME and a VALUE.
Note that the "Rock & Roll" definition also has the word CHECKED. This will "pre-select" Rock & Roll when the form is initially displayed, as well as when the "Reset" button is pressed. This is an optional tag.
In this example all the radio buttons have the same name, but different values. This places them in the same "group". By design, radio buttons are "mutually exclusive".This means that within a group of radio buttons, you can only choose one.
Use radio buttons when you want only one choice from several.
The "Reset" button is created by the <INPUT TYPE=RESET VALUE="Reset"> tag. The VALUE is what you want to appear on the button. Note also that it has the same NAME as the other buttons.
Another type of simple input type is the check box. They work similarly to radio boxes but allow you to choose more than one item. Make sure you name all items in the group with the same name. Here's the same form using check boxes:
The only difference between checkboxes and radio buttons is the TYPE=CHECKBOX instead of RADIO. Note that "Rock & Roll" was again optionally pre-selected by using the CHECKED tag in the <INPUT> definition.
With check boxes, you can select just one or all of the choices.
Another way to let the user select from a list uses a slightly different format. The list is presented in a window, and the user clicks on the one/s s/he wants. Using our music form, here's what it looks like:
This method of input uses some new tags, so here they are:
|
<FORM NAME="MUSIC"> What type of music do you like?<BR> <SELECT NAME="STYLE" SIZE=2 MULTIPLE> <OPTION SELECTED>Rock & Roll <OPTION>Cowboy <OPTION>Blues <OPTION>Jazz <OPTION>Classical </SELECT> <INPUT TYPE=RESET VALUE="Clear Choices"> </FORM> |
Again we start with the opening <FORM> tag, but this time we use the <SELECT> tag. We also give the form a name, as well as a name for the subject matter of the selection. In our case we're talking about different styles of musical taste, so we name our selection "STYLE". Now, all of the inputs will be grouped together under this name.
The <SIZE=2> tag indicates how many items will appear in the window at one time. Since we have only five choices, two seems a good compromise. Leaving out a SIZE= tag will display all the choices in the window, as will defining a size equal to the number of selections. The width of the window is determined by the longest selection.
The last tag in the opening, MULTIPLE, allows the user to choose more than one selection. In this case it makes sense, but you could force the user to only pick one item by leaving this tag out. (Note: To choose more than one item, press the Ctrl key while clicking the selection.)
Now we list all the selections using the <OPTION> tag. This time, to pre-select Rock & Roll, we used the SELECTED tag. Again, this is optional.
We close the opening <SELECT> tag with a </SELECT>.
The end of the form is the same as the others: add the reset button, and close the form.
The methods above are good when you want a limited number of items to choose from. But when you want the user to enter their own data, we need to use different tools. The first is a very simple text entry window, such as might be used to enter your last name.
Here's all that's needed for the form:
|
<FORM NAME="TextEntry">
This entry box will only accept 10 characters:<BR> <input type=text maxlength=10 size=13> <input type="reset" value="Clear"> </FORM> |
Again we name the form in the opening <FORM> tag, then give the user some information. Next we set INPUT TYPE=TEXT to produce the window. To limit the number of characters a user can enter we use the MAXLENGTH tag. However, you will notice a SIZE tag specifying 13. This tag controls the width of the window measured in characters. We use this in case the user has a different font for their display that takes up more room than might fit in our MAXLENGTH statement.
Using the same form, but specifying INPUT TYPE=PASSWORD instead of TEXT will replace whatever the user enters with asterisks in the window.
If we want to get more information from the user, such as a comment or feedback, we use a slightly different text entry method. Instead of an input type, we use <TEXTAREA></TEXTAREA> to create the window. Ideally you should have both the opening and closing tags on the same line, otherwise when a user clicks in the textbox, they may find the cursor "tabbed in" already.
The code for the above text form:
|
<FORM NAME="Comment">
Enter a comment in the box below:<BR> <TEXTAREA COLS=25 ROWS=5 WRAP=PHYSICAL> </TEXTAREA> <INPUT TYPE=RESET VALUE="CLEAR"> </FORM> |
After naming the form, we use the <TEXTAREA> tag to create the text window. Inside this tag we also define the size of the window by specifying the number of columns (COLS=25)and rows (ROWS=5). Remember, columns are vertical and rows are horizontal. The last tag in the opening statement, WRAP=PHYSICAL, refers to how the form will treat carriage returns. We have specified that all carriage returns will be included with the text. If you don't want the carriage returns, use WRAP=VIRTUAL.
Specifying the number of columns and rows for the textarea does not affect the amount of text a user can enter, only the physical size of the window on the screen. The amount of text you can enter into a TEXTAREA window is about 30,000 characters - hopefully more than enough!
A strange feature of coding the <TEXTAREA> is that if you have the opening tag on one line, and the closing tag on a separate line, there may be an invisible tab character in the text field. This should not happen, but it does. In order to remove this invisible tab, put both the opening and closing <TEXTAREA> tags on the same line.
Finally, add the "Reset" button and a "Submit" of course if this were a real working form, and close the form as usual.
The astute reader may have realized that all the examples above lack one very important piece of information - how to send the completed form back to the owner of the page. This was not due to a lack of attention on the writer's part, but I felt it better to get the nuts and bolts of form design out of the way first. Sending the form is rather trivial compared to the rest.
A few things are required in a form to make it submittable. First, in the opening <FORM statement, we need to add a METHOD=POST or METHOD=GET tag. We also must add a ACTION= tag where we assign the URL of the script that will handle the form.
We also need to add a button for the user to press! The code is similar to the "Reset" code. Here's one of the above examples complete with a "Submit" button.
And the code ...
|
<FORM NAME="MUSIC" METHOD=POST> What type of music do you like?<BR> <SELECT NAME="STYLE" SIZE=2 MULTIPLE> <OPTION SELECTED>Rock & Roll <OPTION>Cowboy <OPTION>Blues <OPTION>Jazz <OPTION>Classical </SELECT> <BR> <INPUT TYPE=RESET VALUE="Clear Choices"> <INPUT TYPE=SUBMIT VALUE=" OK - Send It"> </FORM> |
The VALUE tags of both buttons may contain text which will appear on the buttons. If you don't include the VALUE tags, the text will be simply "Submit" and "Reset".
That is all you have to do at this end to make a form submittable. Of course, what to do with the form once it has been sent is another topic all together and beyond the scope of this document. If you want to know more about that, look up CGI (Common Gateway Interface) on the Internet. Here's a good place to start.
Email: trudge@softouch.on.ca
Web: Research Central
Several people made suggestions for additions and clarifications, to which I extend my thanks. You know who you are.