Tutorial HTML #07: Cara Membuat Button Link Di HTML

HTML Link Code.- Setelah sebelumnya kita telah membahas tentang Styles dan Formating, maka pada kesempatan kali ini kita akan membahas tentang Bagaimana Cara Membuat Link Pada HTML.

Apakah Link HTML Itu?

Link dapat diibaratkan sebagai sebuah jembatan penghubung antara halaman dalam satu website bahkan antar website. Link hampir selalu ditemukan dalam sebuah website. Karena link dapat mempermudah kita untuk berpindah dari satu halaman ke halaman yang lain. HTML Links biasa juga disebut Hyperlinks.

Bagaimana Membuat Tag Link Di HTML?

Berikut ini adalah struktur dari pembuatan link itu sendiri pada html :

<a href=”url”>Text dari link</a>

Dimana tag <a>..</a> adalah tag yang sangat penting dan melambangkan hyperlink ke halaman tertentu.

Untuk contohnya kita bisa lihat sebagai berikut :

<h1><a href="www.sinikak.com">Kita Ngoding HTML</a></h1>

Baca Juga : Pengenalan Struktur HTML

HTML Links dengan Target Attribute.

Secara default, sebuah link akan menampilkan halaman yang di hyperlink ke jendela browser yang sama dengan halaman pertama. Akan tetapi kita dapat membuka halaman yang dipanggil / dihyperlink berdasarkan target yang kita inginkan dengan atribut target.

Untuk value/nilai atribut target admin coba rangkum menggunakan tabel, sebagai berikut :

Nama Velue Target	Keterangan
_self	Membuka dokumen di jendela yang sama dengan dokumen tempat link tersebut.
_blank	Membuka dokumen di jendela baru
_parent	Membuka dokumen pada halaman utama
_top	Membuka dokumen secara full body pada jendela

Contoh penggunaan :

<a href="https://www.sinikak.com/" target="_self">Kita Ngoding</a>
<a href="https://www.sinikak.com/" target="_blank">Kita Ngoding</a>
<a href="https://www.sinikak.com/" target="_parent">Kita Ngoding</a>
<a href="https://www.sinikak.com/" target="_top">Kita Ngoding</a>

HTML Link Email

Contoh :

<a href="mailto:gamesajau@gmail.com">Kirim Email</a>

Baca Juga : Tag Image HTML Dasar

Membuat Judul Untuk Link

Membuat judul untuk link bertujuan untuk memberikan informasi tentang link tersebut sebelum di klik oleh orang lain.

<a href="https://www.sinikak.com/" title="Link Ini Akan mengarahkan saudara ke website sinikak.com">Kunjungi Website Kami</a>

HTML Link Image

Cara Membuat Gambar Sebagai Link adalah dengan memasukkan kode berikut ini:

<a href="index.html">
    <img src="hay.gif" alt="HTML tutorial" style="width:42px;height:42px;">
    </a>

Membuat Link Dengan Bookmark

Link Bookmark itu sendiri biasanya digunakan untuk melompat ke suatu artikel tertentu akan tetapi masih dalam dalam satu halaman.

Contohnya :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Tabel</title>
</head>
<body>
<h1> Daftar Isi </h1>
<p><a href="#C1">Membuat Link</a></p>
<p><a href="#C2">Contoh Link</a></p>
<p><a href="#C3">Rangkuman</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="C1">Membuat Link</h2>
<p>Lorem  Nunc ia faucibus eros eros sed elit.</p>
<h2 id="C2">Contoh Link</h2>
<p>Lorem  Nunc ia faucibus eros eros sed elit.</p>
<h2 id="C3">Rangkuman</h2>
<p>Lorem  Nunc ia faucibus eros eros sed elit.</p>
</body>
</html>

Coba bayangkan seandainya penjelasan dari suatu artikel ternyata sangatlah panjang, sementara kita ingin mencari penjelasan tentang suatu hal yang lebih spesifik didalam suatu artikel tersebut, maka kita bisa memanfaatkan link bookmark supaya kita bisa secara langsung diarahkan ke artikel yang dimaksud. Seperti contoh daftar isi diatas.

Baca Juga : Tentang Tag Heading

Rangkuman :

tag <a> adalah element untuk mendifinisikan sebuah link
href adalah atribut untuk mendifinisikan link halaman yang dituju.
target adalah atribut untuk mendifinisikan dimana halaman yang dipanggil akan dibuka.
tag <img> adalah element untuk mendifinisikan sebuah image yang akan dimasukkan.
mailto: adalah skema didalam atribut href untuk membuat link yang menuju sebuah email address.

Sekian pembahasan kita pada kesempatan kali ini, semoga bermanfaat bagi kita semua. Terlebih bagi admin dan sahabat semuanya.

Untuk bahasan kita selanjutnya, kita akan membahas tentang image html dasar.

Baca Juga : Kode Background CSS

Jangan lupa untuk mengunjungi tulisan admin lainnya terkait ilmu HTML. Linknya telah admin taruh di bawah ini :

Artikel Lainnya :

Tutorial HTML #11 | Form Pada HTML Dasar

Tutorial HTML #10 | List Pada HTML

Tutorial HTML #09 | Tabel Pada HTML Dasar

Tutorial HTML #08 | Tag Image HTML Dasar

Tutorial HTML #07 | Membuat Link HTML

Tutorial HTML #06 | Styles Dan Formating Pada HTML

Tutorial HTML #05 | Tentang Tag Heading