The Big and Small Commands

Rather then specifying the size of the font, if you want the font bigger or smaller, you can just type a command to make the font big or small in HTML 3.0. For example if you wanted your font bigger you would enter the opening command, then the text that you want enlarged, then the closing command. The starting command is an angle bracket “<“ followed by the word BIG followed by an angle bracket “>”. The closing command is an angle bracket “<“ followed by a slash “/” followed by the word BIG followed by an angle bracket “>”. For example, if you wanted the words Hello on your page to be big you could make the source look like this:

 

<BIG>Hello</BIG>

 

The same command is used for small except that the word BIG in both commands is replaced by the word SMALL. For example, if you wanted to have the copyright information on your page small you would plug this into the source:

 

<SMALL>This page is copyright Justin Weber</SMALL>

The Superscript and Subscript Commands

Sometimes, when working with fonts (especially when making a page that deals with mathematics) people wish that they could make a letter or word above or below the normal text. A letter or word above the normal text is known as superscript and in order to do this there are a special set of commands that must be used. When you wish to start your superscript you merely enter an angle bracket “<“ then the letters SUP then an angle bracket “>”. Then you type the text that you want to be in Superscript form. After the text is done you tell the browser to make all text after that normal with an angle bracket “<“ followed by a slash “/” followed by the letters SUP followed by an angle bracket “>”. If you wanted a math problem on your page then the source code would look like this:

 

x<SUP>2</SUP>+y<SUP>2</SUP>=36

 

Text below the normal text area is called subscript. You do this the same way as you do superscript except that you replace the letters SUP with the letter SUB. For example, if you wanted another math problem on your page that uses subscript you would do this:

 

x<SUB>1</SUB>+x<SUB>2</SUB>=36

 

You can do anything that you think will look good or anything that you want using this type of text manipulation. The choice is up to you and the possibilities are endless.

The Image Map Command

The next commands that we will discuss are the image maps commands. There are many different kinds of image maps. There are CERN and NCSA image maps which are used by most people and there is a new map called a CSIM. If you have surfed the net maybe you know what I am talking about. Have you ever gone to a page and held your cursor over an image map and when you did this, down at the bottom, there was a link and coordinates (22,33). That kind of map is a CERN or NSCA map. The CSIM map is different in that when you hold the cursor over the map there will be no coordinates and you will see directly where the map is linked to, not a link to a .map file. The older maps need a special server that can support image maps where as the newer maps do not need a special server. You may think that this is good but if the person viewing the map is not using a HTML 3.0 compliant browser the map will not work. If possible, I recommend that you use a CERN or NSCA map because a wide variety of people may be using your web page. There is one exception to this rule, other then if your server does not support the CERN or NSCA type, if you put the map inside a frame that only people with a HTML 3.0 browser will see.

In order to put an image map on your page the first thing that you will need is a gif or jpeg. Using this image you will make the map. I will not go into making a map but I will say that it is quite difficult. Most people will use a program that will make it for them, which is what I do. After you have made the map the next route that you will take is dependent on the type of image map that you are going to have on your web page. In order to insert an older image map on your page you must enter the information in a specific way. The first thing that you must do is to make a hyper-link to the map. If your map is name map.map then you would enter the address the same way you would a link to another page. Then you must enter the link for the map, contained inside the A HREF command, in the form of an image. The only modification to this form is that you must enter the words ISMAP as a modifier in the image command. The final source code for a map that is named map.map as is based on gif named map.gif would look like this:

 

<A HREF=”map.map”><IMG SRC=”map.gif” ISMAP></A>

 

Keep in mind that the same rules that can be applied to a normal image in this way can apply to the map. But I do not think that you should do any HEIGHT/WIDTH modifiers into the image command because that could mess thing up. Say that you wanted to have no border on the same map the final source code would look like this:

 

<A HREF=”map.map”><IMG SRC=”map.gif” ISMAP BORDER=0></A>

 

The next route is to use the newer, HTML 3.0, image map on your page. This is done quite differently, first you will need to make the map and save it in the form of a HTML document with your “map creator" then you would need to insert the map on your main web page or have a special web page for maps. Let’s say you want to keep things simple and put the map on your main web page. After to map is done, you would then move on to coding the map into your page. Instead of including a A HREF command in your map all you have to do is enter the image command and add the modifier USEMAP then an equal sign “=” then a number sign “#” followed by the name of the map coded into your page. The final source code for a map named map that uses a gif named map.gif would look like (for an example I used a map that I made for my page with a program called Map This! for windows 95):

 

<MAP NAME="map">

<!-- #$-:Image Map file created by Map THIS! -->

<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:Beta 0 -->

<!-- #$AUTHOR:Justin Weber -->

<!-- #$DATE:Thu May 23 21:56:12 1996 -->

<!-- #$PATH:C:\JUSTIN\WWW\MapThis\ -->

<!-- #$GIF:map.gif -->

