Membuat Link pada HTML

Link yang merupakan singkatan dari "hyperlink" adalah sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan. Link juga berguna untuk menghubungkan antar dokumen HTML. Dalam HTML, sebuah objek teks yang berupa link akan ditampilkan dengan font berwarna biru dengan style underline (bergaris bawah). Jika cursor mouse didekatkan pada objek yang berupa link, maka cursor akan berubah menjadi gambar tangan yang menunjuk pada link tersebut, kemudian jika sebuah link sudah pernah diakses atau dikunjungi, maka warna dari teks / objek link tersebut akan berubah menjadi ungu. Pada pembahasan kali ini akan dibahas mengenai cara pembuatan link dalam HTML. Untuk membuat link digunakan tag <a> (anchor) yang berpasangan dengan </a>. Setiap teks maupun objek lain (gambar, thumbnail, dll) yang diapit dengan tag tersebut akan ditampilkan sebagai link. Bentuk umum tag pembuatan link adalah sebagai berikut :
"<a href="DokumenTujuan"> Teks / Objek Link </a>"
Dari bentuk umum di atas dapat dilihat adanya penggunaan atribut HREF pada tag <a>. Atribut tersebut digunakan untuk menentukan dokumen atau halaman mana yang akan dipanggil dan ditampilkan pada saat link tersebut diklik oleh user. Jadi, nilai dari atribut tersebut harus diisikan nama dokumen HTML yang menjadi tujuan. Namun penggunaannya masih dapat dieksplorasi lagi oleh web designer.

Setelah mengetahui bentuk umum dari tag hyperlink, selanjutnya akan dibahas mengenai jenis-jenis link. Berdasarkan lokasi dokumen yang akan diakses, link dalam HTML dibagi menjadi 3, yaitu :

• Link absolut
• Link relatif
• Link ke dokumen yang sama

————————————————————————————————————

LINK ABSOLUT
Yaitu link yang tujuannya adalah alamat website yang lain. Jadi, dokumen yang menjadi tujuan dari link jenis ini adalah URL sebuah alamat web sehingga untuk membuat link jenis ini, komputer kita harus terkoneksi ke
internet. Untuk membuat link ini, nilai atribut HREF pada tag <a> diisikan dengan alamat situs web yang akan menjadi tujuan. Penulisan alamat situsnya pun harus lengkap (beserta nama protokol "http://" maupun protokol lain yang digunakan). Berikut contoh tag HTML yang akan menunjukkan penggunaan dari link absolut

Dan dari tag link di atas akan menghasilkan link pada dokumen HTML sebagai berikut

Dari gambar di atas terbukti bahwa teks yang diapit dengan tag <a> dan </a> akan direpresentasikan sebagai teks dengan font berwarna biru. Dari contoh di atas juga dapat dilihat bahwa link "Blog Saya" telah dikunjungi, sehingga warna dari fontnya pun menjadi ungu. Kemudian, saat saya mendekatkan cursor pada teks "Blog Saya" maka pada bagian pojok kiri bawah dari web browser menunjukan bahwa tujuan dari link tersebut adalah situs "http://yadicucuklauk.blogspot.com" (fitur ini tergantung dari web browser yang digunakan). Lalu jika user memilih link "Blog Saya" maka web browser akan langsung mengarah pada situs http://yadicucuklauk.blogspot.com, begitu pula saat user memilih link lainnya.

Selain menuju ke sebuah situs yang terkoneksi internet, link absolut juga dapat berupa link yang menghubungkan ke sebuah alamat e-mail. Link yang menuju ke sebuah alamat e-mail juga harus terhubung ke internet untuk mengaksesnya. Untuk membuat link ke alamat e-mail dapat dilakukan dengan mengisikan nilai atribut HREF dengan diawali kata "mailto" kemudian diikuti tanda : (titik dua) lalu alamat e-mail tujuan. Sebagai contoh, tag <a href="mailto:yadipurdianto@yahoo.com"> Send me E-mail </a> adalah tag link yang digunakan untuk mengirimkan sebuah e-mail ke alamat "yadipurdianto@yahoo.com" dan teks yang ditampilkan sebagai link tersebut adalah "Send me E-mail".

————————————————————————————————————

LINK RELATIF
Yaitu link yang tujuannya adalah sebuah file dokumen HTML yang berada dalam satu komputer yang sama sehingga penggunaan link jenis ini dapat dibuat secara offline (tanpa koneksi internet). Untuk membuat link jenis ini cukup mengisikan nilai atribut HREF dengan lokasi dan nama file HTML yang menjadi tujuan. Sebagai contoh, buatlah sebuah file HTML bernama home.html dan kemudian isikan tag berikut di antara tag <body> dan </body> dalam file HTML tersebut :

Setelah itu buatlah file HTML yang kedua dengan nama contact.html dan kemudian isikan tag berikut pada body section file tersebut :

Saat file home.html dibuka menggunakan web browser maka akan muncul tampilan seperti berikut

Jika link dalam dokumen di atas dipilih lalu diklik oleh user, maka secara otomatis file HTML dengan nama contact.html akan dipanggil dan ditampilkan oleh web browser seperti berikut

Contoh di atas adalah tag link yang menuju ke file contact.html yang lokasinya berada dalam satu folder dengan file home.html. Lalu untuk membuat link ke sebuah file HTML yang berada subfolder tertentu, maka pengisian atribut HREF akan berbeda. Sama seperti penjelasan mengenai direktori bertingkat pada pembasan Penggunaan Image pada HTML, untuk membuat link ke file HTML yang berada pada susunan folder yang rumit digunakan penambahan nilai pada atribut HREF. Penambahan itu adalah nama folder lokasi file HTML tujuan, atau tanda .. (dua titik) jika file HTML tujuan berada di atas folder yang menyimpan file HTML utama. Sebagai contoh, perhatikan struktur direktori bertingkat yang menyimpan file home.html dan file contact.html berikut :

