Belajar HTML 8: Cara membuat hyperlink dengan html sangat mudah

membuat hyperlink dengan html

Pernahkah kamu mendengar istilah Hyperlink? berikut penjelasan hyperlink dan cara membuat hyperlink dengan html yang sangat mudah untuk dilakukan.

Penjelasan Apa Itu Hyperlink?

Dalam pembuatan halaman web, hyperlink adalah tautan yang menghubungkan satu halaman web dengan halaman web lainnya atau dengan bagian-bagian tertentu dalam halaman yang sama.

Jika diartikan secara umum Hyperlink merupakan istilah lain yang biasanya dalam kehidupan sehari-hari kita menyebut sebuah alamat url dengan sebutan Link.

Hyperlink sendiri dilihat dari tampilan yang ditampilkan oleh browser, ditandai dengan teks atau gambar yang secara mata jika dilihat akan terlihat berbeda dengan teks atau gambar lainnya.

Daripada penjelasan tentang hyperlink semakin panjang kita bahas, lebih baik mari kita belajar cara membuat hyperlink dengan HTML sangatlah mudah. Berikut ini adalah struktur kode yang harus kita ketahui dalam membuat Hyperlink:

Struktur kode membuat Hyperlink


<a href="URL">Link Teks</a>

Penjelasan kode:

<a> adalah elemen html yang disebut dengan anchor di HTMl.
href="" adalah atribut daripada elemen html <a>
Link Teks adalah elemen konten yang nantinya akan ditampilkan sebagai link html
URL adalah alamat url yang nantinya akan dituju oleh user saat user mengklik link

Dalam membuat sebuah link dengan html, ada beberapa jenis link/hyperlink yang harus kita ketahui terlebih dahulu, diantaranya

1. Internal Link

Internal link sendiri merujuk pada alamat url, yang dimana url tersebut merupakan alamat posisi daripada file html yang ada di lokal komputer yang kita miliki.

agar lebih jelas misal kita mempunyai 2 buah file html sebagai berikut:

Beranda.html
Profil.html

Ke 2 file tersebut kita simpan dalam sebuah folder yang bernama WEBKU.

Berikut gambaran struktur ke dua filenya dalam folder WEBKU:

.
└─ WEBku/
    ├── Beranda.html
    └── Profil.html

Kemudian kita isi kode html didalam file Beranda.html dengan kode sebagai berikut:


<!Doctype html>
<html>
<head>
  <title>Beranda</title>
</head>
<body>
  <h1>Ini adalah halaman beranda</h1>
  <br>
  <a href="Profil.html">Profil</a>
</body>
</html>

Dan isi juga dengan kode html untuk file Profil.html seperti dibawah ini:


<!Doctype html>
<html>
<head>
  <title>Profil</title>
</head>
<body>
  <h1>Ini adalah halaman profil</h1>
  <br>
  <a href="Beranda.html">Beranda</a>
</body>
</html>

Jika kita membuka file Beranda.html, nantinya akan tampil sebagai halaman web seperti dibawah ini:

Begitu juga dengan file Profil.html, akan tampil seperti gambar dibawah ini:

Yang menjadi pertanyaan, apa kegunaan dari hiperlynk ini? jawabannya tentu saja memudahkan kita untuk bernavigasi atau berpindah halaman mulai dari halaman saat ini ke halaman yang dituju.

Dari contoh diatas kita sudah membuat 2 buah file (Beranda.html, Profil.html), ketika kita saat ini sedang berada dihalaman Beranda.html dan mau berpindah ke halaman Profil.html.

Kita dapat mengklik link (tautan) yang telah kita buat dibagian bawah teks halaman masing-masing untuk melakukan navigasi(perpindahan halaman).

Simak animasinya dibawah ini!

2. Eksternal Link

Eksternal Link ialah link yang nantinya mengarahkan kita ke halaman atau situs website lain yang tidak berada di lokal komputer kita.

Itu artinya link tersebut saat diklik maka kita akan berpindah halaman dari halaman web kita saat ini ke halaman web komputer lain, dengan menggunakan jalur koneksi internet.

Tentunya hal ini berbeda dengan jenis hyperlink internal link, dimana saat kita mengklik sebuah link halaman webnya akan berpindah akan tetapi tidak perlu menggunakan koneksi internet karena setiap halamannya berada di penyimpanan lokal komputer kita.

