Editing in advanced html

Adding music and pictures

This section below is what my midi juke box page looks like in advanced html if you want to see how someone’s page works, or how to add pics and music, just right click on an open area on their page, (not over any images or links) and click on VIEW SOURCE a note pad will come open with a whole section that looks like below. This is Hyper Text Mark up Language= html it tells everyone’s browser where everything goes for that particular page. Down below all my comments will be in BOLD and I will highlight any points I want to make.

PRINT THIS PAGE OUT SO YOU CAN READ THE DIRECTIONS AND LOOK AT THE PAGE AT THE SAME TIME.

Programs I use for creating web pages.

Front Page 2000 &

Microsoft Word 97 or higher

With AOL you can use Easy Designer

With a good program it is pretty easy and you place, type and see things, as you would right on a web page.

The only thing you have to do with the advanced html is tell your web page where you stored (uploaded to a web directory) the files you want to use.

Just scroll down the page and you will see all my highlighted instructions and points I want to show you.

The top of your page in html may look something like this…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:w="urn:schemas-microsoft-com:office:word"

xmlns="http://www.w3.org/TR/REC-html40">

<head>

<!--[if !mso]>

<style>

v\:* {behavior:url(#default#VML);}

o\:* {behavior:url(#default#VML);}

w\:* {behavior:url(#default#VML);}

.shape {behavior:url(#default#VML);}

</style>

<![endif]-->

This is where the title goes that you see at the top left of your browser window

<title>L/M Associate Design's Juke Box</title>

<!--[if gte mso 9]><xml>

<o:DocumentProperties>

<o:Subject>Midi file collection</o:Subject>

<o:Author>L/m Associate Design</o:Author>

<o:Template>Normal</o:Template>

<o:LastAuthor>Valued Gateway Client</o:LastAuthor>

<o:Revision>2</o:Revision>

<o:TotalTime>83</o:TotalTime>

<o:Created>2001-01-12T05:04:00Z</o:Created>

<o:LastSaved>2001-01-12T05:04:00Z</o:LastSaved>

<o:Pages>1</o:Pages>

<o:Words>550</o:Words>

<o:Characters>2753</o:Characters>

<o:Lines>1376</o:Lines>

<o:Paragraphs>250</o:Paragraphs>

<o:CharactersWithSpaces>3854</o:CharactersWithSpaces>

<o:Version>9.3821</o:Version>

</o:DocumentProperties>

</xml><![endif]-->

<style>

<!--

/* Font Definitions */

@font-face

keep scrolling down

{font-family:"Baskerville Old Face";

panose-1:2 2 6 2 8 5 5 2 3 3;

mso-font-charset:0;

mso-generic-font-family:roman;

mso-font-pitch:variable;

mso-font-signature:3 0 0 0 1 0;}

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal

{mso-style-parent:"";

margin:0in;

margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:12.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";

color:white;}

a:link, span.MsoHyperlink

{color:yellow;

text-decoration:underline;

text-underline:single;}

a:visited, span.MsoHyperlinkFollowed

{color:olive;

Go down some more

text-decoration:underline;

text-underline:single;}

{margin-right:0in;

mso-margin-top-alt:auto;

mso-margin-bottom-alt:auto;

margin-left:0in;

mso-pagination:widow-orphan;

font-size:12.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";}

@page Section1

{size:8.5in 11.0in;

margin:1.0in 1.25in 1.0in 1.25in;

mso-header-margin:.5in;

mso-footer-margin:.5in;

mso-paper-source:0;}

div.Section1

{page:Section1;}

-->

</style>

<!--[if gte mso 9]><xml>

<o:shapedefaults v:ext="edit" spidmax="1027">

<o:colormenu v:ext="edit" fillcolor="black"/>

</o:shapedefaults></xml><![endif]--><!--[if gte mso 9]><xml>

<o:shapelayout v:ext="edit">

<o:idmap v:ext="edit" data="1"/>

</o:shapelayout></xml><![endif]-->

This area is called a “MEDA TAG”

If you submit your page to search engines, it’s where you put the key words of your page for the search engines to find.

<meta

content="MIDI, Real Audio, Santana, Garth Brooks, WAV, downloadable, 98 Degrees, War, Frankie Beverly, Miles Davis, Musicians, Webmistris, Undisputed Truth, Blues Bros, Free Style, Whitney Houston, BB King, Bill Withers, free, listening pleasure,New Birth, George,"

name=keywords>

This is where the description of your page goes this is also for the search engines to find

<meta

content="Webmistris' Jukebox of her Top 10 MIDI and real audio files, updated every month, with links to previous months. Link to her 150 musical sites, WAV, MIDI, Realaudio, downloadable MP3"

name=Description>

name=Template>

</head>

Body bgcolor tells the browser “what color you want your page to be”

<BODY bgcolor=black lang=EN-US link=yellow vlink=olive style='tab-interval:

.5in' onunload="spawntopfivewindow();">

Since I created this page at ANGELFIRE.COM, they automatically put a pop up window into web pages created here, below is their code. Just keep scrolling down, till you see STOP

</noscript>

<!--

function stopError() {

return true;

}

window.onerror = stopError;

//-->

</script>

<!--

var popupURL = "/sys/popup_source.shtml?Category=";

var adname = "Ad";

var cookie_name = "Popup";

var expire = 5;

var factor = 1;

var popup = null;

var view_count = 0;

var expdate = new Date();

ShowPopup();

function ShowPopup() {

openWin();

}

function openWin () {

// browser detect loads differently sized window for netscape 3.x

if (navigator.appName=="Netscape" && parseInt(navigator.appVersion)<=3) {

popup = window.open(popupURL,adname,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=619,height=125');

} else {

popup = window.open(popupURL,adname,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=602,height=105');

}

if(popup != null) {

popup.location = popupURL;

if( navigator.appName.substring(0,8) == "Netscape" ) {

popup.location = popupURL;

popup.opener = self;

}

popup.close = function new_close_function() {};

}

function getCookieVal (offset) {

var endstr = document.cookie.indexOf (";", offset);

if (endstr == -1) {

endstr = document.cookie.length;

}

return unescape(document.cookie.substring(offset, endstr));

}

function GetCookie (name) {

var arg = name + "=";

var alen = arg.length;

var clen = document.cookie.length;

var i = 0;

while (i < clen) {

var j = i + alen;

if (document.cookie.substring(i, j) == arg) {

return getCookieVal (j);

}

i = document.cookie.indexOf(" ", i) + 1;

if (i == 0) {

break;

}

return null;

}

function SetCookie (name, value) {

var argv = SetCookie.arguments;

var argc = SetCookie.arguments.length;

var expires = (argc > 2) ? argv[2] : null;

var path = (argc > 3) ? argv[3] : null;

var domain = (argc > 4) ? argv[4] : null;

var secure = (argc > 5) ? argv[5] : false;

document.cookie = name + "=" + escape (value) +

((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +

((path == null) ? "" : ("; path=" + path)) +

((domain == null) ? "" : ("; domain=" + domain)) +

((secure == true) ? "; secure" : "");

}

function changeOpenFunction() {

var original_window_open = window.open;

function new_open_function(url,name,features,replace) {

if (name != "TripodPopup")

return original_window_open(url,name,features,replace);

}

window.open = new_open_function;

}

var bName=navigator.appName;

if (bName!="Netscape")

changeOpenFunction();

//-->

</script>

STOP ok that’s the end of the Angelfire code, now proceed down

Below is the codes that puts the title on the center top of my page that you see…

<span style='font-size:18.0pt;

mso-bidi-font-size:12.0pt;color:yellow'>L/M Associate Design’s<o:p></o:p>

<span style='font-size:18.0pt;

mso-bidi-font-size:12.0pt;color:yellow'><span style="mso-spacerun:

yes"> Midi Juke Box<span style='font-size:18.0pt;mso-bidi-font-size:

12.0pt'> <span style='font-size:18.0pt;mso-bidi-font-size:12.0pt;

font-family:"Baskerville Old Face";color:aqua'><span style="mso-spacerun:

yes"> <o:p></o:p>

<![if !supportEmptyParas]> <![endif]><o:p></o:p>

I put a table in my page, a “table” has different “cells” all over the page, so you can arrange your page. “Put things here.” Put things there and so on.”

<table border=1 cellspacing=0 cellpadding=0 bgcolor=black style='background:

black;border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;

mso-padding-alt:0in 5.4pt 0in 5.4pt'>

<tr>

<td width=371 valign=top style='width:278.6pt;border:solid windowtext .5pt;

padding:0in 5.4pt 0in 5.4pt'>

<!--hide

var my_clientip = '64.12.96.231';

setonclickmethods();

setvisitorcookie(my_clientip);

DisplayBRM(1);

//-->

This is the start of my midi music files and my juke box that you see on the page.

The highlighted code below, tells the browser where to find my midi song, “ You Aint Seen Nothin Yet” In the code, the <a href is telling the browser to start an application

The https://www.angelfire.com/md/love67/images/ is telling the browser, what directory I keep my midi files in

The aintseen.mid tells the browser, what midi file in that directory I want to use.

Make sure you type EVERY THING don’t forget to type any of the characters < > “” / if you forget ANY of the characters in that command line, the browser will not locate your music file

You can use midi, wav, and mp3 files.

<span

style='text-decoration:none;text-underline:none'>

This below is telling the browser that I want to put a picture in my page it tells the browser, the image size and its location. It also has the name of the song in “quotations” this is so when people roll there mouse over the picture, it tells them what song is there. They can click on that picture to play or download that song. The directory address for the browser to find the picture is the same as the above one to find the midi file, I just changed the file name to jukebox1.jpg again, DON’T FORGET any of the characters in this command line.

The simple command for a picture is, <img src=”http://www. And so on.

when you use a program to create your pages and you resize the picture, the program automatically puts in the <img border=0 width=88 height=91 and so on.

The </a> part of the code is telling the browser to end that specific application.

<img border=0 width=88

height=91 id="_x0000_i1025"

src="https://www.angelfire.com/md/love67/images/jukebox1.jpg"

alt="Aint seen nothin yet"></a>

Another one begins here just like above, for the next song.

I have a total of 19 Juke box songs and pictures that are a part of the two juke boxes on my page, so just scroll on down till you see STOP for the next instruction.

href="https://www.angelfire.com/md/love67/images/axelf.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=91 id="_x0000_i1026"

src="https://www.angelfire.com/md/love67/images/jukebox2.jpg" alt=Beverly Hills

Cop></a>

<a

href="https://www.angelfire.com/md/love67/images/cheers.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=62 id="_x0000_i1027"

src="https://www.angelfire.com/md/love67/images/jukebox3.jpg" alt=cheers></a><a

href="https://www.angelfire.com/md/love67/images/comesail.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=62 id="_x0000_i1028"

src="https://www.angelfire.com/md/love67/images/jukebox4.jpg"

alt="Come Sail Away"></a>

<a

href="https://www.angelfire.com/md/love67/images/ebony5.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=38 id="_x0000_i1029"

src="https://www.angelfire.com/md/love67/images/jukebox5.jpg"

alt="Ebony & Ivory"></a><a

href="https://www.angelfire.com/md/love67/images/gimme2.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=38 id="_x0000_i1030"

src="https://www.angelfire.com/md/love67/images/jukebox6.jpg"

alt="Give me Summer Lovin"></a>

<a

href="https://www.angelfire.com/md/love67/images/Hookedon.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=45 id="_x0000_i1031"

src="https://www.angelfire.com/md/love67/images/jukebox7.jpg"

alt="Hooked on a feeling"></a><a

href="https://www.angelfire.com/md/love67/images/ilovearainynight.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=45 id="_x0000_i1032"

src="https://www.angelfire.com/md/love67/images/jukebox8.jpg"

alt="I Love a rainy night"></a>

<a

href="https://www.angelfire.com/md/love67/images/iwilalwa.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=81 id="_x0000_i1033"

src="https://www.angelfire.com/md/love67/images/jukebox9.jpg"

alt="I will always love you"></a><a

href="https://www.angelfire.com/md/love67/images/killingme.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=81 id="_x0000_i1034"

src="https://www.angelfire.com/md/love67/images/jukebox10.jpg"

alt="Killing me softley"></a><span style='font-family:"Baskerville Old Face";

color:lime'>

</td>

<td width=372 valign=top style='width:279.0pt;border:solid windowtext .5pt;

border-left:none;mso-border-left-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>

<a

href="https://www.angelfire.com/md/love67/images/lean.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=91 id="_x0000_i1035"

src="https://www.angelfire.com/md/love67/images/jukebox1.jpg" alt="Lean on me"></a><a

href="https://www.angelfire.com/md/love67/images/mission.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=91 id="_x0000_i1036"

src="https://www.angelfire.com/md/love67/images/jukebox2.jpg" alt=Mission

impossable></a>

<a

href="https://www.angelfire.com/md/love67/images/rain.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=62 id="_x0000_i1037"

src="https://www.angelfire.com/md/love67/images/jukebox3.jpg" alt=November Rain></a><a

href="https://www.angelfire.com/md/love67/images/feeling.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=62 id="_x0000_i1038"

src="https://www.angelfire.com/md/love67/images/jukebox4.jpg"

alt="More than a feeling"></a>

<a

href="https://www.angelfire.com/md/love67/images/allnite.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=38 id="_x0000_i1039"

src="https://www.angelfire.com/md/love67/images/jukebox5.jpg"

alt="I Wanna rock & roll all night"></a><a

href="https://www.angelfire.com/md/love67/images/tribal.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=38 id="_x0000_i1040"

src="https://www.angelfire.com/md/love67/images/jukebox6.jpg"

alt="Tribal Dance"></a>

<a

href="https://www.angelfire.com/md/love67/images/with.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=45 id="_x0000_i1041"

src="https://www.angelfire.com/md/love67/images/jukebox7.jpg" alt=With></a><a

href="https://www.angelfire.com/md/love67/images/Ymca.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=91

height=45 id="_x0000_i1042"

src="https://www.angelfire.com/md/love67/images/jukebox8.jpg" alt="Y M C A"></a>

<a

href="https://www.angelfire.com/md/love67/images/1999.mid"><span

style='text-decoration:none;text-underline:none'><img border=0 width=88

height=81 id="_x0000_i1043"

src="https://www.angelfire.com/md/love67/images/jukebox9.jpg"

alt="1999 by Prince"></a><img border=0 width=91 height=81

id="_x0000_i1044"

src="https://www.angelfire.com/md/love67/images/jukebox10.jpg"

alt="no song here"><span style='font-family:"Baskerville Old Face";

color:lime'>

</td>

</tr>

<tr>

<td width=371 valign=top style='width:278.6pt;border:solid windowtext .5pt;

border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>

<![if !supportEmptyParas]> <![endif]><o:p></o:p>

</td>

<td width=372 valign=top style='width:279.0pt;border-top:none;border-left:

none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;

mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;

padding:0in 5.4pt 0in 5.4pt'>

<![if !supportEmptyParas]> <![endif]><o:p></o:p>

</td>

</tr>

</table>

STOP

This is the code for the “Completing Surveys” banner on my page.

<span style='font-size:14.0pt;

mso-bidi-font-size:12.0pt;color:yellow'><A HREF="http://www.iCameo.com/cgi-bin/affiliate.cgi?id=scorpio17857"><IMG BORDER="0" WIDTH="480" HEIGHT="60" SRC="http://www.iCameo.com/b-icameo.gif"></A>

This command tells the browser to put a link to my home page at the bottom of my midid juke box page.

href="https://www.angelfire.com/md/love67">HOME</a><o:p></o:p>

This command below tells the browser, as soon as my juke box page opens, to start playing my allnite.midi song. You will see a midi player at the bottom of my page, that you can stop and start the song with. The song will only play one time, with this command.

If you want the song to keep playing over and over till the person exits your page, then you add this command loop=”true”

If you do not want to see the midi player box, you add this command hidden=”true” to add the two commands I just talked about, the command would then look like this…

Ok, now scroll down to the bottom of this page.

<![if !supportEmptyParas]> <![endif]><o:p></o:p>

</div>

<!--hide

var my_clientip = '64.12.96.231';

setonclickmethods();

setvisitorcookie(my_clientip);

DisplayBRM(1);

//-->

This command below ends the text area of my page.

</BODY>

This command below tells the browser that this is the very bottom of the web page.

</html>

In closing, making web pages, can be fun, everything I know is from just having too much time to learn, sitting here surfing the web.

I am happily married now, so I don’t surf quite as much as I use too. If I can be of ANY help, contact me, I hang out in the Web Page Help room on AOL.

MY AOL name is scorpio17857

My ICQ# is 69179337

I am glad to help, if I can.

Or you can Email me to my forwarding mail account docluv67@email.com

Go Back to my midi juke box