Assalamu'alaikum pengunjung setia blog cyber odink, alhamdulillah saya masih di beri umur, kesehatan jasmani & rohani, dan kemudahan dalam mengurus blog cyber odink ini. Pada kesempatan ini saya akan mengambil judul postingan Cara Mengatur Hyperlink Dengan CSS. Bagi kalian yang ingin atau sedang belajar pemerograman web, pasti kalian tahu apa itu CSS. Yah CSS adalah kepanjangan dari Cascading Style Sheet, yang merupakan bahasa pemerograman yang berfungsi untuk mengatur dan menghiasi tampilan halaman web agar terlihat lebih menawan seperti halnya wanita yang dihiasi dengan pakaian pesta yang anggun dan menawan.
Maka dari itu saya akan membuat postingan dengan kategori CSS. Untuk lebih detailnya saya akan menulis tentang bagaimana caranya mengatur hyperlink dengan css. Hyperlink adalah jalan pintas yang terdapat di halaman web yang berguna untuk mengarahkan browser ke halaman web lain baik itu dalam satu website ataupun ke website lain.
CSS menyediakan beberapa fitur yang dapat digunakan untuk mengatur tampilan dari hyperlink seperti warna, text decoration, serta background color. Sebelum kita lanjut ke dalam skripnya, kalian harus memahami dulu 4 status link yang dikenali oleh CSS, 4 status tersebut antara lain :
- link : merupakan kondisi default saat link ditampilkan
- hover : kondisi ketika terdapat kursor mouse di atas link
- visited : kondisi ketika link telah diklik
- active : kondisi ketika link diklik
Berikut adalah penggunaan selektor pada link.
a:link
a:hover
a:visited
a:active
Setelah kalian memahami ke empat status link tersebut, mari lanjut ke contoh skripnya.
<!DOCTYPE html>
<html>
<head>
<title>Link</title>
<style type="text/css">
a:link {
color: red;
}
a:hover {
color: blue;
}
a:visited {
color: yellow;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#"><b>HYPERLINK</b></a>
</body>
</html>
<html>
<head>
<title>Link</title>
<style type="text/css">
a:link {
color: red;
}
a:hover {
color: blue;
}
a:visited {
color: yellow;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#"><b>HYPERLINK</b></a>
</body>
</html>
Berikut hasilnya :
Tampilan link sebelum diklik :
Tampilan link ketika terdapat kursor di atasnya :
Tampilan link ketika telah diklik atau di kunjungi :
Tampilan link ketika diklik :
Bagaimana menurut kalian, mudah bukan ? Mungkin hanya itu yang dapat saya share pada postingan ini semoga bermanfaat. Silahkan baca postingan lainnya di blog ini. Silahkan beri komentar jika ada yang ingin di ungkapkan seputar dunia CSS.
REGARD
CYBER ODINK
11/18/2017 07:32:00 PM
Tags :
CSS
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments