|
|
Finish your cigerette? Don't stick your gum on the bottom of the keyboard !!
You've come a long ways, and by this time you are fully capable to writing and posting a webpage to the internet. Not only that, but by using your imagination and some good design techniques, you can make that page as attractive as any that are out there. All you need now is a little practise [I hope you've been doing the example we've worked on throughout these lessons].
What I'm going to show you now is just a few simple little commands that will add some 'pi-zazz' to your page. Little things.
Here's what we'll cover:
We'll cover the WIDTH, ALIGN and SIZE attributes here.
If you use just the <HR> tag and nothing else, you will get a line running from side to side, the width of your browser window. This will automatically set itself to accommodate larger or smaller windows [I'm basically talking about sizes of monitors here]. The color of the horizontal rule will be based on the color of your background and usually defaults to a height of 2 pixels. Here's a sample of an <HR> tag used by itself:
Here's a couple of sample codes with the results displayed below them:
In the top sample we specified the width of the line to be 50 pixels from side to side -- and that's exactly what we got. In the second sample, we specified the width of the line to be 50 percent of the width of the page. The browser then determines what 50% of it's displayable window is and adjusts the horizontal rule to that.
So far, either way is fine. But let's pretend that you're wealthy and have one of those big monitors -- or you have your monitor screen set to display 1024 x 1280 pixels. Now you're building a page and you want the horizontal rule to be 1200 pixels wide. [I don't know why you'd do this, it's just an example] The horizontal rule would display just fine on your monitor and anyone else's if they have the same size/settings ---- but, remember that most monitors out there are still 14 inches and set to 480 x 640. The absolute value of width would cause the following result:
Notice what it's done to the page and the line. I don't know about you, but it's bad enough that I have to scroll up and down to see web pages. Scrolling side to side as well is a real pain, especially if you have to do so to read text. So much better had we used 1200 / 1280 = 94% and the command
You'll notice that when ever we've used the <HR> tag at less than 100%, it centers on the page. Most of the time, that's probably what we want. But if the occassion should arise, you can align the rule to either side using the ALIGN attribute. I'll align a rule 100 pixels wide to the left of this page as an example. Here's the code:
And the result:
I can also align it to the right, but won't show that since it would be off the screen [to the right] due to what I demonstrated earlier. Trust me, though. It works.
We can adjust the 'fatness' of the horizontal rule by specifying the SIZE attribute. Again, this is done in pixels. Remember, the default value is 2 pixels high. Let's change that to 10 pixels and have a fat rule.
Here's how is shows up:
You can make it fatter or thinner, longer or shorter, centered or aligned left / right depending on your individual tastes. It's up to you.
Let me explain the usefullness of this first, then we'll have an example.
If you have a listing of subjects or questions you wish to address and the material is not necessarily related yet all in one document, you can provide a series of links at the top of your page which cause to reader to jump to the related content within the page when clicked on. This is most often done on pages where you see FAQs [frequently asked questions] listed. Here's our sample. Click on the links to jump to the parts of this page as indicated. Scroll back here from the top when you're finished.
This jumps to the bottom of this page.
This jumps to the top of this page
Using the example you've just seen, the process requires two sets of <A> [anchor] tags. The first is nothing more than the link [ <A HREF>] you're already familiar with, and the second is the 'anchor' or location where the link will take you.
Looking at the code for the first link above, this is what we have:
Notice that this is a paired tag as before. Also, the location must have a number symbol [ # ] in front of it. My location name in this case is 'bottom'. This is half of the battle. We have a link -- now we must give it a place to go in the document.
We do this by selecting the area to which we want the link to jump to and placing the following code there:
This provides the location to 'jump' to. Notice three important things:
When a visitor [you in this case] clicks on the <A HREF="#bottom"> link, their browser looks for the corresponding location -- the <A NAME="bottom"> tags -- and then jumps immediately to that location. Where ever you have the <A NAME="bottom"> tag, that will be at the top of the browser's viewable window.
The jump is one way, so if you want to return to the starting point [ie the orginal link] you must either provide another set of instructions [with a different name, of course] or the visitor must use his 'back' option in his browser. Naturally, he could also scroll all the way back, but this is tedious.
The mechanics of this can be confusing when you first try to use it, so play around with it in one of your documents. You'll find that it's really isn't difficult to use once you're familiar with it.
Some advice -- Don't use the Anchor tags to jump thru volumes of images that are all located on one page. Your page will take a little longer than forever to download and you'll lose your visitors in very short order. This method / tag is best used for text jumping. If you have a lot of pictures, make serveral pages and link to them. I also highly recommend using small thumbnail images [that's small file sized !!] on each page. Your visitor will click on the ones he's interested in to see a larger image.
You've probably heard both of these type files. Wav files sample audio data and can reproduce voices and all ranges of musical notes. They're very versatile. They're also very large in file size, meaning they take a long time to download. It's not uncommon to see a wav file size of a couple hundred kb just for a few seconds worth of speech or music.
Midi's on the other hand, while lower in fidelity, are quite small in size. Usually around 10 to 45 K. Their quality is not bad, but they can't yet reproduce speech or vocal song -- only instrumental music. This is because the tones and notes are synthasized by a mathmatical algorithm contained in the viewers/listeners browser. The file itself only contains instructions for the algorithm.
Fine. So how do we include music in a web page. It can be done one of two ways [both are the same for both types of files, midi and wav]. We can simply use the <A HREF> set of tags and have the music play when our visitors clicks on the link, or we can use the <EMBED> tag and have the music start playing automatically or stored for later use.
NOTE: IE users -- MSIE supports the use of the <BGSOUND> set of tags for playing midi's and wavs. However, if you use this tag, your music will not play for anyone using a NetScape product. This equates to roughly 50% of your visitors. Use the <EMBED> tag, both browsers recognize that one.
Why would you want to 'store' a music file? Well, using this page for an example. While you were reading this page, I had your browser load a midi file and store it. By the time you have read the page down to where you are prompted to click on a music file, the midi or wav will have loaded -- thus this page seems to load faster, since you don't have to wait for the music to download once you click on the link. It's all a matter of page-planning. Below you will see this in action. I've preloaded the midi file, but not the wav. The midi file I'm using is larger than the wav -- note the difference it makes.
So, now let's look at the Link method first.
We'll use one of my favorites, the theme song from 633 Squadron. The name of the file is '633sqdrn.mid', it's file size is pretty large -- 73K -- but still much smaller than a similar wav file. Here's the coding to use:
And how the link will show up on the browser:
Click on the link to play the song. Depending on the midi player you have installed and the settings you have it programmed for, the song may 'loop' -- that is, keep playing again and again. Use your midi player controls to stop the song when you've heard enough.
Just for the sake of completeness, here's a sample of a wav file called 'Atnt.wav'. It's 17k in size, but only a second or two in duration. Let's see the code:
And what get get on the browser:
The <EMBED> tag also has a fair amount of attributes which can be set. We'll talk about a couple of these as well, but first let's see what our code is going to look like for the theme song I played before.
<EMBED SRC="633sqdrn.mid" AUTOSTART=FALSE LOOP=0 HEIGHT=50 WIDTH=200 HIDDEN=FALSE ></EMBED>
And what we see [centered, cuz I like it that way]:
A word on the graphic [if you see one] above. I use "Crescendo!" ® on my system and have the size of the graphic set up to that. If you're using something different, you may see a different graphic or none at all. This is all beyond my control -- so bear with me. If you like midi music though, pick up Crescendo!, it's a free plug-in and available at www.liveupdate.com.
So, you see the code and maybe even see the Crescendo! player displayed underneath it. What to all those attributes do. Let's look at them one by one.
The first, AUTOSTART, can be set to either true or false. If you set AUTOSTART to 'true', the music begins to play as soon as the file finishes downloading on your visitors browser. If set to 'false', the music will load but not play until the visitor somehow tells it to -- usually by clicking on a play or '
' button. If you leave this attribute out, the default value is 'true'.
Next is the LOOP. That controls how many time the song will replay before stopping. In other words, to play the song once, LOOP is set to '0' or 'false'; to play the song twice and then stop, the LOOP is set to '1'; and so forth. If you set LOOP to a negative number, i.e. '-1' then the song will continue to play indefinately -- until your visitor leaves your page in anguish. I strongly recommend that you don't set LOOP in this manner. If you leave the LOOP attribute out, the default is indefinate play and more anguish for your visitor. I hope he really likes the song you picked should you do this.
The HEIGHT and WIDTH attributes work in the same way they do for an <IMG> tag, setting the size of the displayed graphic console.
The HIDDEN attribute determines whether the surfer will be able to see and access the control box for the midi player or not. 'True' hides it from view, 'False' allows it to display. The default value for this attribute, if you don't specify it, is 'False' -- ie, the box displays.
One attribute which I didn't display above, but I'll mention, is the VOL. You can set the volume of your music for your visitor using this command. This is set using a percentage -- 100% being full volume; 0% being no volume (but the midi is still loading and playing). Default value is usually 75% (of full volume). An example would be:
Now, if the midi player graphic displays as above, your visitor can adjust the volume to his/her liking. However, if you hide the midi file (use the HIDDEN=TRUE attribute), the visitor is stuck with your setting and has to control the volume using his/her PC settings. Most people just leave the offending site.
The last attribute, SRC, specifies the file location to play and is obviously required if you expect the <EMBED> tag to work at all. And don't forget what we taught you earlier about the file location. If it's not on your server and in the same directory as the HTML document that calls it, you must specify the entire web address where it may be located.
Remember, future webmasters, loading an embedded music file and having it play indefinately while the web surfer is on your page is extremely irratating. You'll lose a lot of repeat visits that way. Best not to do it. Let the song play once and then stop if you're going to hide the console. If you allow the console to display, then the visitor can turn off the music when he's tired of it or if he finds your favorite song not to his liking.
<META> tags are stand alone [no closing tag], informational entities which are placed between the <HEAD> and </HEAD> tags of your HTML document. If you'll recall from one of the first lessons, this part of the document loads first into a browser.
The tag accomplishes a variety of functions depending upon how you have it set up. We'll talk about three of what I've found to be the most useful functions here. Keep in mind that there are more.
There are three attributes to the <META> tag. These being CONTENT, NAME and something called HTTP-EQUIV. Of these you will always use the CONTENT attribute in conjunction with one of the two others.
Just for some background knowledge, the <META> tags using the NAME attribute are generally intended for interpretation by a browser, while the ones using the HTTP-EQUIV attribute are intended to be read by a server. However, this grows confusing when the browser attributes are read by web robots.
So what have we got; what can this tag be used for. Well, here's some examples of tags you might find useful:
Keyword Meta: It's purpose is to supply keywords, words that more or less describe your website so that search engines might find your page more easily. This depends greatly on how a particular search engine searches, but let's assume a perfect world.
A web surfer goes into the Yahoo search engine and types 'reptiles' into the search for block. Now the search engine is going to look for all web documents which contain the keyword 'reptiles' [or some variation of it] within their text. If you have a keyword meta set up, you feed the keywords to the search engine so that you appear higher in the resulting list. In essence, you 'feed' your page to the search engine whenever it looks for keywords you've listed. Let's see an example of the code [using Oscar's page].
<META NAME="keywords" CONTENT="reptiles, turtles, pets, animals, water, aquariums">
Now any time one of these keywords is entered into a search engine, Oscar's page should be indexed and listed. How high on the list depends on a number of factors which I don't need to go into here.
Description Meta: The purpose of this Meta tag is to tell the search engine what description to show when it lists your site. If you don't have one of these tags in your <HEAD> the engine will generally display the first sentence or so of text it comes across. This gives you some [that's some, not complete] control over how your page description is displayed. Keep in mind that different engines use different techniques to list a description, so this is not 100% guaranteed. Let's look at a description meta:
<META NAME="description" CONTENT="This page describes my pet turtle, Oscar; where I got him; and what makes him unique.">
Now, like I said before. Having this tag on your document does not guarantee that the search engine will use this description -- but it should. The engine listing should show your web site's name and the above description after it. Keep these short and concise as most engines only allow for a sentence -- two at the most -- to be displayed.
Expires Meta: This is one I find particularly useful. It gives an expiration date to your current page. Uhh, I think a little background and explanation are in order. Read on.
You see, web browsers cache, that is store, pages that they have visited. This way when someone visits, say Oscar's page, a second or third time, the entire document doesn't have to be downloaded. The visitor's computer pulls images, music and page content out of it's storage cache. This greatly speeds up the loading of Oscar's page and reduces traffic on the internet --- but ...... If I've updated Oscar's page and someone revisits before my page has cleared out of his cache, my visitor will not see the latest version of Oscar the Turtle. He'll see what his computer has stored. This is not good. I've worked to make the page better, but repeat visitors aren't seeing the improvements [unless my page has cleared from their cache or they hit the 'reload' button which makes their browser reload the entire page from the internet].
All is not lost though. I can force the visitor's browser reload Oscar's page from the internet by specifying an expiration date in a meta tag. So, everytime I update my web page, I want to update this tag. Let's look at it.
<META HTTP-EQUIV="expires" CONTENT="Mon, 10 Aug 1998 18:30:00 GMT">
What this does is make any browser which visited Oscar's page before 10 Aug 1998 at 6:30 pm Greenwich Mean Time [it's in England, folks] to completely reload the page and all it's associated files. If I update Oscar's page again on the 13th of Aug, then I should also update the meta tag to that new expiration date. Very simple.
You're at the bottom of the page. Now return to the Anchor tag example
