BODY & SOUND FX
YOUR GRADED ASSIGNMENT
Add to your project by putting sound on your home page
and altering body options for color and graphics on all 5 pages.

Code for sound, default text/link options, and backgrounds
CODE Description

<body text="yellow" link="red" bgcolor="pink" background="bg1.jpg" >

for a midi file:
<bgsound src="xfiles.mid" loop="1">

for a mp3 or ogg or wav
<audio controls autoplay>
<source src="dust_man.mp3" type="audio/mpeg">
</audio>



Format MIME-type
mp3 audio/mpeg
ogg audio/ogg
wav audio/wav

remove autoplay if too annoying...

<- set default page color schemes

<- Add for sound



Cool sound effects generator:
BFXR
Adding background tiling graphic
It is important that your background graphic doesn't compete with your
text and link colors. White or pink text would disappear against the
flowery background you see.

Be sure to find (Google Images) and download
the tiling background graphic to your project folder.

Adding background sound or music
If your computer has speakers that work and the volume is turned up,
you should be hearing the "X-Files" instrumental theme song.
If you get tired of the song you can click the STOP button on the browser.
Don't forget, the sound/music file must be placed in your project folder.

Do a Google search and download a free
MID, WAV or MP3 file to your folder.

WAV & MP3 files can be quite large and take a while to load.
In fact, by the time the sound file loads the visitor could have moved on to
another page and missed the sound altogether. So, try to pick a
soundbite that is under 1 meg if you can.
A MIDi file is very small but is instrumental only.




Alternative Pro CSS Methods

<html>
<head>
<title>blah blah </title>
<style type="text/css">
<!--
body {
background-color: #FF9999;
background-image: url(bg1.jpg);
background-repeat: no-repeat;
background-position:center;
background-position:top;
}

body,td,th {
color: #000000;
font-family: Arial;
font-size: 14px;
font-weight: bold;
font-style: italic;
}

a:link {
color: #0000FF;
text-decoration: none;
}
a:visited {
color: #FF0000;
text-decoration: none;
}
a:hover {
color: pink;
text-decoration: none;
}
-->
</style>


</head>
<body>
. . .




<- STYLE SHEET is BETWEEN
        </title> and </head> !!!


<- Use only for solid BG color
<- Use only for tiled BG image
<- Add for large non-tiling BG image
<- Add to center BG image
<- Add to place BG image at top



<- default page text color
<- default page text font
<- default page text size
<- other text options




<- set default link color
<- add to remove underline


<- color after link has been visited



<- color of link on mouseover







To use a tiled image for the background (like on this page) use
background-image: url(
image.jpg);
for a larger single background image you don't want to tile try adding
background-repeat: no-repeat;
to center AND place near top of page ADD this
background-position:center;
background-position:top;
Put the mouse cursor over the blue code above
and notice it turn PINK when you HOVER over it!