Belajar HTML #07 : Membuat Link di HTML

Anak Males – Kali ini kita akan belajar HTML untuk membuat link. Bagaimana caranya ? simak tutorial html ini.

HTML adalah bahasa mark-up yang digunakan untuk membuat halaman web. Salah satu fitur yang sering digunakan dalam HTML adalah link.

Link memungkinkan kita untuk menautkan halaman web ke halaman lain atau ke dokumen lainnya seperti gambar atau file PDF.

Apa itu Link di HTML

Link adalah fitur yang sering digunakan dalam HTML yang memungkinkan kita untuk menautkan halaman web ke halaman lain atau ke dokumen lainnya seperti gambar atau file PDF.

Link biasanya ditampilkan sebagai teks atau gambar yang dapat diklik oleh pengguna. Ketika pengguna mengklik link tersebut, ia akan diarahkan ke halaman atau dokumen yang ditautkan.

Link dibuat dengan menggunakan tag <a> (anchor) dalam HTML. Tag ini akan menandai bagian yang akan menjadi link, dan atribut href akan menentukan tujuan dari link tersebut.

Misalnya, jika kita ingin menautkan ke halaman lain, masukkan alamat halaman tersebut sebagai nilai dari atribut href.

Cara Membuat Link Pada HTML

Berikut ini adalah cara membuat link pada HTML:

1. Buka file HTML yang akan ditambahkan link.
2. Pada bagian yang ingin ditambahkan link, tambahkan tag <a> (anchor). Tag ini akan menandai bagian yang akan menjadi link.
3. Masukkan atribut href pada tag <a>. Atribut ini akan menentukan tujuan dari link tersebut. Misalnya, jika kita ingin menautkan ke halaman lain, masukkan alamat halaman tersebut sebagai nilai dari atribut href.
4. Masukkan teks yang ingin ditampilkan sebagai link. Teks ini akan ditampilkan sebagai tautan yang dapat diklik oleh pengguna.
5. Tutup tag <a> dengan menambahkan </a> pada akhir teks yang dijadikan link.

Contoh penggunaan tag <a> dalam HTML adalah seperti ini:

<a href="https://www.contoh.com">Klik di sini untuk ke halaman contoh</a>

Dengan menambahkan kode di atas, pengguna akan melihat teks “Klik di sini untuk ke halaman contoh” yang akan berfungsi sebagai link ke halaman https://www.contoh.com ketika diklik.

Selain itu, ada beberapa atribut lain yang dapat digunakan pada tag <a> untuk mengontrol cara link ditampilkan dan diakses. Beberapa atribut tersebut antara lain:

• target: Atribut ini menentukan cara link dibuka. Misalnya, jika nilai atribut ini diatur ke _blank, link akan dibuka di jendela baru.
• rel: Atribut ini menentukan hubungan antara halaman yang saat ini dibuka dengan halaman yang ditautkan.
• title: Atribut ini menambahkan teks informatif yang akan ditampilkan ketika pengguna mengarahkan kursor ke link.

Manfaat Menggunakan Link Untuk SEO Website

Link atau tautan merupakan salah satu faktor yang dipertimbangkan oleh mesin pencari dalam menentukan peringkat sebuah website.

Link yang masuk ke suatu website disebut backlink, dan backlink merupakan salah satu indikator kepercayaan mesin pencari terhadap suatu website.

Semakin banyak backlink yang masuk ke suatu website, maka semakin tinggi peringkat website tersebut di mesin pencari.

Dengan demikian, link atau tautan memiliki manfaat yang cukup besar dalam meningkatkan SEO (Search Engine Optimization) suatu website. Beberapa manfaat link dalam SEO adalah sebagai berikut:

1. Meningkatkan kepercayaan mesin pencari: Backlink dari website lain merupakan salah satu indikator kepercayaan mesin pencari terhadap suatu website. Jika website lain memberikan link ke website kita, maka mesin pencari akan menganggap website kita memiliki konten yang bermanfaat dan layak untuk diperhitungkan dalam peringkat pencarian.
2. Meningkatkan lalu lintas: Link yang masuk ke suatu website dapat meningkatkan lalu lintas website tersebut. Hal ini terjadi karena ada pengguna yang mengklik link tersebut dan mengunjungi website kita. Dengan demikian, link dapat menjadi salah satu sumber lalu lintas yang bermanfaat bagi website kita.
3. Memperluas jangkauan website: Link dapat memperluas jangkauan website kita ke audiens yang lebih luas. Misalnya, jika website kita ditautkan oleh website lain yang memiliki audiens yang lebih luas, maka website kita juga akan terlihat oleh audiens tersebut. Dengan demikian, link dapat menjadi salah satu cara efektif untuk memperluas jangkauan website kita.
4. Meningkatkan user experience: Link yang berkualitas dapat meningkatkan user experience bagi pengunjung website kita. Link yang berkualitas dapat membawa pengunjung ke website lain yang memiliki konten yang berkaitan dan bermanfaat bagi mereka. Dengan demikian, pengunjung akan merasa lebih terpuaskan dengan konten yang ditawarkan website kita.

Dari beberapa manfaat di atas, dapat disimpulkan bahwa link memiliki peran yang cukup penting dalam meningkatkan SEO suatu website. Oleh karena itu, website kita harus rutin memperoleh backlink dari website lain yang terpercaya dan memiliki konten

Jenis Jenis Link di HTML

Dalam HTML, terdapat beberapa jenis link yang dapat digunakan sesuai dengan kebutuhan. Berikut ini adalah beberapa jenis link yang sering digunakan dalam HTML:

Internal Link

