HTML a: Tag Elemen

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 lainya seperti (.docx .pdf .exe) dan lebih banyak lagi tautan ekstensi lainya.

1. html tag <a> href link
<!DOCTYPE html>
<html>
<head>
<style>
  .h3{font-family:monospace; font-size:20px; font-weight:bold;}
  .a1{font-family:monospace;}
  .a1:hover{font-family:monospace;color:green;}
  .span1{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
</head>
<body>
  <h3 class="h3">Contoh: element &lt;a&gt; Link Text</h3>
  <a class="a1" href="https://cicagak.com/p/refresh.html">Kunjungi cicagak.com</a><br>
  <a class="a1" href="https://cicagak.com/p/daftar-isi.html" target="_blank">Kunjungi cicagak.com</a>
  <span class="span1">buka di tab baru</span>
</body>
</html>
Salin Kode . Lihat Hasil

2. html tag <a> href button
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
  .font {font-family:monospace; font-size:20px;}
  .aButton {border-radius:4px; box-shadow:0 0 2px #000000; border:none; cursor:pointer; font-family:"Roboto Mono",monospace;font-size:14px; padding:6px; text-decoration:none;}
  .aButton:hover {box-shadow:0 0 6px #000000; font-weight:bold;}
  .span1 {font-family:monospace; font-size:14px;}
</style>
</head>
<body>
  <h3 class="font">Contoh element &lt;a&gt; Link Tombol</h3>
  <span class="span1">silahkan Klik Tombol </span> 
  <a class="aButton" href="https://cicagak.com/p/refresh.html">Buka Link</a>
  <span class="span1"> Untuk Mengunjungi Situs: cicagak</span>
</body>
</html>
Salin Kode . Lihat Hasil

3. html tag <a> href images
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
  .font {font-family:monospace; font-size:20px;}
  .aImg{ 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;}
  .aImg:hover {box-shadow:0 0 6px #000000;}
  .span1 {font-family:monospace; font-size:14px;}
</style>
</head>
<body>
  <h3 class="font">Contoh element &lt;a&gt; Link Gambar</h3>
  <span class="span1">Silahkan Klik Gambar Dibawah Beralih Ke Google</span><br><br>
  <a href="https://google.com" target="_blank">
  <img class="aImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJhPpVZLe3I-aRAgeza5Nd9T1MSzzMQEKEDPmXyEm7FL4pfwGLvt35pB-D&s=10">
  </a><br>
</body>
</html>
Salin Kode . Lihat Hasil

4. html tag <a> href tautan pada halaman yang sama
<!DOCTYPE html>
<html>
<head>
<style>
  .h3{font-family:monospace; font-size:20px; font-weight:bold;}
  .a1{font-family:monospace; font-weight:bold; font-size:16px;}
  .a1:hover{font-family:monospace;color:green;}
  .p1{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
  <h3 class="h3">Contoh: element &lt;a&gt; Tautan Pada Halaman Yang Sama</h3>

  <a class="a1" href="#angkaB">Ke Angka 30 s/d 59</a>
	<h3 class="h3" id="angkaA">Angka 1 s/d 29</h3>
  <p class="p1">Satu
   <br>Dua<br>Tiga<br>Empat<br>Lima<br>Enam<br>Tujuh<br>Delapan<br>Sembilan<br>Sepuluh
   <br>Sebelas<br>Dua Belas<br>Tiga Belas<br>Empat Belas<br>Lima Belas<br>Enam Belas<br>Tujuh Belas<br>Delapan Belas<br>Sembilan Belas<br>Dua Puluh
   <br>Dua Puluh Satu<br>Dua Puluh Dua<br>Dua Puluh Tiga<br>Dua Puluh Empat<br>Dua Puluh Lima<br>Dua Puluh Enam<br>Dua Puluh Tujuh<br>Dua Puluh Delapan<br>Dua Puluh Sembilan
  </p>

  <h3 class="h3" id="angkaB">Angka 30 s/d 59</h3>
  <p class="p1">Tiga Puluh Satu
   <br>Tiga Puluh Dua<br>Tiga Puluh Empat<br>Tiga Puluh Lima<br>Tiga Puluh Enam<br>Tiga Puluh Tujuh<br>Tiga Puluh Delapan<br>Tiga Puluh Semabilan
   <br>Empat Puluh Satu<br>Empat Puluh Dua<br>Empat Puluh Tiga<br>Empat Puluh Empat<br>Empat Puluh Lima<br>Empat Puluh Enam<br>Empat Puluh Tujuh<br>Empat Puluh Delapan<br>Empat Puluh Sembilan
   <br>Lima Puluh Satu<br>Lima Puluh Dua<br>Lima Puluh Tiga<br>Lima puluh Empat<br>Lima Puluh Lima<br>Lima Puluh Enam<br>Lima Puluh Tujuh<br>Lima puluh Depalan<br>Lima Puluh Sembilan
  </p>
  <a class="a1" href="#angkaA">Kembali Ke Angka 1 s/d 29</a><br>
</body>
</html>
Salin Kode . Lihat Hasil

5. html tag <a> href mengirimkan email
<!DOCTYPE html>
<html>
<head>
<style>
  .h3{font-family:monospace; font-size:20px; font-weight:bold;}
  .a1{font-family:monospace;}
  .a1:hover{font-family:monospace;color:green;}
  .span1{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
  <h3 class="h3">Contoh: element &lt;a&gt; Link mengirimkan email:</h3>
  <a class="a1" href="mailto:nama.email@contoh.com">Kirim email:</a><br>
  <span class="span1">Klik Tautan Diatas Untuk Mengirimkan Email.</span>
</body>
</html>
Salin Kode . Lihat Hasil

6. html tag <a> href memanggil telp.
<!DOCTYPE html>
<html>
<head>
<style>
  .h3{font-family:monospace; font-size:20px; font-weight:bold;}
  .a1{font-family:monospace;}
  .a1:hover{font-family:monospace;color:green;}
  .span1{font-family:monospace; font-size:14px; font-weight:bold;}
</style>
<head>
<body>
  <h3 class="h3">Contoh: element &lt;a&gt; Link Memanggil Telp.</h3>
  <a class="a1" href="tel:+620123456789">Panggil: +620123456789</a><br>
  <span class="span1">Klik Tautan Diatas Untuk Melakukan Panggilan Telp.</span>
</body>
</html>
Salin Kode . Lihat Hasil

Link 1


Link 2


Link 3


Link 4


Link 5


Link 6


...


Komentar

Posting Komentar