CSS Tutorial Part 5 : Mengatur Tampilan Hyperlink dengan CSS

Assalammualaikum Wr.Wb.

Create-script - haii gaesss...kali ini saya akan sharing tentang bagaimana cara mengatur tampilan hyperlink dengan menggunakan CSS....penasaran?, mari kita bahas lebih lengkap berikut ini...

A. PENDAHULUAN

Pengertian

Hyperlink adalah link yang dibuat untuk mengalihkan ke halaman yang telah diatur di dalam scrit nya. hyperlink dibuat menggunakan tag <a> dan juga ditutup oleh tag </a>

Latar Belakang

Membuat website terlihat lebih bagus, dan tidak terkesan membosankan, karena hyperlink tersebut dapat di klik.

Maksud dan Tujuan

Dapat mengatur tampilan Hyperlink menggunakan CSS dalam pembuatan sebuah website.

Hasil yang Diharapkan

Dapat mengimplementasikannya dalam pembuatan suatu website dan dapat mengatur tampilan agar tampilan hyperlinknya tidak terkesan membosankan.

B. ALAT DAN BAHAN

Text Editor
Web Browser

C. PEMBAHASAN
Hyperlink adalah link yang dibuat untuk mengalihkan ke halaman yang telah diatur di dalam scrit nya. hyperlink dibuat menggunakan tag <a> dan juga ditutup oleh tag </a>. untuk mempercantik tampilannya kita dapat menggunakan CSS. penggunaan CSS dalam penulisan Hyperlink ini tidaklah sulit.

dalam penulisannya ada 4 status yang dimiliki oleh hyperlink HTML dan juga dapat dimanipulasikan dengan menggunakan CSS, yaitu, sebagai berikut :

link : adalah link aktif biasa.
visited : adalah status sebuah link yang telah dikunjungi.
hover : adalah status sebuah link pada saat kursor berada diatasnya.
active : adalah status sebuah link atau hyperlink pada saat sudah di klik.

untuk penggunaannya, dapat ditulis dengan menggunakan syntax sebagai berikut :

a:link : untuk link biasa
a:visited : untuk status sebuah link yang telah dikunjungi
a:hover : untuk status sebuah link pada saat kursor diletakkan diatasnya
a:active : merupakan status sebuah link jika sudah di klik.

Pratek :
sebagai contoh, ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <a class="link" href="http://create-script.blogspot.com">Klik</a>
</body>
</html>

kemudian save dengan ekstensi HTML.
kemudian buat file CSS dengan ketikkan script berikut :

.link{
        font-size: 20px;
}
.link:hover{
    color: red;
}
.link:link{
    color: blue;
}
.link:active{
    color: green;
}
.link:visited{
    background: yellow;
}

kemudian save dengan nama style.css, save dengan satu folder file HTML.

diatas, maka hasilya akan menjadi seperti ini :

contoh kedua, ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
     <title>Hyperlink CSS</title>
     <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
     <a class="contoh-link" target="_blank" href="http://create-script.blogspot.com">Klik</a>
</body>
</html>

kemudian buat file CSS, dan ketikkan script berikut ini :

.contoh-link,
.contoh-link:link,
.contoh-link:active,
.contoh-link:visited{
    font-size: 20px;
    background: #1ABC9C;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
}

.contoh-link:hover{
    background: #16A085;
}

dan save dengan menggunakan nama style.css, dan taruh satu folder bersama dengan file HTMLnya tadi.

dan buka file HTMLnya. maka hasilnya akan menjadi seperti ini :

Penjelasan :

pada file HTML terdapat tambahan atribut target dengan value _blank, hal tersebut digunakan, supaya saat pengguna atau pembuat meng-klik linknya, akan otomatis membuka Tab baru.
yang kedua adalah bagian CSS.

font-size : digunakan untuk mengatur ukuran text
background : digunakan untuk mengatur warna latar belakang pada link
color : digunakan untuk mengatur warna text pada link
text-decoration : none digunakan untuk menghilangkan garis bawah pada link
padding : digunakan untuk mengatur ukuran warna latar belakang pada link
font-family : digunakan untuk mengatur gaya tulisan (font)
hover : digunakan untuk memberi efek saat kursor diarahkan ke atas link

D. HASIL YANG DIDAPATKAN