Statis Lanjut
Diunggah oleh
Zulfa0 penilaian0% menganggap dokumen ini bermanfaat (0 suara)
37 tayangan12 halamanPemograman, Statis Lanjut, Informatika
Hak Cipta
© © All Rights Reserved
Format Tersedia
PDF, TXT atau baca online dari Scribd
Bagikan dokumen Ini
Apakah menurut Anda dokumen ini bermanfaat?
Apakah konten ini tidak pantas?
Laporkan Dokumen IniPemograman, Statis Lanjut, Informatika
Hak Cipta:
© All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online dari Scribd
0 penilaian0% menganggap dokumen ini bermanfaat (0 suara)
37 tayangan12 halamanStatis Lanjut
Diunggah oleh
ZulfaPemograman, Statis Lanjut, Informatika
Hak Cipta:
© All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online dari Scribd
Anda di halaman 1dari 12
Kreatif Dengan Tabel
<html><head><meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><title>Efek Tabel</title> <style type="text/css">
td {font-family:Verdana;font-size:24px;
color:#000000;}</style></head> <body> <TABLE
STYLE="filter:shadow(color=red)" align=center><TR><TD>Efek Shadow
pada Tabel dengan CSS</TD></TR></TABLE> </body> </html>
Efek Tabel untuk Gambar
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"><title>Efek Opaque pada tabel</title></head>
<body><table width="400"> <tr><td style="FILTER:
Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40,
FinishX=0, FinishY=0)"><img src="fhoto_panorama.jpg" width="400"
height="240"></td> </tr></table> </body></html>
Efek Filter lainnya adalah : FILTER: Blur(Add = 0, Direction = 225,
Strength = 10)
Pengaturan Form
<html><head><meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><title>mengatur-text-field</title> <style
type="text/css"> input{ color:#006600; background-color:#99CC99;
font-family:Verdana; font-size:16px; font-weight:bold; border:2px solid
green;}</style> </head> <body><center> <form><table
width="285"> <tr> <td width="69">Nama</td> <td
width="261"><input type="text" name="textfield"></td></tr> <tr>
<td>noID</td> <td><input type="text" name="textfield"></td></tr>
<tr><td>password</td> <td><input type="password"
name="textfield"></td></tr></table> </form></center> </body>
</html>
Mengatur Button
<html><head><meta http-equiv = "Content-Type" content="text/html;
charset=iso-8859-1"> <title>mengatur-text-field</title> <style
type="text/css"> input { color:#006600; background-color : #99CC99;
font-family: Verdana; font-sie:16px;font-weight : bold; border:2px solid
green;} input.button { color:#FFFFFF; background-color : #006666; font-
family:Verdana; font-size:12px; font-weight:bold; border:2px dotted
green;}</style> </head> <body><form><table width="285"> <tr> <td
width="69">Nama</td> <td width="261"><input type="text"
name="textfield"></td></tr> <tr> <td>noID</td> <td><input
type="text" name="textfield"></td> </tr> <tr> <td>password</td>
<td><input type="password" name="textfield"></td></tr> <tr>
<td> </td> <td><input type="submit" name="Submit"
value="Submit" class="button"> <input type="reset" name="Reset"
value="Reset" class="button"></td> </tr></table></form> </body>
</html>
Mengatur Radio Button
<html><head><meta http-equiv = "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Mengatur Radio Button</title> <style
type="text/css"> .radio1{ background-color:#FF0000; border:2px solid
black;} .radio2{ background-color:#0033CC; border:2px solid yellow;}
.radio3{ background-color:#009900; border:2px solid blue;} .bantu{
background-color:#FFE6CC; border:1px solid green;}</style> </head>
<body> <form name="form1" method="post" action=""><table
width="240"><tr> <td width="86">Tahun Lahir </td> <td width="142"
class="bantu"><input name="radiobutton" type="radio"
value="radiobutton" class="radio1"> 1999</td></tr>
<tr><td> </td> <td class="bantu"><input name="radiobutton"
type="radio" value="radiobutton" class="radio2"> 2000</td></tr>
<tr><td> </td> <td class="bantu"><input name="radiobutton"
type="radio" value="radiobutton" class="radio3">
2001</td></tr></table></form> </body> </html>
Mengatur Komponen Lainnya
<html><head><meta http-equiv="Content-Type" content = "text/html;
charset=iso-8859-1"> <title>Mengatur Komponen Form Lainnya</title>
<style type="text/css"> body { font-family:Verdana;font-size : 12px;}
.checkbox1{ background-color : #FF9900;border:2px solid red;}
.checkbox2 {background-color : #33CC00;border: 2px dotted green;}
.browse { background-color:#C1E0FF; color:#0033CC;font-size:12px;
border:2px solid blue;} .select { background-color:#FFCCCC;
color:#990000; font-size:10;}</style> </head> <body> <form
action="" method="post" enctype="multipart/form-data" name="form1">
<table width="297"> <tr><td width="105">Hobbi </td><td
width="180"><input type="checkbox" name="checkbox"
value="checkbox" class="checkbox1">Membaca</td> </tr>
<tr><td> </td><td><input type="checkbox" name="checkbox"
value="checkbox" class="checkbox2"> Shooping</td></tr>
<tr><td>Fhoto</td><td><input name="file" type="file" size="15"
class="browse"></td></tr> <tr><td>Umur</td><td><select
name="select" class="select"> <option>12 - 18 tahun</option>
<option>19 - 24 tahun</option> <option>25 - 32 tahun</option>
<option>33 - 40 tahun</option>
</select></td></tr></table></form></body> </html>
Efek Kertas Formulir
<html><head><meta http-equiv = "Content-Type" content="text/html;
charset=iso-8859-1"><title>Formulir Kertas</title><style
type="text/css"> body {font-family:Verdana; font-size:12px;}
input.textbox { border-left-style:none; border-right-style:none;bordertop-style : none; border-bottom-style:dotted; border-bottom-width:2px;
border-bottom-color:#006600;}</style> </head> <body> <form
name="form1" method="post" action=""> <table width="463"
align="center" cellspacing="0"> <tr> <td colspan="3" style="paddingtop : 5px; padding-bottom:5px; color:#003399; text-decoration :
underline;"><strong>Masukkan Data Pribadi Anda</strong></td></tr>
<tr><td width="113">Nama Lengkap </td><td width="13">:</td> <td
width="329"><input name="textfield" type="text" size="30"
class="textbox"></td></tr> <tr><td>Tempat Lahir</td> <td> :
</td><td><input name="textfield" type="text" size="25"
class="textbox"> </td></tr> <tr><td>Tanggal Lahir</td>
<td>:</td><td><input type="text" name="textfield" class = "textbox">
</td></tr> <tr><td>Kelamin</td><td>:</td> <td><label><input
type="radio" name="RadioGroup1" value="radio"> LakiLaki</label><label><input type = "radio" name="RadioGroup1" value =
"radio">Perempuan</label></td> </tr> <tr><td
valign="top">Alamat</td> <td valign="top">:</td> <td><textarea
name="textarea" cols = "20"></textarea></td></tr> <tr><td
valign="top">Telepon</td> <td valign="top">:</td><td><input
name="textfield" type="text" size="15" class="textbox"></td></tr>
<tr><td valign="top">Email</td> <td valign="top">:</td><td><input
name="textfield" type="text" size="25" class="textbox"></td></tr>
<tr><td valign="top">Hobi</td> <td valign="top">:</td><td><input
type="checkbox" name="checkbox" value="checkbox">Membaca <input
type="checkbox" name="checkbox" value="checkbox"> Shooping <input
type="checkbox" name="checkbox" value="checkbox">
Surfing</td></tr> <tr><td valign="top"> </td> <td
valign="top"> </td> <td><input type="submit" name="Submit"
value="Kirim"> <input type="submit" name="Submit"
value="Batal"></td></tr></table> </form></body></html>
Efek Form Penuh Warna
<html><head><meta http-equiv = "Content-Type" content="text/html;
charset=iso-8859-1"><title>Formulir penuh warna</title> <style
type="text/css"> body {background-color:#FF9900; font-family:Verdana;
font-size:12px;} table { border-color:#FF6600; border-style:solid;borderwidth:2px; background-color:#FFE6CC;} td {padding-left:5px; paddingtop:5px; padding-bottom:5px;} input.textbox{background-color :
#FFEFDF;border-color:#FF9900; order-style:solid;border-width:1px;}
input.textbox2 {background-color : #FFEFDF; border-color:#FF9900;
order-style:solid;border-width:1px; font-weight:bold;}
input.radiobutton{background-color : #FFEFDF; border-color:#FFCC66;
border-style:solid; border-width:1px; font-size:12px;}
input.button{background-color : #CC6600; color:#FFFFFF; fontweight:bold;border-color:#5B2E00; border-style:solid;borderwidth:2px;} input.buttonbatal { background-color:#FF0000; color :
#FFFFFF; font-weight:bold;border-color : #5B2E00;border-style:solid;
border-width:2px;}</style></head> <body> <form name="form1"
method="post" action=""><table width="345" align="center"
cellspacing="0"> <tr><td width="111">Nama Lengkap</td><td
width="8">:</td> <td width="218"><input type="text" name="textfield
"class="textbox2"> </td></tr> <tr><td>Tempat Lahir </td>
<td>:</td><td><input type="text" name="textfield" class= "textbox">
</td></tr> <tr><td>Tanggal Lahir </td> <td>:</td><td><input
type="text" name="textfield" class= "textbox"> </td></tr>
<tr><td>Kelamin</td><td>:</td> <td><p><label><input
type="radio" name="RadioGroup1" value="radio" class="radiobutton">
Laki-Laki</label> <label><input type="radio" name="RadioGroup1"
value="radio" class="radiobutton">Perempuan
</label><br></p></td></tr> <tr><td valign="top">Alamat</td> <td
valign="top">:</td><td><input type="text" name="textfield" class =
"textbox"></td></tr> <tr><td>Telepon</td><td>:</td> <td><input
type="text" name= "textfield" class="textbox"></td> </tr>
<tr><td>Email</td><td>:</td><td><input type="text"
name="textfield" class="textbox"></td></tr>
<tr><td> </td><td> </td><td><input type="submit"
name="Submit" value="kirim" class= "button"><input type="submit"
name="Submit" value="batal" class= "buttonbatal"></td></tr></table>
</form></body></html>
Link Tanpa Garis
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Menghilangkan garis link</title> <style
type="text/css"> a:link.tanpagaris {text-decoration : none}
a:visited.tanpagaris {text-decoration : none} a:active.tanpagaris {textdecoration : none} a:hover.tanpagaris {text-decoration:
none}</style></head> <body> <p><a href="#">LINK STANDAR</a>
</p> <p><a class="tanpagaris" href="#" >LINK TANPA GARIS BAWAH
</a></p></body></html>
Warna dan Latar Link
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Warna dan Latar Link</title> <style
type="text/css"> body {font-family:Verdana; font-size: 16px;textalign:center; font-weight: bold;} a:link { color:#000000;} a:visited {
color:#000000;} a:active { color:#000000;} a:hover
{color:#FF0000;background-color: #000000;}</style></head> <body>
<p><a href="home.html"> HOME </a></p> <p><a
href="product.html"> PRODUCT </a></p> <p><a
href="about.html">ABOUT </a></p></body></html>
Link Seperti Tombol
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Link berbentuk tombol</title> <style
type="text/css"> body {margin-left:20%;font-family: Verdana; fontsize:12px;font-weight: bold;} a:link{ text-decoration:none; backgroundcolor:#0066CC; color:#FFFFFF; border-color:#003399; borderstyle:outset;border-width:6px; padding:4px 4px 4px 4px;} a:visited {
text-decoration:none; background-color:#0066CC; color:#FFFFFF;
border-color:#003399; border-style:outset; border-width:6px;
padding:4px 4px 4px 4px;} a:active{ text-decoration:none; backgroundcolor:#0066CC; color:#FFFFFF; border-color:#003399; borderstyle:outset; border-width:6px; padding:4px 4px 4px 4px;} a:hover{
text-decoration:none; background-color:#0099FF; color:#FFFFFF;
border-color:#003399; border-style:outset; border-width:6px;
padding:4px 4px 4px 4px;} td {padding: 12px 12px 12px 12px;}
</style></head> <body> <table width="100"><tr> <td><p><a
href="komedi.html">KOMEDI</a></p></td></tr> <tr> <td><p><a
href="horor.html">HOROR</a></p></td></tr> <tr><td><p><a href=
"drama.html"> DRAMA</a></p></td></tr> <tr><td><p><a
href="action.html">
ACTION</a></p></td></tr></table><p> </p><p> </p>
</body></html>
Link dengan Gambar
Pengaturan link yang berbentuk gambar dapat juga dilakukan dalam
dokumen CSS. Cobalah untuk membuat gambar tombol apa saja. Misalkan
seperti gambar dibawah.
Tombol 1 dan Tombol 2 : Gambar tombol yang akan digunakan untuk efek
Link.
Sekarang buatlah script seperti dibawah ini.
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Link dengan gambar</title> <style
type="text/css"> <!-- .style1 {color: #000066;font-weight: bold;} body
{font-family:verdana; font-size: 12px;} td {padding:15px 20px 15px
20px;} a:link {background-image: url(tombol1.jpg); padding:20px 50px
20px 50px;background-repeat: no-repeat; background-position:center;
color:#FFFFFF; font-weight:bold; text-decoration:none;} a:visited
{background-image: url(tombol1.jpg); padding:20px 50px 20px 50px;
background-repeat: no-repeat; background-position:center;
color:#FFFFFF; font-weight:bold; text-decoration:none;}
a:active{background-image: url(tombol1.jpg); padding:20px 50px 20px
50px;background-repeat: no-repeat; background-position:center;
color:#FFFFFF; font-weight:bold; text-decoration:none;}
a:hover{background-image: url(tombol2.jpg); padding:20px 50px 20px
50px; background-repeat: no-repeat; background-position:center;
color:#FFFFFF; font-weight:bold; text-decoration:none;} -></style></head> <body> <table align="center"> <tr><td
width="207"><div align="center"><span class="style1">CONTOH LINK
GAMBAR </span></div></td></tr> <tr> <td><div align="center"><a
href= "submenu1.htm">SUBMENU 1 </a> </div></td></tr>
<tr><td><div align="center"> <a href="submenu2.htm">SUBMENU 2
</a> </div></td></tr></table></body> </html>
Link dengan List
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Link dalam List</title> <style
type="text/css"> body {font-family:Verdana; font-size: 12px; fontweight:bold;} .navigasi{ list-style:none; margin: 0px; padding: 1px 1px
1px 1px; width:230px} li.model{ border:1px solid orange; backgroundcolor:#FFFFCC;padding: 1px 1px 1px 1px; margin:0px;} a:link{textdecoration:none; color:#000000;} a:visited{text-decoration:none;
color:#000000;} a:active{text-decoration:none; color:#000000;}
a:hover{text-decoration:none; color:#000000; background-color:
#FFCC00;display:block;}</style> </head> <body><p>DAFTAR ISI (link
dengan list) </p> <ul class="navigasi"> <li class="model"><a href=
"bab1.htm">BAB I Pendahuluan </a></li> <li class="model"><a href=
"bab2.htm">BAB II Landasan Teori </a></li> <li class="model"><a
href= "bab3.htm">BAB III Desain Sistem </a></li> <li
class="model"><a href= "bab4.htm">BAB IV Implementasi </a></li> <li
class="model"><a href= "bab5.htm">BAB V Hasil dan
Kesimpulan</a></li></ul></body> </html>
Daftar Link yang Berbeda
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"><title>Link berbeda satu halaman</title> <style
type="text/css"> body {font-family:Verdana; font-size:16px;fontweight:bold;} td {text-align:center; width:150px; padding: 10px 0px 10px
0px;} a:link.master { text-decoration:none; background-color:#990000;
color:#FFFFFF; padding:5px 5px 5px 5px; border:2px solid black;}
a:visited.master { text-decoration:none;background-color:#990000;
color:#FFFFFF; padding:5px 5px 5px 5px; border:2px solid black;}
a:active.master { text-decoration:none;background-color:#990000;
color:#FFFFFF; padding:5px 5px 5px 5px; border:2px solid black;}
a:hover.master { text-decoration:none;background-color:#FF0000;
color:#FFFFFF; padding:5px 5px 5px 5px; border:2px solid black;}
a:link.pro { text-decoration:none; padding:5px 5px 5px 5px;
color:#9900CC; border:2px dotted violet;} a:visited.pro { textdecoration:none;padding:5px 5px 5px 5px; color:#9900CC; border:2px
dotted violet;} a:active.pro { text-decoration:none;padding:5px 5px 5px
5px;color:#9900CC; border:2px dotted violet;} a:hover.pro { textdecoration:none;padding:5px 5px 5px 5px; color:#9900CC; border:2px
solid violet;} a:link.pemula { text-decoration:none; padding:5px 5px 5px
5px; border-bottom:2px solid blue; border-left:2px solid red;}
a:visited.pemula { text-decoration:none;padding:5px 5px 5px 5px;
border-bottom:2px solid blue; border-left:2px solid red;} a:active.pemula
{ text-decoration:none;padding:5px 5px 5px 5px; border-bottom:2px
solid blue; border-left:2px solid red;} a:hover.pemula { textdecoration:none;padding:5px 5px 5px 5px; border-bottom:2px solid blue;
border-left:2px solid red;border-top:1px solid blue; border-right:1px solid
red; background-color:#C1E0FF;} </style></head> <body> <table
align="center"><tr><td><a class="master" href= "master.htm">
MASTER</a></td></tr> <tr><td><a class="pro" href=
"profesional.htm">PROFESIONAL</a> </td></tr> <tr><td><a
class="pemula" href= "pemula.htm">PEMULA</a></td> </tr></table>
</body> </html>
Efek Zoom
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"><title>Efek Zoom</title><style type="text/css">
a:link{ color:#000000; text-decoration: none; font-family:Verdana; fontsize: 18px;} a:visited{color:#000000; text-decoration : none; fontfamily:Verdana; font-size:18px;} a:active{ color:#000000; textdecoration:none; font-family: Verdana; font-size:18px;} a:hover{
color:#000000; text-decoration:none;font-family: Verdana; fontsize:36px;}</style> </head> <body><p><center> <a
href="efekzoom.html">EFEK ZOOM</a></center></p></body> </html>
Web Berita tanpa Tabel
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"><title>Electronic Newspaper</title> <style
type="text/css"> body {margin:1px 1px 1px 1px; backgroundcolor:#ECF5FF;} .banner { border-color:#006699;border-style:
outset;border-width:5px;width:600px; padding-left:5px;padding-top:5px;
padding-bottom:5px;background-color: #C1E0FF;} .logo {color:#FFFFFF;
font-family:Verdana; background-color:#006699; padding:3px 3px 3px
3px; width:70px; font-weight:bold;} .logo2 {color:#000000;fontfamily:Verdana; font-size:10px;font-weight:800; position: absolute;
top:55px;left: 12px; } .logo3 {color:#FFFF00;font-family:Georgia; fontsize:30px; font-weight:800; position: absolute; top:23px; left: 169px;
width:400px;} .logo31 { color:#000000;font-family: Georgia; fontsize:30px;font-weight: 800;position: absolute;top:20px;left: 173px;
width:400px;} .posisimenu {position: absolute;top:84px;left: 1px;width:
110px;} .menu{ list-style:none; margin: 0px; padding: 1px 1px 1px 1px;
width: 100px} li.model {border-color:#006699;border-style: solid;borderwidth:1px; background-color:#C1E0FF;padding: 1px 1px 1px 1px;
margin:0px;} a:link{ text-decoration:none; color:#000000;fontfamily:Verdana; font-size:11px;font-weight:700;} a:visited{ textdecoration:none; color:#000000; font-family:Verdana; fontsize:11px;font-weight:700;} a:active{ text-decoration:none;
color:#000000; font-family:Verdana; font-size:11px;font-weight:700;}
a:hover{text-decoration:none; color: #000000; background-color:
#FFFFFF; display:block;} #tengah {background-color:#FFFFFF; borderstyle:solid; border-width:1px; border-color:#0099CC; padding:5px 5px
5px 5px; position:absolute;right:10px;top: 86px; width:221px;left:
120px;height: 300px; font-family:Verdana;text-align:justify; fontsize:10px;} #kanan {background-color:#FFFFFF; border-style:solid;
border-width:1px; border-color:#0099CC; padding: 5px 5px 5px 5px;
position:absolute;right:10px;top: 86px; width:221px;left: 366px;height:
300px; font-family:Verdana;text-align:justify; font-size:10px;} .dropcap {
width: 1em;height: 1em; float: left; text-align: center; font-size: 16pt;
color:red; font-style:italic; } </style></head> <body><div
class="banner"><p class="logo">Electronic Newpaper</p> <p
class="logo2">On-line System</a> </p><p class="logo3">Get Your
News To Day...!</a></p><p class= "logo31">Get Your News To Day...!
</a></p></div> <div class="posisimenu"> <ul class="menu"> <li
class="model"><a href= "utama.html">Utama</a></li> <li
class="model"><a href= "politik.html">Politik</a></li> <li
class="model"><a href= "ekonomi.html">Ekonomi</a></li> <li
class="model"><a href= "bisnis.html">Bisnis</a></li> <li
class="model"><a href= "hiburan.html">Hiburan</a></li> <li
class="model"><a href= "opini.html">Opini</a></li> <li
class="model"><a href= "ragam.html">Ragam</a></li></ul> </div>
<p id="tengah"><span class="dropcap">D</span>engan menggunakan
komponen HTML dan pengaturan pada style tiap komponen lewat CSS,
maka dapat diciptakan berbagai model gaya baik text, warna, latar dan
lainnya. Dengan CSS, sebuah website dapat dibuat lebih cantik dan
menarik, tanpa harus menggunakan gambar yang banyak atau animasi
yang besar karena akan memperlambat proses loading suatu web. Sebagai
contoh web berita yang kita buat, tanpa menggunakan tabel dan hanya
mengandalkan pengaturan lewat CSS pada tag-tag HTML yang tersedia.
Logo Banner hanya menggunakan teks biasa yang diatur latar dan posisi di
halaman, kemudian menu berupa link dalam list dan diatur stylenya
berupa kotak dengan warna latar tertentu ketika didekati mouse
(<em>mouse over</em>). Menarik dan mudah. Keuntungan lain dari
penggunaan CSS dalam desain web adalah : kecepatan akses, tampilan
tampak lebih halus,jarak dan</p> <p id="kanan">letak posisi elemen
dapat ditentukan, lebih interaktif dan sudah tentu menarik. Anda bisa saja
menggunakan tabel dalam membuat kolom koran seperti ini. Tetapi
seberapa banyak tabel yang harus anda buat. Semakin banyak tabel yang
anda buat, maka semakin lambat dalam proses loading website tersebut.
Tenang saja, tanpa tabelpun anda dapat membuat kolom koran seperti ini.
Cukup bermodalkan notepad atau pengolah teks lainnya anda akan
mampu menciptakan website yang tidak kalah bagusnya dengan desain desain lainnya. Namun itu semua tergantung pada daya kreatif dan
imajinatif anda. Semakin kreatif hasilnya juga akan semakin bagus. Web
ini hanyalah contoh belaka. Cobalah anda ubah sendiri properti-properti
yang ada. Akhir kata selamat mencoba, semoga selalu rajin dan tidak
pernah bosan.</p> </body></html>
CSS dan JavaScript
Ternyata CSS dapat dikombinasikan dengan JavaScript. Didalam
JavaScript juga terdapat bentuk properties dari CSS. Contoh perubahan
propertis dari CSS ke JavaScript adalah seperti berikut:
CSS dan JavaScript : adanya perubahan dari CSS ke JavaScript yaitu
tidak adanya tanda strips (- ) dalam penulisan pada JavaScript.
Sekarang kita akan memanfaatkan salah satu event pada JavaScript
yaitu OnMouseOver dan onMouseOut pada contoh berikut ini.
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>OnMouseOver via JavaScript
</title></head> <body> <p onMouseOver=
"this.style.backgroundColor='#FFCC00'" onMouseOut=
"this.style.backgroundColor='#FFFFFF'" style="font-size:24px;">
<strong> Dekatkan Mouse Anda ke area Ini </strong></p> </body>
</html>
Scrollbar Berwarna
<html><head> <title>ScrollBar berwarna</title><link rel="stylesheet"
type="text/css" href="scroll.css"> <style type="text/css"> <!-- BODY {
SCROLLBAR-FACE-COLOR: #c51603 !important; SCROLLBAR-HIGHLIGHTCOLOR: #ffbf5e !important; SCROLLBAR-SHADOW-COLOR: #c51603
!important; SCROLLBAR-3DLIGHT-COLOR: #c51603 !important;
SCROLLBAR-ARROW-COLOR: #ffffff !important; SCROLLBAR-TRACKCOLOR: #ffbf5e !important; SCROLLBAR-DARKSHADOW-COLOR:
#c51603 !important;} .style1 {font-size: 28px}--> </style> </head>
<body> <p class="style1">HALAMAN INI MENGGUNAKAN EFEK
SCROLLBAR BERWARNA DAN DIBUAT DENGAN MENGGUNAKAN CSS.</p>
</body> </html>
Efek Round Corner
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Efek Round Corner</title> <style
type="text/css"> body{padding: 20px;background-color: #FFF; font:
100.01% "Trebuchet MS",Verdana,Arial,sans-serif} h1, p{margin: 0
10px} h1{font-size: 250%;color:#000000} p{padding-bottom:1em}
div#korner{ margin: 0 10%; background-color:#FFA6A6;} b.rtop,
b.rbottom{display:block; background: #FFF} b.rtop b, b.rbottom
b{display:block; height: 1px; overflow: hidden; backgroundcolor:#FFA6A6;} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin:
0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height:
2px}</style></head> <body> <div id="korner"><b class="rtop"><b
class="r1"></b><b class="r2"> </b><b class="r3"></b> <b
class="r4"></b></b> <h1 align="center">Efek Round Corner dengan
CSS</h1> <b class="rbottom"><b class="r4"> </b><b
class="r3"></b><b class= "r2"></b><b class="r1"></b></b>
</div></body></html>
Membuat Album Fhoto
<html><head><meta http-equiv= "Content-Type" content="text/html;
charset=iso-8859-1"> <title>Album Fhoto with CSS</title> <style
type="text/css"> body { font-family:Verdana; font-size:12px;} td {textalign:center;} .fotoatas { border:5px outset gold; backgroundcolor:#FFFFFF;} .fotobawah {border: 2px outset gold; backgroundcolor:#FFF4EA;} .tepialbum{ border:1px solid brown; backgroundimage:url(OS38014.JPG);} </style></head> <body><table width="393"
height= "474"align="center" class="tepialbum"> <tr><td><table
width="100" align= "center"><tr><td colspan="2"
class="fotoatas"><img style="FILTER: Alpha(Opacity=100,
FinishOpacity=30, Style=3, StartX=10, StartY=20, FinishX=20,
FinishY=40)" src="56022.JPG" width="278" height="183"></td> </tr>
<tr><td class="fotobawah"><img style="FILTER: Alpha(Opacity=100,
FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"
src="56012.JPG" width="84" height="87"></td> <td
class="fotobawah"><img style="FILTER: Alpha(Opacity=100,
FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"
src="56032.JPG" width="83" height="91"></td></tr> <tr><td
class="fotobawah"><img style="FILTER: Alpha(Opacity=100,
FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"
src="56131.JPG" width="104" height="87"></td><td class=
"fotobawah"><img style="FILTER: Alpha(Opacity=100, FinishOpacity=0,
Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" src="56175.JPG"
width="98" height="70"></td></tr></table>
</td></tr></table></body></html>
Menu dengan Pesan
<html><head><title>Link dalam List</title><style type="text/css">
body {font-family:verdana; font-size:10px; font-weight:bold;margin-left:
0px; margin-top:0px;} .navigasi{ list-style:none; margin: 0px;
width:170px; border::1px solid gold; background-color:#FFFFCC;
color:#000000;} .navigasi a{ margin:0px; display:block; backgroundcolor:#FFFFCC; color: #000000; padding:5px 5px 5px 5px; textdecoration:none;} li.model{ border:1px solid gold; backgroundcolor:#FFFFCC; margin:0px; color:#000000;} .navigasi a:hover {
color:#000000; text-decoration:none; background-color:gold;
padding:5px 5px 5px 5px;} .navigasi a span {display:none;} .navigasi
a:hover span { text-align:left; display:block; border:1px solid orange;
position:absolute; left:0px; top:100px; width:158px; padding:5px 5px
5px 5px; color:#990000; backgroundcolor:gold;}</style></head><body> <ul class="navigasi"> <li
class="model"><a href="#"> PEMERINTAH DAERAH<span>informasi
mengenai pemerintahan daerah setempat</span></a></li> <li
class="model"><a href="#"> WISATA ALAM<span>Kunjungi Obyek
Wisata yang Indah dan Menarik</span></a></li> <li class="model"><a
href="#"> MASAKAN DAERAH<span>Masakan Daerah yang kaya rasa
dan beragam</span></a></li> <li class="model"><a href="#">
KEBUDAYAAN LOKAL<span>Kunjungi Pusat Kebudayaan yang
beragam</span></a></li></ul> </body></html>
Anda mungkin juga menyukai
- Interaksi Jepang Dengan BaratDokumen13 halamanInteraksi Jepang Dengan BaratZulfaBelum ada peringkat
- 01KEWIRAUSAHAANDokumen5 halaman01KEWIRAUSAHAANZulfaBelum ada peringkat
- Modul AccessDokumen100 halamanModul AccessZulfa0% (1)
- Modul AccessDokumen100 halamanModul AccessZulfa0% (1)
