Jumat, 10 Mei 2013

Anwari

CSS : Link

CSS : Modifikasi Link Web Page


Yupzz sekarang kita modifikasi link Web Page, Ok langsung aja praktek daripada diem aja…

<html>
<head>
<style type="text/css">
a.b:link {color:green;}
a.b:visited {color:brown;}
a.b:hover {color:red;}

a.c:link {color:green;}
a.c:visited {color:brown;}
a.c:hover {font-size:150%;}

a.d:link {color:green;}
a.d:visited {color:brown;}
a.d:hover {background:black;}

a.e:link {color:green;}
a.e:visited {color:brown;}
a.e:hover {font-family:monospace;}

a.f:link {color:green;text-decoration:none;}
a.f:visited {color:brown;text-decoration:none;}
a.f:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>Arahkan Pointer pada link</p>

<p><b><a class="b" href="#">Jika anda mengarahkan pointer pada link ini maka akan berubah warna</a></b></p>
<p><b><a class="c" href="#" target="_blank">Jika anda mengarahkan pointer pada link ini maka ukuran link ini akan berubah</a></b></p>
<p><b><a class="d" href="#">Jika anda mengarahkan pointer pada link ini maka background link ini akan berubah</a></b></p>
<p><b><a class="e" href="#" target="_blank">Jika anda mengarahkan pointer pada link ini maka jenis huruf ini akan berubah</a></b></p>
<p><b><a class="f" href="#">Jika anda mengarahkan pointer pada link ini maka dekorasi textnya akan berubah</a></b></p>

</body>
</html>

Maka hasilnya akan seperti dibawah ini :

Arahkan Pointer pada link
Jika anda mengarahkan pointer pada link ini maka akan berubah warna
Jika anda mengarahkan pointer pada link ini maka ukuran link ini akan berubah
Jika anda mengarahkan pointer pada link ini maka background link ini akan berubah
Jika anda mengarahkan pointer pada link ini maka jenis huruf ini akan berubah
Jika anda mengarahkan pointer pada link ini maka dekorasi textnya akan berubah

Ket : syntax target = “_blank” merupakan syntax untuk membuka tab baru pada Web Browser
Sekian ilmu dari saya, silahkan otak – atik sesuka anda 

Simpan dengan link.html

 

0 Komentar:

Posting Komentar