<AREA SHAPE=RECT COORDS="0,0,45,55" HREF="test.html">

<AREA SHAPE=RECT COORDS="1,57,45,126" HREF="temp.html">

<AREA SHAPE=RECT COORDS="1,127,45,194" HREF="fun.html">

</MAP>

<IMG SRC=”map.gif” USEMAP=”#map”>

 

Bear in mind that you can still use the same modifiers in a CSIM image that you can use in an older image map. For example if you wanted no border the map would look like this:

 

<MAP NAME="map">

<AREA SHAPE=RECT COORDS="0,0,45,55" HREF="test.html">

<AREA SHAPE=RECT COORDS="1,57,45,126" HREF="temp.html">

<AREA SHAPE=RECT COORDS="1,127,45,194" HREF="fun.html">

</MAP>

<IMG SRC=”map.gif” USEMAP=”#map” BORDER=0>

 

If you wanted to make a main page that contains every image map that you use on your page, for the sake of neatness, you could simply copy all the maps into one HTML document, name it something like map.html and tell the browser to look there for the map. This is done by adding the HTML document’s location in front of the #name of map. The final source code for a map that is named map, in a HTML document called map.html, and for a map called map.gif would look like this:

 

<IMG SRC=”map.gif” USEMAP=”map.html#map”>

The Table Command

The next commands that we will discuss are the many commands that are used to make a table. Because a table is so versatile, it can be used for a wide variety of things. Some pages that I have seen on the internet have used tables for very weird things, and most of the time it looks good. On the other hand, I have seen tables used for normal lists and the pages still look good. If you use a table, your page will look extremely organized and neat because a table organizes data so well. Since there are so many different uses for the table functions I will only discuss the basic use of it. This use it to organize information. To keep things simple I will only have two different lists that hold information. The table that I will show you make organizes information horizontally, the part on the right hand side of the table corresponds to the part on the left hand side.

The command to start a table is an angle bracket “<“ followed by the word TABLE followed by an angle bracket “>”. Inside this command you would enter the size of the border (on a table there are borders which separate each section) and how wide the table is (how much of the page it uses). The border size is usually specified in pixels. If you wanted the table’s border on your page to be one pixel then, inside the starting table command, you would enter the the word BORDER then an equal sign “=” then a 1. Although the width of the table can be entered in pixels it is normally more desirable to enter it in a percent. This way no matter how large the persons monitor (or how big the browser window is) the table will always be the same perspective width for everyone. Your page is going to have a full table on it that takes up the whole page so you will want the width to be 100%. In order to do this, you would enter into the starting table command the width modifier. This modifier is designated by the word WIDTH then an equal sign “=” followed by the percent of the page that you want the table to consume (100%). Then, for a table that is going to list information, you must enter the titles of each category. The command that first needs to be used is the command that signals the web browser to make a new table row, this will be used in every row not just the row with the table titles in it. This command is an angle bracket “<“ followed by the letters TR followed by an angle bracket “>”. Then you would enter the title (head) of the first column. This command is an angle bracket “<“ followed by the letters TH followed by an angle bracket “>”. Then you would enter the title of the column, we are going to use an example from my page’s software section so the first column will be titled Program. Then you would enter the command that signals the browser that you are done entering the title of the column. This command is an angle bracket “<“ followed by a slash “/” followed by the letters TH followed by an angle bracket “>”. You would then repeat this for as many columns that you want (we will have two in our example the next column will be named Information). After you have finished the row you will need to end it with the following command, an angle bracket “<“ followed by a slash “/” followed by the letters TR followed by an angle bracket “>”. The you would proceed to enter the text or images that you want in each column. To start you would enter a TR command to start the row then you would enter the command to separate the columns to appear under the correct titles. This command is an angle bracket “<“ followed by the letter TD followed by an angle bracket “>”. Then you would enter the text or images that, for this specific table, would appear under the Program title. This text for example will be a link to Netscape’s page. You can use the previously discussed A HREF command to do this. Then you would end that column with an angle bracket “<“ followed by a slash “/” followed by the letters TH followed by an angle bracket “>”. You would then do this for every column in your table and then move on to the next row by entering a ending TR command. After you are done with your table you will have to enter the command that signals the end of the table. This command is an angle bracket “<“ followed by a slash “/” followed by the word TABLE followed by an angle bracket “>”. (If you make a table on your page and open up the page with your browser and you don’t see the table, not entering the ending table command is usually the cause.) The final source code for this table look like this:

 

<table border=1 width=100%>

<tr>

<th>Program</th>

<th>Information</th>

</tr>

<tr><td><a href="http://home.netscape.com">Netscape Navigator</a></td><td>Hands down the best browser on the ‘net and this is the place to get it!</td></tr>

</TABLE>

The Frames Command

