Cara Membuat Link/ Hyperlink di HTML (tag a)
Cara Membuat Link/Hyperlink di HTML (tag a)
Hai sobat apa kabar? Pada artikel kali ini saya akan membahas tentang cara membuat Link/ Hyperlink di HTML. Link atau Hyperlink sebuah text yang ketika teks tersebut si klik oleh pengunjung, maka pengunjung tersebut akan dibawa kehalaman yang dituju. tergantung kode yang telah ditentukan oleh si pengembang halaman atau website tersebut. Bisa menuju ke halaman website yang berbeda maupun website yang sama.Link ibaratkan pintu kemana saja. Tujuannya untuk menyisipkan suatu halaman website yang akan dituju. Padahal nampaknya teks tersebut hanya terlihat seperti sebuah teks biasa yang berwarna biru.
Cara membuat Hyperlink di HTML
Untuk menambahkan link di sebuah website, HTML menyediakan tag khusus yakni tag <a>. Tag <a> merupakan singkatan dari anchor (jangkar). pada setiap tag <a> setidaknya memiliki sebuah atribut yang bernama href (hypertext reference/ referensi antar text). dimana href sendiri berisikan alamat yang akan dituju.Untuk lebih jelasnya, berikut saya akan memberikan contoh cara menggunakan tag a pada HTML.
Pertama buatlah dua buah halaman sehingga kita dapat menghubungkan dua buah halaman tersebut. Misalkan halaman pertama saya akan simpan dengan nama halaman1.html dan halaman kedua saya beri nama halaman2.html berikut syntaknya :
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat Hyperlink </title>
</head>
<body>
<h1> Anda berada di Halaman 1 <h1>
<a href=”halaman1.html”> Halaman 1 </a><br>
<a href=”halaman2.html”> Halaman 1 </a>
</body>
</html>
<html>
<head>
<title> Cara membuat Hyperlink </title>
</head>
<body>
<h1> Anda berada di Halaman 1 <h1>
<a href=”halaman1.html”> Halaman 1 </a><br>
<a href=”halaman2.html”> Halaman 1 </a>
</body>
</html>
Kode di atas adalah format yang bernama halaman1.html kemudian buat folder baru dan ketikkan kode untuk halaman2.html dibawah ini :
<!DOCTYPE html>
<html><head>
<title> Cara membuat Hyperlink </title>
</head>
<body>
<h1> Sekarang Anda berada di Halaman 2 <h1>
<a href=”halaman1.html”> Halaman 1 </a><br>
<a href=”halaman2.html”> Halaman 1 </a>
</body>
</html>
Setelah kode kedua diatas disimpan maka bukalah salah satu halaman yang telah disimpan tadi. Jika sudah maka akan menampilkan seperti gambar berikut :
Mengenal Alamat Absolut dan Alamat relatif pada link
Alamat absolut merupakan link yang berisi alamat web situs lain di internet atau dikenal dengan sebutan external link (link keluar). Alamat absolut ini cara penulisan alamat dengan menyertakan nama website yang akan dituju. Misalnyahref=”http://zikriteknologi.id/p/belajar-html.html” atau
href=”htpps://www.instagram.com”.
Sedangkan alamat relatif adalah link untuk membuat tujuan ke link yang sama dan tidak perlu menyertakan alamat website tersebut secara lengkap. Contohnya seperti koding yang telah saya buat diatas yang namanya halaman1.html dan halaman2.html namun harus diletakkan berada pada folder yang sama.
Berikut adalah contoh coding tag link <a> menggunakan alamat absolut sekaligus alamat relatif.
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat Hyperlink </title>
</head>
<body>
<h1> Belajar membuat link HTML <h1>
<h3> Link absolut </h3>
Saya menuju ke<a href=”http://zikriteknologi.id”> zikri teknologi </a>
<h3> Link relatif </h3>
Saya masuk ke<a href=”halaman1.html”> Halaman 1 </a>
</body>
</html>
<html>
<head>
<title> Cara membuat Hyperlink </title>
</head>
<body>
<h1> Belajar membuat link HTML <h1>
<h3> Link absolut </h3>
Saya menuju ke<a href=”http://zikriteknologi.id”> zikri teknologi </a>
<h3> Link relatif </h3>
Saya masuk ke<a href=”halaman1.html”> Halaman 1 </a>
</body>
</html>
Silahkan simpan file diatas dengan nama Hyperlink.html kemudian jalankan dengan mengklik dua kali atau diaplikasi notepad++ klik ctrl+alt+shift+x secara bersamaan maka akan muncul seperti gambar berikut :
Baiklah sobat itula artikel sederhana yang membahas tentang cara membuat hyperlink di HTML. Jika artikel ini bermanfaat share dan selanjutnya baca cara membuat tabel di HTML.
0 Response to "Cara Membuat Link/ Hyperlink di HTML (tag a)"
Post a Comment