Agar lebih mudah memahami sebaiknya kita langsung praktek saja, dengan menambahkan sebuah file baru didalam folder WEBku, dengan nama file Contact.html.

Nantinya struk folder dan filenya akan seperti berikut:


└─ WEBku/
    ├── Beranda.html
    ├── Profil.html
    └── Contact.html

Untuk file Contact.html dapat kita isi dengan kode seperti dibawah ini:


<!Doctype html>
<html>
<head>
  <title>Contact</title>
</head>
<body>
  <h1>Ini adalah halaman contact</h1>
  <br>
  <a href="https://gmail.com">Gmail</a>
</body>
</html>

Berikut tampilan dari contoh kode eksternal link diatas:

kode yang terletak pada atribut href yaitu https://gmail.com nantinya ketika diklik maka akan diarahkan langsung pada tampilan halaman web gmail.

Dalam hal ini https://gmail.com merupakan sebuah alamat url daripada halaman web gmail, dimana halaman web gmail tidak berada pada penyimpanan lokal komputer kita, akan tetapi merupakan halaman web yang berada di penyimpanan komputer lain.

Untuk lebih jelasnya lihat apa yang terjadi jika kita mengklik sebuah eksternal link, apa yang akan terjadi? simak gambar berikut:

Baiklah dari ke 2 jenis hyperlink yang telah dijelaskan, kita dapat memahami apa yang menjadi perbedaan antara Internal Link dan Eksternal Link.

Langkah-langkah membuat Hyperlink

Setelah mengetahui tipe atau jenis dari hyperlink, selanjutnya kita akan belajar bagaimana membuat hyperlink dalam html:

1. Menentukan teks atau gambar yang akan dijadikan hyperlink

Langkah pertama dalam membuat hyperlink adalah menentukan teks atau gambar yang akan dijadikan hyperlink.

Dalam membuat hyperlink kita tidak harus menggunakan teks saja, akan tetapi sebuah gambar juga dapat digunakan untuk membuat Hyperlink.

Teks atau gambar ini akan menjadi tautan yang akan menghubungkan halaman web dengan halaman web lainnya atau dengan bagian-bagian tertentu dalam halaman yang sama.

Contoh link teks:


<a>Staykoding</a>

Hasilnya di browser:

Jika kita mau menggunakan gambar, sebagai link maka tempatkan tag img html didalam tag a.

Contoh link gambar:


<a>
  <img src="" />
</a>

Hasilnya di browser:

link diatas masih belum dapat berfungsi karena hyperlink diatas belum sempurna

2. Menentukan alamat URL yang akan dituju

Setelah menentukan teks atau gambar yang akan dijadikan hyperlink, langkah selanjutnya adalah menentukan alamat URL yang akan dituju.

URL adalah singkatan dari Uniform Resource Locator, yaitu alamat web yang terdiri dari protokol, domain, dan path.

Misal disini contohnya untuk alamat tujuannya kita gunakan untuk alamat URL dari blog ini ialah https://staykoding.com yang nantinya akan digunakan pada langkah ke 3.

3. Tambahkan atribut href

Pada langkah ke 3 ini kita menambahkan atribut href pada tag a.

Atribut href ini digunakan selain untuk menentukan alamat url tujuan, akan tetapi juga untuk menambahkan fungsionalitas agar link kita sebelumnya dapat berfungsi saat di klik.

Contoh kode pada link teks:


<a href="https://staykoding.com">Staykoding</a>

Hasilnya di browser:

4. Tambahkan atribut target

Selain menambahkan atribut href, kita juga dapat menambahkan atribut target.

Target digunakan untuk menentukan dimana halaman web yang dituju akan dibuka. ada beberapa nilai target yang dapat digunakan, yaitu _blank, _self, _parent, dan _top.

Penjelasan nilai pada atribut target:

_blank: halaman web akan dibuka dalam tab atau jendela baru.
_self: halaman web akan dibuka dalam frame atau jendela yang sama.
_parent: halaman web akan dibuka dalam frame parent.
_top: halaman web akan dibuka dalam frame paling atas.

Contoh implementasi nilai _blank:


<a href="https://staykoding.com" target="_blank">Staykoding</a>

5. Tambahkan atribut title

