![[Belajar HTML #14] Link HTML -Belajar Jenis HTML Links/Tautan HTML dan CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTd3mNAuPqvAyOiWws8xCWt3BM3BbEwcmtuUCNQ3iEWUGBH32XITLCnKItKvCJX9cGlIXj2Z5GtBRT_xeb4fAHst8-8PssG3cloOs6PUfNqgLAZp3SyaofhgeRLuacOh6k6PmGKH2h2s/w920-h400-p-k-no-nu/Html+link+type.jpg)
Belajar HTML Links/Tautan HTML
Tautan ditemukan di hampir semua halaman web. Tautan memungkinkan pengguna mengeklik jalannya dari halaman ke halaman.
Tautan HTML - Hyperlink
Tautan HTML adalah hyperlink.
Anda dapat mengklik tautan dan melompat ke dokumen lain.
Saat Anda menggerakkan mouse di atas tautan, panah mouse akan berubah menjadi tangan kecil.
Tautan HTML - Sintaks
Hyperlink didefinisikan dengan tag <a> HTML :
<a href="url">link text</a>Contoh:
<a href="https://app.neilpatel.com/en/ubersuggest">Ubersuggest</a>Atribut href menentukan alamat tujuan link (https://app.neilpatel.com/en/ubersuggest)
Link teks adalah bagian yang terlihat (Ubersuggest)
Mengklik pada teks tautan akan mengirim Anda ke alamat yang ditentukan.
Tautan Lokal/Internal Link
Contoh di atas menggunakan URL absolut (alamat web lengkap).
Tautan lokal (tautan ke situs web yang sama) ditentukan dengan URL relatif (tanpa https: // www ....).
<a href="/2019/10/kode-html-warna">Kode Warna HTML</a>Jika diklik, akan menuju ke halaman atau artikel saya dengan judul "[Kode Warna HTML] Lengkap Dengan Palet Warna"
Warna Tautan HTML
Secara default, sebuah tautan akan muncul seperti ini (di semua browser):
- Tautan yang belum dikunjungi digarisbawahi dan berwarna biru
- Tautan yang dikunjungi digarisbawahi dan berwarna ungu
- Tautan aktif digarisbawahi dan merah
Anda dapat mengubah warna default, dengan menggunakan CSS:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>- Warna link hijau
- Warna link yang pernah dikunjungi pink
- Warna saat mouse diarahkan merah
- Warna link saat diklik kuning
Tautan HTML - Atribut target
The targetatribut menentukan di mana untuk membuka dokumen terkait.
The targetatribut dapat memiliki salah satu dari nilai berikut:
_blank- Membuka dokumen yang ditautkan di jendela atau tab baru_self- Membuka dokumen yang ditautkan di jendela / tab yang sama seperti yang diklik (ini adalah default)_parent- Membuka dokumen yang ditautkan dalam bingkai induk_top- Membuka dokumen yang ditautkan di seluruh jendela- framename - Membuka dokumen yang ditautkan dalam bingkai bernama
Contoh ini akan membuka dokumen yang ditautkan di jendela / tab browser baru:
<a href="https://app.neilpatel.com/en/ubersuggest/" target="_blank">Ubersuggest</a> Tautan HTML - Buat Bookmark
Bookmark HTML digunakan untuk memungkinkan pembaca melompat ke bagian tertentu dari halaman Web.
Bookmark dapat bermanfaat jika halaman web Anda sangat panjang.
Untuk membuat bookmark, Anda harus terlebih dahulu membuat bookmark, dan kemudian menambahkan tautan ke sana.
Ketika tautan diklik, halaman tersebut akan bergulir ke lokasi dengan bookmark.
Pertama, buat bookmark dengan idatribut:
<h2 id="C4">Bab 4</h2>Kemudian, tambahkan tautan ke bookmark ("Lompat ke Bab 4"), dari dalam halaman yang sama: <a href="#C4">Lompat ke Bab 4</a>Contoh:
<h5><a href="#C4">Lompat ke Bab 4</a></h5>
<h5><a href="#C10">Lompat ke Bab 10</a></h5>
<h2>Bab 1</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 2</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 3</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2 id="C4">Bab 4</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 5</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 6</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 7</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 8</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 9</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2 id="C10">Bab 10</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 11</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 12</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 13</h2>
<p>Bab menjelaskan bla bla bla</p>
<h2>Bab 14</h2>
<p>Bab menjelaskan bla bla bla</p>Contoh Jadi:
Tautan HTML - Gambar sebagai Tautan
Adalah umum untuk menggunakan gambar sebagai tautan:
Contoh Jadi:
Gambar diatas jika di klik, akan menuju ke halaman atau artikel saya dengan judul "[Kode Warna HTML] Lengkap Dengan Palet Warna"
Contoh:
<a href="2019/10/kode-html-warna">
<img src="Kode-palet-warna.png" alt="Kode Warna HTML" style="width:600px;height:300px;border:0;">
</a>Tautan Judul
title Atribut menentukan informasi tambahan tentang elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas elemen.
<a href="2019/10/kode-html-warna" title="
[Kode Warna HTML] Lengkap Dengan Palet Warna">Kode Warna HTML</a>Contoh:
Arahkan mouse tanpa diklik, akan muncul text dan itulah atribut title
Ringkasan Bab
- Gunakan <a> elemen untuk mendefinisikan tautan
- Gunakan
hrefatribut untuk menentukan alamat tautan - Gunakan
targetatribut untuk menentukan tempat membuka dokumen yang ditautkan - Gunakan <img> elemen (di dalam <a>) untuk menggunakan gambar sebagai tautan
- Gunakan
idatribut (id= " nilai ") untuk menentukan bookmark di halaman - Gunakan
hrefatribut (href= "# value ") untuk menautkan ke bookmark
0 Response to "[Belajar HTML #14] Link HTML -Belajar Jenis HTML Links/Tautan HTML dan CSS"
Post a Comment