Modul Praktikum CSS – Cara Cerdas Belajar CSS
PRAKTIKUM
: CSS Links
NAMA
: ___________________________________
KELAS
: ___________________________________
TANGGAL PRAKTIKUM
: ___________________________________
A.
TUJUAN
1.
Siswa dapat mengenal, memahami serta dapat melakukan pengaturan CSS link
B.
DASAR TEORI
Hyperlink atau juga sering disebut dengan Link adalah salah satu metode yang dibuat
dalam web site untuk memperkaya informasi yang ditampilkan, karena akan dapat
menciptakan beberapa hubungan dari web yang kita bangun menuju web-web yang ada diluar.
Selain itu juga akan lebih memperkaya informasi yang akan ditampilkan di dalam halaman web.
Di dalam web HTML, tag yang digunakan untuk menciptakan link adalah sebagai berikut:
<a href=”alamat_file.htm”> ...Pemicu… </a>
Pada Tag diatas Anda dapat memasukkan file yang akan dijadikan target link pada attribut
href, sedangkan pemicu merupakan kata pemicu yang digunakan atau dapat dimasukkan
berupa gambar sebagai pemicunya. Untuk melakukan pengaturan Link, HTML menyediakan
atribut sebagai berikut:
Atribut
Keterangan
link Keadaan awal pemicu link
vlink Keadaan pemicu link setelah dikunjungi alink Keadaan pemicu link yang aktif
Berikut adalah contoh pengaturan standar pada halaman web HTML menggunkan nilai alink,
link, dan vlink.
<html>
<head> <title>Pengaturan pada link</title></head> <body alink=”red” link=”green” vlink=”yellow”>
<a href=”http://www.google.co.id”> Mesin pencari Google </a> </body>
</html>
Anda dapat mempergunakan CSS untuk mengatur warna hypertext link, dengan warna
yang berbeda untuk link yang belum pernah anda akses, link yang pernah anda akses dan link
yang akan kemudian anda akses serta link yang aktif. Anda bahkan dapat mengatur warnanya
pada saat kursor mouse berada diatas daerah yang akan dilink. Berikut adalah atribut yang
digunakan untuk melakukan pengaturan Link:
(2)
Selector
Keterangan
a:link Untuk warna link yang belum diakses a:visited Untuk warna link yang telah diakses a:active Untuk warna link ketika link diklik
a:hover Untuk warna link ketika mouse berada diatasnya
Berikut adalah syntax penulisan pada CSS:
a:link { property: value } a:visited{ property: value } a:active { property: value } a:hover { property: value }
Apabila menggunakan class selector, syntaxnya menjadi:
a.class:link { property: value } a.class:visited{ property: value } a.class:active { property: value } a.class:hover { property: value }Dari syntax diatas, Anda dapat menggunakan semua property yang berkaitan dengan
pengaturan teks, font, background maupun border.
Kebanyakan orang ketika mereka melihat garis bawah dibawah sebuah link selalu
mengira itu adalah bagian teks yang diberi link. Umumnya orang memberikan warna biru pada
teks yang diberi link ke halaman atau alamat internet lain. Anda disarankan untuk
meninggalkan warna link ini apabila warna latar belakang menyebabkan teks anda yang diberi
link jadi sulit terbaca. Berikut ini adalah pilihan formatting yang umum digunakan pada link:
color
text-decoration
font-weight
font-style
font-family
font-size
(3)
C.
PRAKTIKUM
Ketentuan Praktikum:
1. Penggunaan atribut-atribut Link CSS <html>
<head>
<title>Percobaan link CSS</title> <style type="text/css">
a:link{
color:green;
text-decoration:none; }
a:active{
color:purple;
text-decoration:none; }
a:visited{
color:yellow;
text-decoration:none; }
a:hover{
color:black;
text-decoration:underline; }
</style> </head>
<body>
<a href=”http://www.google.co.id” target="_self"> Mesin pencari Google </a> </body>
</html>
1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser.
(4)
2. Hyperlink berganti warna background saat dilewati mouse <html>
<head>
<title>Pengaturan pada link background</title> <style type="text/css">
a:link{ text-decoration:none; color:green;
}
a:active{
text-decoration:none; color:blue;
}
a:visited{
text-decoration:none; color:orange;
}
a:hover{ color:black;
background-color:orange; text-decoration:underline; }
</style> </head>
<body>
<table border="0"> <tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
<tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
</table> </body> </html>
(5)
3. Hyperlink dengan property text transform dan text decoration <html>
<head>
<title>Pengaturan pada link</title> <style type="text/css">
a:link{ text-decoration:none; background-color:#FF9933; color:#FFFFFF;
}
a:active{
text-decoration:none; color:#660000; }
a:visited{
text-decoration:none; color:#660033; }
a:hover{
font-weight:bold;
text-transform:uppercase;
text-decoration:underline overline; color:#000000;
background-color:#CCFF00; }
</style> </head>
<body>
<table border="0"> <tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
<tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
</table> </body> </html>
(6)
4. Hyperlink Menggunakan List
<html> <head>
<style type="text/css"> .menu {
margin: 0px; padding: 0px; list-style: none; }
.menu li { margin-bottom: 3px; } /* this puts some space in between the buttons */ .menu a:link, .menu a:visited {
display: block; /* this code allows a width or height to be set */ width: 150px;
color: #3366ff; /* this defines the color of the link text */
border: solid 2px #666666; /* this defines the color and width of the border */ background: #eeeeee; /* this defines the background color */
text-align: center; /* this defines the text alignment */
padding: 3px; /* this puts some space between the text and border */ text-decoration: none; /* this removes the underline */
font: 9pt Verdana, Arial, Helvetica, sans-serif; /* this defines the font */ }
.menu a:active, .menu a:hover { background: #000000;
color:#ffffff; }
</style> </head> <body>
<ul class="menu">
<li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>
</body> </html>
(7)
5. Hyperlink Menggunakan border colors untuk memberi ilusi pada 3D "button"
<html> <head>
<style type="text/css"> .menu {
margin: 0px; padding: 0px; list-style: none; }
.menu li { margin-bottom: 3px; } .menu a:link, .menu a:visited { display: block;
width: 150px; color: #000000;
border-left: solid 3px #cccccc; border-top: solid 3px #eeeeee; border-right: solid 3px #888888; border-bottom: solid 3px #666666; background: #aaaaaa;
text-align: center;
padding: 2px 3px 4px 3px; text-decoration: none;
font: 9pt Verdana, Arial, Helvetica, sans-serif; }
.menu a:active, .menu a:hover { border-left: solid 3px #888888; border-top: solid 3px #666666; border-right: solid 3px #cccccc; border-bottom: solid 3px #eeeeee; background: #999999;
padding: 3px; }
</style> </head> <body>
<ul class="menu">
<li><a href="link1.html" target="_blank">Link 1</a></li> <li><a href="link1.html">Link 2</a></li>
<li><a href="link1.html">Link 3</a></li> </ul>
</body> </html>
(8)
6. Image Rollover
Note:
Ukuran image: 116 x 37 (Pixel)
ImageLink.css
a:link, a:visited,a:active{ color:#1184D5;
text-decoration:none;
background-image:url("btn_hijau.gif"); background-repeat:no-repeat;
padding: 0.5em; margin:0.5em; display:block; }
a:hover{ color:#FD3E0B; text-decoration:none;
background-image:url("btn_kuning.gif") ; background-repeat:no-repeat;
(9)
D.
KESIMPULAN
<html><head><title>CSS Link Image</title>
<link rel="stylesheet" type="text/css" href="ImageLink.css"> </head>
<body>
<table border="1">
<caption><b>Menu</b></caption> <tr>
<td width="138" height="50" align="center"> <a href="home.html"><b>Home</b></a> </td>
</tr> <tr>
<td align="center">
<a href="about_me.html"><b>About Me</b></a> </td>
</tr> </table> </body> </html>
(1)
2.
Hyperlink berganti warna background saat dilewati mouse <html><head>
<title>Pengaturan pada link background</title> <style type="text/css">
a:link{
text-decoration:none; color:green;
}
a:active{
text-decoration:none; color:blue;
}
a:visited{
text-decoration:none; color:orange;
}
a:hover{ color:black;
background-color:orange; text-decoration:underline; }
</style> </head>
<body>
<table border="0"> <tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
<tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
</table> </body> </html>
(2)
3.
Hyperlink dengan property text transform dan text decoration <html><head>
<title>Pengaturan pada link</title> <style type="text/css">
a:link{
text-decoration:none; background-color:#FF9933; color:#FFFFFF;
}
a:active{
text-decoration:none; color:#660000; }
a:visited{
text-decoration:none; color:#660033; }
a:hover{
font-weight:bold;
text-transform:uppercase;
text-decoration:underline overline; color:#000000;
background-color:#CCFF00; }
</style> </head>
<body>
<table border="0"> <tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
<tr>
<td><a href="#">Arahkan mouse ke sini</a></td> </tr>
</table> </body> </html>
(3)
4.
Hyperlink Menggunakan List
<html><head>
<style type="text/css"> .menu {
margin: 0px; padding: 0px; list-style: none; }
.menu li { margin-bottom: 3px; } /* this puts some space in between the buttons */ .menu a:link, .menu a:visited {
display: block; /* this code allows a width or height to be set */ width: 150px;
color: #3366ff; /* this defines the color of the link text */
border: solid 2px #666666; /* this defines the color and width of the border */ background: #eeeeee; /* this defines the background color */
text-align: center; /* this defines the text alignment */
padding: 3px; /* this puts some space between the text and border */ text-decoration: none; /* this removes the underline */
font: 9pt Verdana, Arial, Helvetica, sans-serif; /* this defines the font */ }
.menu a:active, .menu a:hover { background: #000000;
color:#ffffff; }
</style> </head> <body>
<ul class="menu">
<li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>
</body> </html>
(4)
5.
Hyperlink Menggunakan border colors untuk memberi ilusi pada 3D "button"
<html><head>
<style type="text/css"> .menu {
margin: 0px; padding: 0px; list-style: none; }
.menu li { margin-bottom: 3px; } .menu a:link, .menu a:visited { display: block;
width: 150px; color: #000000;
border-left: solid 3px #cccccc; border-top: solid 3px #eeeeee; border-right: solid 3px #888888; border-bottom: solid 3px #666666; background: #aaaaaa;
text-align: center;
padding: 2px 3px 4px 3px; text-decoration: none;
font: 9pt Verdana, Arial, Helvetica, sans-serif; }
.menu a:active, .menu a:hover { border-left: solid 3px #888888; border-top: solid 3px #666666; border-right: solid 3px #cccccc; border-bottom: solid 3px #eeeeee; background: #999999;
padding: 3px; }
</style> </head> <body>
<ul class="menu">
<li><a href="link1.html" target="_blank">Link 1</a></li> <li><a href="link1.html">Link 2</a></li>
<li><a href="link1.html">Link 3</a></li> </ul>
</body> </html>
(5)
6.
Image Rollover
Note:
Ukuran image: 116 x 37 (Pixel)
ImageLink.css
a:link, a:visited,a:active{ color:#1184D5;
text-decoration:none;
background-image:url("btn_hijau.gif"); background-repeat:no-repeat;
padding: 0.5em; margin:0.5em; display:block; }
a:hover{ color:#FD3E0B; text-decoration:none;
background-image:url("btn_kuning.gif") ; background-repeat:no-repeat;
(6)
D.
KESIMPULAN
<html><head><title>CSS Link Image</title>
<link rel="stylesheet" type="text/css" href="ImageLink.css"> </head>
<body>
<table border="1">
<caption><b>Menu</b></caption> <tr>
<td width="138" height="50" align="center"> <a href="home.html"><b>Home</b></a> </td>
</tr> <tr>
<td align="center">
<a href="about_me.html"><b>About Me</b></a> </td>
</tr> </table> </body> </html>