Hottips Home Page

Changing the size of your text

You can make your text either larger or smaller by inserting a <FONT> tag, like this:

The text will be displayed like this:

This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.

Many browsers will also support setting of the base font size at any point in the document by insertion of the <BASEFONT SIZE=> tag. The default font size is 3, and the allowable size range is 1-7. Subsequent <FONT size=> tags then operate on the new base font size. For example, insertion of the tag <BASEFONT SIZE=2> makes the text look like this.

The color of individual portions of text can be changed in browsers that support the Netscape 2.0 enhancements to this tag. For instance:

will give:

This is a test.This is a test.

Go to index.

Creating tables

Before I describe how to place tables in your document, I should say a few words about them. They have the obvious use of placing tabulated information in your HTML document. For example, the index for this document is a table containing a couple of unordered lists. But tables have a second (perhaps more important) use. They are the primary HTML tool for controlling page layout. This is done by overlaying a table (lines invisible) on the page, then placing text and graphics in various cells of the table as a means of locating them in specific areas of the page. This section will cover only table construction. See the "Tips" index for a discussion of using tables to control page layout.

The basic table.

A table is created by a pair of <TABLE> </TABLE> tags. These tags enclose TABLE ROW tags (<TR> </TR>), which in turn enclose TABLE DATA tags (<TD> </TD>). The code for a simple table containing two rows and three columns looks like this:

			<TABLE>

			       <TR> 
				<TD>apples </TD>
				<TD>oranges </TD>
				<TD>bananas </TD>
			       </TR>

			       <TR> 
				<TD>pineapples </TD>
				<TD>lemons </TD>
				<TD>tangerines </TD>
			       </TR>

			</TABLE>

The table itself will display like this:

apples oranges bananas

pineapples lemons tangerines

NO LINES! Right. Lines have to be added by specifying a border thickness (in pixels) after the opening TABLE tag (<TABLE BORDER=4>). Now our table looks like this:

apples oranges bananas

pineapples lemons tangerines

Let's go on and see what else we can control about our table. We can center it by enclosing the entire code for the table in CENTER tags, like this:

apples	oranges	bananas
pineapples	lemons	tangerines

The width of the entire table can be set by specifying the width in pixels or percent (my favorite) in the opening TABLE tag (<TABLE BORDER=4 WIDTH=60%>). Now we have:

apples	oranges	bananas
pineapples	lemons	tangerines

Hmmm. Now the columns are different widths. We can specify the width of each column by adding a similar WIDTH= statement to one TABLE DATA tag in each column. I guess it is time to show the whole table code again so that nobody gets lost.

		<TABLE BORDER=4 WIDTH=60%>

		       <TR> 
			<TD WIDTH=33%>apples </TD>
			<TD WIDTH=33%>oranges </TD>
			<TD WIDTH=33%>bananas </TD>
		       </TR>

		       <TR> 
			<TD>pineapples </TD>
			<TD>lemons </TD>
			<TD>tangerines </TD>
		       </TR>

		</TABLE>

Notice that the percentage here is in terms of the table width, not the page width (one advantage of specifying width in pixels). This gives:

apples	oranges	bananas
pineapples	lemons	tangerines

We should also center the cell contents in the cell. This can be done by adding ALIGN=CENTER (or RIGHT, or LEFT) to each opening TABLE ROW tag (<TR ALIGN=CENTER>). The ALIGN spec can also be added to individual cells, and will override the row alignment specification. Isn't this fun? We must be nearly done - NOT! There are lots of things to tamper with yet. In any case, our table now looks like this:

apples	oranges	bananas
pineapples	lemons	tangerines

There is also a VALIGN=CENTER (or TOP, or BOTTOM) spec that is used in the same way as ALIGN to control vertical placement of the cell contents.

Individual cells within the table can be joined to form larger cells by adding COLSPAN= or ROWSPAN= to the TABLE DATA tags. If the first data cell in the first row of our table is written <TD WIDTH=33% ROWSPAN=2>apples </TD>, and the first cell is left out of the row below to make room, the table looks like this:

apples	oranges	bananas
apples	lemons	tangerines

If we had added COLSPAN=2 instead of ROWSPAN=2, and left out the cell to the right rather than the cell below, the table would have looked like this:

apples		bananas
pineapples	lemons	tangerines

The code now looks like this:

		<TABLE BORDER=4 WIDTH=60%>

		       <TR ALIGN=CENTER> 
			<TD WIDTH=33% COLSPAN=2>apples </TD>
			<TD WIDTH=33%>oranges </TD>
			<TD WIDTH=33%>bananas </TD>
		       </TR>

		       <TR ALIGN=CENTER> 
			<TD>lemons </TD>
			<TD>tangerines </TD>
		       </TR>

		</TABLE>

