Anatomi Web

1.      Link Style

Di dalam menghias suatu link dapat dilakukan dengan berbagai cara dan dengan berbagai attribute CSS. Namun kita harus tetap memperhatikan anatomi suatu link, dimana link merupakan suatu bagian di dalam halaman web yang dapat diklik dan akan membawa user ke halaman lain.

Selain itu kita perlu memperhatikan kebiasaan penyusunan link secara umum pada website lain karena sebagian besar waktu akan dihabiskan di website lain sehingga secara pasti user akan terbiasa dengan bentuk link di dalam website-website tersebut.

2.      CSS Selector

CSS berfungsi untuk menargetkan element di dalam dokumen yang akan diubah tampilannya. Untuk mengubah tampilan dari suatu link kita dapat menggunakan element selector a.

Contoh :

[css]

a {
color: blue;
}

[/css]

Kode CSS diatas akan merubah warna teks link menjadi biru seperti : Blue Link.

Selain element selector a, CSS menyediakan beberapa pseudo-classes selector yang secara khusus digunakan untuk link. Dengan menggunakan selector ini kita dapat mengubah style link untuk berbagai kondisi.

Beberapa pseudo-classes selector ini antara lain :

a.      Link

Pseudo-classes selector yang digunakan untuk menargetkan element link pada kondisi biasa atau belum adanya interaksi dari user ke link. Efek dari selector ini hampir sama seperti di dalam element selector.

b.      Visited

Pseudo-classes selector yang digunakan untuk menargetkan element link, dimana link tersebut telah diklik sebelumnya.

c.       Hover

Pseudo-classes selector yang digunakan untuk menargetkan element link ketika mouse sedang berada di atasnya.

d.      Active

Pseudo-classes selector yang digunakan untuk menargetkan element link ketika link sedang diklik.

Satu hal yang perlu anda ingat tentang selector pseudo-class diatas adalah urutan di dalam file css harus seperti urutan diatas, jika tidak mungkin efek code css tidak akan terlihat. Selain itu untuk element selector a jika di deklerasikan setelah pseudo-classes ini akan menggantikan seluruh style dari kondisi link diatas.

3.      Contoh Tampilan Link

Dalam menghias element link dapat dilakukan dengan berbagai gaya seperti mengubah warna teks, mempertebal teks, menambah garis bawah, dan sebagainya. Selain itu dengan memberikan gaya yang berbeda pada setiap kodisi link (hover, active, visited) akan semakin memperkuat link tersebut.

Sebelum anda mengatur style element link, sebaiknya anda melakukan pembersihan terhadap default style dari browser sehingga dapat mempermudah dalam mengatur tampilan link.

Contoh dari pengaturan tampilan link :

a.      Simple Link Style

Penyusunan tampilan link yang paling sederhana adalah mengubah warna dan menambahkan garis bawah. Style ini sangat sesuai untuk link yang berada di dalam suatu paragraph.

 Berikut beberapa contohnya :

[css]

a {
color: #cc00cc;
text-decoration: underline;
}

[/css]

Kita coba menambahkan style dengan Pseudo-classes, sebagai berikut :

[css]

a:link {
color: #003399;
}
a:visited {
color: #003366;
}
a:hover {
text-decoration: underline;
}
a:active {
color: #0066ff;
}

[/css]

b.      Underline With Border

Keuntungan penggunaan border daripada attribute CSS text-decoration adalah garis yang ditambahkan menjadi lebih bervariasi.

Berikut contohnya :

[css]

a {
color: #33cc00;
border-bottom: 1px dotted #009900;
}

[/css]

c.       Text Background

Menambahkan warna background ke teks link akan memberikan keunikan tersendiri bagi element link.

Berikut contohnya :

[css]

a {
color: #ffffff;
background-color:#000000;
}

[/css]

Style seperti ini akan sesuai untuk kondisi hover sedangkan untuk kondisi biasa kita hias secara lebih sederhana.

Berikut contohnya :

[css]

a {
color: #000000;
text-decoration: underline;
}
a:hover {
color: #ffffff;
background-color: #073d63;
border-bottom: #130e06;
text-decoration: none;
}

[/css]

d.      Block Link

Pada contoh sebelumnya kita hanya menghias link yang tampak di dalam paragraph (inline). Namun kita bisa saja merubah link menjadi element block. Hal ini sering terlihat pada bagian sidebar website.

Dengan style seperti ini area klik dari link menjadi lebih luas dan cukup sesuai untuk diterapkan pada suatu list link.

Berikut contohnya :

[css]

a {
display: block;
background-color: black;
color: white;
padding: 1em 2em;
width: 100px;
}
a:hover {
background-color: #999999;
color: black;
}

[/css]

Kita perlu memberikan attribute width pada element link atau element kontainer dari link agar tidak terlalu lebar (jika tidak ditentukan maka lebar akan seluas halaman atau kontainernya).

e.       Button Link

Html mempunyai tag button yang digunakan di dalam form untuk membentuk suatu button. Namun ketika kita ingin membentuk suatu button tetapi tidak sebagai bagian dari form maka kita dapat menggunakan link dengan beberapa manipulasi CSS.

4.      Membedakan Link Dalam dan Link Luar

Dengan membedakan link ke halaman di luar website dengan link ke halaman di dalam website yang sama akan membuat user dapat mengetahui ke mana tujuan dari link sebelum mengkliknya.