WELCOME!!
This is Lesson Ten of "AmeriYank's HTML Tutorial".
In this lesson we will talk a little more about folders or directories and why we want to use them on our site. We learned how to make folders in Lesson 5 Part B. But all we did was place one page in each of a few folders and link to them.
First, you need to know that you do NOT need to have a new folder for each page that you create. The purpose of folders is to make it easier for YOU to find things on your site.
Take, for example, all the files in your computer. What if there were no folders for all those files? What if all the files in your Paint Shop Pro program and all the files in your AOL program, plus all your windows files were just sitting in your computer without any folders? How easy would it be for you to find something when you wanted it? Might take weeks, huh?
Well, it's the same on your web site. Each graphic, page, download, javascript, applet, and more is one file in your web site. Just how you link them to the page code, is your choice. But trust me, you will want to get into the habit of creating and using them EARLY in the making of your site.
Take AmeriYank's Graphics Farm as an example. It began as a simple way for me to give away background sets and animation I created using royalty-free art or some original art of my own. Yes, I knew about folders and how to use them. And I thought, silly me, "what do I need with all that fancy stuff?"
Now, I have a site that is over 75 megs of stuff. Not much is in folders. And guess what happens when I want to change something? I get a bad case of "what-the-(*^&%#$-did-I-name-thats".
Since then, I have begun to use folders. For those pages created later, it's a BREEZE when I want to change something. So, get into the habit early and use them well.
What is the best way to organize? It's your decision. For me, it's best to place things into catagories. For example, I use images for navigation on my site. So, I have a folder on my site just for those graphics. I give away some tubes on my site. Some are in folders (those are the newer ones) based on the catagory of the type of image--animal, Christian, etc. Some are not in folders and I dred the day I have to update those pages.
You can put all your midi files in one folder, all your graphics in another. Or you can place each page in a folder and then add all the images, midis, etc, into the same folder. Just link it properly and you are home free.It is entirely up to you.
Just how do you link a graphic or other file in a folder to a page outside the folder? Basically, it's the same as we practiced in Lesson 5. Except, instead of the linking the "nameofpage.html", you link, "nameofgraphic.jpg" (or gif) as the case may be, or whatever the name of the file actually is.
OK--let's try an example. Wherever you are working on your site for this class in your computer, create a folder and call it "graphics". Now, place a .gif or .jpg image into into it. Anyone that isn't 10,000 gigabytes will do.
Now, open your MAIN page that we have been working on since the beginning. I don't know the name of your image, but mine is "flower.jpg". I want to link the image from the "graphics" folder to my page. I want it to be centered, and I want to use the <P> tag. So, my code will look like this:
<P align="center"><IMG src="../graphics/flower.jpg"></P>
I want to put it at the bottom of my page, so I can find it easily. So, you new page code will look like this:
To see what your new page looks like, click here.
Now, suppose you want to add some sound to your page. That, too, is easy, from a technical standpoint. Copyright is quite another subject altogether. Wav files are usually copyright violations when you use them (unless it is your voice on the wav). Midis are such a gray area...I read one place that a court ruled that the use of midi files does not violate copyrights. But, then you have the rights of the person who actually created the midi file. Personally, I am so confused by what you can and cannot do with sound on your web site, that I am not going to give you any advice whatsoever about using it. I will just tell you HOW to add it and to be VERY careful.
OK, that said, know that midi and wav files will add greatly to your load time. Wavs take YEARS (I am exaggerating) to load and, personally, I just wouldn't bother with them. Midis will load much faster and can be very nice.
You will want to use a code that will make it easy for EVERYONE to hear your tune. Not all browsers will recognize all code. The code I am giving you should work for every situation. Now, some codes will make the music play automatically. And the viewer of the page has no choice but to listen to it. This is considered bad manners. Allow your visitors to control the volume and whether or not they want to hear the music in the first place. You can find midi files available for free at the Midi Farm. NEVER EVER create a site that distributes midi files. Leave it to people like the Midi Farm, who can afford to pay lawyers to tell them what will and what will not get them into trouble.
Now, as to your code. It goes UNDER the BODY tag and looks something like this:
<embed src="HAILCHEF.mid" autostart="true" loop="true" height="45" width="300">
Like any graphic, you can alter the height and width as you see fit. The code above will make the tune play over and over. If you want it to play only once, place a "1" after loop=, so your code would be loop="1". If you want it to play twice, put in a two, and so on.
If you want to use a wav file, and it happens to be named "HAILCHEF.wav" then that is what you put after src. Again, file names are case sensitive. So, if your file is named "almine.mid" THAT is what needs to be in your code. If the file is named "you.WAV" then THAT is how it needs to appear.
As mentioned before, you can place a midi or wav file in a folder. Let's say you did that and put it in a folder named "midi". Your src would then be (depending on where the folder was in your web site) something like, src="midi/HAILCHEF.mid".
In other words, you link a music file the same way you link a graphic.
Now, lets suppose you want to have your links change color when the mouse passes over them. Again, this is easy as pie. Just a tiny bit of code and you are all set. This code goes INTO the body tag and will determine the color of your link, a hover color, and a visited link.
The codes are as follows:
for a link....link="colorcode"
for a hover....alink="colorcode"
for a visited link....vlink="colorcode"
You can also choose a text color and all your text throughout the page will be the same, UNLESS you change it using a FONT tag.
So, now you want to create links that change color. Your code will look like this:
<BODY background="orangetex.jpg" bgcolor="#CB4503" text="#1C120A" link="#008000" vlink="#15F915" alink="#8F0694">
So, now your new code to add to your page look like this:
<BODY background="orangetex.jpg" bgcolor="#CB4503" text="#1C120A" link="#008000" vlink="#15F915" alink="#8F0694">
<embed src="HAILCHEF.mid" autostart="true" loop="true" height="45" width="300">
and the code for your new page looks like this:
Make sure your colors are co-ordinated.
Mine are NOT for the example and look terrible. But it will give you an example
of very bad design, and that can be a good learning experience.
Your new page will look like this: click here
HAPPY CREATING!
HOME
Mary, Madonna and Blessed Virgin Mother and Jesus
Designs for Tsunami Relief.
Back to Lesson One Back to Lesson Two
Back to Lesson Three Back to Lesson Four
Back to Lesson Five On to Lesson Seven
Back to Lesson Eight Back to Lesson Nine