Belajar Membuat Link di Halaman Web

Salah satu bagian penting pada saat membangun sebuah website adalah membuat link yang fungsinya untuk menghubungkan satu halaman ke halaman yang lain. Ya, tentunya karena kita akan memiliki beberapa halaman web, sehingga kita perlu kode/tag html yang bisa menghubungkan halaman-halaman tersebut. Tag html yang bisa melakukan hal tersebut adalah tag a dengan atributnya yaitu href.

Sebelum kita mempelajari tag a ini, saya ingin memberikan ilustrasi sedikit mengenai fungsi dan cara kerja tag ini agar kamu punya gambaran :)

Di pulau Jawa, misalnya, kan ada beberapa kota besar seperti Jakarta, Bandung, Semarang, Surabaya, dll. Nah, setiap kota punya stasiun kereta masing-masing. Lalu, ada kereta-kereta yang bisa membawa kita dari satu kota ke kota lain. Misal, untuk Jakarta-Bandung, ada keretanya yaitu Parahyangan. Bandung-Surabaya ada kereta Argo Bromo (bener ga ya? aku lupa. Yah, pokoknya ini misalkan aja ya :) ) Untuk ke Semarang, tidak ada kereta yang dari Bandung. Sedangkan kalau dari Jakarta ada yang ke Semarang. Jadi, kalau dari Bandung mau ke Semarang, kita perlu ke Jakarta dulu baru ke Semarang. Oke, sudah ada gambaran sampai sini?

Nah, prinsip kerja tag a adalah seperti itu. Jika diumpamakan kota-kota tadi adalah halaman web, maka tag a adalah kereta-keretanya. Misal, ada file yang bernama satu.html dan dua.html. Jika kita ingin menghubungkan file satu.html ke dua.html, maka kita perlu membuat tag a pada file satu.html dengan tujuannya yaitu dua.html. Begitu juga kalau dari dua.html ke satu.html. Perlu ada 'kereta' yang menuju satu.html.

Oke, sekarang kita coba lihat bagaimana cara menuliskan script html-nya. Bentuk dasar dari tag ini adalah : teks link. Lalu, untuk menuliskan file yang dituju, digunakanlah atribut href. Sehingga kalau ditulis lebih jelasnya, adalah sebagai berikut :

teks link

Ingat ya pelajaran yang lalu, tag html selalu ada penutupnya :) Nah, jika diibaratkan, 'nama_file_yang_dituju' adalah kota yang dituju, seperti Jakarta, Bandung, dll. Sedangkan 'teks link' adalah nama keretanya, seperti Parahyangan atau Argo Bromo tadi. Jadi kamu bisa menamakan linknya dengan nama apapun.

Lanjut, kita akan lihat bagaimana penulisannya di file html. Seperti yang dicontohkan tadi, kita akan membuat link dari file satu.html ke dua.html. Misal isi dari file satu.html adalah sebagai berikut :



Dan ini adalah isi dari file dua.html :

www.rizkalindo.net

Nah, kamu perhatikan di atas cara menuliskan tag a pada suatu file. Secara default, suatu teks yang menjadi link akan ditandai dengan tulisannya menjadi warna biru disertai garis bawah. Lalu, pada saat cursor mendekati teks tersebut, bentuk cursor akan menjadi sebuah tangan yang menunjuk. Hal ini diistilahkan dengan 'hover'. Nah, kalau kamu suka lihat di situs-situs, linknya ngga ada garis bawahnya. Terus juga warnanya kok bisa macem-macem, gimana caranya? Hehe.. sabar ya. Ada trik tersendiri untuk bisa membuat seperti itu :) Kita belajar basic-nya dulu aja sekarang ;)

Sekarang coba buka file satu.html di browser, lalu klik link yang ada. Bagaimana? Berhasil? Sip deh :) Nah, kalau defaultnya suatu link sudah diklik, link tersebut akan berwarna ungu. Di html istilahnya adalah 'visited'. Coba kembali ke halaman satu.html dan lihat link yang di klik tadi...

Link dari halaman satu.html ke dua.html sudah. Sekarang kamu mau kebalikannya? Ya, tinggal buat link aja di file dua.html dengan tujuannya adalah satu.html. Mudah kan? Coba sendiri ya ;)