Tutorial Dasar HTML & HTML5: Links (Part 4)

Secara bahasa, Link adalah tautan atau hubungan antar halaman. Link ini lah yang memungkinkan kita berpindah dari satu halaman web ke halaman web lainnya.

Teman-teman biasanya akan menemukan jenis-jenis link seperti berikut:

• Link antar website
• Link antar halaman dalam website yang sama
• Link antar section dalam halaman yang sama
• Link yang membuka jendela atau tab baru
• Link yang membuka aplikasi email
• Link Tap to Call

Cara Penggunaan

Links digunakan dengan membungkus kata/kalimat dengan <a> element. Users nantinya bisa meng-click kata/kalimat yang ada di antara opening tag dan closing tag.

Pada gambar di atas, teks YouTube berada di antara opening <a> tag dan closing </a> tag. Teks YouTube tersebut bisa disebut juga sebagai Link Text.

Link Antar Website

Seperti pada gambar sebelumnya, di dalam opening <a> tag, terdapat atribut href. Atribut href ini diisi dengan alamat website yang dituju ketika Link Text di-click.

Ketika teman-teman ingin menautkan ke website lain, href harus berisi alamat lengkap dari website yang dituju, hal ini disebut dengan absolute URL. Secara default, browser akan menampilkan Link Text dengan teks bergaris bawah dan berwarna biru.

URL adalah singkatan dari Uniform Resource Locator. Setiap halaman web mempunyai URL masing-masing. Inilah alamat web yang biasa teman-teman ketik pada browser saat ingin mengunjungi suatu halam web. Absolute URL dimulai dengan nama domain dari suatu website dan diikuti oleh path dari halaman tertentu. Jika tidak ada path halaman yang dituju, maka browser akan menampilkan halaman index atau homepage dari website yang dituju.

Link Antar Halaman Dalam Website Yang Sama

Saat menautkan ke halaman lain tapi masih tetap pada website yang sama, teman-teman tidak perlu menuliskan nama domain website. Hal ini disebut juga dengan relative URL. Jika halaman web yang menautkan ke halaman lain yang ingin dituju berada pada folder yang sama, maka href atribut cukup diisi dengan nama file dari halaman tersebut.

                 <!-- index.html document-->
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="about.html">About</a></li>
</ul>

Jika halaman web yang ditautkan berada di folder yang berbeda, kita perlu menggunakan syntax yang sedikit lebih kompleks yang menunjukkan relasi antara halaman yang satu dengan yang lainnya. Tapi jangan khawatir, kita akan membahas ini sebentar lagi.

Relative url adalah versi singkat dari absolute url. Jika pada absolute url kita perlu mengetikkan lengkap nama domain website, hal itu tidak perlu di relative url. Teman-teman hanya butuh menyertakan nama filenya saja.

Relative URL

Relative url biasanya digunakan saat kita ingin menautkan halaman dalam website kita sendiri. Relative url sangat membantu saat kita sedang membuat website. Kita tidak perlu lagi mengetikkan nama domain lengkapnya, cukup mengetikkan path-nya saja.

Secara bahasa relative artinya adalah hubungan atau kaitan. Nah, di struktur folder ini juga seperti itu, kita bisa menentukan apa hubungan dari satu file ke file lain. Di sini ada istilah yang perlu kita ketahui sebelumnya yaitu, grandparent, parent, child dan grandchild. "Terus, ngegunainnya gimana ?". Mungkin teman-teman sudah tidak sabar. Baiklah, ibaratkan kita punya struktur direktori seperti pada gambar berikut.

Dari gambar di atas kita punya satu folder bernama MyWebsite, folder MyWebsite adalah parent dari folder yang ada di dalamnya yaitu post, dan folder post adalah child dari folder MyWebsite. Sementara itu folder post punya 2 child, yaitu folder tutorial dan quiz. Kedua folder tersebut adalah grandchild dari folder MyWebsite, dan MyWebsite sendiri adalah grandparent dari folder tutorial dan quiz.

Penggunaannya dalam link adalah sebagai berikut:

Folder yang sama

Untuk menautkan suatu halaman ke halaman lain, tapi masih dalam satu folder yang sama kita tinggal mengetikkan nama filnya lengkap dengan ekstensi filenya. Sebagai contoh kita membuat link di file index.html di folder turorial dan menautkannya dengan file html_tutorial.html yang berada di folder yang sama.