While we are on the subject of cell size, I should mention that by default, cell contents will wrap in the cell, with a corresponding increase in cell size as necessary. If we put more text in one of our cells, this happens:

apples, golden delicious or cortland	oranges	bananas
pineapples	lemons	tangerines

This can be prevented by adding the spec NOWRAP to the TABLE DATA tags.The cell width will increase to fit the contents, overriding the cell width settings you have made.

We are getting close to the end now. You can caption a table by adding a pair of <CAPTION> </CAPTION> tags within the TABLE tags, but not within a row or cell. The caption will be centered on the table, and will be placed at the top by default. It can be placed at the bottom by adding ALIGN=BOTTOM to the opening CAPTION tag.

Table of Fruits
apples	oranges	bananas
pineapples	lemons	tangerines

I should also mention that there are TABLE HEADER cells (<TH> </TH>). They are identical with TABLE DATA cells in every respect except that their contents are displayed in bold font. No biggie.

You will notice that I have taken great care in this example to format the code neatly. I advise that you make a habit of this, so that when you go back and look at the code for a table, it makes some sense. Please do not use VIEW, SOURCE to see my table code. Do as I say, not as I do.

Go to index.

Creating and using forms.

This will be a fairly long section, so you may want to get a cup of coffee or a beer or something before you start reading.

Lets start out by taking a look at a form that uses all of the common form elements, with the code that generates each element shown in bold beneath it. I have disabled this form by putting in a bogus email address to keep my mailbox from overflowing. I suppose I could have used Bill Gates email address or something like that. Click the buttons all you want, but clicking the "send" button may result in undelivered mail being returned to you.

First of all, the form is opened with a FORM tag. For an explanation of METHOD and ACTION, see the last part of this section.

<FORM METHOD="POST" ACTION="mailto:nobody@nowhere.net">

Now, a TEXT FIELD:

Name:
Name:<Input name="name" Value="default text" Size=40 maxlength=40>

Name is what the contents of the text field will be called in the form submission. Value is the default text that will appear in the text field (if any). Size is how big the box will appear in the page (in number of characters). Maxlength is the maximum number of characters that can be entered in the text field.

Now a TEXT AREA:

Describe the problem you are having:
Default text.

<Textarea Name="comments" Rows=4 Cols=70> Default text. </TEXTAREA>

Name is what the contents of the text area will be called in the form submission. Rows and columns describe the size of the text area. Any desired default text is included between the opening and closing tags.

RADIO BUTTONS allow one choice from those presented.

Operating system:
Windows 3.1
Windows for Workgroups 3.11
Windows 95

Operating system:<BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="win3.1" CHECKED>Windows 3.1<BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="wfw3.11">Windows for Workgroups 3.11<BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="win95">Windows 95<BR>

Again in this case, name is what the results will be called in the form submission, but in this case, you need to know that all of the buttons in a group MUST have the same name. Value is what will be contained in the form submission if the button is checked. CHECKED indicates the default button (if any). In the case of radio buttons, only one can be selected. Give it a try.

Checkboxes allow the user to make one or more selections.

I use the following types of software:
Word processor
Spreadsheet
Database
Internet browser

I use the following types of software: <BR>
<INPUT type="checkbox" NAME="wordprocessor" CHECKED>Word processor <BR>
<INPUT type="checkbox" NAME="spreadsheet">Spreadsheet <BR>
<INPUT type="checkbox" NAME="database" CHECKED>Database <BR>
<INPUT type="checkbox" NAME="internet">Internet browser <BR>

Name is what the the output of each checkbox is called in the form return. All checkboxes in a group cannot have the same name, since the result of each checked box is returned. CHECKED places a default check in a box.

Selection drop-down lists can be used to choose a single option.

My age:

My age: <SELECT NAME="age">
<OPTION>Under 18
<OPTION>18-25
<OPTION SELECTED>25-50
<OPTION>Over 50
</SELECT>

Name is what the output of the selection dropdown will be called in the form return.

A selection list can also be used to select more than one item.

I can be contacted by: (Hold CONTROL to select more than one)

I can be contacted by: (Hold CONTROL to select more than one)
<SELECT NAME="contact" MULTIPLE SIZE=4>
<OPTION SELECTED>Phone
<OPTION>Email
<OPTION>Snailmail
<OPTION>Fax
<OPTION>Pony Express
<OPTION SELECTED>Telegram