Atribut title digunakan untuk menampilkan teks saat kursor diarahkan ke hyperlink.

Title dapat membantu pengguna untuk mengetahui tujuan hyperlink sebelum mengkliknya.

Berikut contoh kodenya:


<a href="https://staykoding.com" target="_blank" title="Buka blog Staykoding">Staykoding</a>

Ke 5 langkah diatas merupakan cara yang dilakukan untuk membuat hyperlink yang mudah untuk dinavigasi untuk berpindah antar halaman web yang berbeda.

Bagaimana jika kita punya1 buah halaman web yang isinya ada banyak elemen yang terdiri dari kalimat maupun paragraf yang panjang.

Serta ada banyak lagi elemen lain seperti gambar maupun video, sehingga menyebabkan konten pada halaman tersebut menjadi banyak dan memanjang ke bawah.

Akhirnya menyebabkan kita harus menscrolling halaman sampai kebawah, tentu saja itu terkadang membuat kita merasa tidak menghemat waktu karena halaman pada konten web yang terlalu panjang.

Dalam membuat hyperlink juga ada satu cara untuk mengatasi hal tersebut yaitu kita membuat saja sebuah hyperlink yang biasa disebut dengan Anchor.

Membuat Anchor Hyperlink

Anchor digunakan untuk membuat hyperlink yang mengarah ke bagian-bagian tertentu dalam halaman web yang sama.

Caranya adalah dengan menambahkan atribut href dengan nilai # dan menambahkan atribut id pada elemen yang akan dijadikan anchor.

Contoh implementasinya dalam bentuk kode html:


<a href="#section1">Ke Bagian 1</a>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<h2 id="section1">Bagian 1</h2>

Hasilnya jika di lihat di browser:

Maka yang terjadi saat link Ke Bagian 1 di klik, yang terjadi adalah secara otomatis jendela browser akan mengarah kebagian elemen html yang memiliki atribut id dengan nilai section1.

Kesimpulannya anchor link merupakan cara yang dapat dilakukan saat kita ingin bernavigasi dihalaman web yang sama agar lebih memudahkan kita sebagai pengguna untuk langsung menemukan konten pada halaman yang ingin kita lihat atau baca.

Kesimpulan

Dalam artikel ini, kita belajar tentang hyperlink dan bagaimana cara membuatnya menggunakan HTML. Hyperlink adalah tautan yang menghubungkan halaman web dengan halaman web lainnya atau bagian-bagian dalam halaman yang sama. Membuat hyperlink dengan HTML ternyata sangat mudah dan tidak memerlukan pengetahuan khusus.

Dalam HTML, kita menggunakan elemen <a> untuk membuat hyperlink. Kita perlu menentukan URL yang akan dituju dalam atribut href dan teks atau gambar yang akan menjadi tautan di dalam elemen <a>. Dengan mengikuti beberapa langkah sederhana, kita dapat membuat hyperlink yang berfungsi dengan baik.

Artikel ini juga menjelaskan dua jenis hyperlink, yaitu hyperlink internal dan hyperlink eksternal. Hyperlink internal digunakan untuk menghubungkan halaman web dengan halaman web lain atau bagian-bagian dalam halaman yang sama di komputer lokal kita. Sementara hyperlink eksternal mengarahkan pengunjung ke halaman web yang berada di komputer lain melalui koneksi internet.

Dengan mengetahui cara membuat hyperlink menggunakan HTML, kita dapat dengan mudah membuat tautan yang membantu navigasi pengunjung antara halaman-halaman web. Selain itu, artikel ini juga menjelaskan cara membuat tautan ke bagian-bagian tertentu dalam halaman yang sama menggunakan anchor hyperlink.

Secara keseluruhan, membuat hyperlink dengan HTML sangat mudah dan bermanfaat untuk menghubungkan halaman web dan memudahkan navigasi pengunjung. Dengan menggunakan pengetahuan ini, kita dapat membuat tautan yang menarik dan fungsional dalam halaman web kita.

Selanjutnya belajar apa?

Berikutnya, kita akan belajar cara menampilkan gambar di html. Dimana gambar merupakan sebuah visual konten yang dapat memperindah tampilan halaman web.

Pelajari : 📖 Belajar HTML 09: cara menampilkan gambar di HTML

Daftar Tutorial HTML

Comments