Before we go to far here create a download folder in the same manner you did in the last lesson only name it (0download)....dont forget this is zero not a capitol O.
From here on out everything you download in the form of zip files for this class will be downloaded into this folder.

You are going to need a few items for this HTML project....so I have zipped them into a file. HTML Zip 1

When you click on the "HTML Zip 1" a window will pop open and ask you what you want to do....you will select....save this file to disk....another window will open and you click the down arrow at the save in....then click your C:\ drive and your (0download) folder....you should now see.... save in... 0download....and file name at the bottom.....htmlzip1.zip...click save.

This will start your download process and and your file will of course be stored in your (0download) folder so you can find it easily.

If you want to make sure you have not missed a step you can check your accuracy and progress by looking to see.

Do this by opening your windows explorer....start.....programs.....windows explorer and you should see something like these 2 open windows when you double click each of your new folders to open them.

Notice your new (0download) folder is now above your (0html) folder simply because D comes before H....the 0 places them both above everything else in your C:\ drive index. IMPORTANT NOTE....this only happens if you use a zero rather than a capitol O.

If you want to make your computing life easier you can download one of my favorite programs of all time. It will place a link on your taskbar by your clock so that it is very handy to open your windows explorer. Download.

Once you have downloaded your little program find it in your (0download) folder and double click it.....you will see the little folder with a magnifying glass on it by your clock. If you right click that little folder....a little window will open select options then a larger window will open giving you some choices mark them as you wish but be sure to place a check in "open on startup". That way this little program is at your disposal whenever you need to work in your windows explorer....for me that is at least 1,000 times a day.

I personally have my little program set at normal....that will open the explorer windows not full screen that way I can open more explorer windows at once and move files around much easier.

Now back to the zip file you downloaded. You will need to have an unzip program installed on your computer. Skip down to the part of this lesson that actually tells you how to unzip the file and follow the procedure. If you can not unzip it then you will need to get an unzip program. Some of the new versions of Window 98 come with an unzip program as part of the software...so try first.....if you do not have one I recommend WinZip...however there are others that work well also. You can download a trial copy and you can send it to your (0download) folder.

Now you must install your unzip program...ONLY IF YOU DO NOT ALREADY HAVE ONE INSTALLED ON YOUR SYSTEM!
For those who have not yet done that or do not know how....here is the procedure.
Always close down all of your background programs before you install anything.

You can do this the long way by hitting ctrl-atl-delete and a window will pop up.

Or you can download a neat little utility program called End it All that will close all of those programs with one click.........to cool!

Before you use your "End it All" program shut down your programs and save everything you want. Then open "End it All" and just hit the button to End it All.

You can now go to start....programs....window explorer....when the explorer window opens find the unzip program you downloaded (hopefully if you have followed the instructions to this tutorial you will find it in your (0download) folder and the winzip program is called "winzip80.exe") all you have to do is double click that file and it will automatically open an install wizard and install the program for you....it will place an icon on your desktop for easy use.

How to Unzip a download:

Once you are sure you have an unzip program installed on your system.
Open an explorer window.
Now open a second explorer window. Make sure your windows are not maximized.

If the windows are maximized or large enough to fit your whole screen you can not move them around. If you have them small you can drag them around and place them so that you can see more than one window at a time. You drag them around by placing your pointer on the top band of the screen holding your left mouse button down and dragging the window all over your desktop. The last window you click in or on will the the window most toward the front of the desktop. If you want to fully see a window behind simply click that window and it will now pop forward.

Now position these 2 windows side by side.
In one window you will click the (0html) folder and see its contents in the right pane.
In the other window you will click the (0download) folder and you will see its contents in the right pane.

Now click your "htmlzip1.zip" file to highlight it....place your pointer on it and hold down your right mouse button and drag it to the right pane of your (0html) folder.
When you release your mouse button a box will pop up and give you several options....click the one that says "Extract to folder C:\0html".

The winzip window will pop open and when all of the files scroll thru it click I agree.
If you have done this right you will now see 2 new files in your (0html) folder.
One is an image file called a jpg (jay-peg) and the other is music file called a midi (mid-dee).

Finally we are ready to move on with creating a new html document.
Okay lets start with our original document html1.rtf.

We are going to make some changes to this document so lets open it and copy the code then open a new wordpad document and paste the code in there.
You can now close your original wordpad document and lets save this one with the name of html2.rtf remember the copy/paste and save process from lesson 1?

We will always be saving our original document and making and saving the new one with the changes to it (the new wordpad document). That way you will keep a running record of your progress. And will be less likely to change something that was once working and not be able to find where the mistake is.

Here is the text from our old html1.rtf ..... it should now be pasted into the new html2.rtf that you will continue to work with.

<HTML>
<HEAD>

<TITLE> type_Document_Title_here </TITLE>
</HEAD>
<BODY>

Information goes here.

</BODY>
</HTML>

