| Examples of HTML, DHTML,JavaScript |
| <html> <head>
<style>
h1
{
position:relative;
left:50px;
}
</style>
</head>
<body>
<h1>Heading A</h1>
<p>This is a DEVINFOWARE.</p>
<h1>Heading B</h1>
<p>This is a DEVINFOWARE.</p>
<h1>Heading C</h1>
<p>This is a DEVINFOWARE.</p>
<h1>Heading D</h1>
<p>This is a DEVINFOWARE.</p>
</body>
</html> |
| |
<html>
<head>
<style>
h1.x
{
position:absolute;
left:120px;
top:150px;
}
</style>
</head> <body>
<h1 class="x">Devinfoware</h1>
<p>With absolute positioning, an element can be placed anywhere
on a page.</p>
<p>The LEFT position of the heading is 100 pixels from the left
of the page.
The TOP position is 150 pixels from the top of the page.</p>
</body>
</html> |
<html>
<head>
<style>
h1.one
{
visibility:visible;
}
h1.two
{
visibility:hidden;
}
</style>
</head>
<body> <h1 class="one">Heading
one DEVINFOWARE</h1>
<h1 class="two">Heading two DEVINFOWARE</h1>
<p>Where is heading two?</p>
</body>
</html> |
| |
<h1>Normal Heading</h1>
<h1 class="ex1">Heading
+20</h1>
<h1 class="ex2">Heading -20</h1>
<p>
Relative positioning moves an element relative to its original position.
</p>
<p>
"left:20" adds 20 pixels to the element's LEFT position.
</p>
<p>
"left:-20" subtracts 20 pixels from the element's LEFT position.
</p>
</body>
</html> |
| |
| <html> <head>
<style>
img.x
{
position:absolute;
left:50px;
top:50px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a Heading DEVINFOWARE</h1>
<img class="x" src="bulbon.gif" width="100"
height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html> |
| |
<html>
<body><p>DEVINFOWARE</p>
<p>Move the mouse over the words
to see the cursor change</p>
<span style="cursor: auto">Auto</span><br
/>
<span style="cursor: crosshair">Crosshair</span><br
/>
<span style="cursor: default">Default</span><br
/>
<span style="cursor: pointer">Pointer</span><br
/>
<span style="cursor: hand">Hand</span><br
/>
<span style="cursor: move">Move</span><br
/>
<span style="cursor: e-resize">e-resize</span><br
/>
<span style="cursor: ne-resize">ne-resize</span><br
/>
<span style="cursor: nw-resize">nw-resize</span><br
/>
<span style="cursor: n-resize">n-resize</span><br
/>
<span style="cursor: se-resize">se-resize</span><br
/>
<span style="cursor: sw-resize">sw-resize</span><br
/>
<span style="cursor: s-resize">s-resize</span><br
/>
<span style="cursor: w-resize">w-resize</span><br
/>
<span style="cursor: text">text</span><br
/>
<span style="cursor: wait">wait</span><br
/>
<span style="cursor: help">help</span><br
/>
</body>
</html> |
| |
<html>
<head>
<style>
h2
{
width:100%;
}
</style>
</head> <body>
<h2 style="filter:glow()">Glow DEVINFOWARE</h2>
<h2 style="filter:blur()">Blur DEVINFOWARE</h2>
<h2 style="filter:fliph()">Flip H DEVINFOWARE</h2>
<h2 style="filter:flipv()">Flip V DEVINFOWARE</h2>
<h2 style="filter:shadow()">Shadow DEVINFOWARE</h2>
<h2 style="filter:dropshadow()">Drop Shadow
DEVINFOWARE</h2>
<h2 style="filter:wave(Strength=2)">Wave DEVINFOWARE</h2>
<p>NOTE: Filters don't work if the width property of the element
is not set.</p>
</body>
</html> |
| |
<html>
<head>
<style>
div
{
width:160px;
height:120px;
}
</style>
</head>
<body> Alpha:
<div style="filter:alpha(Opacity=20)">
<img src="landscape.jpg" width="160" height="120"
/>
</div>
Gray:
<div style="filter:gray()">
<img src="landscape.jpg" width="160" height="120"
/>
</div>
Invert:
<div style="filter:invert()">
<img src="landscape.jpg" width="160" height="120"
/>
</div>
Xray:
<div style="filter:xray()">
<img src="landscape.jpg" width="160" height="120"
/>
</div>
Mask:
<div style="position:absolute;left:10;top:610;">
<img src="landscape.jpg" width="160" height="120"
/>
</div>
<div style="position: absolute; left: 10; top: 610; filter:
mask(color=#ffffff); width: 160; height: 120">
<h2>The mask value makes the text transparent DEVINFOWARE</h2>
</div>
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg
}
</script>
</head>
<body>
<b>Mouse over the squares and the background color will change!</b>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('red')"
onmouseout="bgChange('transparent')"
bgcolor="red">
</td>
<td onmouseover="bgChange('blue')"
onmouseout="bgChange('transparent')"
bgcolor="blue">
</td>
<td onmouseover="bgChange('green')"
onmouseout="bgChange('transparent')"
bgcolor="green">
</td>
</tr>
</table>
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the onload event as
DEVINFOWARE")
}
</script>
</head>
<body onload="mymessage()">
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the onunload event")
}
</script>
</head>
<body onunload="mymessage()">
<p>An alert box will display a message when you close this document!</p>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function preferedBrowser()
{
prefer=document.forms[0].browsers.value
alert("You prefer browsing internet with " + prefer)
}
</script>
</head> <body>
<form>
Choose which browser you prefer:
<select id="browsers" onchange="preferedBrowser()">
<option value="Internet Explorer">Internet Explorer
<option value="Netscape">Netscape
</select>
</form>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function confirmInput()
{
fname=document.forms[0].fname.value
alert("Hello " + fname + "! You will now be redirected
to www.devinfoware.com")
}
</script>
</head> <body>
<form onsubmit="confirmInput()" action="http://www.devinfoware.com/">
Enter your name: <input id="fname" type="text"
size="20">
<input type="submit">
</form>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered when you selected the content
of the input field")
}
</script>
</head> <body>
<p>Select the content in the input field</p>
<form>
<input type="text" value="Select this text" onselect="message()"
size="20">
</form>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered by the onfocus event handler")
}
</script>
</head> <body>
<form>
Enter your name: <input type="text" onfocus="message()"
size="20">
</form>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function color(color)
{
document.forms[0].myInput.style.background=color
}
</script>
</head> <body>
<form>
Write a message:<br />
<input
type="text"
onkeydown="color('red')"
onkeyup="color('blue')"
name="myInput" size="20">
</form>
</body>
</html> |
| |
<html>
<body> <h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
cc=0
function changeimage()
{
if (cc==0)
{
cc=1
document.getElementById('myimage').src="bulbon.gif"
}
else
{
cc=0
document.getElementById('myimage').src="bulboff.gif"
}
}
</script>
</head> <body>
<img id="myimage" onclick="changeimage()"
border="0" src="bulboff.gif"
width="100" height="180" />
<p>Click to turn on/off the light</p>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function gettip(txt)
{
document.getElementById('tip').innerHTML='devinfowareis about WEB standards,
and scripting technologies for the World Wide Web'
}
</script>
</head> <body>
<p>Double click the "devinfoware.com"</p>
<table>
<tr>
<th ondblclick="gettip()" valign="top">devinfoware.com</th>
<th id="tip"> </th>
</tr>
</table>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function lighton()
{
document.getElementById('myimage').src="bulbon.gif"
}
function lightoff()
{
document.getElementById('myimage').src="bulboff.gif"
}
</script>
</head> <body>
<img id="myimage" onmousedown="lighton()"
onmouseup="lightoff()"
src="bulboff.gif" width="100"
height="180">
<p>Click to turn on the light</p>
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
var i=1
function moveright()
{
document.getElementById('header').style.position="relative"
document.getElementById('header').style.left=i
i++
}
</script>
</head>
<body onmousemove="moveright()">
<h1 id="header">
Move the mouse over this page
</h1>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function disable1()
{
if (event.button == 2)
{
alert("Sorry no rightclick on this page.\nNow you cannot view my
source\nand you cannot steal my images")
}
} </script>
</head>
<body onmousedown="disable1()">
<p>Right-click on this page to trigger the event.</p>
<p>Note that this is no guarantee that nobody can view the page
source, or steal the images.</p>
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
function moveleft()
{
document.getElementById('header').style.position="absolute"
document.getElementById('header').style.left="0"
}
function moveback()
{
document.getElementById('header').style.position="relative"
}
</script>
</head>
<body>
<h1 id="header"
onmouseover="moveleft()"
onmouseout="moveback()">
Mouse over this text</h1>
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
var i=1
function starttimer()
{
document.getElementById('h_one').style.position="relative"
document.getElementById('h_one').style.left=+i
document.getElementById('h_two').style.position="relative"
document.getElementById('h_two').style.top=+i
i++
timer=setTimeout("starttimer()",10)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="starttimer()" onunload="stoptimer()">
<h1 id="h_one">Header one</h1>
<h1 id="h_two">Header two</h1>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function gettip(txt)
{
document.getElementById('tip').innerHTML=txt
} function reset()
{
document.getElementById('tip').innerHTML=""
}
</script>
</head>
<body>
<p>Mouse over these drinks:</p>
<span onmouseover="gettip('Hot black drink')"
onmouseout="reset()">Coffee</span>
<br /><br />
<span onmouseover="gettip('Cold white drink')"
onmouseout="reset()">Milk</span>
<p id="tip"></p>
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
message="The best way to learn, is to study examples. -www.devinfoware.com"
pos=0
maxlength=message.length+1
function writemsg()
{
if (pos<maxlength)
{
txt=message.substring(pos,0)
document.forms[0].msgfield.value=txt
pos++
timer=setTimeout("writemsg()", 50)
}
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="writemsg()" onunload="stoptimer()">
<form>
<input id="msgfield" size="65">
</form>
</body>
</html> |
| |
<html>
<head> <script type="text/javascript">
txtsize=0
maxsize=100
function writemsg()
{
if (txtsize<maxsize)
{
document.getElementById('msg').style.fontSize=txtsize
txtsize++
timer=setTimeout("writemsg()",10)
}
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="writemsg()" onunload="stoptimer()">
<p id="msg">devinfoware!</p>
</body>
</html> |
| |
<html>
<head>
<style>
span
{
font:12px arial;
background:#CCCCCC;
position:absolute;
width:100;
height:500;
top:100;
clip:rect(0 100 100 0);
}
</style>
<script type="text/javascript">
var interval
startPosition=0
topPosition=100
endPosition=100
speed=50 function scrollit()
{
if (startPosition!=200)
{
startPosition=startPosition+1
topPosition=topPosition-1
document.getElementById('display').style.clip="rect(" + (startPosition
+ 1) + " 100 " + (startPosition + endPosition) + " 0)"
document.getElementById('display').style.top=topPosition
interval=setTimeout("scrollit()",speed)
}
else
{
startPosition=0
topPosition=100
endPosition=100
interval=setTimeout("scrollit()",speed)
}
}
function stopinterval()
{
clearTimeout(interval)
}
</script>
</head>
<body onload="scrollit()" onunload="stopinterval()">
<span id="display"><br /><br /><br /><br
/><br /><br /><br />
Hello Developers, this script makes a scrolling text. <br />Visit
devinfoware.com
</span>
</body>
</html>
|
| |
<html>
<head>
<script type="text/javascript">
function blinking_header()
{
if (!document.getElementById('blink').style.color)
{
document.getElementById('blink').style.color="red"
}
if (document.getElementById('blink').style.color=="red")
{
document.getElementById('blink').style.color="black"
}
else
{
document.getElementById('blink').style.color="red"
}
timer=setTimeout("blinking_header()",100)
} function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="blinking_header()" onunload="stoptimer()">
<h1 id="blink">Blinking header</h1>
</body>
</html>
|
| |
<html>
<head>
<style>
h1
{
width:400;
}
</style> <script type="text/javascript">
var i
function glow()
{
i=0
interval=setInterval("makeglow()",10)
}
function back()
{
clearInterval(interval)
document.getElementById('myHeader').style.filter=false
}
function makeglow()
{
i++
if (i<5)
{
document.getElementById('myHeader').style.filter="glow(strength="
+ i + ")"
}
else if (window.interval)
{
clearInterval(interval)
}
}
</script>
</head>
<body>
<h1 id="myHeader" onmouseover="glow()" onmouseout="back()">Mouse
over this header</h1>
</body>
</html>
|
| |
<html>
<head>
<style>
h1
{
color:black;
height:50;
font:bold;
}
</style>
<script type="text/javascript">
var i
function dropshadow()
{
i=0
interval=setInterval("makedropshadow()",10)
} function back()
{
clearInterval(interval)
document.getElementById('myHeader').style.filter=false
}
function makedropshadow()
{
i++
if (i<15)
{
document.getElementById('myHeader').style.filter="dropshadow(offx="
+ i + ")"
document.getElementById('myHeader').style.filter="dropshadow(offy="
+ i + ")"
}
else if (window.interval)
{
clearInterval(interval)
}
}
</script>
</head>
<body>
<h1 id="myHeader" onmouseover="dropshadow()"
onmouseout="back()">Mouse over this header thanks to
devinfoware</h1>
</body>
</html> |
| |
<html>
<head>
<style>
h1
{
color:black;
height:50;
font:bold;
}
</style>
<script type="text/javascript">
var i
function dropshadow()
{
i=0
interval=setInterval("makedropshadow()",10)
} function back()
{
clearInterval(interval)
document.getElementById('myHeader').style.filter=false
}
function makedropshadow()
{
i++
if (i<15)
{
document.getElementById('myHeader').style.filter="dropshadow(offx="
+ i + ")"
document.getElementById('myHeader').style.filter="dropshadow(offy="
+ i + ")"
}
else if (window.interval)
{
clearInterval(interval)
}
}
</script>
</head>
<body>
<h1 id="myHeader" onmouseover="dropshadow()"
onmouseout="back()">Mouse over this header</h1>
</body>
</html> |
| |
<html>
<head>
<script type="text/javascript">
function sameInfo()
{
for (i=0; i<document.myForm1.option.length; i++)
{
document.myForm2.option[i].value=document.myForm1.option[i].value
}
}
</script>
</head>
<body> <form name="myForm1">
First name: <input onkeyup="sameInfo()" type="text"
name="option"><br />
Last name: <input onkeyup="sameInfo()" type="text"
name="option"><br />
Address: <input onkeyup="sameInfo()" type="text"
name="option"><br />
E-mail: <input onkeyup="sameInfo()" type="text"
name="option"><br />
</form>
<form name="myForm2">
First name: <input type="text" name="option"><br
/>
Last name: <input type="text" name="option"><br
/>
Address: <input type="text" name="option"><br
/>
E-mail: <input type="text" name="option"><br
/>
</form>
</body>
</html> |
| |
<html>
<head> <style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html> |
| |
<html>
<head> <style type="text/css">
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html> |
| |
<html>
<head> <style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p>The "border-style" property is not recognized by
Netscape 4.</p>
<p>Netscape 6 supports all border styles.</p>
<p>Internet Explorer 5.5 supports all border styles. Internet
Explorer 4.0 - 5.0 do not support the "dotted" and "dashed"
values</p>
<p class="dotted">
A dotted border</p>
<p class="dashed">
A dashed border</p>
<p class="solid">
A solid border</p>
<p class="double">
A double border</p>
<p class="groove">
A groove border</p>
<p class="ridge">
A ridge border</p>
<p class="inset">
An inset border</p>
<p class="outset">
An outset border</p>
</body>
</html> |
| |
<html>
<head> <style type="text/css">
div {display: none}
p {display: inline}
</style>
</head>
<body>
<div>
The div section is invisible
</div>
<p>
With the value of "inline" there should be
</p>
<p>
no distance between the two paragraphs.
</p>
</body>
</html> |
| |
<html>
<head> <style type="text/css">
ol.decimal
{
list-style-type: decimal
}
ol.lroman
{
list-style-type: lower-roman
}
ol.uroman
{
list-style-type: upper-roman
}
ol.lalpha
{
list-style-type: lower-alpha
}
ol.ualpha
{
list-style-type: upper-alpha
}
</style>
</head>
<body>
<ol class="decimal">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="uroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lalpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="ualpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html> |
| |
<html>
<head> <style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>
<body>
<p><b>Note:</b> Netscape 4 does not support the "overflow"
property.</p>
<p>
The overflow property decides what to do if the content inside an element
exceeds the given width and height properties. If you set the overflow
property to scroll, scrollbars will be added to the element.
</p>
<div>
You can use the overflow property when you want to have better control
of the layout.<br><br>
Try to change the overflow property to: visible, hidden, auto, or inherit
and see what happens. The default value is visible.
</div>
</body>
</html> |
| |
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head> <body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
In the example above, we the devinfoware let the ul element and the a element float
to the left.
The li elements will be displayed as inline elements (no line break
before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has
a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>
</body>
</html> |
