Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Membuat Hyperlink pada HTML

Dipublikasikan Oleh: elfanmauludi 32 komentar
Hyperlink merupakan sebuah ungkapan yang berasal dari kata hyper dan link. Kata hyper merujuk pada hypertext atau hypertext markup language (html), sedangkan link merujuk pada alamat atau lokasi url yang dituju ketika sebuah hyperlink aktif atau diklik. Hyperlink merupakan inti dari pemrograman berbasis web. 

Sebelum mempelajari materi tentang cara Membuat Hyperlink pada HTML, terlebih dahulu pelajari materi tentang: Cara Menggunakan File Path pada HTML, Cara Membuat Iframe pada HTML, dan Membuat Komentar Dengan HTML.

Hyperlink dalam HTML (Hypertext Markup Language) adalah elemen kunci yang memungkinkan pengguna untuk berpindah dari satu halaman web ke halaman web lainnya atau ke bagian-bagian spesifik di dalam halaman yang sama. Dalam dunia web, hyperlink merupakan fondasi dari struktur dan konektivitas antar halaman. Hyperlink memungkinkan pengguna untuk menjelajahi dan mengakses berbagai informasi secara mudah.

Hampir semua web yang terhubung secara online menggunakan hyperlink atau link untuk dapat berpindah dari satu alamat web ke alamat web lainnya. Pada materi ini peserta didik akan belajar bagaimana membuat hyperlink pada laman html dengan menggunakan tag <a> (anchor), dimana ketika tag tersebut di klik maka web akan berpindah ke halaman web lain yang telah dituju.

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.

Contoh:

<!DOCTYPE html>

<html>

 

<h3>

Contoh penambahan link

</h3>

 

<body>

<p>

Klik link berikut ini:

</p>

 

<a 

href = "https://www.penelitian.id/">

blog penelitian.id

</a>

</body>

 

</html>

Output:

Klik link berikut ini:

blog Penelitian.id

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

Contoh:

<!DOCTYPE html>

<html>

 

<h3>

Contoh internal link dan external link.

</h3>

 

<body>

<p>

<a 

href="https://www.penelitian.id/">

Halaman profil blog Penelitian.id

</a>

</p>

 

<p>

<a 

href="https://www.penelitian.id/">

blog Penelitian.id

</a> 

</p>

</body>

 

</html>

Output:

Halaman profil blog Penelitian.id

blog Penelitian.id


Mengubah Warna Link pada HTML
Perbedaan tipe dari tampilan link pada format berbeda seperti diperlihatkan berikut ini:
  • Tampilan link yang belum dikunjungi memiliki garis bawah dan warna biru secara default.
  • Tampilan link yang telah dikunjungi memiliki garis bawah dan warna purple secara default.
  • Link aktif memiliki garis bawah dan warna merah secara default.

Tampilan dari warna-warna default pada link dapat diubah dengan menggunakan CSS.

Contoh:

<!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://www.penelitian.id/">

blog Penelitian.id

</a>

 

<p>

Link

</p>

<a 

href="https://facebook.com">

facebook

</a>

 

<p>

efek hover

</p>

<a href="https://www.penelitian.id/">

blog Penelitian.id

</a>

 

</body>

 

</html>


Baca Juga:

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:

Contoh:

<!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://www.penelitian.id/" 

target="_blank">

blog Penelitian.id

</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://www.penelitian.id/" 

target="_self">

blog Penelitian.id

</a>

 

<p>

Jika atribut diatur ke tipe

"_top", maka link akan membuka

alamat tujuan pada full

window.

</p>

<a 

href="https://www.penelitian.id/" 

target="_blank">

blog Penelitian.id

</a>

 

<p>

Jika atribut diatur ke tipe

"_parent", maka link akan

membuka alamat tujuan pada

parent frame.

</p>

<a 

href="https://www.penelitian.id/" 

target="_blank">

blog Penelitian.id

</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 Penelitian.id

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

blog Penelitian.id

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

blog Penelitian.id

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

blog Penelitian.id


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

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h3>

Menggunakan image sebagai link.

</h3>

 

<p>

Klik untuk mengunjungi blog Penelitian.id.

</p>

<a href="https://www.penelitian.id/">

<img 

src="elf_200X200.jpeg" 

alt="blog Penelitian.id"

style="width:80px;height:80px;border:0">

</a>

 

</body>

 

</html>


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:
  • Gunakan atribut id, ciptakan bookmark: <h2 id="T17">Topic</h2>
  • Tambahkan jatah spesifik dari laman web menuju bookmark: <p><a href="#T17">Jump to Topic 17</a></p>

Contoh:

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

Contoh:

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

Referensi Tambahan:

Artikel ini didedikasikan kepada: Alvira Vita Listyandani, Andi Pebriyanto, Anisa Nurul Firdaus, Ardima Miftaqul Aini, dan Asti Pangestu.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