The next command that we will discuss is the commands to put frames on your web page. Frames can be used to do almost anything. Although frames are a great way to organize information and keep a person never a click away from any part of your page, they do not look good when used in excess. For example, I went to a page one time that had 6 frames on it and the main source of information was in a little tiny frame in the middle. You always want the frame that is the focus to be the biggest and easiest to see because if it is not then people will not be sure what to look at when they go to your page. The good thing about frames is that a person could click in one frame and the action would happen in another frame or in a new browser window. Frames are a series of commands that signal the browser to put different HTML documents in their specified frame. The page that activates the different frames will only contain the information on the size of the frames and there names. It will not contain any HTML coding beyond that, except the title, unless you make an alternate page for the people who have a browser that does not support frames (I highly recommend that). After you have inserted the title of the document you would then start on the frames.

To start a set of frames you need to enter the frame command. This command is an angle bracket “<“ followed by the word FRAMESET followed by the height (either height of columns or height of rows) of the frames followed by an angle bracket “>”. Before you enter the size of the frames you first need to decide how many you want to have. For obvious reasons we will use an example that only has two. First we will enter the height of the columns. The height of either frames can be specified in either percent, size of pixels, or an asterisk “*”. The percent will be how much of the page the column or row of that frame will use, the size in pixels will be the amount of pixels that frame will use, and the asterisk “*” will tell the browser that you want the frame to use all of the space left on the page. (Since we are going to use an example from my page we are going to use pixels and asterisks “*”, but let me tell you how to use percent as well. The only difference between entering a percent and entering a number of pixels is that for percent you would enter a number 1 through 100 followed by a percent sign “%”.) Since I have two frames I will have to put in two values for the frame columns. I would like my first frame to take up all the the columns that are not used by the other frame so I will enter the modifier COLS then an equal sign “=” then an asterisk “*” then a comma “,” then a zero “0” (because I want the second frame to have no column space).

 

NOTE: If you have two frames and you enter a value before an asterisk “*” it will make the frame that much larger then the other one. For example, if you entered a 2 in front of one asterisk and nothing in front of the second asterisk (your source would look like this: 2*,*) the first frame would be twice as large as the second one.

 

Then I would enter FRAMESET again with another modifier that signals the height of the rows. This modifier is the word ROW then an equal sign “=” then the values for each frame separated by commas. In this example our first frame is going to take up all the space that the other frame does not take up so its size will be an asterisk “*” and the other frame is going to use 70 pixels of the page. The starting source code for this frame would look like this:

 

<FRAMESET COLS=*,0>

<FRAMESET ROWS=*,70>

 

Next I must tell the browser what documents I want in my two frames and some information about the frame. Since I have two frames I will have to enter this information twice. The command to tell the browser what document I want in the first frame is an angle bracket “<“ followed the word FRAME followed by the letter SRC followed by an equal sign “=” followed by the name of the HTML document that is too appear in the frame followed by the modifiers followed by an angle bracket “>”. Our first frame is going to have a name test2.html so I will enter that into the code. There are five different modifiers that can be used to change your frame. The first modifier is NAME this modifier tells the browser what the name of the frame is and is only needed if you are going to have links in other frames go into that frame. We will name this frame Main. The next two modifiers deal with the width and height of the margins of the documents that are going to be shown in the frame. You might not have noticed this but normal HTML documents have a rather large margin and if your frame is going to be small you would want to get rid of that. The command is either a MARGINWIDTH or MARGINHEIGHT then an equal sign then a pixel value. Our first frame is not going to use these modifiers. The next modifier is the modifier that allows the frame to scroll, if you do not enter this the browser will automatically choose if the frame is going to have scroll bars. The commands that can be entered after the main modifier which is SCROLLING then a equal sign “=” then either the words yes, no, or auto. Since auto is the default, our first frame is not going to use this command. The final modifier is noresize, this is if you do not want the user to be able to resize the frame by dragging it. I do not care if the user resizes the frame so I will not use this modifier. Our next frame is going to contain a document called frame.html, this frame is going to have a marginheight of 1 pixel, no scrolling, and is not going to be able to be resized. To end of the frame command you enter the ending modifier which is an angle bracket “<“ followed by a slash “/” followed by the word FRAMESET followed by an angle bracket “>”. The final source code for this document would look like this:

 

<FRAMESET COLS=”*,0”>

<FRAMESET ROWS=”*,70”>

<FRAME SRC=”test2.html” NAME=”Main”>

<FRAME SRC=”frame.html” MARGINHEIGHT=”1” NORESIZE>

</FRAMESET>

</FRAMESET>

 

Earlier I had mentioned that you could specify a frameless page for the people who’s web browser does not support frames. In order to do this, you must enter the starting command which is an angle bracket “<“ followed by the word NOFRAMES followed by an angle bracket “>”. Then you would enter your HTML code that you want the person to see then you would enter the command to finish the HTML code. This command is an angle bracket “<“ followed by a slash “/” followed by the word NOFRAMES followed by an angle bracket “>”. The final source code would look like this:

 

<NOFRAMES>