Praktikum DHTML
-
Upload
slayn-grim-angel-zeonsilt -
Category
Documents
-
view
231 -
download
0
description
Transcript of Praktikum DHTML
![Page 1: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/1.jpg)
PraktikumDynamic 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>
![Page 2: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/2.jpg)
Position:relative
Position:absolute
<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><p>This is a paragraph.</p><h1>Heading C</h1><p>This is a paragraph.</p><h1>Heading D</h1><p>This is a paragraph.</p></body></html>
<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>
![Page 3: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/3.jpg)
Visibility
Z-index
<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>
<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>
![Page 4: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/4.jpg)
Z-index Vice Versa
Cursors
<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>
<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>
![Page 5: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/5.jpg)
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 /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p></body></html>
![Page 6: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/6.jpg)
Change background color
2) DHTML (Event) OnLoad
<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")}</script></head><body onload="mymessage()"></body></html>
![Page 7: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/7.jpg)
OnUnload
Onchange
<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.valuealert("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>
![Page 8: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/8.jpg)
Onsubmit
Onreset
<html><head><script type="text/javascript">function confirmInput(){fname=document.forms[0].fname.valuealert("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>
<html><head><script type="text/javascript">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>
![Page 9: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/9.jpg)
3) DHTML (Text) Element access
Attribute change
innerHTML access
<html><body><h1 id="header">My header</h1><script type="text/javascript">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>
<html><body><img id="image" src="smiley.gif" width="32" height="32"><script type="text/javascript">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>
<html><body><h1 id="header">Old header</h1><script type="text/javascript">document.getElementById('header').innerHTML="New header"</script><p>Note that the original text was "Old header"!</p></body></html>
![Page 10: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/10.jpg)
Change innerHTML
Change position
<html><head><script type="text/javascript">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>
<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>
![Page 11: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/11.jpg)
Onmousemove
4) DHTML (Input Forms) Identical forms
<html><head><script type="text/javascript">var i=1function moveright(){document.getElementById('header').style.position="relative"document.getElementById('header').style.left=ii++}</script></head><body onmousemove="moveright()"><h1 id="header">Move the mouse over this page</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 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 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>
![Page 12: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/12.jpg)
Identical forms 2
<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>
![Page 13: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/13.jpg)
Change background color of an input field
Change text color of an input field
<html><head><script type="text/javascript">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>
<html><head><script type="text/javascript">function changeColor(color){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><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>
![Page 14: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/14.jpg)
Insert background image to an input field
<html><head><script type="text/javascript">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>
![Page 15: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/15.jpg)
Change background color of a radio button
<html><head><script type="text/javascript">function changeColor(color){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><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>Mouse over the colors<input id="x" checked type="radio"></form></body></html>
![Page 16: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/16.jpg)
5) DHTML (Window) Shake the window
6) DHTML (Links) Text transform
<html><head><script>function startEQ(){richter=5parent.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>
<html><head><style>a:hover{text-transform:uppercase;}</style></head><body><a href="default.asp">Mouse over this link</a> </body></html>
![Page 17: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/17.jpg)
Letter spacing
Blinking link
<html><head><style>a:hover{letter-spacing: 2;}</style></head><body><a href="default.asp">Mouse over this link</a> </body></html>
<html><head><script type="text/javascript">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>
![Page 18: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/18.jpg)
Shaking link
Random Banner
<html><head><script type="text/javascript">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>
<html><body><script type="text/javascript">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=3now=new Date()now=now.getSeconds()rnd=now%lenimage=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>
![Page 19: Praktikum DHTML](https://reader036.fdocuments.net/reader036/viewer/2022082713/55cf8faf550346703b9ec1db/html5/thumbnails/19.jpg)
TUGAS PRAKTIKUM.
1. Buat Tampilan sebagai berikut dengan menggunakan DHTML
BELAJAR DHTML BY nama andaTulisan
Bergerak Dari kanan ke kiri,
bila tulisan sudah berada dipaling kiri, maka tulisan
muncul kembali dari
sebelah kanan
MENU
LAUK-PAUK AYAM GORENG
UDANG REBUS
CUMI BAKAR
MINUMAN ES DEGAN
ES CAMPUR
ES TELER
BURUAN, MENU TERBATAS
Tulisan Berkedip-kedip