Dari struktur direktori di atas maka file home.html dapat membuat link ke file contact.html dengan menggunakan tag berikut

————————————————————————————————————

LINK KE DOKUMEN YANG SAMA
Link jenis ini biasanya dapat kita jumpai pada sebuah halaman web dengan isi yang panjang, sehingga akan disertakan sebuah daftar isi pada bagian atas halaman web tersebut. Kita sering menjumpai link jenis ini pada situs Wikipedia dimana pada bagian atas sebuah artikel dalam situs ini ada semacam daftar isi yang dapat kita pilih dan saat diklik maka bagian artikel yang kita pilih akan muncul tanpa harus menggerakkan scroll ke bawah. Untuk membuat link jenis ini maka ada dua hal yang perlu dilakukan oleh seorang web designer, yaitu pemberian nama pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju ketika link tersebut diklik oleh user. Pemberian nama tersebut dilakukan dengan menuliskan atribut NAME pada tag <a> dan nilai dari tag tersebut adalah nama bagian yang akan dijadikan tujuan dari link (untuk alasan kemudahan, gunakan bilangan atau angka saja untuk menamai sebuah bagian dokumen). Bentuk umum tag dalam penaman bagian dokumen HTML adalah sebagai berikut

Setelah penamaan dibuat, maka selanjutnya buatlah link yang akan mengarah ke teks atau gambar yang telah dinamai sebelumnya. Untuk membuatnya dapat dilakukan dengan tag berikut

Tanda # pada tag di atas menunjukan bahwa link tersebut bukan menuju pada sebuah file, tetapi menuju pada sebuah bagian. Sebagai contoh, perhatikan tag berikut

Hasil dari tag di atas pada web browser adalah sebagai berikut

Jika link "Bagian 2" dipilih dan diklik oleh user, maka bagian tersebut akan muncul pada bagian paling atas web browser (posisi tampilan dipengaruhi oleh banyak atau sedikitnya data yang ditampilkan) seperti tampilan berikut

Selain itu link jenis ini juga dapat digunakan untuk file HTML yang berbeda. Link ke bagian tertentu pada dokumen HTML lain dapat dibuat dengan memberi nama terlebih dahulu pada bagian yang dituju dari dokumen lain, kemudian pada file HTML utama buatlah link yang menuju pada bagian tersebut. Untuk membuatnya, gunakan atribut 'HREF' kemudian isikan dengan nama file HTML tujuan dan diikuti dengan tanda # (tanda pagar) lalu nama bagian tujuan dari dokumen lain. Bentuk umumnya adalah sebagai berikut

Untuk pemahaman, buatlah file HTML dengan nama home.html dan isikan body section-nya dengan tag berikut

Kemudian buatlah file HTML lain dengan nama file_2.html dan isikan body section-nya dengan tag berikut

Berikut adalah hasil dari tag pada file home.html

 
Saat link pada file home.html dipilih dan diklik oleh user, maka web browser akan menampilkan file_2.html seperti screenshot berikut

Dari screenshot di atas dapat diketahui bahwa bagian 2 berada pada posisi atas dari jendela web browser. Hal itu karena bagian tersebut adalah bagian yang dipilih dan diklik pada link sebelumnya.

————————————————————————————————————

MENENTUKAN TARGET LINK
Maksud dari menentukan target adalah menentukan dimana dokumen dibuka atau ditampilkan saat dokumen tersebut dipanggil oleh sebuah link. Untuk mengatur target link dapat dilakukan dengan menambahkan atribut TARGET pada tag <a>. Dalam keadaan default (saat atribut TARGET tidak digunakan), maka sebuah dokumen yang dipanggil oleh link akan menimpa dokumen sebelumnya (dokumen yang mengandung link yang memanggilnya). Web designer dapat mengatur target link dengan mengisikan atribut TARGET dengan nilai _BLANK maupun TOP, namun nilai atribut yang saat ini saya pahami adalah _BLANK. Saat atribut target yang digunakan adalah "_BLANK", maka file yang akan dipanggil saat sebuah link diklik akan ditampilkan pada tab baru (new tab). Bentuk umumnya adalah sebagai berikut :
<a href="NamaDokumen" target="_blank"> ... </a>
Selain itu, target sebuah link juga dapat berupa nama frame, tentunya jika layar web yang di desain berupa rangkaian frame.

————————————————————————————————————


LINK GAMBAR
Sebuah objek gambar pada dokumen HTML juga dapat dijadikan sebuah link. Biasanya penggunaan gambar sebagai link banyak dijumpai pada dokumen gambar yang diperkecil (thumbnail). Tetapi saat link gambar tersebut diklik maka web browser akan menampilkan gambar tersebut dalam ukuran yang sebenarnya. Untuk membuat link gambar, maka web designer harus membuat tag <img> dan kemudian diapit oleh tag <a> ... </a>. Berikut adalah bentuk umumnya :
<a href="NamaDokumen"><img src="NamaFileGambar"></a>
Link berupa gambar juga sering ditemukan pada gambar-gambar iklan atau sponsor dari web-web tertentu. Pada umumnya, pada iklan tersebut link akan disajikan dalam bentuk logo perusahaan, dan ketika link tersebut diklik maka web browser akan menampilkan website resmi dari perusahaan yang bersangkutan.