HTML a tag

HTML Elemen <a> adalah tag yang digunakan untuk membuat link "tautan" <a href="...">Link</a>. Tag ini memungkinkan anda menghubungkan satu halaman dengan halaman lain, baik dalam situs yang sama maupun ke website lainya. tag <a> Link selain ekstensi (.html) bisa juga mengalihkan ke ekstensi lainya seperti video, audio, untuk pemutaran secara berlangsung. dan file unduhan lainya seperti (.docx .pdf .exe) Mengirimkan email, panggilan kontak telepon, kirim pesan Whatsapp lewat web di html, dan lebih banyak lagi tautan lainya.

1. html tag <a> link membuka halaman

Disini ada dua tautan yang pertama tautan biasa apabila mengklik tautan tersebut maka halaman utama akan berpindah ke halaman yang di tuju, dan tautan yang kedua menambahkan atribut target="_blank" kedalam <a> apabila tautan tersebut di klik maka halaman utama akan tetap bertahan tidak berubah dan mebuka tab baru untuk berpindah ke tautan yang di tuju. Pada tutorial ini saya menggunakan external link di karenakan agar bisa langsung di jalankan pada html live yang sudah tersedia dibawah.

<!DOCTYPE html>
<html>
<head>
<style>
h3{font-family:monospace; font-size:20px; font-weight:bold;}
a{font-family:arial;font-size:14px;}
a:hover{color:green; font-weight:bold;}
span{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
</head>
<body>
<h3>Contoh: HTML element &lt;a&gt; Hyperlink menghubungkan suatu halaman web ke halaman web lain.</h3><hr>
<h3>External Link</h3>
<!-- Link -->
 <span>Kunjungi </span>
<a href="https://cicagak.com/p/refresh.html">https://www.cicagak.com</a>
 <span>buka link di halaman yang sama</span><br>
 <span>Kunjungi </span>
<a href="https://cicagak.com/p/sitemap.html" target="_blank">https://www.cicagak.com</a>
 <span>buka link di tab baru</span>
<!-- Link -->
</body>
</html>

Cicagak Berbagi

2. html tag <a> link button download

Link berbentuk button sama saja halnya seperti link biasa sejenis teks, tidak ada sedikit pun perbedaan maupun pengaruhnya. namun hanya yang membedakan adalah jenis gaya yang di atur di dalam Style Css.
bisa langsung mencobanya berikut dibawah.

<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
h3 {font-family:monospace; font-size:20px;}
a {border-radius:2px; border:none; background:tomato; color:#fff; cursor:pointer; font-family:"Roboto Mono",monospace;font-size:14px; padding:6px; text-decoration:none;}
a:hover {background:#00A36C; font-weight:bold;}
span {font-family:monospace; font-size:14px;}
</style>
</head>
<body>
<h3>Contoh: html element &lt;a&gt; Link Tombol</h3><hr><br>
<span>Link page html </span>
<!-- Link pages -->
<a href="https://cicagak.com/p/refresh.html">Buka Link</a> <span> Membuka Situs cicagak</span><br><br>
<span>Link Download </span>
<!-- Link download-->
<a href="https://cicagak.my.id/media-posts/sample.zip">Download.zip</a>
</body>
</html>

Cicagak Berbagi

3. html tag <a> link images

Link image adalah link yang di tujukan pada gambar agar konten tampilan lebih menarik perhatian si pengunjung
link image sama halnya seperti link teks namun ada penambahan kode html tag <img> di masukan kedalam tag <a>. sehingga jika gambar di klik maka akan membawa tautan ke situs yang akan di tuju.
berikut contohnya seperti dibawah.

<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
h3 {font-family:monospace; font-size:20px;}
img{ border-radius:4px; box-shadow:0 0 2px #000000;border:none; cursor:pointer;font-family:"Roboto Mono",monospace; height:178px; width:320; padding:6px; text-decoration:none;}
img:hover {box-shadow:0 0 6px #000000;}
span {font-family:monospace; font-size:14px;}
</style>
</head>
<body>
<h3>Contoh: html element &lt;a&gt; Link Gambar</h3><hr>
<span>Silahkan Klik Gambar Dibawah Membuka Tab Ke Google Images </span><br><br>
<!-- Link Gambar -->
<a href="https://www.google.com/images?q=google" target="_blank">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJhPpVZLe3I-aRAgeza5Nd9T1MSzzMQEKEDPmXyEm7FL4pfwGLvt35pB-D&s=10">
</a>
<!-- Link Gambar -->
</body>
</html>

Cicagak Berbagi

4. html tag <a> link anchor tautan pada halaman yang sama

Tautan pada halaman yang sama, anda harus membuatnya link yang di tuju menambahkan atribut id yang nantinya dari id itu akan di panggil ke dalam href

<!DOCTYPE html>
<html>
<head>
<style>
h3{font-family:monospace; font-size:20px; font-weight:bold;}
a{font-family:monospace; font-size:18px; text-decoration:none;}
a:hover{font-family:monospace;color:green;}
p{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
<h3>Contoh: html element &lt;a&gt; Tautan Pada Halaman Yang Sama</h3><hr>
 <h3 id="angkaA">Angka A: 1 s/d 30</h3>
<!-- Link Down --> 
<a href="#angkaB">Lompat ke bawah:</a>
<!-- Link Down -->
 <p class="p1">01. Satu
 <br>02. Dua<br>03. Tiga<br>04. Empat<br>05. Lima<br>06. Enam<br>07. Tujuh<br>08. Delapan<br>09. Sembilan<br>10. Sepuluh
 <br>11. Sebelas<br>12. Dua Belas<br>13. Tiga Belas<br>14. Empat Belas<br>15. Lima Belas<br>16. Enam Belas<br>17. Tujuh Belas<br>18. Delapan Belas<br>19. Sembilan Belas<br>20. Dua Puluh
 <br>21. Dua Puluh Satu<br>22. Dua Puluh Dua<br>23. Dua Puluh Tiga<br>24. Dua Puluh Empat<br>25. Dua Puluh Lima<br>26. Dua Puluh Enam<br>27. Dua Puluh Tujuh<br>28. Dua Puluh Delapan<br>29. Dua Puluh Sembilan<br>30. Tiga Puluh
 </p>

 <h3 id="angkaB">Angka B: 31 s/d 59</h3> 
<!-- Link Up -->
<a href="#angkaA">Lompat ke atas:</a> 
<!-- Link Up -->
 <p>31. Tiga Puluh Satu
 <br>32. Tiga Puluh Dua<br>33. Tiga Puluh Tiga<br>34. Tiga Puluh Empat<br>35. Tiga Puluh Lima<br>36. Tiga Puluh Enam<br>37. Tiga Puluh Tujuh<br>38. Tiga Puluh Delapan<br>39. Tiga Puluh Semabilan
 <br>40. Empat Puluh<br>41. Empat Puluh Satu<br>42. Empat Puluh Dua<br>43. Empat Puluh Tiga<br>44. Empat Puluh Empat<br>45. Empat Puluh Lima<br>46. Empat Puluh Enam<br>47. Empat Puluh Tujuh<br>48. Empat Puluh Delapan<br>49. Empat Puluh Sembilan
 <br>50. Lima Puluh Satu<br>52. Lima Puluh Dua<br>55. Lima Puluh Tiga<br>54. Lima puluh Empat<br>55. Lima Puluh Lima<br>46. Lima Puluh Enam<br>57. Lima Puluh Tujuh<br>58. Lima puluh Depalan<br>59. Lima Puluh Sembilan
 </p>

</body>
</html>

Cicagak Berbagi

5. html tag <a> link mengirimkan email

Catatan: Link ini berlaku jika perangkat anda sudah terpasang aplikasi email reader baik di PC maupun Smartphone.

<!DOCTYPE html>
<html>
<head>
<style>
h3{font-family:monospace; font-size:20px; font-weight:bold;}
a{border-radius:2px; border:none; background:tomato; color:#fff; cursor:pointer; font-family:"Roboto Mono",monospace;font-size:14px; padding:6px; text-decoration:none;}
a:hover{background:#00A36C; box-shadow:0 0 2px #000000; border:1px solid #fff; font-weight:bold;}
span{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
<h3>Contoh: html element &lt;a&gt; Link mengirimkan email</h3><hr>
<span>Klik Tautan Dibawah Untuk Mengirimkan Email Ke: nama.email@contoh.com</span> <br><br>
<!-- Link -->
<a href="mailto:nama.email@contoh.com">Kirim email</a>
<!-- Link -->
</body>
</html>

Cicagak Berbagi

6. html tag <a> link memanggil telepon.

Catatan: Link ini hanya berlaku jika perangkat anda sudah mendukung panggilan telepon, baik di PC maupun Smartphone.

<!DOCTYPE html>
<html>
<head>
<style>
h3{font-family:monospace; font-size:20px; font-weight:bold;}
a{border-radius:2px; border:none; background:tomato; color:#fff; cursor:pointer; font-family:"Roboto Mono",monospace;font-size:14px; padding:6px; text-decoration:none;}
a:hover{background:#00A36C; box-shadow:0 0 2px #000000; border:1px solid #fff; font-weight:bold;}
span{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
<h3>Contoh: html element &lt;a&gt; Link Panggilan Telepon</h3><hr>
<span>Klik Tautan Dibawah Untuk Menghubungi Panggilan Telepon Ke: +620123456789</span> <br><br>
<!-- Link -->
<a href="tel:+620123456789">Hubungi Kami</a>
<!-- Link -->
</body>
</html>

Cicagak Berbagi

7. html tag <a> href link mengirimkan pesan whatsapp

Catatan: Link ini berlaku jika perangkat anda yang sudah terpasang aplikasi WhatsApp baik di PC maupun Smartphone.

<!DOCTYPE html>
<html>
<head>
<style>
h3{font-family:monospace; font-size:20px; font-weight:bold;}
a{border-radius:2px; border:none; background:tomato; color:#fff; cursor:pointer; font-family:"Roboto Mono",monospace;font-size:14px; padding:6px; text-decoration:none;}
a:hover{background:#00A36C; box-shadow:0 0 2px #000000; border:1px solid #fff; font-weight:bold;}
span{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
<h3>Contoh: html element &lt;a&gt; link kirim pesan WhatsApp</h3><hr>
<span>Klik Tautan Dibawah Untuk Mengrimkan Pesan Whatsapp Ke: +62 878-7272-5286 pastikan device anda sudah terinstal Whatsapp. </span> <br><br>
<!-- Link -->
<a href="whatsapp://send?text=Hello... Apa Kabar.&phone=+6287872725286">Hubungi Saya</a>
<!-- Link -->
</body>
</html>

Cicagak Berbagi

8. html tag <a> link iframe menautkan halaman kedalam box frame

link iframe tautan yang mengarahkan halaman website kedalam box frame biasanya sering di temukan di bagian bawah konten yang berisi seperti web navigasi, peta, lokasi dan iklan. sebelum menerapkan link iframe kita harus membuatnya terlebih dahulu target link yang berfungsi untuk menampung halaman web yang di arahkan oleh link tersebut.
terutama harus menuliskan dulu tag iframe pada kode html berikutnya menambahkan atribut name kedalam iframe contoh:<iframe name="iframeKu"> yang nantinya akan di arahkan oleh link target dan akan membawa tautan mengarahkan ke suatu halaman yang di tuju berikut hasilnya akan nampak seperti di bawah.

<!DOCTYPE html>
<html>
<head>
<style>
h3{font-family:monospace; font-size:20px; font-weight:bold;}
.aBox{border-radius:2px; border:none; background:tomato; border:1px solid transparent; color:#fff; cursor:pointer; font-family:"Roboto Mono",monospace;font-size:14px; padding:6px; text-decoration:none;}
.aBox:hover{background:#00A36C; border:1px solid #fff; box-shadow:0 0 2px #000000; font-weight:bold;}
span{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
<h3>Contoh: html element &lt;a&gt; link iframe</h3><hr>
<span>Link di bawah akan mengarahkan tautan halaman ke dalam box iframe</span> <br><br>
<!-- Link a -->
<a class="aBox" href="https://www.cicagak.com" target="iframeKu">Link iframe 1</a> 
<a  href="https://www.cicagak.com/p/sitemap.html" target="iframeKu">Link iframe 2</a><br><br>
<!-- link target iframe -->
<iframe name="iframeKu" width="100%" height="400"></iframe>
</body>
</html>

Cicagak Berbagi