PENGERTIAN
SleepingCodings - Hyperlink merupakan link yang di buat untuk mengalihkan halaman saat kita klik. Hyperlink atau link dibuat dengan menggunakan tag <a> dan jangan lupa kita beri tag penutupnya yaitu </a> di HTML. Dan untuk mempercantik, mengubah atau mengatur hyperlink dengan CSS sangat mudah. Pada Tutorial kali ini Author akan mulai dari membuat warna pada link, mengubah link menjadi sebuah tombol, dan merubah tampilan hyperlink pada saat di klik.
Ada empat status yang di miliki oleh hyperlink html dan bisa di manipulasi dengan menggunakan CSS, yaitu :
1. Link = Merupakan link aktif biasa
2. Visited = Merupakan status sebuah link yang telah di kunjungi
3. Hover = Merupakan status sebuah link pada saat di letakkan cursor mouse di atasnya atau ketika cursor menyentuh tombol tersebut
4. Active = Merupakan status sebuah link pada saat sudah di klik
Untuk penggunaan atau pemanggilan hyperlink menurut statusnya dapat ditulis dengan
syntax :
1. a:link = untuk link biasa
2. a:visited = merupakan status sebuah link yang telah dikunjungi
3. a:hover = merupakan status sebuah link pada saat cursor menyentuh hyperlink tersebut
4. a:active = merupakan status sebuah link yang sudah di klik
Berikut ini adalah contoh mengatur hyperlink dengan CSS :
index.html
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="link" href="sleeping-codings.blogspot.com">Klik Di Sini</a>
</body>
</html>
style.css
.link{
font-size: 20pt;
}
.link:hover{
color: red;
}
.link:link{
color: blue;
}
Nah jika di jalankan di Browser akan tampil seperti ini :
 |
| Gambar 1.1 Membuat Hyperlink biasa |
Jika di sentuh hyperlink nya akan seperti ini :
 |
| Gambar 1.2 Membuat Hyperlink biasa |
Author membuat contoh lain, seperti di bawah ini (lebih menarik dikit :v) :
index.html
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="link" href="sleeping-codings.blogspot.com">Klik Di Sini</a>
</body>
</html>
style.css
.contoh-link,
.contoh-link:link,
.contoh-link:active,
.contoh-link:visited{
font-size: 20pt;
background: #1ABC9C;
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
}
.contoh-link:hover{
background: #16A085;
}
Nah, jika di jalankan di web browser :
 |
| Gambar 1.3 Membuat Hyperlink Seperti Button |
 |
| Gambar 1.4 Membuat Hyperlink Seperti Button |
Nah, lebih menarik yang ini bukan di banding yang tadi, karena kita memberikan tambahan pengaturan atau value di CSSnya.
KESIMPULAN
Nah, jadi di tutorial ini kita dapat simpulkan bahwa, jika kita ingin membuat hyperlink yang kita buat lebih menarik dan elegan kita hanya perlu menambahkan CSSnya, tentunya dengan belajar HTML terlebih dahulu lalu CSSnya, Jangan suka belajar loncat-loncat (nanti cidera, masa baca sambil loncat-loncat, upss... KeepSmile), maksudnya loncat-loncat kita belum memahami keseluruhan dan belum paham namun kita sudah melompat ke materi selanjutnya, jadi ikuti proses secara runtut dan urut.
Sekian, Semoga Bermanfaat ~
Wassalamu'alaikum Wr.Wb
No comments:
Post a Comment