Blog Guru Komputer: HTML link

Apa yang dimaksud dengan link?
Link adalah koneksi dari satu sumber web terhadap sumber web lainnya. Sebuah link memiliki dua tujuan akhir, anchor dan direction atau tujuan. Link dimulai dari sumber anchor (jangkar) dan menuju ke titik destinasi dari anchor, yang mungkin saja sumber web lain seperti gambar, video, potongan suara, program pada html dokumen atau elemen yang terdapat pada html dokumen.

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:
Output:

penggunaan link pada html untuk menuju ke laman atau alamat web lain

Gambar 1 link html

Internal link adalah tipe dari hyperlink yang targetnya adalah sumber seperti gambar atau dokumen pada satu alamat website atau domain.

Input:
Output:

Gambar 2 internal link html

Mengubah warna link pada html
Perbedaan tipe dari tampilan link pada format berbeda seperti:
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:
Output:

menggubah tampilan warna dari link dengan menggunakan css

Gambar 3 mengubah tampilan warna link

Atribut target pada link
Atribut target digunakan untuk menunjukkan lokasi dimana link dokumen dibuka. Pilihan berbeda dapat digunakan pada atribut target yang ditandai berikut ini.

mengubah tampilan dari link yang digunakan pada laman html menggunakan css

Gambar 4 tampilan warna link berbeda

Output:

menggunaan atribut target untuk menentukan metode kemunculan halaman baru pada tag link html

Gambar 5 link dengan atribut target html

Menggunakan gambar sebagai link pada html
Gambar dapat digunakan sebagai link untuk alamat url spesifik.

Input:
Output:

penggunaan image sebagai link pada laman html dengan menggunakan tag link

Gambar 6 penggunaan image sebagai link

Membuat link bookmark untuk laman web
Sebuah bookmark adalah link yang bisa digunakan untuk menuju ke tujuan spesifik dari laman web. Bookmark sangat berguna jika sebuah laman web sangat panjang.

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>

Input:

<!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>

Output:

Membuat link download pada html
Sebuah teks link dari sebuah pdf, doc, ataupun file zib dapat dibuat sebagai suatu laman download.

Input:
Output:

Blog Guru Komputer

Header Adsense

Navigasi Blog TIK

Jumat, September 06, 2019

HTML link

Tidak ada komentar:

Posting Komentar

Footer Adsense