Lebak Cyber Tips dan Trik Komputer
Membuat Hyperlink Dengan CSS
lebakcyber.net – Membuat hyperlink dengan CSS. Oke jadi pada kesempatan kali ini kita kembali membahas mengenai CSS khususnya mengenai cara membuat hyperlink dengan menggunakan tambahan dari perintah CSS agar link yang kita buat memiliki tampilan yang lebih menarik.
Hyperlink adalah sebuah link yang dibuat agar bisa berpindah halaman pada saat link tersebut di klik. Hyperlink sendiri pada halaman HTML dibuat dengan menggunakan tag <a> dan juga diakhiri dengan tag </a>. Dan sekarang kita akan membahas mengenai mengatur tampilan dari link yang dibuat seperti membuat warna pada link, merubah warna teks link pada saat cursor berada diatasnya dan juga merubah warna link kalau link tersebut telah dikunjungi.
Di CSS sendiri hyperlink pada HTML memiliki empat status dan dapat dimanipulasi menggunakan CSS, contoh seperti berikut :
- link : Link untuk menuju halaman website tertentu
- hover : status pada sebuah link saat kursor berada diatas link tersebut
- active : status pada sebuah link saat link tersebut telah di klik
- visited : status pada sebuah link yang sudah dikunjungi.
Untuk pemanggilan atau penggunaan link menggunakan CSS berdasarkan statusnya bisa ditulis dengan menggunakan perintah :
- a:link : Link untuk menuju pada halaman website tertentu
- a:hoover : status pada sebuah link saat kursor berada diatas link tersebut
- a:active : status pada sebuah link saat link tersebut sudah di klik
- a:visited : status pada sebuah link yang sudah dikunjungi
Dan dibawah ini adalah contoh bagaimana mengatur dan mendesain sebuah hyperlink dengan menggunakana CSS, kita buat kembali satu file dengan nama index.html dan sebuah file dengan nama style.css lalu masukan perintah dibawa ini :
style.css
.link,
.link:link,
.link:active,
.link:visited{
font-size: 10pt;
color: #fff;
background: #1ABC9C;
padding: 10px;
font-family: sans-serif;
}
.link:hover{
background: #33cc33;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Hyperlink Menggunakan CSS - Lebak Cyber</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Contoh link untuk menuju situs lebakcyber.net</p>
<a class="link" href="https://www.lebakcyber.net">Silahkan klik disini</a>
</body>
</html>
Nanti hasilnya seperti pada gambar dibawah ini :
Oke jadi seperti itulah bagaimana cara agar kita dapat mendesain dan memuat link dengan menggunakan CSS, semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar CSS lainnya.
