Beranda / html / Komputer / Pemrograman / Web

HTML Link | Tutorial HTML 14

Oleh Sopyan Posting Komentar
Halo sob, di artikel kali ini kami akan membagikan tutorial mengenai link di HTML, berikut adalah tutorialnya.

HTML Link

Hampir semua situs web memiliki link (tautan).  Dengan mengklik link pengguna dapat berpindah dari satu halaman ke halaman lainnya.

HTML Link - Hyperlink

Di HTML, tautan adalah sebuah hyperlink.

Ketika kita mengarahkan mouse di atas link, panah mouse akan berubah menjadi sebuah tangan kecil.

Kita dapat mengklik link tersebut dan berpindah ke halaman lain.

Tidak hanya berupa teks, link juga dapat berupa gambar atau elemen HTML lainnya.

Sintaks Link HTML

Untuk membuat hyperlink yaitu dengan menggunakan tag HTML <a>. Berikut adalah sintaksnya :
<a href="Url">teks tautan</a>

Di dalam elemen <a> terdapat atribut href yang digunakan untuk merujuk tujuan dari link.

Teks tautan adalah teks yang akan ditampilkan kepada pengguna.

Dengan mengklik teks tautan, pengguna akan dipindahkan ke alamat URL yang telah ditentukan.

Di contoh di bawah kita membuat kode yang akan memindahkan pengguna ke sebuah situs web.

Contoh Program 1 : HTML Link

<!DOCTYPE html>
<html>
<body>
     <p><a href="https://www.filesop.com">Kunjungi filesop.com</a></p>
</body>
</html>

Hasil Program 1

Hasil Program 1 HTML Link

Penjelasan Program 1

Contoh Program 1 HTML Link
  • Di baris 4 kita membuat paragraf yang merupakan link.
Di semua browser, secara default link akan tampil seperti berikut :
  • Link yang belum dikunjungi akan berwarna biru dan digaris bawahi.
  • Link yang telah dikunjungi akan berwarna ungu dan digaris bawahi.
  • Link aktif akan berwarna merah dan digaris bawahi.
Tips : Kita bisa menggunakan CSS untuk memperindah tampilan link.

HTML Link - Atribut target

Secara default, halaman yang tertaut akan tampil di jendela browser saat ini, kita dapat mengubahnya dengan menentukan target lain untuk link tersebut.

Atribut target menentukan tempat untuk membuka dokumen yang ditautkan.

Atribut target dapat memiliki nilai-nilai berikut :
  • _blank digunakan untuk membuka dokumen di tab atau jendela baru.
  • _self digunakan untuk membuka dokumen pada tab (jendela) yang sama dengan yang di klik.
  • _top digunakan untuk membuka dokumen pada semua isi jendela browser.
  • _parent digunakan untuk membuka dokumen pada bingkai utama.
Di contoh di bawah kita akan membuat link yang akan terbuka di jendela/tab yang baru.

Contoh Program 2 : Membuka link di Jendela baru

<!DOCTYPE html>
<html>
<body>
  <a href="https://www.filesop.com" target="_blank">Kunjungi situs</a>
</body>
</html>

Hasil Program 2

Hasil Program 2 : Buka Link di Jendela Baru

Penjelasan Program 2

Contoh Program 2 Buka Link di Jendela Baru
  • Di baris 4 kita membuat sebuah link yang akan terbuka di tab/jendela browser yang baru.

URL Absolut dan URL Relatif

URL absolut adalah URL yang menggunakan alamat web lengkap pada atribut href.

URL relatif adalah tautan ke dalam situs web yang sama (tautan lokal). Di URL relatif bagian "https://www." tidak ditulis.

Contoh Program 3 : URL Absolut dan URL Relatif

<!DOCTYPE html>
<html>
<body>
  
  <h2>URL Absolut</h2>
  
  <p><a href="https://www.filesop.com">filesop</a></p>
  
  <p><a href="https://www.google.com">Google</a></p>
  
  <h2>URL Relatif</h2>
  <p><a href="tutorialhtml.asp">Tutorial HTML</a></p>
  
  <p><a href="css/tutorialcss.asp">Tutorial CSS</a></p>
  
