Tutorial Menghias link/ Mengatur Hyperlink pada CSS
Tutorial menghias link/ mengatur Hiperlink pada bahasa pemrograman CSS
 |
| tutorial menghias link |
Apa itu Hiperlink pada CSS
Hiperlink atau link merupakan suatu bacaan yang dibaliknya diberi alamat/ url untuk mengalihkan halaman saat di klik. Pada Html link dibuat menggunakan dengan tag <a> dan di akhiri dengan </a>.perlu teman-teman ketahui struktur link pada html defaultnya akan terlihat biasa-biasa saja, seperti tulisan berwarna biru, bergaris bawah dan terlihat monoton. Untuk itu bagaimana caranya agar sebuah link tersebut terlihat menarik.
CSS lah yang bertugas membuat link tersebut terlihat menarik. Seperti misalnya saat link tersebut terkena cursor mouse maka akan berubah menjadi warna kuning atau ketika link tersebut aktif warnanya berubah menjadi merah DLL.
Istilah ini disebut dengan Pseudo-class. Merupakan kelas semu yang dimiliki oleh sebuah elemen html. Yang membuat kita dapat mendefenisikan sebuah style pada “keadaan tertentu” dari elemen tersebut.
Pseudo-class ini terbagi menjadi 4 type diantaranya sebagai berikut :
- link, adalah style default pada sebuah link biasa. Namun warna text dari link tersebut juga dapat diubah sesuai selera masing-masing, jadi tidak harus warna biru. Cara penggunaan type ini adalah a:link{}.
- hover, adalah style ketika sebuah link diletakkan cursor mouse diatasnya. Misalnya saat cursor berada diatas sebuah link, dan link tersebut berubah menjadi warna kuning atau ukuran tulisannya berubah DLL. Cara pengggunaan type ini adalah a:hover{}.
- active, adalah style ketika sebuah link di klik atau aktif maka style yang diberikan akan dijalankan. Misal klik link Home dan tulisannya menjadi miring. Cara penggunaan type ini adalah a:active{}.
- visited, adalah style ketika sebuah link sudah pernah dikunjungi sebelumnya (menggunakan browser yang sama). Cara penggunaan type ini adalah a:visited{}.
File index.html
<!DOCTYPE html>
<html>
<head>
<title> Belajar CSS </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="link" href="#">Zikri Tekno</a>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="link" href="#">Zikri Tekno</a>
</body>
</html>
File style.css
.link {
color : orange;
font-size : 30px;
}
.link:hover {
color : red;
font-size : 50px;
font-family : arial;
}
.link:active{
color : yellow;
background-color : grey;
}
/*
.link:visited{
color : red;
}
*/
color : orange;
font-size : 30px;
}
.link:hover {
color : red;
font-size : 50px;
font-family : arial;
}
.link:active{
color : yellow;
background-color : grey;
}
/*
.link:visited{
color : red;
}
*/
Dari syntak diatas pada script index.html bermaksud untuk memberikan sebuah link terhadap tulisan Zikri Tekno. Kemudian link tersebut diberi class link yang akan kita gunakan untuk memanggil elemen tersebut di kode CSS nanti.
Pada script CSS perintah pertama (link) adalah mengatur class yang dinamakan link tadi diatur teksnya menjadi warna orange dan ukuran menjadi 30px. seperti gambar berikut :
0 Response to "Tutorial Menghias link/ Mengatur Hyperlink pada CSS"
Post a Comment