Hampir semua halaman web yang kita jumpai di internet selalu menyediakan link ke dokumen atau halaman lain. Link (sebuah singkatan dari Hyperlink Text) berguna untuk memudahkan user dalam menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan. Secara default, link dalam dokumen HTML ditandai dengan teks berwarna biru dan memiliki garis bawah serta jika mengarahkan kursor mouse ke teks tersebut, maka penunjuk mouse akan berubah menjadi gambar tangan. Padabagian ini kita akan mempelajari teknik-teknik pembuatan link yang dapat diterapkan dalam dokumen HTML.
Tag <a> (anchor)
Untuk pembuatan link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang berpasangan dengan tag </a>. Setiap teks yang diapait oleh tag ini akan ditampilkan sebagai link. Bentuk umum pembuatan link dalam dokumen HTML adalah sebagai berikut:
<a href="DokumenLain">Teks Link</a>
Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau halaman mana yang akan dipanggil pada saat link tersebut diklik atau dipilih oleh user.
Jenis-jenis Link
HTML membedakan jenis link berdasarkan lokasi dokumen yang akan diakses. Adapun jenis-jenis tersebut adalah sebagai berikut:
- Link absolut
- Link relatif
- Link dalam dokumen yang sama
Link Absolut
Link absolut adalah suatu link yang tujuannya mengarah ke alamat website lain. Sebagai contoh, kita ingin mengembangkan web yang berisi tentang pemrograman database, lalu kita ingin menyediakan suatu link yang berkaitan dengan isi website kita (misalnya ke website Oracle), dengan menuliskan kode seperti berikut:
<a href="htt://www.oracle.com">Oracle Website</a>
Link seperti di atas disebut sebagai link absolut. Di sini, alamat website tujuan harus ditulis secara lengkap. Berikut contoh kode yang akan menunjukkan penggunaan link absolut.
Hasil dari contoh kode program di atas adalah seperti gambar di bawah ini.<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Link Absolut</title> </head> <body> <h3 align="center">Penggunaan Link Absolut</h3> <p>Situs mana yang ingin anda buka?</p> <a href="http://www.google.com">Google</a><br /> <a href="http://www.facebook.com">Facebook</a><br /> <a href="http://www.w3schools.com">W3Schools</a><br /> </body> </html>
Link Relatif
Link relatif adalah suatu link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu komputer/server ataupun alamat website yang sama. Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja. Perhatikan contoh kode berikut:
Simpan kode di atas dengan nama index.html. Dan ingat, pada HREF, tertulis kontak.html, penamaan file ataupun dokumen bersifat case sensitive.<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title> Link Relatif (index)</title> </head> <body> <h3>Demo membuat Link Relatif</h3> Untuk informasi lebih lanjut, silahkan kontak kami <a href="kontak.html">disini</a> </body> </html>
Kemudian, buatlah file kontak.html dan simpan di 1 folder dengan index.html tadi. Berikut contoh isi dari kontak.html
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Kontak</title> </head> <body> <p><strong>Kontak kami:</strong></p> <strong>Sekolah Tinggi Teknik PLN</strong> <br />Alamat: Menara PLN, Jl. Lingkar Luar Barat, Duri Kosami, Cengkareng, Jakarta Barat - 11750 <br />Telp. (021) 5440342, 5440344 Fax. (021)5440343 <br />Official Website: www.sttpln.ac.id <br />Email: rektorat@sttpln.ac.id <p><a href="index.html">Kembali ke halaman utama</a> </body> </html>
Kemudian, coba jalankan file index.html, hasil yang akan ditampilkan adalah sebagai berikut:
Jika link pada dokumen itu di klik, maka tampilan akan berubah menjadi seperti berikut:
Link yang terdapat dalam dokumen kontak.html berguna untuk mengarah kembali ke dokumen awal. Jika kita ingin mengakses dokumen lain yang berada dalam subfolder tertentu, maka menggunakan format penulisan sebagai berikut:
<a href="subfolder1/subfolder2/contohlink.html>Pemrograman Web</a>
Format penulisan di atas mengartikan bahwa subfolder1 adalah subfolder dari folder yang menyimpan index.html dan subfolder2 adalah subfolder dari folder subfolder1.
Link dalam Dokumen yang Sama
Link juga dapat berperan untuk mengaktifkan bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Link seperti ini seperti biasanya di jumpuai pada halaman web yang memiliki informati yang panjang atau pada dokumen yang memiliki daftar isi di bagian atasnya. Untuk membuat link seperti ini, terlebih dahulu kita perlu memberikan nama pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju ketika link tersebut diklik. Pemberian nama tersebut dilakukan dengan cara menuliskan kode berikut:
<a name="TujuanLink">Teks atau gambar</a>
Selanjutnya, untuk membuat link yang akan mengarah ke teks atau gambar yang telah dinamai tersebut adalah dengan cara seperti berikut:
<a href="#TujuanLink">Teks atau gambar</a>
Tanda # di atas menunjukkan bahwa tujuan link adalah nama bagian, bukan berupa file. Untuk membuktikan konsep di atas, berikut contoh penggunaannya.
Hasil dari dokumen di atas adalah sebagai berikut.<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Link dalam Dokumen yang Sama</title> </head> <body> <h3 align="center">Bagian Awal</h3> <a href="#link1">Menuju ke Link 1</a><br /> <a href="#link2">Menuju ke Link 2</a><br /> <a href="#link3">Menuju ke Link 3</a><br /> <br /> <br /> <br /> <a name="link1">Ini tujuan link 1</a> <br /> <br /> <br /> <a href="#top" align="right">Kembali ke awal</a> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a name="link2">Ini tujuan link 2</a> <br /> <br /> <br /> <a href="#top" align="right">Kembali ke awal</a> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a name="link3">Ini tujuan link 3</a> <br /> <br /> <br /> <a href="#top" align="right">Kembali ke awal</a> </body> </html>
Link ke Bagian Tertentu dalam Dokumen Lain
Link juga dapat mengarah ke suatu bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link semacam ini, bagian tertentu harus ditandai dengan pemberian nama seperti di atas. Yang berbeda hanyalah pada penulisan tujuan link-nya saja. Pada kasus seperti ini, kita perlu menambahkan nama bagian pada tujuan link, seperti berikut:
<a href="NamaFile#NamaBagian">Teks atau gambar</a>
Simpan dokumen berikut sebagai file1.html
Hasilnya adalah seperti gambar di bawah ini.<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Link Bagian Tertentu Dokumen Lain</title> </head> <body> <h3>Demo Membuat link ke bagian tertentu dalam dokumen lain</h3> <a href="file2.html#bagian3">Pindah ke Bagian 3 dalam file 2</a> </body> </html> Kemudian, simpan dokumen berikut dengan nama file2.html yang diletakkan di folder yang sama dengan file1.html <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Dokumen Lain</title> </head> <body> <h1>Dokumen Lain File 2</h1> <h3><a name="bagian1">Bagian 1</a></h3> <br /> <br /> <br /> <h3><a name="bagian2">Bagian 2</a></h3> <br /> <br /> <br /> <h3><a name="bagian3">Bagian 3</a></h3> <br /> <br /> <br /> </body> </html>
Jika link di atas diklik, maka akan menampilkan hasil seperti gambar di bawah ini.
Penentuan Target Link
Target atau tujuan dokumen yang dihubungkan melalui suatu link dapat ditentukan sendiri oleh kita. Target yang dimaksud di sini adalah tempat dimana dokumen akan ditempatkan atau ditampilkan. Dalam keadaan default (ketika atribut TARGET tidak disertakan), dokumen baru yang ditampilkan pada saat link ddipilih akan menimpa dokumen lama atau biasa kita sebut dengan dibuka di window yang sama (open in current window). Untuk melakukan hal ini, kita hanya perlu menambahkan atribut TARGET di dalam tag <a> yang memiliki bentuk umum penulisan sebagai berikut:
<a href="NamaDokumen" target="namaTarget">Text Link</a>
NamaDokumen adalah nama dokumen yang akan ditampilkan jika link bersangkutan dipilih/diklik.
NamaTarget adalah target atau tempat tujuan dokumen yang akan ditampilkan. namaTarget bisa bernilai TOP, _BLANK, maupun nama frame (jika layar web kita bagi dengan menggunakan frame).
Link untuk Email
Untuk menambahkan link yang memungkinkan pengunjung halaman web yang dibuat mengirimkan email dengan tujuan mengirimkan pesan, pertanyaan, atau komentar ditujukan secara langsung kepada pemilik halaman web, kita dapat menggunakan tag <a href> namun ditambahkan beberapa kode sebagai berikut:
<a href="mailto:AlamatEmail?subject=SubjekEmail">Teks atau gambar</a>
Apabila kita menginginkan pengunjung mengirimkan email dengan setting isi body email tertentu, maka kita dapat menuliskan kode sebagai berikut:
<a href="mailto:AlamatEmail?body=IsiBodyEmail">Teks atau gambar</a>
Atau kita dapat mengkombinasikan keduanya dengan kode berikut:
<a href="mailto:AlamatEmail?subject=SubjekEmail&body=IsiBodyEmail">Teks atau Gambar</a>
Untuk latihan cobalah buatlah sebuah file html dengan ketentuan:
- Judul HTML: Homepage Pribadi
- Yang ditampilkan:
- Nama : [nama anda]
- NIM: [nim atau asal]
- Kelas: [kelas anda atau asal]
- Tempat/Tanggal Lahir: [tempat lahir]/[tanggal lahir]
- Alamat: [alamat anda (gunakan textarea dengan aturan lebar 10, jadi jika sudah melebihi 10 karakter akan pindah baris)]
- Riwayat pendidikan: (petunjuk, gunakan ordered list)
- Email: [email anda dengan link address mailto]
- Homepage: [homepage anda, jika diklik, buka tab baru]
- Hobby: [gunakan textarea, jika lebih dari satu, pindah baris baru] <----------------------------garis horizontal---------------------------->
- Deskripsi Pribadi Saya: [isi tentang pribadi anda, gunakan pemformatan page]
A. SD: B. SMP: C. SMA:
Contoh tampilan kira-kira akan seperti ini:
Jadi sampai disini postingan kali ini. Untuk selanjutnya akan dibahas tentang List, Form, dll dalam HTML
3 Komentar
terimakasih banyak, sangat membantu sekali
BalasHapusTerimakasih
BalasHapusToko Komputer Online
Artikelnya tentang Cara Membuat Link di HTML ini sangat bermanfaat. Karena disertai dengan tutorial yang mudah. Terima kasih
BalasHapusKunjungi web kampus saya : Atma Luhur
Kunjungi web saya : Rismawati