There are a great deal of commands in HTML which do a variety of different things. Once you finish this book you will be acquainted with all of these commands and you will be told exactly what they do and how to incorporate them into your web page.
In order to use the head command on your page you must enter a command that tells the web browser where the head information begins and ends. The command that tells the browser where the head is begins is an angle bracket “<“ followed by the word HEAD followed by an angle bracket “>”. After you have entered this command you will then enter anything that is going to go in the head of your page. Once you have entered the items that are going to appear in the head you will then need to make sure that you enter the command that tells the web browser that you are done entering the items that are going to appear in the head and ready to start on something else. This command is an angle bracket “<“ followed by a slash “/” followed by the word HEAD followed by an angle bracket “>”. The final source code for the most basic head, which is one that contains nothing in it because we have not learned any other commands yet, would look like this: (Note that the items that would appear in the head would go in between the opening and the closing head command.)
<HEAD>
</HEAD>
My web page has the title “Justin Weber’s Computing Center,” in order to incorperate this into my page I put the commands necessary at the TOP of my HTML document. (You will want to write this document in a Text editor because they are very easy to use to write your page, just remember to save the document as *.html or *.htm.) The title command is designated by an angle bracket (all HTML codes are designated beginning and ending with an angle bracket) “<“ then the word TITLE (this is not case sensitive so you may write it like this: title, or this: TITLE, or this: TiTlE, either way they will do the same thing) then another angle bracket “>”. Then you type your title.
NOTE: When selecting a title use one that accurately describes your web page, unless your page is a joke :). My page is about operating systems and computers so I chose the title Justin Weber’s Computing Center, respectively.
To end the title you type an angle bracket “<“ then a slash “/” then the word TITLE then an angle bracket “>”. Here is what my title looks like in the HTML code:
<TITLE>Justin Weber’s Computing Center</TITLE>
That completes the section on the head portion of the web page.
When selecting a certain set of colors for use in you web page make sure that they do not conflict with each other. For example, I have stumbled upon web pages that have light green text and plain gray background. This combination of colors makes the page very difficult to view and could turn people away from your web page.
On my web page I use a white background, I actually have an image for a background but that will be discussed later, with blue text. I decided not to include any special color for links so they will be blue as well. In order to tell the browser that I want this done the command in my script must begin with an angle bracket “<“. After the angle bracket I will need to insert the word BODY. After the word BODY I then enter my list of preferences. The first preference I want to input is the background color. My background is going to be white. This is distinguished by the letters FFFFFF (For a list of all colors and the letters that represent them, see the appendix). I will insert the modifier BGCOLOR=”FFFFFF”. That is all I need to do to change the color. But I am not done, I want the text of my document to be blue. This is distinguished by the code 0000FF. I will insert the modifier TEXT=”0000FF”. If I wanted to specify red for the visited link, so that if a person has already gone here they will know it, I would insert the command VLINK=”FF0000”. And if I wanted the links to be a different color from the text, let’s say black, I would insert the command LINK=”000000”. Then I must end this list with another angle bracket “>”. At the bottom of the body I will have to insert a command telling browser that I am done with the body. That command would be an angle bracket “<“ followed by a slash “/” followed by the word BODY followed by an angle bracket “>”. Here is what the final source of my web page would look like:
<BODY BGCOLOR=”FFFFFF” TEXT=”0000FF”>
The body of my code
</BODY>
The final source of the web page with everything I described above would look like:
<BODY BGCOLOR=”FFFFFF” TEXT=”0000FF” VLINK=”FF0000” LINK=”00000”>
The body of the code
</BODY>
The next modifier that can be used is the command to add a background. The first thing that we will need to do is find a background. A background is normally a gif file that contains an image that will be repeated over and over again when the browser downloads it. It is not a good idea to have a very big background or have one that is not a design. Next the command for the background must be entered into the top body section of parameters. The command for a background is simply the word BACKGROUND. If you have a gif called background.gif you would enter BACKGROUND=”background.gif”. It is not necessary to have a background color if you have a background image.
Here is what the final source of the web page above would look like, with the BACKGROUND command inserted where the BGCOLOR command would be:
<BODY BACKGROUND=”background.gif” TEXT=”0000FF” VLINK=”FF0000” LINK=”00000”>
The body of the code
</BODY>
NOTE= Be sure to upload the background separately to your web server.
The paragraph command is designated by an angle bracket “<“ then a P then another angle bracket “>”. When typing, only insert the paragraph command at the end of the paragraph because it will make a space that will be unsightly if the page is not at the end of a paragraph.
The next command is the paragraph command.
<P>
The paragraph command is designated by an angle bracket “<“ then a P then another angle bracket “>”.
NOTE= There is no need to enter a tab, a tab key is usually entered before a paragraph in a word processor to create five spaces, before a paragraph in HTML because the internet does not use that manner for paragraph typing.
<BLOCKQUOTE>
This is a paragraph <P>
</BLOCKQUOTE>
When putting a link to other information on the internet you should first and most importantly make sure that the link is correct. I have gone to many pages on the internet that have had incorrect or outdated links and it is very annoying. The second thing that you should do is make sure that the page contains information that is relevant to your web page. For example you don’t want a link to Sun Microsystems on a page about dog psychology, unless your web server is made by Sun but that is another story. Third, you will want to choose a good title for the link. Normally this will be the title of the page, but it could also be a brief description of the page. For example, if you put a link to my page you may want to title the link “Justin Weber’s Computing Center” or you may want to title it “A cool page where one can find some computer help.” The decision on how to title the page is up to you.
The command for the A HREF command is designated by an angle bracket “<“ then the words A HREF then a equal sign “=” then the link that you want to put on your page, let’s say my page for now, “http://computing.net” then an angle bracket “>” then a title for the link then an angle bracket “<“ then a slash “/” then a A then an angle bracket “>”.
If you wanted the title for the link to my web page to be Justin Weber’s Computing Center, the final source code will look like this:
<A HREF=”http://computing.net”>Justin Weber’s Computing Center</A>
There are modifiers that can be put into the A HREF command that do different things. For example, there are some javascripts that allow a extra command to put a special title in the link location at the bottom. Normally when you hold your mouse over a link the browser will say the location of the link at the bottom, but if you use one of these javascripts it will put whatever you want at the bottom and replace the location. There are probably other javascripts out there that do other unique things with this A HREF command and the javascript will probably explain exactly how to use it with the A HREF command in it’s help file.
It is also probable that you will need to use the A HREF command to link to other sections of your web page. Because of enhancements to HTML throughout it’s existence you do not need to insert the entire address for this. Let’s say the help file on my page is in the same directory as the page that is begin viewed and that the help file is called help.html. I would not need to type http://computing.net/help.html in the A HREF command I would just need to insert help.html:
<A HREF=”help.html”>Help Me!</A>
Basically a link that is on your server has an address relative to your page. Let’s say the windows95 file on my page is in a directory called windows95 and the file is called windows95.html all that I need to insert is:
<A HREF=”windows95/windows95.html>Windows95</A>
Another useful idea is that if you have a link that is in the parent directory to the directory your document is in all you have to do is enter ../ then the title. Let’s say I have a link to the help page on my windows95 page all I need to do to accomplish this is:
<A HREF=”../help.html”>Help Me!</A>
NOTE= If you have links on your page that are not to pages made by you you may want to frequently check them to make sure that they are valid. If they become outdated and you leave them on your page this could generate complaints from people that are viewing your page.
The next command that we will discuss is the command that is used to link to a certain part of a page. Because pages have been getting larger there is a need to be able to have links to certain parts of them. For example if you had a page that was 1000 lines long and on another page you wanted to have a link to the subject in the last 10 lines if would not be desired to put a link to the top of the page (where a default link with the A HREF command would go) but it would be preferable to put a link to just that section of that page.
In order to do this you would need to put a command on the page that you want the link to go to telling the browser the name of that section of the page and where that section starts. You can have multiple sections on a page but I will just talk about having one section. First you must scroll down to the section in the source code where you want the named section to be. After you have done that you would then enter the name of that section. We will name this section Test. In order to name the section a command must be entered. This command is an angle bracket “<“ followed by the letters A NAME followed by an equal sign “=” followed by the name of the section followed by an angle bracket “>”. This name will not be apparent when looking at the document in a browser and will only be used if the browser is told to look for that name on that page. The final source code for the name of the section would look like this:
<A NAME=”Test”>
This is a test section on my web page...
Next you must put a link to that test section on the page. You can either have the link to this section on the same page that the section is on or a completely different page. To put a link to this section if it is on the same page you would use the A HREF command. The address would no longer be a HTML document but a number sign “#” followed by the name of the section. The final source code for a link on the same page to a section would look like this:
<A HREF=”#Test”>Test</A>
In order to put the link from another page to that section of that page you simply need to enter the name of the page that the link is on followed by a number sign “#” followed by the name of the section. The final source code for a link to a section named Test on a page named test.html would look like this:
<A HREF=”test.html#Test”>Test</A>
In order to enter this into your source you will need to enter an angle bracket “<“ then the letters IMG SRC= then the title of the image then the modifiers then an angle bracket “>”. If the image is called image.gif then the source code for the image without any modifiers will look like this:
<IMG SRC=”image.gif”>
If the image is going to be the pixel size previously mention the source code will look like this:
<IMG SRC=”image.gif” WIDTH=”75” HEIGHT=”65”>
It is also possible to insert a command that will tell people what the picture is of if they did not download it or pressed stop on there web browser. Let’s say this will be called View this Picture. The modifier which preforms this operation is the letters ALT then an equal sign “=”. In order to do this to image.gif the source would look like this:
<IMG SRC=”image.gif” WIDTH=”75” HEIGHT=”65” ALT=”View this Picture”>
The next possible modifier of an image would be used if you want to put the image inside a link command. When the person clicks on the image they will be linked to the page that the image refers to. A person can sometimes tell if the image is a link if you leave a border on it. A border is the color of the LINK command (previously mentioned) if it has not been visited and the color of the VLINK command if it has been visited. In order to make a link to my page, let’s say, you would first need a gif that relates to my page. Let’s call this gif logo.gif. The way to tell the browser that you want the image to be a link is to simply put the IMG SRC command inside the place where text would go on the A HREF command. The final source code of a page with a link to my page and a image called logo.gif without any special modifiers in the IMG SRC command (Any modifier that is used when inserting an image into a web page that is not linked can be used when inserting and image in a web that is linked) would look like this:
<A HREF=”http://computing.net”><IMG SRC=”logo.gif”></A>
But sometimes a border on the image can be unsightly. In order to get rid of the border a modifier must be entered in the IMG SRC command that has the word border then an equal sign “=” then the number 0. A person will most likely know that this is a link because when they hold their mouse over it the link “hand” will form. The final source of an IMG SRC command without a border would look like this:
<A HREF=”http://computing.net”><IMG SRC=”logo.gif” border=0></A>
In order to insert a comment in your page you need to use a command to start the commenting and a command to end it. The command that is used to starting the commenting is an angle bracket “<“ followed by an exclamation point “!” followed by two dashes “--”. Then you would enter your comments. Then you would enter your comment. Your comment could contain anything you want it to, it could possible coding if that code does not work or it could have information that you only what people who view your source to see. After you are done entering comments you would tell the browser you are done by entering two dashes “--” followed by an angle bracket “>”. The final source code for a comment would look like this:
<A HREF=”http://computing.net>Justin’s</A> <!-- A link to Justin Weber’s Computing Center -->
In order to insert a break you must first figure out where you are going to put it. If you do not put in the break command between images they will be on the same line. This will make your web page extremely long and people that are visiting that only have a 14” monitor that is set to 640x480. Pixels the person will have to scroll over and back a large amount of time and would most likely be discouraged from revisiting your web page. To insert a break command between two pictures you would need to type into the final source code the code for the first picture using a IMG SRC command (previously discussed) followed by the break command. The break command is an angle bracket “<“ followed by the letters BR followed by another angle bracket “>”. After the break command the second IMG SRC command must be inserted. Let’s say we have two images. One of the images is named image.gif and the other one is named image2.gif. Let’s say these images are banner sized and you don’t want them next to each other so you decide to put a break in between them. The final source for this coding would look like this:
<IMG SRC=”image.gif”>
<BR>
<IMG SRC=”image2.gif”>
Let’s say you want to follow my example and put two breaks in between the images because you tried it with one break and you don’t think that the page looks good. The final source for this document would look like this:
<IMG SRC=”image.gif”>
<BR>
<BR>
<IMG SRC=”image.gif”>
Let’s say you think the space in between those images with two breaks is too large but the one with one break is two small. There is something that can be done about this. You can kind of “cheat” the system and use the paragraph command to make a smaller space then a break. The final source for this document would look like this:
<IMG SRC=”image.gif”>
<BR>
<P>
<IMG SRC=”image.gif”>
<NOBR>Text that should not be allowed to break</NOBR>
Browser if you want to make a break feel free to do so at my word break command <WBR>
Let’s say you decide that your page would look much better with a centered banner of your favorite web browser on it. Since my favorite web browser is Netscape, I will use it in my example. Let’s say you find a nice banner that advertises the Netscape web browser and since your page looks its best with netscape you decide that you should put that banner on your page. For now we will call the banner netscape.gif. The first thing that you would do would be to enter the beginning center command. That command is an angle bracket “<“ followed by the word CENTER followed by an angle bracket “>”. Then you would enter the item that you want centered. Let’s say that you want a link to netscape through the banner so you would enter the A HREF command and the IMG SRC command. Then you would tell the browser that you do not want anything following that centered. To do this the command is a cart “<“ followed by a slash “/” followed by the word CENTER followed by an angle bracket “>”. The final source code to do this would look like this:
<CENTER><A HREF=”http://home.netscape.com”><IMG SRC=”netscape.gif”></A></CENTER>
I had also mentioned that there was a way to center more then one item. Well instead of entering the center and uncenter command for every item that you want centered. This could be a long and tedious process. You could, if all the items that you want centered follow one another, just enter the center command once and enter the uncenter command at the end of the items that you wish to be centered. If you wanted the netscape banner and the text under it to be centered, and that the text reads “Click on the banner to download netscape”, you could do that. Of course to put the two items on two different lines you would have to insert a break command. The final source code for this document would look like this:
<CENTER><A HREF=”http://home.netscape.com”><IMG SRC=”netscape.gif”></A>
<BR>
Click on the banner to download netscape
</CENTER>
<IMG SRC=”gif.gif” ALIGN=left>
NOTE: The ALIGN modifier may also be used with most other HTML commands besides the image command.
There are 6 different types of headings and they are distinguished by the number 1 through 6 inserted in the heading command. The 1 represents the biggest heading. This heading is normally used for titles at the tops of web pages or sections of a web page (if the title is a logo and is not in a text form). If there is a title on a web page the biggest sections on that page would normally be distinguished by a 2, since a 2 is the second biggest heading. And so on. Normally you will use the number heading that you feel looks best on your web page. Remember that the headings on your web page should be respective of one another. For example, you don’t want a head for the title that is 3 and then a heading for the section name that is 1.
If you decided to make a web page without a banner and the web page’s is the title of the web page. The way that we would do this is to put an angle bracket “<“ then the letter H and a 1 (1 is the size so if you wanted something on your web page with a 3 you would use the same format just replace the two numbers) then an angle bracket “>”. Then insert the text “Justin Weber’s Computing Center.” Next insert the command to tell the web browser that you are done with the text to be in the heading section. In order to do this, type an angle bracket “<“ then a slash “/” then the letter H and the number 1 then another angle bracket “>”. The final source code for this heading would look like this:
<H1>Justin Weber’s Computing Center</H1>
Let’s say that you had a subsection in my page called the proper use of a computer. you do not want the section to appear as big as the title but since it is quite a large section you want it to appear fairly large. I decide that a 2 would provide the difference you need between the two sections. In order to enter your title in the sub section first you would enter the title command which was already entered then you would replace the title with the text The Proper Use of a Computer and the 1’s with 2’. Since these are headings you do not have to insert a break command or a paragraph command to make them appear on separate lines. The final source code for this document would look like this:
<H1>Justin Weber’s Computing Center</H1>
<H2>The Proper Use of a Computer</H2>
This command is an angle bracket “<“ followed by the letters HR followed by the modifiers followed by an angle bracket “>”. The modifiers for this command allow you to do a wide variety of things with separator. The first modifier is the word SIZE followed by an equal sign “=” followed by the size. The size is the number of pixels thick that you want the separator. For a normal sized separator you would use either 1 or 2 pixels thick. The next modifier is the word WIDTH followed by an equal sign “=” followed by a number of pixels or a percent. It is not a good idea to use pixels with this modifier because people could have really larger monitors and when they saw your separator it would look very small. However, if you use a percent then the separator will be the same relative size on all monitors. The next command is the word ALIGN followed by an equal sign “=” followed by which side of the screen the separator is going to be aligned to. The separator can either be aligned to the right, the left, or the center. The final modifier is use the word NOSHADE. This is used if you are going to have a soild line on your page that separates, not a shaded one. The final source code for a separator 1 pixel thick, 100% wide, aligned in the center, and that has shade would look like this:
<HR SIZE=1 WIDTH=100% ALIGN=CENTER>
In order to make an unordered list you must first find the information that you want contained in the list. After you have found this information you must enter it into the list, using the unordered list command. The unordered list command is an angle bracket “<“ followed by the letter UL followed by an angle bracket “>”. After that command has been entered then you must enter a command that tells the browser that you want to make an entry in the list. This command is an angle bracket “<“ followed by the letter LI followed by an angle bracket “>”. Then you must enter the text that you want in that list section. After you have entered the text you can move on to the next item in the list and use the LI command to enter it. To change a level on your list enter the UL command. To end a lower level on your list enter the command (discussed below) After you are done with your list you must tell the browser that your list is over to do this you need to enter an angle bracket “<“ followed by a slash “/” followed by the letters UL followed by an angle bracket “>”. The final source code for a list with three terms one on lowest level one higher then one lower again would look like this:
<UL>
<LI>List
<UL>
<LI>Higher
</UL>
<LI>Lower
</UL>
A ordered list is done the same way except the UL is replaced with an OL. The final source code for a numbered list that is the same as the unsorted lust above would look like this:
<OL>
<LI>List
<UL>
<LI>Higher
</UL>
<LI>Lower
</OL>
Another type of list is a definition list and, much like its name suggests, is meant to be used in defining items. This list will put a term followed by a definition that is indented making the list look quite like a listing in a dictionary. Although this list was meant to make definitions it could be used for other things as well. The example I will use will have definitions in it. In order to start the list you must enter an angle bracket “<“ followed by the letters DL followed by an angle bracket “>”. The term that is going to be defined is represented by an angle bracket “<“ followed by the letters TD followed by an angle bracket “>”. The definition is represented by an angle bracket “<“ followed by the letters TT followed by an angle bracket “>”. This will be repeated as many times as needed and the list will be ended with an angle bracket “<“ followed by a slash “/” followed by the letters DL followed by an angle bracket “>” The final source code for a list with two terms would look like this:
<DL>
<TD>HTML
<TT>HTML stands for HyperText Markup Language
<TD>HTTP
<TT>HTTP stands for HyperText Transfer Protocol
</DL>
In order to insert text manipulation into your web page you must first decide what text you want the manipulation to occur on. On my page, I put manipulation of words that describe the link in the picture. For example, if you visit my page you will see a list of the sections that you can go to. Each section is signaled by a graphic but if you are not familiar with what was being discussed in the section then you will have no way to know what is in the section without going to it. In order to solve this problem I put the Operating System’s name that the link is going to lead to next to the picture of the Operating System. But how you manipulate the text to spice up your page is up to you and all circumstances are different. Let’s just for example say that on your page you wanted to write a essay on the Oedipus Cycle. In order to be grammatically correct you would want to italize the words Oedipus Cycle because they are the title of a series of books. In order to do this you would first need to insert the signal to begin the italics which is an angle bracket “<“ then the letter I then another angle bracket “>”. Then you would insert the words that you wished to be italized. Then you would insert the command that ends the italics and reverts the text thereafter into normal text. This command is an angle bracket “<“ followed by a slash “/” followed by a I then you would insert an angle bracket “>”. The final source code for this with a little bit of writing before and after the command:
The <I>Oedipus Cycle</I> was written by Sophocles.
The bold command can be used to emphasize words. If a person is skimming your page for important information the bold words will stick out and catch there eye. Let’s say you were talking about all of the people in your family because you have an about the author section on your web page. You want to make the relationship of the people in your family bold but you want there name not to be. This way if the person wants to know about your brother they would be able to skim your document for the word brother. In order to start the bold command you must insert an angle bracket “<“ followed by the letter B followed by an angle bracket “>”. Then you would insert the text that you want to be bold. Then you would end that command with an angle bracket “<“ followed by a slash “/” followed by a B then an angle bracket “>”. The final source code for this document would look like:
My <B>Brother</B> is a very successful business man.
Another option is to make items bold and italics at the same time. For example, if you wanted to talk about your favorite book (Which of course is this book :) and you wanted the name to stick out. But, because it is the name of the book it should be italized. The final source code for this would look like this:
My favorite book is <I><B>The Pocket Guide to HTML 3.0</B></I>.
NOTE: It does not matter what order you put multiple commands in, they will still function the same.
This page is © Justin Weber
In order to incorporate the font size command into your web page you need to decide what size you want the font to be. The font can be in a size from 1 through 7 but unlike the heading 1 is the smallest and 7 is the biggest. If you are going to use normal text on your web page you do not need to have a font size command because the web browser automatically assigns all text without the font size modifier a specific size. The font size modifier would be inserted to a web page by starting the font modification with a command. The command to start the modification would be an angle bracket “<“ followed by the words FONT SIZE followed by a 1-7 (if you want it just slightly larger then the normal font on a web page you would have to guess and insert different numbers into that size until you get your page how you want it to look) then an angle bracket “>”. For now, we will say that we want a small copyright on the bottom of the web page so we will use the smallest font size which is 1. We would then insert the text that we want to have the font manipulation active on. Then when our text is done we will need to insert the command that tells the browser that we no longer want to have our text modified. This command is an angle bracket “<“ followed by a slash “/” followed by the word FONT followed by an angle bracket “>”. The final source code for this page will look like this:
<FONT SIZE=1>This page and it’s contents are copyrighted by the owner</FONT>
Now we can do some fun stuff! If I wanted to make a document with many paragraphs and at the beginning of each paragraph I wanted a really big letter of the first word I could do this:
<FONT SIZE=7>O</FONT>nce upon a time there was a woman that lived in a shoe.
If I wanted to make a the text make the words look like a mountain, or a bell curve, I could change the font size of each letter:
<FONT SIZE=3>J</FONT><FONT SIZE=4>U</FONT><FONT SIZE=5>S</FONT><FONT SIZE=5>T</FONT><FONT SIZE=4>I</FONT><FONT SIZE=3>N</FONT>
Or if I wanted the text to appear as a inverse mountain I could do this:
<FONT SIZE=5>J</FONT><FONT SIZE=4>U</FONT><FONT SIZE=3>S</FONT><FONT SIZE=3>T</FONT><FONT SIZE=4>I</FONT><FONT SIZE=5>N</FONT>
<FONT FACE=Times>
<H1>Welcome to my web page!</H1>
<BASEFONT SIZE=4>
Any text on the page
<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>
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.
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 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>
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>
You need a HTML 3.0 compliant browser to view this page
</NOFRAMES>
With frames you can tell a certain link to appear in another frame, in another window, into a new blank window that is the same screen that the other frame was in, into itself, or into its parent frame (the frame above it in the frame set if there is nothing above it the link will just appear in the same frame). In order to get the link to appear in another frame you first need to name the other frame. Then you would enter a modifier in the A HREF command this modifier is the word TARGET then an equal sign “=” then the name of the frame. The source code for a link in a frame that is targeted into another frame called Main would look like this:
<A HREF=”temp.html” TARGET=”Main”>Temporary</A>
If you wanted the link to appear in a completely new window then you would enter a “magic” command after the equal sign “=” in the TARGET modifier, this command is an underscore “_” followed by the word blank. The final source for a link in a frame that opens a new window would look like this:
<A HREF=”temp.html” TARGET=”_BLANK”>Temporary</A>
If you wanted the link to appear in a new blank screen but not a new window then you would enter another magic modifier. This modifier is an underscore “_” followed by the word TOP. The final source code would look like this:
<A HREF=”temp.html” TARGET=”_TOP”>Temporary</A>
If you wanted the link to appear in the same frame that it is in you would use another magic modifier. This modifier is an underscore “_” followed by the word SELF. The final source code would look like this:
<A HREF=”temp.html” TARGET=”_SELF”>Temporary</A>
If you wanted the link to appear in the parent frame in it’s frame set you would use another magic modifier. This modifier is a underscore “_” followed be the word PARENT. The final source code would look like this:
<A HREF=”temp.html” TARGET=”_PARENT”>Temporary</A>
If you want all the links in a certain frame to be going to the same frame or magic link then you would enter, at the beginning of the document just after the body command or if you want before the first link, an angle bracket “<“ followed by the word BASE followed by the word TARGET followed by an equal sign followed by the name for the frame or the magic modifier followed by an angle bracket “>”. (Any base target can be overridden by the targets in the A HREF command.) The final source code for this base targeted to a frame named main would look like this:
<BASE TARGET=”Main”>
The same modifiers can be used in the IMAGE MAP command.
In order to put a java applet on your page you must first make one, or find one on the internet. After you have done this you must enter the commands needed to run the applet on your web page. If you find an applet on the internet the author will most likely have a documentation that comes with the applet telling you how to put it on your page. I will tell you how to put a basic applet on you page. The first command that you will need to enter is an angle bracket “<“ followed by the word APPLET followed by modifiers followed by an angle bracket “>”. The modifiers that appear in the APPLET command are normally CODEBASE followed by an equal sign “=”. This modifier tells the browser what directory all the .class’s are in. The next modifier is usually CODE followed by an equal sign “=”. This modifier tells the browser which is the main .class that should be executed for this applet. WIDTH or/and HEIGHT followed by an equal sign “=” sometimes are included. This width and height works exactly like the one in the IMG SRC command. Another modifier that you can choose to include is ALIGN followed by an equal sign “=”. This lets you ALIGN the applet in the center, to the right, or to the left. Next comes a list of parameters that will be inserted run with the .class. These parameters are dependent on what the Java applet does. Parameters are recognized by an angle bracket “<“ followed by the words PARAM NAME followed by an equal sign “=” followed by the name of the command followed by the word VALUE followed by an equal sign “=” followed by where that parameter is located and ended by an angle bracket “>”. These parameters will either be given to you in the instructions on how to install the applet on your page or, if you wrote the applet, you should know them. Then the applet is ended with an angle bracket “<“ followed by a slash “/” followed by the word APPLET followed by an angle bracket “>”. The final source code for using an applet that I found on the internet called LED sign would look like this:
<applet codebase="/LED/Led" code="LED.class" width=500 height=48 align=center>
<param name="script" value="/LED/scripts/Demo.led">
<param name="border" value="2">
<param name="bordercolor" value="100,130,130">
<param name="spacewidth" value="3">
<param name="wth" value="122">
<param name="font" value="/LED/fonts/default.font">
<param name="ledsize" value="3">
</applet>
But what if the person that is visiting your page does not have a browser that supports java? What will they see? Well if you leave the applet as shown they will see nothing but you can enter an alternative that the person will see. In order to do this, after you have decide what you want the person without java to see, you go to the document source and insert the HTML code of what you want the person to see after the last parameter and before the ending applet. This is very convenient if you want to put an ad for a browser that supports java and you don’t want the people with java to have to look at/download an ad for something that they already have. The final source code for the above applet with the alternative about downloading netscape would look like this:
<applet codebase="/LED/Led" code="LED.class" width=500 height=48 align=center>
<param name="script" value="/LED/scripts/Demo.led">
<param name="border" value="2">
<param name="bordercolor" value="100,130,130">
<param name="spacewidth" value="3">
<param name="wth" value="122">
<param name="font" value="/LED/fonts/default.font">
<param name="ledsize" value="3">
To see this page at it’s best, download <A HREF=”http://home.netscape.com”>Netscape</A>.
</applet>
No matter what type of Javascript program you use on your page you still need to follow a basic set of commands for incorporating them into your page. The first thing that you must know is that almost all Javascript programs appear in the HEAD area so if you have a javascript program that is not working see if it is in the HEAD area. The second thing that you must know is that javascript programs sometimes have modifiers in the BODY command so this should be your second possible reason for a program that is not working. After you have taken care of that it is now time to write the program. For an example, I am using a program that displays certain text in place of the location when you hold your mouse over it. To start I will first tell the browser that I am going to use Javascript in my document. To do this I will enter an angle bracket “<“ followed by the words SCRIPT LANGUAGE followed by an equal sign “=” followed by the word Javascript followed by an angle bracket “>”. Because browsers that do not support Javascript cannot handle it, you should comment the entire script out so that only browsers that understand the script will use it. To do this you will enter the begin comment command at the beginning of the script and the end comment command at the end of the script. Then you will enter the Javascript. This book does not tell you how to write in Javascript so you will either enter a Javascript that the author of it said you could use or write one yourself. After you have entered the script you will end it with a command that is an angle bracket “<“ followed by a slash “/” followed by the word SCRIPT followed by an angle bracket “>”. The following script makes the location box say whatever you want it to. To do this the script puts a modifier in the A HREF command “onMouseOver” and in this command does not appear in the HEAD but in the body of the document. The Javascript with commands looks like this:
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000000);
}
function erase() {
window.status="";
}
// -->
</script>
<A HREF="http://computing.net" onMouseOver="moveover('Why not visit Justin Weber’s Computing Center and get some help!');return true;">
Colors for the Web
Because of the fact that there are over sixteen million colors that can be used on the web I will tell you the basic colors and then you can mix them on your own. Be aware that the range of the hexadecimals that can be used stretches from 0-F.
Red: FF0000
Blue: 0000FF
Green: 00FF00
Black: 000000
White: FFFFFF
NOTE: If you know the name of the color that you wish to use you could
try to enter it instead of a code. For example, if you wanted red you
could enter it like this:
<BODY BGCOLOR="RED"> or like this: <BODY BGCOLOR="FF0000">