First thing we are going to do is give our page a title.
We will call it Juke Box One....everything above the closed HEAD tag will not show on your page but will make things work on your page....this is the behind the scenes instructions to the browser....it is the back stage area.

Next we are going to tackle the BODY tag.

This is a pretty nifty little tag because it controls a lot of things and can save a lot of redundant code that is put into documents by the HTML editors like Front Page etc.

With this tag you can designate a background image, background color, document text color, the color of your standard links, active links, and visited links.

So to our body tag we are going to add some colors. For instance we add BGCOLOR="#000000"....this means the background color is black....the number for black using a hexadecimal code is 000000.
We are also adding color codes for..... TEXT="#FF9900" (your document text) ALINK="#FFFF99" (active link) VLINK="#339900" (visited link) LINK="#FF0000" (regular link).

This is what your new body tag should look like.

<BODY BGCOLOR="#000000" TEXT="#FF9900" ALINK="#FFFF99" VLINK="#339900" LINK="#FF0000">

notice that all of this change goes in between your <......>

So when you need to just change one item say the BGCOLOR="#000000" (black) all you really have to change is the 6 numbers/letters to the code BGCOLOR="#FFFFFF" (white)

I know you are saying how did she get these codes?....well I will save you a long boring "how to" about how technically these codes are arrived at and instead direct you to the download of a really handy little color code utility called html paint brush. Just save it into the (0html) folder you have created on your C:\ drive....then go to the folder and right click it and drag to your desktop.

Okay now we are going to add an image to our page and the code looks like this:
<IMG SRC="smjuke.jpg" WIDTH="235" HEIGHT="250" BORDER="0" ALT="smjuke.jpg - 13451 Bytes">
note we start with the brackets <...............>
inside goes IMG (for image) SRC="smjuke.jpg" (designating what the image is called...in this case "smjuke.jpg") the width, height, if there is a border or not, ALT determines what is there if someone does not choose to look at images as they surf and the byte size.
Notice that each element looks like this SRC="...." or HEIGHT="...." we are fast moving to all lower case which will be src="...." or height="...." but for the time being all capitols are still acceptable. I would suggest you learn to at least make everything else in your tags lower case other than the tags themselves.

Now you must have the image name (SRC="smjuke.jpg)....it is not totally necessary to have the rest of the information (WIDTH="235" HEIGHT="250" BORDER="0" ALT="smjuke.jpg - 13451 Bytes") but is recommended because your pages will load much faster with the information than without.....you will have to have an image viewer or maker of some sort in order to find this information out. I myself use PhotoShop 5.5 but it is pretty pricey and unless you are going to do a lot of graphics you might want to stick with something not quite as expensive. My favorite viewer is called ACDC it will give you the information you need.

Paint Shop Pro is an excellent graphics making program that also gives you this information plus a lot more.

Now we want our image to be placed in the middle of the screen so we must tell the browser that...so we add a pair of CENTER tags. Also at this point we want to decide if we want everything on our page to be centered or just a few things. In this case we want everything on this page centered so we add the open tag at the top (right under the body tag) and the close at the bottom (right above the closed body tag).

Now we will add the last item to this page.
We are going to embed some music....this is what that tag looks like:
<EMBED SRC="thedance.mid" WIDTH="16" HEIGHT="16">
The EMBED tells us what the tag is doing and the SRC="thedance.mid" (is the actual music file) the width and height can be any size you choose. Play with it and decide what you like best for your own design.

Remember we practiced in our last lessons using the <P/>....well we are going to use it in our code now to drop the next bit of code which is our music file to the next line with an empty line in between. We will also do it at the end of our embedded music code

This is what our new document now looks like:

<HTML>
<HEAD>

<TITLE> Juke Box One </TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FF9900" ALINK="#FFFF99" VLINK="#339900" LINK="#FF0000">

<CENTER>

<IMG SRC="smjuke.jpg" WIDTH="235" HEIGHT="250" BORDER="0" ALT="smjuke.jpg - 13451 Bytes"><P/>

<EMBED SRC="thedance.mid" WIDTH="16" HEIGHT="16"><P/>

</CENTER>
</BODY>
</HTML>

You should have already named this document in wordpad html2.rtf....so go to file and save and it should update all of the changes you have made. Now open a new notepad and copy and paste this code into the notepad document and save as....html2.html

You now have 2 .rtf files and 2.html files in your ) download folder. Look there and make sure you do.

Now you get to look at what you have done.
Open your windows explorer.
Go to your (0html) folder and find your newly saved html2.html document and double click it....if you have done everything right you should see the image of a jukebox and hear the music play.

If you want to make sure what you have done is what you were suppose to do you can check my page at: html2.html

If you got it all right so far you deserve a big pat on the back....you have learned quite a lot for a newbie in just 2 lessons.......so fan fairs and drum rolls.........CONGRATULATIONS!

Now for a little practice on your own...head over to the practice instructions page.