web page design gif

Step 6.


Adding music to your page.


If you want your visitors to be able to select a song from a list you will put your MIDIs on your page similar to linking to another page or site. If you just want a MIDI to play automatically when the visitor arrives, you need to embed the MIDI on your page. I will show you both ways in the small box, but we will only do it one way on our practice page. MIDIs, like graphics and animations, must be saved in your folder and ftp'd to your site before they will work on your web page. It does no good to call for a doctor, if there is no doctor available. Also, in these file names, use no spaces, and the given name of the MIDI is seldom the same exactly as the name you will list on your page for the visitor to see. So that you can see what the result of our HTML is as we go along, I am going to add a sample page to this site and add the same changes in HTML to it as we go along. Since my site already has an index page, I will name it "sample page", but we will keep index.html as our title throughout this course. OK. Lets see how the music is done.


<a href="mygirl.mid">My Girl</a><br>
<a href="tecnoroc.mid">Techno Rock</a><br>

The above illustration gives your visitor a choice to click on. We will put that one in our document in a minute, but first I'll show you how to embed the song My Girl in a document.


<embed src="mygirl.mid" width="200" height="55" autostart="true">

Now we will put them in our index page.


<html>
<head>
<title>index.html</title>
</head>
<body background="wood006.jpg">
<center><H1>Welcome To My Home Page!</H1></center><br>
<center><img src="ohioC.gif"></center><br>
<center><H2>This is my first web page!</H2></center><br>
<center><H3>This is really easy!</H3></center><br>
<center><h3>For your listening pleasure.</h3></center><br>
<a href="mygirl.mid">My Girl</a><br>
<a href="tecnoroc.mid">Techno Rock</a><br>
<center><img src="Angel5.gif"></center><br>
<center><a href="page2.html">Go to page 2.</a><br>
</body>
</html>

Click on the sample page to see what we have done so far.


Sample Page

Back