Internal link adalah link yang menautkan ke halaman atau dokumen di dalam website yang sama. Internal link biasanya digunakan untuk mengarahkan pengunjung ke bagian tertentu di dalam website atau untuk menampilkan konten yang berkaitan di halaman lain.

Internal link sangat bermanfaat dalam meningkatkan SEO (Search Engine Optimization) suatu website. Hal ini karena internal link membantu mesin pencari untuk mengindeks konten di dalam website dengan lebih baik, sehingga website tersebut lebih mudah ditemukan oleh pengguna melalui mesin pencari.

Selain itu, internal link juga membantu pengunjung untuk menjelajahi website dengan lebih mudah dan menemukan konten yang diinginkan dengan lebih cepat.

Untuk membuat internal link dalam HTML, kita dapat menggunakan tag <a> dengan atribut href yang diikuti dengan alamat URL dari halaman atau dokumen yang ingin ditautkan. Contohnya seperti ini:

<a href="/kontak">Halaman kontak</a>

Dengan menambahkan kode di atas, pengguna akan melihat teks “Halaman kontak” yang akan berfungsi sebagai link ke halaman kontak di website yang sama ketika diklik.

Atau kita bisa melinkan ke angker. Anker adalah tag yang digunakan untuk membuat target link di dalam halaman yang sama.

Anker ditandai dengan tag <a> dengan atribut name. Kemudian, link ke anker dapat dibuat dengan menggunakan atribut href yang diikuti dengan tanda pagar (#) dan nama anker.

<a name="top">Ini adalah anker</a>

...
<a name="#top">Klik disini</a>

Eksternal Link

Eksternal link adalah link yang menautkan ke halaman atau dokumen di website lain. Eksternal link biasanya digunakan untuk memberikan rujukan ke konten yang bermanfaat di website lain atau untuk mengarahkan pengunjung ke website lain yang terkait dengan konten yang ditampilkan di website kita.

Eksternal link juga memiliki peran yang penting dalam meningkatkan SEO (Search Engine Optimization) suatu website.

Hal ini karena eksternal link merupakan salah satu indikator kepercayaan mesin pencari terhadap suatu website. Semakin banyak website lain yang memberikan link ke website kita, maka semakin tinggi peringkat website kita di mesin pencari.

Selain itu, eksternal link juga dapat meningkatkan lalu lintas website kita jika ada pengguna yang mengklik link tersebut dan mengunjungi website kita.

Untuk membuat eksternal link dalam HTML, kita dapat menggunakan tag <a> dengan atribut href yang diikuti dengan alamat URL dari halaman atau dokumen yang ingin ditautkan. Contohnya seperti ini:

<a href="https://www.contoh.com">Kunjungi website contoh</a>

Dengan menambahkan kode di atas, pengguna akan melihat teks “Kunjungi website contoh” yang akan berfungsi sebagai link ke website contoh ketika diklik.

Atau Kita juga dapat membuat link yang langsung mengarah ke halaman komposer email ketika diklik. Cara membuat link ini adalah dengan menggunakan atribut mailto: pada atribut href tag <a>.

Misalnya, jika kita ingin membuat link ke email dengan alamat contoh@email.com, maka kode HTML yang digunakan adalah seperti ini:

<a href="mailto:contoh@email.com">Kirim email ke contoh@email.com</a>

Macam Macam Atribut Link HTML

Sebagai sebuah tag, link juga mempunyai atribut yang bisa dipakai. Dalam HTML, terdapat beberapa atribut yang dapat digunakan pada tag <a> untuk mengontrol cara link ditampilkan dan diakses. Berikut ini adalah beberapa atribut yang sering digunakan pada tag <a>:

1. href: Atribut ini merupakan atribut yang paling penting pada tag <a>, karena atribut ini menentukan tujuan dari link. Nilai dari atribut ini dapat berupa alamat URL dari halaman atau dokumen yang ingin ditautkan, atau bisa juga merupakan anker di dalam halaman yang sama.
2. target: Atribut ini menentukan cara link dibuka. Nilai dari atribut ini bisa berupa _blank, _self, atau _parent. Jika nilai atribut ini diatur ke _blank, maka link akan dibuka di jendela baru.
   Jika nilai atribut ini diatur ke _self, maka link akan dibuka di jendela yang sama. Dan jika nilai atribut ini diatur ke _parent, maka link akan dibuka di jendela yang sama namun di frame atas.
3. rel: Atribut ini menentukan hubungan antara halaman yang saat ini dibuka dengan halaman yang ditautkan. Nilai dari atribut ini bisa berupa nofollow, dofollow, external, atau noreferrer. Jika nilai atribut ini diatur ke nofollow, maka mesin pencari tidak akan mengikuti link tersebut. Jika nilai atribut ini diatur ke dofollow, maka mesin pencari akan mengikuti link tersebut.
   Jika nilai atribut ini diatur ke external, maka link tersebut dianggap sebagai link eksternal. Dan jika nilai atribut ini diatur ke noreferrer, maka referer tidak akan dikirim saat mengakses link tersebut.
4. title: Atribut ini menambahkan teks informatif yang akan ditampilkan ketika pengguna mengarahkan kursor ke link. Nilai dari atribut ini bisa berupa teks apa saja yang ingin ditampilkan.
5. download: Atribut ini digunakan untuk mengunduh file yang ditautkan. Nilai dari atribut ini bisa berupa nama file yang akan diunduh.

Itu dia beberapa atribut yang sering digunakan pada tag <a> dalam HTML.

Penutup

Untuk tutorial html cara membuat link berikut ini, kita cukupkan sampai disini, sampai jumpa di tutorial berikutnya.