<a href="html_tutorial.html">Tutorial HTML</a>

Child Folder

Untuk child folder, ketikkan nama folder diikuti garis miring (forward slash) kemudian nama filenya. Sebagai contoh, ibaratkan pada gambar di atas kita punya file index.html di folder post, dan ingin kita hubungkan dengan file html_tutorial.html di folder tutorial.

<a href="tutorial/html_tutorial.html">Tutorial HTML</a>

Grandchild Folder

Ketikkan nama child folder diikuti forward slash, kemudian nama grandchild folder, diikuti forward slash lagi dan kemudian nama filenya. Sebagai contoh kita inging menghubungkan file index.html di folder MyWebsite dengan file html_quiz di folder quiz.

<a href="post/quiz/html_quiz.html">HTML Quiz</a>

Parent Folder

Ketik ../ untuk naik satu folder, kemudian diikuti nama file. Sebagai contoh, ibaratkan kita punya file daftar_isi.html di folder post dan kita menautkan file tersebut dari file html_quiz.html di folder quiz.

<a href="../daftar_isi.html">Daftar Isi</a>

Grandparent Folder

Mirip seperti pada parent folder kita mengetikkan ../ juga di sini. Bedanya kita mengetiknya dua kali. Contoh, jika kita ingin menghubungkan file html_tutorial.html di folder tutorial dengan file index.html yang berada di root folder (MyWebsite).

<a href="../../index.html">HOME</a>

Link antar section dalam halaman yang sama

Jika teman-teman perhatikan pada list di paragraf pertama dan mengklik salah satu, teman-teman akan berpindah ke bagian tertentu sesuai dengan daftar yang teman-teman klik, dan itulah yang saya maksud di sini. Pada html ada atribut id yang bisa diberikan pada setiap elemen html. Contohnya di postingan ini saya memberikan atribut id pada setiap section untuk mempermudah teman-teman.

Untuk menggunakannya, sebelumnya di salah satu elemen html sudah kita berikan atribut id="footer", kemudian pada atribut href di elemen <a> kita ketikkan nama id tadi diawali dengan # (hashtag).

<a href="#footer">Footer</a>

<div id="footer">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
  Dolor amet quidem fugiat alias corrupti reiciendis unde architecto, 
  iure qui dignissimos quam? Repellendus dolorum iure pariatur!</p>
</div>

Link yang Membuka Jendela/Tab Baru

Teman-teman mungkin sudah sering melihat ini. Pemakaiannya cukup simpel, tinggal menambahkan atribut target="_blank" pada opening <a> tag.

<a href="https://www.youtube.com/" target="_blank">YouTube</a>

Link yang Membuka Aplikasi Email

Mungkin teman-teman pernah membaca-baca disuatu website, kemudian membuka bagian Contact dari website tersebut dan saat teman-teman mengklik tombol "Kirim Pesan" tiba-tiba aplikasi pengolah email milik teman-teman terbuka. Kita juga bisa membuat yang seperti itu, mirip dengan yang sudah kita buat sebelumnya, bedanya isi dari atribut href bukanlah alamat website atau URL, melainkan alamat email yang diawali dengan mailto:.

<a href="mailto:me@example.com">Kirim Pesan</a>

Link Tap to Call

Mirip dengan link mailto: yang membuka aplikasi pengolah email, link kali ini akan menghubungi nomor telepon yang ditentukan saat diklik. bedanya kita mengisi atribut href dengan nomor telepon lengkap dengan kode telepon negara.

<a href="tel:+6281234567">Hubungi Kami</a>

Link jenis ini sebaiknya digunakan saat target audience dari website kita adalah pengguna smartphone, agar fungsi link ini lebih efektif.

Kesimpulan

• Link dibuat dengan <a> elemen
• <a> punya atribut href yang mengindikasikan alamat yang akan dituju
• Jika ingin menghubungkan/menautkan ke halaman lain di website yang sama, akan sangat baik jika menggunakan relative URL
• Kita bisa membuat link yang bisa membuka program pengolah email dan menghubungi nomor telepon
• Kita bisa menggunakan atribut id sebagai target untuk berpindah pada halaman yang sama dengan link

Demikian saja yang bisa saya jelaskan tentang Tutorial Dasar HTML & HTML5: Links. Jika teman-teman punya pertanyaan silahkan tinggalkan di kolom komentar. Terima kasih dan sampai jumpa.