Dynamic HTML

DYNAMIC HTML

What is Dynamic HTML? Dynamic HTML is a term used for making Dynamic and Interactive web pages. DHTML combines HTML, JavaScript, the HTML DOM, and CSS. Use the code below to make the words Highlight.

<span style= "background-color: #FFFF00">cool effects like these</span>

instead of sending you to another page I'm just using this one on this page. Have you looked at the code yet? It's so easy to use cool effects like these -- and as for your readers it really keeps them interested. You'll see here in a minute that it doesn't take much (on your part) to IMPRESS the heck out of them.

SCROLLBAR COLORS

Let's change the scroll bar colors now. It's simple and easy as pie. Just add a few lines of code into the <HEAD> of your document, like this.
<html>

<head>

<style>

BODY { scrollbar-3d-light-color:#d2e6f8;

scrollbar-arrow-color:#ff0000;

scrollbar-base-color:ffffff;

scrollbar-dark-shadow-color:#000000;

scrollbar-face-color:#BDE9FF;

scrollbar-highlight-color:#0000ff;

scrollbar-shadow-color:#000000}

</style>

<title>Color Scroll</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" text="#000000">

<h1 align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF0000">That's

all there is to this, </font></b></h1>

<h1 align="center"><font color="#FF0000"><b><font face="Verdana, Arial, Helvetica, sans-serif">but

it's o-hhhh so cool! YEH!</font></b></font></h1>

<h2 align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif"><br>

<font color="#FFCC00">And you can change </font></font></b></h2>

<h2 align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" color="#33FFCC">the

colors to </font></b></h2>

<h2 align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" color="#000066">whatever

you want!</font></b></h2>

<p align="center"> </p>

<p align="center"> </p>

<p align="center"> </p>

<p align="center"> </p>

<p align="center"><img src="covers250opt.jpg" width="300" height="382"> </p>

</body>
</html>
Click link to view

color_scroll.htm
File Size:	1 kb
File Type:	htm

Download File

SOUNDS

Finally let's wrap up this section by using sounds on your web page. First, we can add a simple <tag> for background sound. Here it is:

<bg source="bgama.midi" loop=2> which would play your midi file when the page is loaded and loop it twice.
Here is the Code:
<html><head><title>Sounds</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-

1"></head><body bgcolor="#FFFFFF" text="#000000"><center><a href="#"

onMouseOver="document.all.music.src='sound1.wav'">Sound 1</a><p><a href="#"

onMouseOver="document.all.music.src='sound2.wav'">Sound 2</a><p><a href="#"

onMouseOver="document.all.music.src='sound3.wav'">Sound 3</a><p><a href="#"

onMouseOver="document.all.music.src='sound4.wav'">Sound 4</a><p><a href="#"

onMouseOver="document.all.music.src='Sound5.wav'">Sound 5</a><p><bgsound src="#" id=music loop=1

auto></center><p><center><font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>by <a

href="http://javascriptsandmore.com">JavaScript's and More</a></font></center><p><!-- Script Size: 0.77 KB --
></body></html>

Let's look at enabling the playing of sound when the user clicks on a sentence OR an image.
Click on link to view example of sounds when you scroll over

sounds.html
File Size:	1 kb
File Type:	html

Download File

Now what about midi? We can do it two different ways. One with controls, and one without controls. Both browsers handle this differently, so be careful. Make sure you view the code on each page to get it right.

no_controls_midi.htm
File Size:	0 kb
File Type:	htm

Download File

cool_midi_withcontrols.htm
File Size:	0 kb
File Type:	htm

Download File

Category-Articles

Tags-Dynamic HTML
dhtml dynamic
DHTML