Langsung ke konten utama

Iklan





HTML Link

Gambar
waktu publikasi
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 berupa 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:

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

Output:

Klik link berikut ini:

blog ElfanMauludi

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

Output:

Halaman profil blog ElfanMauludi

blog ElfanMauludi


Mengubah Warna Link pada HTML
Perbedaan tipe dari tampilan link pada format berbeda seperti diperlihatkan berikut ini:
  • 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">

facebook

</a>

 

<p>

efek hover

</p>

<a href="https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a>

 

</body>

 

</html>


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:

Input:

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

Output:

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 ElfanMauludi

Jika atribut diatur ke tipe "_self", maka link akan membuka alamat tujuan pada tab atau window yang sama pada browser.

blog ElfanMauludi

Jika atribut diatur ke tipe "_top", maka link akan membuka alamat tujuan pada full window.

blog ElfanMauludi

Jika atribut diatur ke tipe "_parent", maka link akan membuka alamat tujuan pada parent frame.

blog ElfanMauludi



Iklan

Menggunakan Gambar Sebagai Link pada HTML
 Gambar dapat digunakan sebagai link untuk alamat url spesifik.

Input:

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

Output:

Menggunakan image sebagai link.

Klik untuk mengunjungi blog ElfanMauludi.

blog elfanmauludi

Membuat Link Bookmark untuk Halaman Website
 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:

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

Output:

Membuat link download

Download PDF File


Iklan
Oleh
Labels:
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

Komentar

  1. AnonimSenin, 24 Mei 2021 07.51.00 WIB

    Apa yang dimaksud dengan link pada html?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 07.51.00 WIB

      Link 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.

      Hapus
    2. AnonimSenin, 24 Mei 2021 07.53.00 WIB

      Pada 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.

      Hapus
  2. AnonimSenin, 24 Mei 2021 07.53.00 WIB

    Apakah warna biru untuk hyperlink bisa diubah dengan warna lainnya?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 07.54.00 WIB

      Bisa, dengan menggunakan kode CSS,

      seperti pada blog ini digunakan warna hijau sebagai warna default untuk hyperlink.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D