HTML Dasar Part 10 : Cara Membuat Link di HTML

HTML Dasar Part 10: Cara Membuat Link di HTML

Pada tutorial yang lalu, kita telah membahas mengenai cara membuat daftar atau list di HTML. Setelah kita dapat membuat daftar, setidaknya judul-judul artikel dalam suatu website, kita perlu menambahkan beberapa link pada judul tersebut agar dapat berpindah menuju artikelnya. Pada kesempatan kali ini, kita akan membahas cara membuat link di HTML.

----------------------------------------------------------------------------------------------------

Cara Membuat Link di HTML

mahaamesha.com Mari agan / aganwati ingat-ingat kembali, apa kepanjangan HTML? HTML adalah kepanjangan dari Hypertext Markup Language. Kata “Hypertext” dalam singkatan HTML merupakan latar belakang adanya link. Maksudnya adalah untuk membuat sebuah teks yang apabila di-klik akan memunculkan halaman tujuan website tersebut. Link tidak hanya diterapkan pada teks saja, tetapi juga dapat diterapkan pada gambar.

HTML menyediakan sebuah tag untuk membuat sebuah link dari suatu teks atau gambar, yaitu tag <a>…</a>. Tag ini ditulis dengan huruf “a” yang merupakan singkatan dari anchor (jangkar). Semua tulisan atau pun gambar yang diapit di antara tag <a> dianggap sebagai link oleh web browser. Atribut terpenting dalam tag <a> adalah href. Href sendiri merupakan singkatan dari Hypertext Reference. Atribut href ini berisikan alamat website yang dituju.

Berikut ini adalah contoh dari penggunaan tag <a> :

<!DOCTYPE html>

<html>

<head>

<title>Ma Haamesha | Link</title>

</head>

<body>

<h1>Penggunaan Tag Link</h1>

Tag a digunakan untuk membuka atau berpindah ke halaman website yang lain.<br/>

Semua tulisan atau gambar yang berada di antara tag a dianggap web browser sebagai sebuah link.<br/>

Dimana sebuah link apabila di-klik, akan menuju ke halaman website yang dituju.<br/>

<p>Berikut contoh link menuju YouTube<br/>

<a href="http://www.youtube.com">Test this link by Click Me!!!</a>

</p>

</body>

</html>

Setelah mengetikkan kode HTML tersebut, silahkan save dengan nama “Link0.html” (tanpa tanda petik) dan jangan lupa formatnya, .html. Simpanlah pada sebuah folder. Agan / aganwati juga boleh menyimpan file tersebut dengan nama sesuka hati.

Hasil dari kode HTML di atas adalah seperti gambar di bawah ini.

Ketika agan / aganwati klik link tersebut, mungkin tidak akan muncul apa-apa, kecuali Server Not Found. Tentu saja, hal itu dikarenakan tidak adanya koneksi internet. Untuk mengakses link tersebut kita membutuhkan internet karena yang dicantumkan adalah alamat YouTube yang hanya dapat diakses saat online saja.

----------------------------------------------------------------------------------------------------

Eksternal Link & Internal Link

Penggunaan penulisan alamat pada atribut href yang kita gunakan tadi, href=”http://www.alamat_web.com”, merupakan alamat link yang ditulis secara lengkap. Penulisan alamat link seperti ini juga disebut dengan eksternal link. Eksternal link ini digunakan untuk membuat link ke alamat web lain di luar website yang saat ini sedang dibuka. Eksternal link juga sering disebut dengan alamat absolut.

Contoh dari eksternal link / alamat absolut :

Tulisan yang green highlight merupakan nama alamat website. Sedangkan, yang yellow highlight merupakan halaman yang dituju dari website tersebut.

Namun, apabila kita ingin membuat link yang berasal dari alamat website yang sama atau berasal dari folder yang sama, maka kita tidak perlu menyertakan nama alamat websitenya. Agan / aganwati juga tidak perlu menuliskan alamat websitenya secara lengkap, tuliskan seperti ini saja, href=”halaman_tujuan.html”. Penulisan menggunakan cara ini disebut dengan internal link atau juga sering disebut dengan alamat relatif.

Contoh dari internal link / alamat relatif :

Tulisan yellow highlight tersebut merupakan halaman yang dituju, dimana berasal dari website atau folder yang sama.

Berikut ini mahaamesha.com akan memberikan contohnya saja supaya lebih jelas. Siahkan buka Notepad ++ dan ketikkan kode HTML berikut.

<!DOCTYPE html>

<html>

<head>

<title>Ma Haamesha | Link</title>

</head>

<body>

<h1>Eksternal Link vs Internal Link</h1>

<p>Contoh eksternal link sudah diberikan di atas tadi.

mahaamesha.com tidak akan mengulangnya,

namun menjadikannya sebagai contoh dari internal link itu sendiri.</p>

<p>Contoh internal link :

<a href="Link0.html">Click here!</a></p>

</body>

</html>

Save dengan nama “Link1.html” (tanpa tanda petik) dalam satu folder dengan file sebelumnya (Link0.html). Setelah itu, launch di web browser.

Ingat syarat dari internal link ini, file yang akan dijalankan harus dalam satu website atau dalam satu folder. Apabila tidak, maka internal link tidak bekerja.

“NB :Apabila agan membuat folder tersebut dalam beberapa sub-folder, gunakanlah penulisan garis miring (/) untuk setiap tingkatan folder di atasnya.”

Ex :
href=”…/…/…/Link1.html” → jika ada 3 tingkat sub-folder di luar folder saat ini.

href=”…/…/Link1.html” → jika ada 2 tingkat sub-folder di luar folder saat ini.

----------------------------------------------------------------------------------------------------

Masih ada banyak atribut dari tag a selain href, yaitu target, style, class, name, dan atribut id. Namun, cukup untuk tutorial kali ini, pantau terus updatean posting terbaru mahaamesha.com. Pada tutorial selanjutnya, kita akan membahas cara menambahkan gambar di HTML.

Created by mahaamesha :}

Search This Blog

Ma Haamesha