Praktikum Dynamic HTML (DHTML)

Praktikum
Dynamic HTML (DHTML)

1) DHTML CSS
Position:relative
<html>
<head>
<style>
h1.ex1
{
position:relative;
left:20px;
}
h1.ex2
{
position:relative;
left:-20px;
}
</style>
</head>
<body>
<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>
Position:relative
<html>
<head>
<style>
h1
{
position:relative;
left:40px;
}
</style>
</head>
<body>
<h1>Heading A</h1>
<p>This is a paragraph.</p>
<h1>Heading B</h1>
<h1>Heading C</h1>
<h1>Heading D</h1>
</body>
</html>
Position:absolute
<html>
<head>
<style>
h1.x
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h1 class="x">This is a heading</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>
Visibility
<html>
<head>
<style>
h1.one
{
visibility:visible;
}
h1.two
{
visibility:hidden;
}
</style>
</head>
<body>
<h1 class="one">Heading one</h1>
<h1 class="two">Heading two</h1>
<p>Where is heading two?</p>
</body>
</html>
Z-index
<html>
<head>
<style>
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a Heading</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>
Z-index Vice Versa

<html>
<head>
<style>
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body>
</html>
Cursors
<html>
<body>
<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>
Watermark
<html>
<head>
<style>
body
{
background-attachment: fixed;
background-image: url("bulboff.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>Scroll the page and see what happens</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Change background color

<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')"
bgcolor="blue">
</td>
<td onmouseover="bgChange('green')"
bgcolor="green">
</td>
</tr>
</table>
</body>
</html>
2) DHTML (Event)
OnLoad
<html>
<head>
function mymessage()
{
alert("This message was triggered from the onload event")
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
OnUnload
<html>
<head>
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>
Onchange
<html>
<head>
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>
Onsubmit
<html>
<head>
function confirmInput()
{
fname=document.forms[0].fname.value
alert("Hello " + fname + "! You will now be redirected to
www.w3Schools.com")
}
</script>
</head>
<body>
<form onsubmit="confirmInput()"
action="http://www.w3schools.com/">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
Onreset
<html>
<head>
function message()
{
alert("This alert box was triggered by the onreset event
handler")
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</select>
</form>
</body>
</html>
3) DHTML (Text)
Element access
<html>
<body>
<h1 id="header">My header</h1>
document.getElementById('header').style.color="red"
</script>
<p><b>Note:</b> It is the script that changes the style of
the element!</p>
</body>
</html>
Attribute change
<html>
<body>
<img id="image" src="smiley.gif" width="32" height="32">
document.getElementById('image').src="landscape.jpg"
</script>
<p><b>Note:</b> The original image was a smiley, but the
script changes the source to a landscape image!</p>
</body>
</html>
innerHTML access
<html>
<body>
<h1 id="header">Old header</h1>
document.getElementById('header').innerHTML="New header"
</script>
<p>Note that the original text was "Old header"!</p>
</body>
</html>
Change innerHTML
<html>
<head>
function nameon()
{
document.getElementById('h2text').innerHTML="WELCOME!"
}
function nameout()
{
document.getElementById('h2text').innerHTML="How are you
today?"
}
</script>
</head>
<body>
<h2 id="h2text" onmouseout="nameout()"
onmouseover="nameon()">
Mouse over this text!</h2>
</body>
</html>
Change position
<html>
<head>
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>
Onmousemove
<html>
<head>
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>
4) DHTML (Input Forms)

Identical forms
<html>
<head>
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 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 />
<br />
<input type="button" onclick="sameInfo()" value="Same
information below"><br />
</form>
</form>
</body>
</html>
Identical forms 2
<html>
<head>
function sameInfo()
{
for (i=0; i<document.myForm1.option.length; i++)
{
document.myForm2.option[i].value=document.myForm1.option[i].
value
}
}
</script>
</head>
<body>
First name: <input onkeyup="sameInfo()" type="text"
name="option"><br />
Last name: <input onkeyup="sameInfo()" type="text"
Address: <input onkeyup="sameInfo()" type="text"
E-mail: <input onkeyup="sameInfo()" type="text"
</form>
</form>
</body>
Change background color of an input field

<html>
<head>
function changeColor(color)
{
document.getElementById('x').style.background=color
}
</script>
</head>
<body>
<p>This example demonstrates how to change the background
color of an input field.</p>
<p>Mouse over the three colored table cells, and the input
field will change background-color:</p>
<table width="100%"><tr>
<td bgcolor="red" onmouseover="changeColor('red')"> </td>
<td bgcolor="blue" onmouseover="changeColor('blue')"> </td>
<td bgcolor="green"
onmouseover="changeColor('green')"> </td>
</tr></table>
<form>
<input id="x" type="text" value="Mouse over the colors"
size="20">
</form>
</body>
</html>
Change text color of an input field

<html>
<head>
{
document.getElementById('x').style.color=color
}
</script>
</head>
<body>
<p>This example demonstrates how to change the text color of
an input field.</p>
<p>Mouse over the three colored table cells, and the text
will change color:</p>
<td bgcolor="green"
</tr></table>
<form>
<input id="x" type="text" value="Mouse over the colors"
size="20">
</form>
</body>
</html>
Insert background image to an input field

<html>
<head>
function bgChange(bg)
{
document.getElementById('x').style.background="url(" + bg +
")"
}
</script>
</head>
<body>
<p>This example demonstrates how to insert a background
image to an input field</p>
<p>Mouse over these images and the input field will get a
background image.</p>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('paper.jpg')"
background="paper.jpg">
</td>
<td onmouseover="bgChange('bgdesert.jpg')"
background="bgdesert.jpg">
</td>
</tr>
</table>
<form>
<input id="x" type="text" value="Mouse over the images"
size="20">
</form>
</body>
</html>
Change background color of a radio button

<html>
<head>
{
document.getElementById('x').style.background=color
}
</script>
</head>
<body>
<p>This example demonstrates how to change the background
color of a radio button.</p>
<p>Mouse over the three colored table cells, and the
background color will change:</p>
<td bgcolor="green"
</tr>
</table>
<form>
Mouse over the colors
<input id="x" checked type="radio">
</form>
</body>
</html>
5) DHTML (Window)
Shake the window
<html>
<head>
<script>
function startEQ()
{
richter=5
parent.moveBy(0,richter)
parent.moveBy(0,-richter)
parent.moveBy(richter,0)
parent.moveBy(-richter,0)
timer=setTimeout("startEQ()",10)
}
function stopEQ()
{
clearTimeout(timer)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="startEQ()" value="Start an
earthquake">
<br />
<br />
<input type="button" onclick="stopEQ()" value="Stop the
earthquake">
</form>
</body>
</html>
6) DHTML (Links)
Text transform
<html>
<head>
<style>
a:hover
{
text-transform:uppercase;
}
</style>
</head>
<body>
<a href="default.asp">Mouse over this link</a>
</body>
</html>
Letter spacing
<html>
<head>
<style>
a:hover
{
letter-spacing: 2;
}
</style>
</head>
<body>
<a href="default.asp">Mouse over this link</a>
</body>
</html>
Blinking link
<html>
<head>
function blinklink()
{
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("blinklink()",100)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="blinklink()" onunload="stoptimer()">
<a id="blink" href="default.asp">Blinking link</a>
</body>
</html>
Shaking link
<html>
<head>
function shakeleft()
{
document.getElementById('myLink').style.position="relative"
document.getElementById('myLink').style.left="3"
timer=setTimeout("shakeright()",10)
}
function shakeright()
{
document.getElementById('myLink').style.left="0"
timer=setTimeout("shakeleft()",10)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body>
<a id="myLink" href="http://www.w3schools.com/"
onmouseover="shakeleft()" onmouseout="stoptimer()">Mouse
over this link</a>
</body>
</html>
Random Banner
<html>
<body>
image0="/banners/w3schools.gif"
href0="/default.asp"
alt0="W3Schools.com"
image1="/banners/rd_htmlref.jpg"
href1="http://www.w3schools.com/html/html_reference.asp"
alt1="HTML Reference"
image2="/banners/rd_xhtml.jpg"
href2="http://www.w3schools.com/xhtml/default.asp"
alt2="ASP Free"
len=3
now=new Date()
now=now.getSeconds()
rnd=now%len
image=eval("image"+rnd)
href=eval("href"+rnd)
alt=eval("alt"+rnd)
document.write("<a href='" + href + "'>")
document.write("<img src='" + image + "' alt='" + alt +
"'></a>")
</script>
<h3>Refresh this page to see the banner change</h3>
</body>
</html>
TUGAS PRAKTIKUM.
1.
Buat Tampilan sebagai berikut dengan menggunakan DHTML

BELAJAR DHTML BY nama anda
MENU
LAUK-PAUK
AYAM GORENG
UDANG REBUS
CUMI BAKAR
Tulisan
Bergerak Dari
kanan ke kiri,
bila tulisan
sudah berada
dipaling kiri,
maka tulisan
muncul
kembali dari
sebelah kanan
BURUAN, MENU TERBATAS

MINUMAN
ES DEGAN
ES CAMPUR
ES TELER
Tulisan
Berkedip-kedip

Praktikum Dynamic HTML (DHTML)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Praktikum Dynamic HTML (DHTML)

Uploaded by

Copyright:

Available Formats

Praktikum

Dynamic HTML (DHTML)

Z-index Vice Versa

Change background color

4) DHTML (Input Forms)

Change background color of an input field

Change text color of an input field

Insert background image to an input field

Change background color of a radio button

Buat Tampilan sebagai berikut dengan menggunakan DHTML

BURUAN, MENU TERBATAS

You might also like