Adding Graphics and Music to Your Page
You've created your page, now you want to add some graphics and music. The best way I've found to do this is to use the Advanced HTML Editor. Though this may sound intimidating if you're new to web page building, it's really quite easy and, once you learn how it's done, quite a lot of fun!
To do this, you'll need to open your page in the Advanced HTML Editor. Go to the GeoCities Home Page. Click the "sign in" link and log in using your GeoCities member name and password. Then click the "Edit Pages" box, and then click the "Enter the File Manager" button on the next page.
Select the file you wish to edit by clicking the check box to the left of the file name. Check to make sure the Advanced HTML Editor is selected in the Editor Selection drop-down menu (located on the right side of the page, on the same line as your website address). Then click the "Edit" button.
First, we'll look at adding a background image.
Your background image will go in your BODY tag, which is located immediately below the </HEAD> tag, near the top of your source code. To add a background image, add this command into your BODY tag:
background="filename.jpg" OR background="filename.gif"
Which command you use will depend on whether your background image is saved as a JPEG or a GIF file. Substitute filename with the name of your image file. Your BODY tag should now look something like this (there will probably be more information, but what we're looking for is the background image information):
<BODY background="filename.jpg">
OR
<BODY background="filename.gif">
Now, let's look at adding an image somewhere else on your page.
Images have a tag to themselves, called the Image Source. The Image Source tag (IMG SRC) shows where the image is supposed to appear on your page. You can add an image anywhere you wish on your page. To insert an image on your page, position your cursor in the edit box where you want your image to appear on your page. Then type the following:
<IMG SRC="filename.jpg">
OR
<IMG SRC="filename.gif">
Now that you know how to add an image, let's take it a step further. Let's center the image on a blank line on the page. To do that, you'll add another HTML tag - the CENTER tag. Let's look at the coding to center an image:
<CENTER><IMG SRC="filename.gif"></CENTER>
You'll notice there is another tag added at the end of the line - the /CENTER tag. This returns the default alignment to the left side of the page.
Now that you've centered your graphic on the page, let's look at something else you can do with that graphic - let's use it as a link to another page! To do this, you simply add the A HREF tag in front of your IMG SRC tag. One thing you have to remember is that you must cancel the A HREF tag immediately following the IMG SRC tag by using the /A tag. If you don't cancel it, EVERYTHING following the A HREF tag will show as a link! I know it may sound a little confusing, but the following example should clear that up:
<CENTER><A HREF="http://www.oocities.org/Heartland/Pointe/2355/images.html"><IMG SRC="filename.gif"></A></CENTER>
As it's coded, your image will appear on the page with a border around it, the color of your link text. If you want to get rid of the colored border, add this to your IMG SRC tag after the target: border=0. Let's take a look at how the code would look now:
<CENTER><A HREF="images.html"><IMG SRC="filename.gif" border=0></A></CENTER>
This is particularly helpful if you're using images with transparent backgrounds!
We just looked at using the A HREF tag to link a web page to an image. You MUST use the entire website address, including the http://, if you are linking to another site. If you are linking to a page on your OWN site, all that's needed is the filename of the page. Another thing you can do with the A HREF tag is to send email. The link reference for an email link is "mailto:" Let's look at what the A HREF tag for an email link looks like:
<A HREF="mailto:youremail@server.com">
This will allow visitors to your site to send email to you directly through your page! Just like above, this can be linked to a graphic.
Now that you know how to add graphics, how about some nice music?
There are two options with this. You can provide a link to your music file (filename.mid) using the A HREF tag, which requires that the viewer click on the link to listen to the music, or you can add background music which runs automatically or manually. Let's look at both methods.
To link your music file using the A HREF tag, you would add this command to your HTML file:
<A HREF="filename.mid">
You can link this to a graphic, as above, or to text. Don't forget to add your /A tag!
To link to text, type your text immediately following the A HREF tag:
<A HREF="filename.mid">Whatever you want your link to say</A>
Your visitors will have to click the link to listen to the music you selected for your page. They will get a pop-up music console.
Now, let's suppose you want the music to start automatically. Here you have to make sure it can be accessed using Microsoft Internet Explorer and Netscape. The coding is different for both browsers. You need to code your background music for both browsers. Here's the best method for this. It allows your visitor the freedom to stop the music, and your music file only plays once:
<EMBED SRC="filename.mid" WIDTH=145 HEIGHT=55 AUTOSTART=TRUE>
<NOEMBED>
<BGSOUND SRC="filename.mid">
</NOEMBED>
This will produce a music player where you've put your code, which will allow your visitors to turn the music off, or adjust the volume. Your file will play through once then stop. As a CL, I have to visit many sites. I've found this feature to be VERY desirable!
Now that you know how to code your page for graphics and music, you're ready to step-off on your own and build a great GeoCities homestead!
|Home Page|Help Page|Site Map|