Belajar HTML: Cara Membuat link di HTML

Cara Membuat Link di  HTML.

Setelah mempelajari tentang tag <p> yang memiliki fungsi untuk membuat paragraf, selanjutnya materi yang akan dipelajari adalah membuat link di HTML.

Cara membuat link di HTML yaitu dengan menggunakan tag <a> atau yang disebut sebagai anchor element.  Maksudnya salah satu tag terpenting dalam HTML yang digunakan untuk membuat link ke halaman lain.

Untuk membuat link setidaknya ada dua komponen yang harus ada, yaitu media link (bisa berupa teks, gambar atau video) dan alamat tujuan link (URL). Untuk membuat sebuah link bisa disisipkan diantara tag pembuka <a> dan tag penutupnya </a>. Contoh :

<a>Cara membuat link</a>

Berdasarkan contoh kode yang diberikan apabila ditampilan melalui browser maka akan terbentuk link yang berbentuk teks "Cara membuat link". Akan tetapi belum bisa menuju halaman yang dituju karena alamat URL belum dimasukkan.

Apabila ingin memasukkan URL yang dituju, maka dibutuhkan atribut href.

Atribut Href

Untuk memasukkan alamat URL yang akan dituju dibutuhkan atribut href (hypertext reference). Nilai dari atribut href berupa alamat dari halaman yang akan dituju. Alamat ini bisa berbentuk alamat absolut dan alamat relatif.

Alamat absolut adalah alamat yang mencantumkan alamat URL lengkap, yang terdiri dari protokol (http://), dan nama domain (patukom.blogspot.co.id). Contoh alamat absolut adalah: http://patukom.blogspot.co.id/.

<a href="http://patukom.blogspot.co.id">cara membuat link</a>

Sedangkan alamat relatif adalah alamat yang ditujukan kepada file berdasarkan struktur folder secara lokal. Contoh disini terdapat struktur folder seperti berikut :

dari gambar tersebut apabila ingin mengakses folder img maka alamat relatifnya adalah sebagai berikut

<a href="Exercise/img">cara membuat link,</a>

Hal tersebut berlaku apabila file HTML yang dibuat berada dalam satu folder yaitu di folder Web Designer. Setelah mengetahui alamat URL yang akan  dituju oleh suatu link, maka selanjutnya mengatur tampilan setelah link tersebut diklik. Dengan cara menggunakan atribut target.

Atribut Target

Atribut target digunakan untuk menentukan pada jendela mana halaman web akan ditampilkan. Atribut target memilik 2 nilai yang sering digunakan yaitu _self dan _blank.

Nilai atribut _self maka web browser akan menampilkan jendela saat ini yang sedang tampil. Sedangkan atribut _blank maka web browser akan menampilkan jendela baru dari link yang diklik. Contoh Penggunaannya :

<a href="http://www.patukom.blogspot.co.id" target="_self">Cara membuat link</a>
<a href="http://www.wikipedia.com" target="_blank">Cara membuat link</a>

Tips : Perlu diperhatikan , bahwa penggunaan nilai atribut _self apabila link yang dituju berada di alamat website yang dibuat. Apabila link yang dituju adalah URL alamat web lain, maka sebaiknya menggunakan nilai atribut  _blank agar website kita tidak ditindih.

Atribut Title

Atribut title digunakan untuk memberikan informasi awal kepada pengunjung tentang link yang dibuat akan menuju kemana. Selain itu atribut title juga difungsikan untuk kepentingan SEO juga. Berikut adalah contoh penggunaan atribut title :

<a href="http://www.patukom.blogspot.co.id" target="_self" 

title="cara membuat link">Cara membuat link</a>

Dari kode tersebut apabila kursor mengarah di teks cara membuat link maka web browser akan menampilkan seperti ini :

Atribut Rel

Atribut rel digunakan untuk menyatakan bagaimana hubungan halaman yang saat ini dengan halaman yang akan di link-kan. Selain itu atribut ini juga difungsikan untuk kepentingan SEO.

Salah satu point terpenting yang digunakan Google untuk membuat rangking hasil pencarian adalah dengan cara melihat seberapa banyak link menuju website yang dibuat. Atau dikenal dengan backlink.

Untuk itulah dikenal atribut rel. Ada beberapa nilai yang dapat digunakan, tetapi nilai yang sering digunakan adalah follow dan nofollow. Kedua nilai inilah yang dijadikan google untuk menghitung berapa banyak backlink yang diperoleh.

Apabila memberikan nilai follow artinya kita memberi nilai backlink kepada situl URL yang dimasukkan. Contoh :

<a href="http://www.patukom.blogspot.co.id" target="_self" 

title="cara membuat link" rel="follow">Cara membuat link</a>

Dari kode tersebut memiliki arti memberikan backlink kepada alamat URL yaitu www.patukom.blogspot.co.id. Apabila kita tidak ingin memberikan backlink maka gunakan nilai nofollow.

Membuat Link ke Bagian Lain di Halaman yang Sama

Selain digunakan untuk membuat link ke halaman lain. Tag <a> juga digunakan untuk membuat link ke bagian lain pada halaman yang sama.

Untuk melakukan hal seperti ini maka perlu dilakukan 2 hal; menandai lokasi yang dituju, dan membuat link menuju lokasi tersebut.

Untuk menandai sebuah lokasi bisa menggunakan atribut id. Nilai dari atribut ini adalah semua kata bebas. Untuk materi tentang atribut id akan dibahas lebih lanjut.

Untuk membuat link menuju lokasi yang ditandai tersebut tinggal menambahkan tanda # pada nilai dari atribut id. Berikut adalah contohnya :

<a href="#link">cara membuat link internal</a>

<p id="link">........isi content / paragraf.....</p>

Untuk kode lengkapnya adalah sebagai berikut :

<html>
<head>
 <meta charset="UTF-8">
<title>Belajar HTML untuk pemula</title>
</head>
<body>
<p id="link">........isi content / paragraf.....</p>
<a href="#link">cara membuat link internal</p>
</body>
</html>

Apabila ditampilkan di web browser akan seperti ini

Dari pemahaman tersebut apabila link "cara membuat link internal" diklik maka akan menuju ke paragraf "........isi content / pargraf......".

Itulah artikel tentang cara membuat link di HTML. Apabila ada sesuatu yang perlu ditanyakan silahkan tanya di kolom komentar. Untuk artikel selanjutnya yang dibahas tentang belajar HTML adalah Cara membuat Judul (Heading) di HTML.

Apabila bermanfaat jangan lupa dishare ya kawan. :) Agar orang lain juga merasakan manfaatnya juga.