Tutorial Belaar Links di HTML


HTML link adalah elemen yang digunakan untuk membuat kaitan ke halaman lain. Ketika elemen link diklik maka halaman browser akan berpindah menampilkan halaman lain yang dituju link tersebut.
<a href="url">teks link</a>
Tag <a> menggunakan atribut href untuk menentukan alamat tujuan link. teks linkadalah teks yang akan kita jadikan link. Ketika teks link diklik, maka halaman akan berpindah ke alamat tujuan link.
Kita tidak hanya dapat menggunakan teks sebagai link, tapi juga gambar atau elemen lainnya.
<a href="url"><img src="gambar.jpg" /></a>

Atribut Target

Atribut target kita gunakan untuk menentukan dimana alamat link harus dibuka.
  • _self - Membuka alamat link di tab/jendela browser yang sama (nilai bawaan)
  • _blank - Membuka alamat link di tab/jendela browser yang baru
  • _parent - Membuka alamat link di frame induk
  • _top - Membuka alamat link di jendela penuh
  • framename - Membuka alamat link di frame yang namanya sudah ditentukan
Umumnya kita akan sering menggunakan nilai_blank untuk menampilkan halaman di tab browser baru. Bila atribut ini tidak dipasang, maka nilai defaultnya adalah _self, artinya alamat link tersebut akan dibuka di jendela yang sedang aktif.

PRAKTEK

  • Pada editor terdapat contoh penggunaan tag <a> dengan link berupa teks dan juga gambar. Jalankan program dan coba klik contoh link tersebut.
  • Coba ganti nilai atribut targetdengan _self dan _parent. Apa yang terjadi saat link diklik? Apa perbedaannya dengan saat atributtarget diset dengan _blank?

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
      <p>Contoh link dengan teks:</p>
      <a href="https://www.facebok.com" target="_blank">facebook.com</a>
     
      <p>Contoh link dengan gambar:</p>
      <a href="https://www.facebook.com" target="_blank">
        <img src="https://www.facebook.com/images/fb_icon_325x325.png" />
      </a>
</body>
</html>


Hasilnya:

Contoh link dengan teks:
Contoh link dengan gambar:

Subscribe to receive free email updates:

0 Response to "Tutorial Belaar Links di HTML"

Posting Komentar