123Webmaster.com : Onsite : Building
The ABC of HTML: Lesson 4

by Janine Dalton
http://www.httpcity.com/jalouda/
 

Lesson 4 - Sound And Links

BACKGROUND SOUND

To have music automatically play in the background while visitors look at your page, all you need to do is include the following near the bottom of your code, just before the CLOSING part of the BODY tag:

<EMBED SRC="mymusic.mid" HIDDEN="false" CONTROLS="smallconsole" WIDTH="144" HEIGHT="15" LOOP="false" AUTOSTART="true">
<NOEMBED>
<BGSOUND SRC="mymusic.mid" LOOP="1">
</NOEMBED>
</EMBED>

This might look like a mouthful but the reason for this is browser incompatibility. You could spend a lifetime trying to make sure that everyone will see your page in exactly the same way but you probably never succeed. At present nearly 60% of people use Internet Explorer and nearly 40% use Netscape and use of other browsersis negligible! So, when it isn't too awkward to cater for both of the main browsers, it is a good idea to do so.

That is exactly what is happening in the code above. The EMBED tag is used by Netscape while Internet Explorer recognises the BGSOUND tag. If you use both, then everyone will get to hear your music and if you don't then they won't; it's that simple!

You can fiddle around with the code a little. You can set loop to TRUE (Netscape) and INFINITE (Internet Explorer) which will cause your piece of music to play forever. This is not a good idea; although you love the song, others might get just a little irritated!!

You can also set hidden to TRUE (Netscape), but again this is not advised. Your page might look prettier if there is no player showing but people will not be able to stop the music. You must remember that many choose to listen to their own music while they surf. If your unstoppable music conflicts with theirs and the whole thing sounds like a cat's chorus, you can imagine how long they are going to spend at your site! Besides the CONTROLS attribute in the EMBED tag specifies that all that will be seen is a small, neat controls area near the bottom of your page.

All these problems might put you off having background music altogether. Indeed, some never use it, since on top of everything else it takes ages to load, and they would rather have a few fancy graphics instead. That's why I say to put the code near the bottom of your page - that way the rest of your page loads first and people have something to look at while they are waiting.

Of course at the end of the day, like everthing else when it comes to creating a website, the choice is left up to you, the webmaster. Doesn't that title make you feel powerful and important :o) I quite like listening to background music but when push came to shove, after seeing each of my pages load at snail pace for a few weeks, I gave it a miss. Apart from the quick snatch of music on my paddington bear pages, I decided to put all the rest of my colection on my midis page. Granted, that is completely differrent to having background music, but at least people can listen to some if they want to and download as many as they wish. In general though, if the music adds something special to your site I would keep it!

LINKS

One thing you must have on your site however is links. After all, the WWW by definition is a web of sites all connected together. Regardless of how good your site is, if it is not connected to others it is nothing but a poor little invisible orphan! Considering their importance, it is just as well that the HTML used is really simple.

Firstly there are 2 types of links: links to other locations within your site and (you've guessed it!) links to locations outside your site. The only difference between the two is the amount of detail given in the address of the file you want to link to.

To link to another page in your site use the folowing:

<A HREF="myotherpage.html">Click here to see my other page</A>

Like most tags it is in 2 parts; this one at its most basic is just <A></A>, and is known as the ANCHOR tag. Then you add the HREF bit which is essential and you put this equal to the name (not title) of the page you want to link to (in inverted commas) eg myotherpage.html . If you have set up subdirectories, other folders so that your main file directory does not get too cluttered, then you will need to add the subdirectory name as well eg newpages/myotherpage.html if the subdirectory involved was called newpages. Then all you need to add is the clickable text between the 2 parts of the tag. Remember that you can format this text any way you wish (see lesson 2 for the lowdown on text effects)

When you want to link to pages outside of your site everything is exactly the same, except for the name of the page/site that you wish to link to. Since your browser will have to go outside of your directory to fetch the page, it needs a little more information. So, for external links you must specify the entire address of the page, for example http:// www.agreatsite.com/coolpage.html:

<A HREF="http://www.agreatsite.com/coolpage.html">visit somewhere cool!</A>

Some people treat all links exactly the same, that is, they always specify the full address of the page they want to link to, regardless of whether it is an outside link or not. Your links will work if you do this but it is efficient to do so. If you include the full address of your links page instead of just eg links.html, your browser treats your links page as some far away page that exists deep within the world wide web. It goes half way around the world to fetch it when it could have just gone next door and stayed within your site, which would obviously have been far quicker!

One thing you do not have to worry about is having a different colour for your links. If you set up your colour scheme in the body tag your links will automatically be displayed in the colour you chose there, and if you did nothing about a color scheme they will show up in blue. Don't forget you can pick different colours for links, active links and visited links. See lesson 2 for more information.

You also do not have to worry about underlining links yourself, since the clickable text you specify will be automatically underlined

That is all well and good, I hear you say. Text links are simple but I bet it is really tricky to be able to have graphic links instead. After all, a bit of underlined text is just plain boring! It can be, but text links load in a flash and have the added advantage that everyone will know that they are links. It is no good having a fancy graphic or snazzy icon linking to your marvellous links page if it takes forever to load and if nobody can figure out that it is a link anyway! Yet it can be really effective and the technique used is nothing new. I said earlier that you place what you want your visitors to be able to click on between the 2 tag parts. It can be anything you want - text or a graphic. So all you need to do is place your IMG tag in the middle as in the example below. (See lesson 3 for more information.) Just remember that you are placing a tag within a tag here, so make sure that you do not leave out any < or > symbols!

<A HREF="myotherpage.html"><IMG SRC="snazzybuttonthatisalink.gif"></A>

Although you will mainly be linking to various sites addresses, prefixed by http://, you may want to link to an email address occasionally. In this case you must prefix the email address by mailto: instead like this:

<A HREF="mailto: me@mysite.com">Click here to email me</A>

Well that is really all there is to basic HTML (as far as I know :o) ). Congratulations for getting this far. You have taken the time needed to become familiar with the ABC of HTML and now you will be able to see instant results! If you currently use a point-and-click editor to create your pages, you will be amazed at how much easier it will be to find and correct errors. Maybe you will even feel brave enough to start creating a page in the basic text editor Notepad LOL. I am a complete scaredy cat, so if I can do it you can too :o) .

You are also ready to build on your firm foudation by learning a few tips and tricks in the final lesson. None of these are essential for building a basic site but are simple ways to jazz up your page with minimum effort. There are also some minor details dealt with that would possibly have confused you earlier on. As anyone with a site knows only too well, it is the tiny imperfections that niggle the most, so hopefully these points will ensure a *few* good nights sleep :o).

Lesson Index

Introduction: Anyone Can Learn HTML!
Lesson 1: First Steps
Lesson 2: Text
Lesson 3: Colours & Graphics
Lesson 4: Sound & Links
Lesson 5: Tips & Tricks



Discussion - HTML Layout
Related Sites - Check out the extensive list of html tutorial links on 123webmaster.com , to further your html understanding.