If multiple is included in the tag, more than one choice is allowed. Size controls how much of the option list is displayed (and can also be used in the single-option drop down list above). Once again, name is what the output will be called in the form submission.

The items above are the commonly used form inputs. Now, allow the user to clear the form or submit the results with some buttons.

Value is the text that will appear on the button. The size of the button will change to accommodate the text.

Don't forget to close the form tag.
</FORM>

Go to index.

METHOD and ACTION

At present, there is only one METHOD, which is POST, so don't dwell on that too long.

There are two possible ACTIONs for forms, but only one that is available to the average user.

ACTION="filename" will feed the form submission to an executable file or script on the server, which will process the submision and do something with the result, usually write it back to the screen in HTML. For instance, when you do an InfoSeek search, you enter your input in a form. It is fed to a database program, which conducts the search of the database and writes the results back to your screen. This is very cool, but most servers (including GeoCities) will not allow you to use it, for security reasons. Many servers have some "canned" scripts that you can use. When this is the case, the server will provide you with specific instructions for using the script.

The second option is ACTION="mailto:email address". This one is available to everybody, and is the one you will most likely use. In this case, the form submission is emailed to the indicated address. So what is a "form submission"? I have filled in the sample form above, and mailed the results to myself. Here's what it looks like:

name=Harry+Ellery&comments=This+was+entered+in+the+TEXT+AREA.%0D%0A &opsys=win3.1&wordprocessor=on&database=on&age=25-50&contact=Email &contact=Fax

Hello? What's that? Not exactly straightforward, is it? Change + to space, replace each & with a carriage return, and interpret each two-character string following a % to it's ASCII equivalent, and you have it! If you look at it for a while, you will be able to interpret it. This may not be as cool as you thought it would be, but that's forms, There are some other tags, such as password fields, that I won't go into because this is a basic primer, and they aren't really useful with the mailto: action. That's forms.

Go to index.

Creating and using imagemaps.

If you are looking for the ultimate in slowness and obscurity for your page, look no further. Imagemaps are for you! Where you could have just an instant-loading and easily understood list of choices, you can have a huge graphic which will take forever to load (if it loads at all) and is hard to understand. The definitive geek tool! Now that you know what I think of imagemaps, I will tell you what they are and how to do them.

An imagemap is a graphic image in which different areas of the image have been hotlinked to different parts of your page or to other locations on the web. Click here to see one. The user can go to those links by clicking on the proper areas of the picture. If you haven't mastered graphic images and ftp'ing files, You should cover those sections before you tackle imagemaps.

It isn't very difficult to put imagemaps on your page. These are the steps to follow:

create the graphic image that will be mapped.
Create a map file for the image.
FTP the image and the map file to your directory on the GeoCities or other server.
Add a reference to your page to display the mapped image.

Creating the image....

Use any paint or draw program to create a .gif or .jpg image, or find a ready made one that you like somewhere on the web. Any image will do. You can use Paintbrush to create an image, then convert it to a .gif or .jpg using any one of the many graphic utilities that are available free on the web.

Create a map file for the image....

This is really the heart of the process. A map file is a file that contains the information about the areas of the image you have selected, and the URL's they are linked to. Creating one is a lot easier to do than it sounds, since you use a special little program to outline the areas, and IT writes the map file for you. I use a free one called MapEdit. The image and the map file must have the same name. If the image is elephant.gif, then the map file is elephant.map.

FTP the image and the map file to the server....

There are instructions for ftp'ing files to GeoCities in the Tips section of this page.

Place a reference to the imagemap in your page....

An imagemap is placed in your geocities page by including a line that looks a lot like an ordinary graphic that is linked to something, except the URL it is linked to is a script file on the server, and the <IMG SRC=> tag contains the word ISMAP. It looks like this:

<A HREF="/cgi-bin/imagemap/Athens/2090/mapbuttn.map"><IMG SRC="mapbuttn.gif" ISMAP></A>

Put your city and number in place of mine, and the name of your image file in place of "mapbuttn.gif". Your imagemap should now be in working order.

"Server-side" vs. "client-side" imagemaps

The instructions above tell you how to create a "server-side" imagemap. It is called that because it depends on a program on the server to work. There is another kind of imagemap, called a "client-side" imagemap, which is totally independent of the server. All of the necessary information is contained in your HTML document. Is this better? Well, yes and no. A client-side imagemap is much less trouble to create, but it depends on the browser that the reader is using for support, and unfortunately, only a few of the latest browsers support it. To find out about client-side imagemaps, click here. A good mapping program, such as MapEdit, will create either kind.

Go to index.

Go to the GeoCities Athens

Go to index.