statis lanjut

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


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


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;border-

top-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="padding-

top : 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"> Laki-

Laki</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


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;border-

width:2px; background-color:#FFE6CC;} td {padding-left:5px; padding-

top: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; font-

weight:bold;border-color:#5B2E00; border-style:solid;border-

width: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


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 {text-

decoration : 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


charset=iso-8859-1"> <title>Warna dan Latar Link</title> <style

type="text/css"> body {font-family:Verdana; font-size: 16px;text-

align: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


charset=iso-8859-1"> <title>Link berbentuk tombol</title> <style

type="text/css"> body {margin-left:20%;font-family: Verdana; font-

size:12px;font-weight: bold;} a:link{ text-decoration:none; background-

color:#0066CC; color:#FFFFFF; border-color:#003399; border-

style: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; background-

color:#0066CC; color:#FFFFFF; border-color:#003399; border-

style: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.


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


charset=iso-8859-1"> <title>Link dalam List</title> <style

type="text/css"> body {font-family:Verdana; font-size: 12px; font-

weight:bold;} .navigasi{ list-style:none; margin: 0px; padding: 1px 1px

1px 1px; width:230px} li.model{ border:1px solid orange; background-

color:#FFFFCC;padding: 1px 1px 1px 1px; margin:0px;} a:link{text-

decoration: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


charset=iso-8859-1"><title>Link berbeda satu halaman</title> <style

type="text/css"> body {font-family:Verdana; font-size:16px;font-

weight: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;


a:active.master { text-decoration:none;background-color:#990000;


a:hover.master { text-decoration:none;background-color:#FF0000;


a:link.pro { text-decoration:none; padding:5px 5px 5px 5px;

color:#9900CC; border:2px dotted violet;} a:visited.pro { text-

decoration: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 { text-

decoration: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 { text-

decoration: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


charset=iso-8859-1"><title>Efek Zoom</title><style type="text/css">

a:link{ color:#000000; text-decoration: none; font-family:Verdana; font-

size: 18px;} a:visited{color:#000000; text-decoration : none; font-

family:Verdana; font-size:18px;} a:active{ color:#000000; text-

decoration:none; font-family: Verdana; font-size:18px;} a:hover{

color:#000000; text-decoration:none;font-family: Verdana; font-

size:36px;}</style> </head> <body><p><center> <a

href="efekzoom.html">EFEK ZOOM</a></center></p></body> </html>

Web Berita tanpa Tabel


charset=iso-8859-1"><title>Electronic Newspaper</title> <style

type="text/css"> body {margin:1px 1px 1px 1px; background-

color:#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;font-

family:Verdana; font-size:10px;font-weight:800; position: absolute;

top:55px;left: 12px; } .logo3 {color:#FFFF00;font-family:Georgia; font-

size:30px; font-weight:800; position: absolute; top:23px; left: 169px;

width:400px;} .logo31 { color:#000000;font-family: Georgia; font-

size: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;border-

width:1px; background-color:#C1E0FF;padding: 1px 1px 1px 1px;

margin:0px;} a:link{ text-decoration:none; color:#000000;font-

family:Verdana; font-size:11px;font-weight:700;} a:visited{ text-

decoration:none; color:#000000; font-family:Verdana; font-

size: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; border-

style: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; font-

size: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.


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">  </style> </head>

<body> <p class="style1">HALAMAN INI MENGGUNAKAN EFEK

SCROLLBAR BERWARNA DAN DIBUAT DENGAN MENGGUNAKAN CSS.</p>

</body> </html>

Efek Round Corner


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; background-

color:#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


charset=iso-8859-1"> <title>Album Fhoto with CSS</title> <style

type="text/css"> body { font-family:Verdana; font-size:12px;} td {text-

align:center;} .fotoatas { border:5px outset gold; background-

color:#FFFFFF;} .fotobawah {border: 2px outset gold; background-

color:#FFF4EA;} .tepialbum{ border:1px solid brown; background-

image: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,


src="56032.JPG" width="83" height="91"></td></tr> <tr><td

class="fotobawah"><img style="FILTER: Alpha(Opacity=100,


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; background-

color:#FFFFCC; color: #000000; padding:5px 5px 5px 5px; text-

decoration:none;} li.model{ border:1px solid gold; background-

color:#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; background-

color: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>

statis lanjut

Documents