32 komentar untuk "Membuat Hyperlink pada HTML"

  1. AnonimSenin, 24 Mei 2021 pukul 07.51.00 WIB

    Apa yang dimaksud dengan link pada html?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 pukul 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 pukul 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
    3. AnonimKamis, 04 Agustus 2022 pukul 14.01.00 WIB

      Hyperlink adalah elemen yang terdapat dalam laman html yang digunakan untuk menautkan laman lain ke dalam dokumen atau sebaliknya secara bersamaan. Di dalam sebuah web, hyperlink biasanya berwarna ungu atau biru, namun juga bisa berbeda tergantung penggunaan style yang diterapkan oleh perancang web.

      Hapus
  2. AnonimSenin, 24 Mei 2021 pukul 07.53.00 WIB

    Apakah warna biru untuk hyperlink bisa diubah dengan warna lainnya?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 pukul 07.54.00 WIB

      Bisa, dengan menggunakan kode CSS,

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

      Hapus
  3. AnonimKamis, 04 Agustus 2022 pukul 14.02.00 WIB

    Hyperlink adalah sebuah kata, frasa, atau gambar yang dapat diklik dan ketika diklik dapat menuju ke laman dokumen atau web baru yang telah dituju. Hyperlink dapat ditemukan pada semua laman website atau html. Dengan hyperlink, pengguna bisa berpindah dari satu halaman ke halaman lain secara cepat. Untuk jenis hyperlink teks biasanya berwarna biru atau ungu yang disertai garis bawah, namun aturan tersebut tidak bersifat baku.

    BalasHapus
  4. AnonimKamis, 04 Agustus 2022 pukul 14.02.00 WIB

    Ada berapa tipe hyperlink?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.03.00 WIB

      Ada tiga tipe hyperlink.
      1. Hyperlink teks, dimana link ini menggunakan teks atau frase yang ditautkan ke halaman web lain atau web itu sendiri.
      2. Hyperlink gambar, dimana link ini menggunakan gambar yang ditautkan ke halaman web lain atau web itu sendiri.
      3. Hyperlink bookmark, dapat menggunakan teks atau gambar ataupun kombinasi keduanya yang ditautkan ke halaman web lain atau web itu sendiri.

      Hapus
  5. AnonimKamis, 04 Agustus 2022 pukul 14.06.00 WIB

    Hyperlink HTML adalah sebuah bentuk tautan yang mengarah pada laman web lainnya. Perancang web dapat mengklik link dan langsung melompoat ke laman dokumen lain yang telah dituju atau diarahkan sebelumnya. Jika user menggerakkan kursornya menuju ke arah hyperlink, pointer atau panah kursor akan berubah menjadi bentuk lain yang dapat mengindikasikan bahwa itu adalah hyperlink. Hyperlink tidak hanya berupa teks, namun juga bisa berupa gambar ataupun elemen HTML lainnya.

    BalasHapus
  6. AnonimKamis, 04 Agustus 2022 pukul 14.06.00 WIB

    Bagaimana cara yang benar untuk membuat hyperlink pada laman html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.07.00 WIB

      Untuk membuat hyperlink pada laman HTML, gunakan tag anchor atau '<' 'a' '>' dan '<' '/' 'a' '>', yang merupakan tag yang dapat digunakan untuk menentukan link. Tag Anchor menunjukkan dimana hyperlink dimulan dan tag Anchor end menunjukkan dimana anchor berakhir. Teks apapun yang terdapat antara kedua tanda tersebut dalam laman HTML akan berfungsi sebagai hyperlink.

      Hapus
  7. AnonimKamis, 04 Agustus 2022 pukul 14.07.00 WIB

    Apa tujuan dari penggunaan Hyperlink pada html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.08.00 WIB

      Fungsi hyperlink adalah untuk membuat pintasan yang menuju ke lokasi url web lain yang tersimpan pada server jaringan, intranet, ataupun internet. Saat user mengklik sebuah sel yang berisi hyperlink, maka user akan diarahkan menuju ke lokasi yang telah didaftarkan, atau dapat juga mengarahkan user untuk membuka tab baru sesuai alamat yang telah dituju.

      Hapus
  8. AnonimKamis, 04 Agustus 2022 pukul 14.10.00 WIB

    Apakah perbedaan antara link dan hyperlink?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.11.00 WIB

      Link yang digunakan dalam halaman web disebut dengan hyperlink. Secara sederhana, link adalah alamat web, sedangkan hyperlink adalah tautan yang menghubungkan halaman-halaman dalam situs web yang sama ataupun berbeda dalam konteks world wide web.

      Hapus
  9. AnonimKamis, 04 Agustus 2022 pukul 14.11.00 WIB

    Kenapa sebuatan tautan pada laman web disebut dengah hyperlink?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.11.00 WIB

      Istilah asli untuk sebuah "link" pada masa awal perkembangan internet adalah "hyperlink", dimana eksternal link juga disebut sebagai outbound link. Dan jika dilihat dari perspektif keteknisian, "link" adalah sebuah tautan yang menghubungkan dokumen "hypertext" dari satu dokumen ke dokumen (laman html) yang lainnya. Sehingga link tersebut kemudian disebut dengan hyper+link atau hyperlink.

      Hapus
    2. AnonimKamis, 04 Agustus 2022 pukul 14.12.00 WIB

      jadi istilah hyperlink berasal dari dua kata yaitu hyper + link. kata hyper mengacu pada hypertext pada HTML (htypertext markup language), dan link mengacu pada tautan yang terdapat dalam dokumen hyper (atau html).

      Hapus
  10. AnonimKamis, 04 Agustus 2022 pukul 14.12.00 WIB

    Apakah bisa dalam filefolder1.html menggunakan link untuk kembali lagi ke file latihan 13.html?
    Contoh kasus ketika saya membuat folder database dalam folder tersebut saya membuat file login.html dan folder main menu...dalam folder main menu ada file menu.html,,,,dalam file login.html saya menyisipkan link untuk ke file menu.html dengan syntax <a href="/main menu/menu.html>...
    Setelah berhasil dalam menyisipkan link tersebut saya berniat untuk menambahkan fitur logout dalam file menu.html tadi dengan cara membuat link yang menuju login.html yang berada di luar folder main menu tersebut

    BalasHapus
  11. AnonimKamis, 04 Agustus 2022 pukul 14.16.00 WIB

    Apa yang dimaksud dengan internal link pada html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.16.00 WIB

      Internal link adalah tautan yang berpindah dari satu laman pada domain saat ini ke laman lain pada domain yang sama. Internal link biasanya digunakan pada navigasi website jalur utama. Internal link yang berguna pada laman web karena memungkinkan pengguna untuk membuat navigasi web dan membantu membangun hierarki informasi untuk situs web dalam satu domain itu sendiri.

      Hapus
    2. AnonimKamis, 04 Agustus 2022 pukul 14.16.00 WIB

      Internal link adalah tautan apapun dari satu halaman situs web ke halaman situs web lain yang berada dalam satu domain. User dan mesin pencari menggunakan link internal untuk menemukan konten pada situs yang dicari. Pengguna juga menggunakan internal link untuk melakukan navigasi web dan menemukan konten yang dingin dicari yang juga digunakan oleh mesin pencari dalam mencari informasi dalam suatu situs.

      Hapus
  12. AnonimKamis, 04 Agustus 2022 pukul 14.17.00 WIB

    Bagaimana cara membuat link internal dan eksternal pada laman html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.17.00 WIB

      Link dapat dibuat pada laman html dengan menggunakan atribut HREF. User atau perancang dapat menggunakan atribut HREF untuk membuat sebuah link dalam direktori yang terdapat pada laman html itu sendiri (internal link) dan juga dapat menautkannya ke situs web lainnya (eksternal link).

      Hapus
  13. AnonimKamis, 04 Agustus 2022 pukul 21.20.00 WIB

    Untuk menggunakan gambar sebagai hyperlink pada HTML, digunakan tag IMG serta tag ANCHOR dengan menggunakan atribut HREF. Tag IMG digunakan untuk mengambil gambar pada laman web dan tag ANCOR digunakan untuk menambahkan link ke dalam gambar yang telah digunakan. Sedangkan atribut tag SRC digunakan untuk menambahkan URL link ke dalam gambar.

    BalasHapus
  14. AnonimKamis, 04 Agustus 2022 pukul 21.20.00 WIB

    Apa berbedaan antara IMG to link dan link to IMG?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 21.21.00 WIB

      IMG to link maksudnya dalah menggunakan gambar sebagai alamat link. Jadi jika terdapat gambar pada laman web, maka gambar tersebut dapat diklik dan akan mengarahkan pengguna ke alamat lain yang telah ditentukan.

      Hapus
    2. AnonimKamis, 04 Agustus 2022 pukul 21.21.00 WIB

      Link to IMG adalah sebuah link yang bisa saja berbentuk teks ataupun gambar yang didalamnya berisi pintasan atau link ke alamat lain pada website.

      Hapus
  15. AnonimKamis, 04 Agustus 2022 pukul 21.22.00 WIB

    Apa yang membuat link mengalami error atau tidak bisa digunakan?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 21.22.00 WIB

      Ada banyak faktor yang membuat link mengalami masalah ke tika di klik,
      1. bisa jadi URL yang ditautkan tidak lengkap penulisannya atau salah ketik.
      2. URL yang dituju atau alamat web yang dituju memang sudah tidak ada atau sudah non aktif.
      3. Koneksi internet.
      4. Firewal atau proxy yang membatasi akses ke suatu alamat web tertentu yang tenyata dituju oleh url.
      dan lain sebagainya.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -