8 Pengaturan Utama Penggunaan Link pada Dokumen HTML
Sintak Link Html
Link secara spesifik pada html menggunakan tag "a".
<a href="url">Text link</a>
Penjelasan Sintak:
href: atribut href digunakan untuk mengarahkan ke alamat destinasi dari link yang digunakan.
Text link: text link adalah bagian yang tampak dari link.
Input:
<!DOCTYPE html>
<html>
<h3>
Contoh penambahan link
</h3>
<body>
<p>
Klik link berikut ini:
</p>
<a
href = "https://elfanmauludi-tik.blogspot.com/">
blog ElfanMauludi
</a>
</body>
</html>
Klik link berikut ini:
blog ElfanMauludiInternal Link adalah tipe dari hyperlink yang targetnya adalah sumber seperti gambar atau dokumen pada satu alamat website atau domain.
Input:
<!DOCTYPE html>
<html>
<h3>
Contoh internal link dan external link.
</h3>
<body>
<p>
<a
href="https://www.elfanmauludi.id/p/about-us.html">
Halaman profil blog ElfanMauludi
</a>
</p>
<p>
<a
href="https://elfanmauludi-tik.blogspot.com/">
blog ElfanMauludi
</a>
</p>
</body>
</html>
Halaman profil blog ElfanMauludi
- satu, Tampilan link yang belum dikunjungi memiliki garis bawah dan warna biru secara default.
- dua, Tampilan link yang telah dikunjungi memiliki garis bawah dan warna purple secara default.
- tiga, Link aktif memiliki garis bawah dan warna merah secara default.
Tampilan dari warna-warna default pada link dapat diubah dengan menggunakan CSS.
Input:
<!DOCTYPE html>
<html>
<head>
<style>
a:link
{
color: red;
background-color: transparent;}
a:visited
{
color: green;
background-color: transparent;}
a:hover
{
color: blue;
background-color: transparent;}
a:active
{
color: yellow;
background-color: transparent;}
</style>
</head>
<body>
<p>
Mengubah warna default dari link.
</p>
<p>
Link yang dikunjungi
</p>
<a
href="https://elfanmauludi-tik.blogspot.com/">
blog ElfanMauludi
</a>
<p>
Link
</p>
<a
href="https://facebook.com">
</a>
<p>
efek hover
</p>
<a href="https://elfanmauludi-tik.blogspot.com/">
blog ElfanMauludi
</a>
</body>
</html>
Atribut target digunakan untuk menunjukkan lokasi dimana link dokumen dibuka. Pilihan berbeda dapat digunakan pada atribut target yang ditandai berikut ini:
<!DOCTYPE html>
<html>
<body>
<h3>
Variasi pilihan yang tersedia
dalam atribut target
</h3>
<p>
Jika target diatur ke tipe
"_blank", maka link akan
membuka alamat tujuan pada tab
atau window baru pada browser.
</p>
<a
href="https://elfanmauludi-tik.blogspot.com/"
target="_blank">
blog ElfanMauludi
</a>
<p>
Jika atribut diatur ke tipe
"_self", maka link akan
membuka alamat tujuan pada tab
atau window yang sama pada
browser.
</p>
<a
href="https://elfanmauludi-tik.blogspot.com/"
target="_self">
blog ElfanMauludi
</a>
<p>
Jika atribut diatur ke tipe
"_top", maka link akan membuka
alamat tujuan pada full
window.
</p>
<a
href="https://elfanmauludi-tik.blogspot.com/"
target="_blank">
blog ElfanMauludi
</a>
<p>
Jika atribut diatur ke tipe
"_parent", maka link akan
membuka alamat tujuan pada
parent frame.
</p>
<a
href="https://elfanmauludi-tik.blogspot.com/"
target="_blank">
blog ElfanMauludi
</a>
</body>
</html>
Variasi pilihan yang tersedia dalam atribut target
Jika target diatur ke tipe "_blank", maka link akan membuka alamat tujuan pada tab atau window baru pada browser.
blog ElfanMauludiJika atribut diatur ke tipe "_self", maka link akan membuka alamat tujuan pada tab atau window yang sama pada browser.
blog ElfanMauludiJika atribut diatur ke tipe "_top", maka link akan membuka alamat tujuan pada full window.
blog ElfanMauludiJika atribut diatur ke tipe "_parent", maka link akan membuka alamat tujuan pada parent frame.
blog ElfanMauludiInput:
<!DOCTYPE html>
<html>
<body>
<h3>
Menggunakan image sebagai link.
</h3>
<p>
Klik untuk mengunjungi blog ElfanMauludi.
</p>
<a href="https://elfanmauludi-tik.blogspot.com/">
<img
src="elf_200X200.jpeg"
alt="blog elfanmauludi"
style="width:80px;height:80px;border:0">
</a>
</body>
</html>
Menggunakan image sebagai link.
Klik untuk mengunjungi blog ElfanMauludi.

Tahap untuk Membuat Bookmark adalah:
satu, Gunakan atribut id, ciptakan bookmark.
<h2 id="T17">Topic</h2>
dua, Tambahkan jatah spesifik dari laman web menuju bookmark.
<p><a href="#T17">Jump to Topic 17</a></p>
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#T11">
Jump to Topic 11
</a>
</p>
<p>
<a href="#T17">
Jump to Topic 17
</a>
</p>
<p>
<a href="#T20">
Jump to Topic 20
</a>
</p>
<h2>Topic 1</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 2</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 3</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 4</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 5</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 6</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 7</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 8</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 9</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 10</h2>
<p>
paragraph 1
.....
</p>
<h2 id="T11">Topic 11</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 12</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 13</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 14</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 15</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 16</h2>
<p>
paragraph 1
.....
</p>
<h2 id="T17">Topic 17</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 18</h2>
<p>
paragraph 1
.....
</p>
<h2>Topic 19</h2>
<p>
paragraph 1
.....
</p>
<h2 id="T20">Topic 20</h2>
<p>
paragraph 1
.....
</p>
</body>
</html>
Membuat Link Download pada HTML
Sebuah teks link dari sebuah pdf, doc, ataupun file zib dapat dibuat sebagai suatu laman download.
Input:
<!DOCTYPE html>
<html>
<h3>
Membuat link download
</h3>
<body>
<a href = "https://drive.google.com/file/d/1IH5EA4-bOe6MkifoYLxu4qHg7lYsBCwk/view?usp=sharing">Download PDF File</a>
</body>
</html>
Apa yang dimaksud dengan link pada html?
BalasHapusLink atau tautan merupakan object HTML yang memungkinkan user untuk melompat ke lokasi URL lain ketika dilakukan klik pada link yang dituju. Link juga dapat dilampirkan dalam bentuk teks, gambar, ataupun elemen lainnya pada HTML. Kebanyakan link atau tautan adalah berwarna biru, karena warna tersebut merupakan warna standar yang digunakan browser web untuk menampilkan tautan.
HapusPada situs website, hyperlink atau link adalah item yang berupa teks atau tombol yang mengarah ke lokasi lainnya. Ketika user mengklik sebuah link, maka link tersebut akan membawa user ke target link tersebut, yang bisa berupa halaman web, dokumen, ataupun konten online lainnya. Situs website juga menggunakan hyperlink sebagai cara untuk menavigasi konten secara online.
HapusApakah warna biru untuk hyperlink bisa diubah dengan warna lainnya?
BalasHapusBisa, dengan menggunakan kode CSS,
Hapusseperti pada blog ini digunakan warna hijau sebagai warna default untuk hyperlink.