13. Links, Graphics,
         and Sounds

Links

Sense a web site is a set of web pages linked together I suppose we need to know how to link pages together. Here's a summary of the link tags

<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a name="NAME"></a> Creates a target location
<a href="#NAME"></a> Links to a target location

A link is an anchor tag <a> that uses the hyper-reference attribute to link to another document in your site or anywhere on the World Wide Web. Let's try one. Type the following into the body of your page.

The anchor tag can also be use to mark a position in a page, like a book mark. Then you can link to that position for the same page or from another page. We mark the position we want to us as a book mark with an

<a name="somewhere">somewhere</a>

Then we link to it like this

<a href="#somewhere">click here to go somewhere</a>

The following shows an example of how this works. I'd suggest copy and paste it in to the body of your page. Unless you really want the practice typing, in which case enter the following into the body of you page. You'll want to clear the body section of your document before adding the following. After reloading your browser click the links and you should jump around on the page.

Now to link to a file in the same folder or directory your code would look something like this.

<A HREF="myfile.htm">myfile</A>

A few things you need to remember are file name are entered inside the quotes must be entered exactly, this part is case sensitive. In between the tags you can but anything you want, the file name, click here, go to ??? or whatever. You can even use images such a buttons, as soon as you know know how to place inages that is. We'll get to that in just a minute.

The href= attribute use / and ../ to locate files, notice these are forward slashes. The / goes down one level and the ../ goes up one level. Let me try of illustrate that.

What I mean is if my active page is located in c:\webpages\mypage.htm and I want to link to c:\webpages\link.htm I would link to it like this:

<a href="link.htm">link</a>

However if the file I want to like to is one level down at c:\webpages\stuff\link.htm I would link to it like this

<a href="stuff/link.htm">link</a>

If my link is in another folder entirely like this c:\morePages\link.htm Then I would like to link to it like this

<a href="../morePages/link.htm">link</a>

This is one of those things that you'll learn over time. Images work the same way. You don't always have to use text labels for your links you can also use images, but first we must learn how to use images. So let's move on to images because they work very much the same way.

Images

Now we're ready for images

Image tags look like <img src="theimage.gif">. It's an easy tag to remember because img is short for image and src is short for source. Image tags don't get a closing tag. There are tons of images you can get free on the internet, but let's start with this one for now.

Just right click it and save it in your folder.

The src is one attribute associated with the image tag. Other attitudes of the image tag are height, width, align and some other little tricks I'll show you in just minutes. First let's take a closer look a the first three; height, width and align.

Just so it will be easier to see what we are doing start a new page from you template and name it "image" or whatever.

Then add this to the body of your document

Save it and view it in your browser.

Image size is based on pixels. Great, so what are pixels? They are the dots that make up your screen.

We can change the height and width like this:

To align the image we just add the align atribute like this:

You may have noticed the word right is in quotes and the number 100 is not. That's because the browser may mistake a word for an attribute or something, but numbers can not be confused this way. So the writers of HTML decided to quote words but not numbers.

Now try changing the height, width and align just to see what happens

The src doesn't actually add the image to you file it just tells the browser where to find it.

SRC="computerBoy.gif" works because the image is in the same folder as the html document calling for it. If the image is in another folder we must include the path in the src attribute. A forward slash ( / ) takes us down one lever and a dot dot forward stash ( ../ ) takes us up one level. SRC="images/computerBoy.gif" means that the image is one level down in a folder called images. SRC="../computerBoy.gif" means that the image is in one folder up. SRC="../../computerBoy.gif" means that the image is two folders up. SRC="../images/computerBoy.gif" means that the image is one folder up and then another folder down in the images folder. You seee this works just like links.

There is another way that this can be done. You can use the complete URL. For example: http://www.whatever.net/yoursite/images/computerBoy.gif

Why, you ask, does it make so much sense to use relative (partial) URLs as opposed to absolute (complete) URLs?? You will probably build your site locally (on you own compter) then upload your site to your server. If you use partial URLs both of these will work just fine. After building you site just upload the whole pile to your server and everything will work. It's also, easier for the browser to get the images and your page will load faster. The only time it is a good idea to use an absolute URL is when the image is on a completely different server.