</body>
</html>

Hasil Program 3

Hasil Program 3 URL Absolut dan URL Relatif

Penjelasan Program 3

Contoh Program 3 URL Absolut dan URL Relatif
  • Di baris 5 kita membuat heading 2.
  • Di baris 7 dan baris 9 kita membuat link dengan URL absolut.
  • Di baris 11 kita membuat heading 2
  • Di baris 12 dan baris 14 kita membuat link dengan URL relatif.

Link HTML - Menggunakan Gambar Sebagai Link

Dengan meletakkan tag <img> di dalam tag <a> kita bisa menggunakan gambar sebagai link.

Contoh Program 4 : Gambar Sebagai Link

<!DOCTYPE html>
<html>
<body>
  <a href="https://www.filesop.com">
    <img src="senyum.png" alt="Blog pribadi" style="width:42px;height=42px;
      ">
  </a>
  
</body>
</html>

Hasil Program 4

Hasil Program 4 Link Gambar

Penjelasan Program 4

Contoh Program 4 Link Gambar
  • Di baris 5 sampai baris 8 kita membuat sebuah link.
  • Di baris 6 kita menampilkan sebuah gambar, karena berada di dalam elemen <a> maka gambar ini berfungsi sebagai link.

Link ke Alamat Email

Kita bisa membuat link ke program email pengguna menggunakan mailto: di dalam atribut href.

Contoh Program 5 : Link Untuk Email

<!DOCTYPE html>
<html>
<body>

<a href="mailto:seseorang@contoh.com">Kirim email</a>

</body>
</html>

Hasil Program 5

Hasil Program 5 Link Email

Penjelasan Program 5

Contoh Program 5 Link Email
  • Di baris 5 kita membuat link yang jika di klik akan membuka program email kalian untuk mengirimkan email.

Tombol Sebagai Link

Kita juga bisa membuat tombol sebagai link, untuk melakukannya kita membutuhkan beberapa kode javascript. Kita akan mempelajari javascript nanti.

Contoh Program 6 Tombol Sebagai Link

<!DOCTYPE html>
<html>
<body>
  
  <button onclick="document.location='https://www.filesop.com'">Tutorial HTML</button>
  
</body>
</html>

Hasil Program 6

Hasil Program 6 Link tombol

Penjelasan Program 6

Contoh Program 6 Link Tombol
  • Di baris 5 kita membuat tombol yang akan mengirimkan kita ke sebuah situs.

Informasi Link

Kita bisa memberikan informasi tambahan pada sebuah link dengan menggunakan atribut title. Informasi ini akan tampil sebagai tooltip yang akan muncul jika kita mengarahkan mouse pada elemen ini.

Contoh Program 7 : Informasi Link

<!DOCTYPE html>
<html>
<body>
  
  <a href="https://www.filesop.com" title="Situs tutorial">Kunjungi situs</a>
  
</body>
</html>

Hasil Program 7

Hasil Program 7 Link Title

Penjelasan Program 7

Contoh Program 7 Link Title
  • Di baris 5 kita membuat sebuah link untuk pergi ke sebuah situs, jika kita mengarahkan mouse diatas elemen ini maka akan muncul sebuah tooltip.

Rangkuman Artikel HTML Link

  • Elemen <a> digunakan untuk membuat link.
  • Atribut href digunakan untuk merujuk alamat link.
  • Atribut target digunakan untuk menentukan tempat membuka dokumen tertaut.
  • Gambar bisa dibuat link dengan cara menempatkan elemen <img> di dalam elemen <a>.
  • Kita bisa menempatkan skema mailto: di dalam atribut href untuk membuat link yang akan membuka program email pengguna.

Tag Link HTML

Tag Deskripsi
<a> Digunakan untuk membuat hyperlink

Itulah tutorial darinkami mengenai Link HTML beserta contohnya, semoga artikel ini bermanfaat dan kalian bisa lebih memahami tentang HTML, sampai jumpa fi tutorial selanjutnya. Wassalamualaikum wr wb.

Posting Komentar untuk "HTML Link | Tutorial HTML 14"