You should also add the alt attribute to all your images. This not only tells very old blowers what they are missing. It also gives a descriptions that show up when the mouse moves over the image. It looks like this:

<img src="computerBoy.gif" height=100 width=100 align="right" alt="boy at computer">

Even though the browser will figure out how big the image is all by itself. It makes your page load faster because it is easier for the browser. Also it's easier when it comes time for the final editing if all you have to do is change the numbers.

I know we just told you how to make a line using the <hr> tag. Well you can also use an image to accomplish basically the same thing. Here's how it works.

First save this image, the black box. 

Then add the following to your page:

When you reload you should see something like this:

Changing Image

The mouseOver and mouseOut commands borrowered from JavaScript allow make an image change when the user moves the mouse over or off an image.

To do this you need to save another image, and here it is.

To make this work we must name the image that is to be changed, like this:

Next we need to add a link for the the mouse to know when it is passing over. For now we'll just add a dummy link like this:

Finally we add the mouseOver and mouseOff commands, like this:

and that's it. It should look something like this in your browser.

Kinda looks like he stops typing to see what you want. When using an image as a link the browser puts a frame around the image. This is similar to the underline when using text. To hide the frame set the image border to zero.

This function is most often used with buttons but you can use it on any image in your documents. To make this link to a web page just replace the pound sign (#) with the file name and path you want to link to.

You can ever use one mouseOver to change several images at once.

First save these two images then add the following to you page.

Linking to Sound Files

In this section we'll show you how to link some sound into your site.

The easiest sound files to work with end in a (.wav) extension. If you are using windows you probily all ready have many wav files on your computer. To find these files use the find feature from your start button. Then copy a couple of these into the same folder as you web page. If you don't have any sound file you are welcome to these or you can find much more here (http://www.wavfile.net/categories.html)

If you have a microphone it's easy to make your own sound files using Sound Recorder in Windows. If you haven't changed your short cuts you should find it in Start > Accessories > Multimedia > Sound Recorder.

Linking to sound files is one of the easiest ways to insert sound into your site. But linking to sound files isn't the most exciting way to insert sound. Instead of mousing over a word and hearing a sound, your users have to click on a link and possibly wait a few seconds before hearing a sound. It's a simple and fast way to put some sound into your site, however, and it's one of the most commonly used ways of inserting audio. The only problem is this method is not supported by all browsers.

Use the anchor tag, as shown above, to link to the sound file. If the reader wants to hear the sound they simply click on the link. For example, you might have a segment in an HTML file that looks like this: 

To download and then hear the file play, the reader simply clicks on the link. After the browser downloads the sound, it launches a player and automatically starts playing the sound. The reader clicks on the stop button button to stop the music from playing.

Embed

Another way to add sound to your page is using the <embed> tag in the head of you document. This way is supported by most browsers.

It works like this:

src = file and path

autostart = true/false

loop = number of times to play sound

volume = % of user's computer sound volume

hieght & width = in pixels the default is the size of the contorl panel (144x74)

Tags used in this section
Link Something <A HREF="URL"></A>
Link to Location <A HREF="URL#***"></A> (if in another document) <A HREF="#***"></A> (if in current document)
Target Window <A HREF="URL" TARGET="***"></A>
Mouseover Action <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript)
Mouse out Action <A HREF="URL" ONMOUSEOUT="***"></A> (Javascript)
Link to Email <A HREF="mailto:@"></A>
Specify Subject <A HREF="mailto:@?SUBJECT=***"></A> (use a real question mark)
Define Location <A NAME="***"></A>
Display Image <IMG SRC="URL">
Alignment <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
Alignment <IMG SRC="URL"ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)
Dimensions <IMG SRC="URL" WIDTH=?
HEIGHT=?> (in pixels) <IMG SRC="URL"
WIDTH=% HEIGHT=%> (as percentage of page width/height)
Border <IMG SRC="URL" BORDER=?> (in pixels)
Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)