Tutorial HTML Links

Tutorial HTML Links

Link ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk dapat mengklik jalan mereka dari satu halaman ke halaman yang lain, atau dari satu situs ke situs yang lain.

Link HTML - Hyperlink

link pada HTML adalah hyperlink.

Kamu dapat mengklik link dan melompat ke halaman dokumen yang lain.

Bila kamu memindahkan mouse di atas link, panah mouse akan berubah menjadi tangan kecil.
Catatan: Sebuah link pada HTML tidak harus hanya berupa teks. Link pada HTML dapat berupa gambar atau elemen lain yang ada pada HTML.

Link HTML - Sintaks

Dalam HTML, link yang dapat didefinisikan dengan tag  <a> :
<a href="url">link text</a>
Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p><a href="https://www.fajaryusuf.com/">Kunjungi website pemrograman Indonesia</a></p>

</body>
</html>
Kamu bisa mencobanya disini, Hasil :
Link HTML - Sintaks
klik gambar untuk memperbesar
href atribut menentukan alamat tujuan link ( https://www.fajaryusuf.com/ ).

Link teks adalah bagian yang terlihat tampil di browser (Kunjungi website pemrograman Indonesia).

Melakukan klik pada link teks akan mengirim kamu ke alamat yang ditentukan.

Catatan: Tanpa garis miring pada akhir alamat subfolder pada situs, kamu mungkin akan menghasilkan dua permintaan ke server. Banyak server secara otomatis akan menambahkan garis miring ke akhir alamat, dan kemudian membuat permintaan baru.

Link lokal

Contoh di atas sebelumnya menggunakan URL absolut (alamat web penuh).

Sebuah link lokal (link ke situs web yang sama) ditentukan dengan URL relatif tanpa halaman index (tanpa https: // www ....).

Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Local Links</h2>

<p><a href="/fajaryusufhtmleditor.html">Fajaryusuf HTML editor</a> adalah tautan ke halaman di situs web ini(local links).</p>

<p><a href="https://www.w3.org/">W3C</a> adalah tautan ke situs web di World Wide Web(eksternal links).</p>

</body>
</html>
Hasil :
Link lokal HTML
klik gambar untuk memperbesar

HTML Warna Link

Secara default, link akan muncul seperti ini (di semua browser) :

  • Link yang belum dikunjungi adalah teks yang digaris bawahi dan berwarna biru
  • Sebuah link yang pernah dikunjungi adalah teks yang digaris bawahi dan berwarna ungu
  • Link aktif adalah teks yang digaris bawahi dan berwarna merah

Kamu dapat mengubah warna default, dengan menggunakan CSS:

Contoh :

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<h2>Link Colors</h2>

<p>Kamu bisa mengganti warna link default dengan CSS</p>

<a href="/fajaryusufhtmleditor.html/" target="_blank">FAJARYUSUF.COM HTML Editor</a> 

</body>
</html>
Hasil :
HTML Warna Link
klik gambar untuk memperbesar


Link yang sering bergaya sebagai tombol, dengan menggunakan CSS:
Ini adalah link

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>Sebuah link dengan gaya tombol</p>
<a href="https://www.fajaryusuf.com" target="_blank">ini link</a>

</body>
</html>
Hasil :
HTML Warna Link button
klik gambar untuk memperbesar


Untuk mempelajari lebih lanjut tentang CSS, silakan lihat tutorial CSS fajaryusuf.com.

Link HTML - Target Atribut

Target atribut dapat menentukan di mana letak untuk membuka dokumen terkait.

Target atribut dapat memiliki salah satu dari nilai berikut :

  • _blank - Membuka dokumen terkait di jendela baru atau tab
  • _self - Membuka dokumen terkait dalam window yang sama / tab seperti yang diklik (ini adalah pengaturan default)
  • _parent - Membuka dokumen terkait dalam kerangka induk
  • _top - Membuka dokumen terkait dalam tubuh penuh window
  • framename - Membuka dokumen terkait dalam bingkai bernama

Contoh ini akan membuka dokumen terkait dalam jendela browser / tab baru:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.fajaryusuf.com/" target="_blank">Visit Website belajar pemrograman FajarYusuf.Com</a> 

<p>Jika Anda menetapkan atribut target ke "_blank", tautan akan terbuka di jendela atau tab browser baru.</p>

</body>
</html>
Hasil :
Link HTML - Target Atribut
klik gambar untuk memperbesar


Tip: Jika halaman Web Anda terkunci dalam bingkai, Anda dapat menggunakan target="_top"untuk keluar dari frame:

Contoh :

<!DOCTYPE html>
<html>
<body>

<p>terkunci oleh frame? <a href="https://www.fajaryusuf.com/html/" target="_top">Klik ini!</a></p>

</body>
</html>
Hasil :
Link HTML - Target Atribut
klik gambar untuk memperbesar


HTML Link - Gambar sebagai Link

Hal ini umum untuk menggunakan gambar sebagai link :

Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Image Links</h2>

<p>Gambar adalah tautan. Anda bisa mengkliknya.</p>

<a href="http://fajaryusuf.com">
  <img src="https://1.bp.blogspot.com/-eNaxnaKmLsc/XFLJWZv3brI/AAAAAAAABa4/LduM-HUJAZYc1otZ162Y9rY1z3FymHH1wCK4BGAYYCw/s231/colorpicker.webp" alt="HTML tutorial" style="width:60px;height:50px;border:0">
</a>

<p>Saya telah menambahkan "border: 0" untuk mencegah IE9 (dan sebelumnya) menampilkan perbatasan di sekitar gambar.</p>

</body>
</html>
Hasil :
HTML Link - Gambar sebagai Link
klik gambar untuk memperbesar

Catatan: border:0; ditambahkan untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar (ketika gambar adalah link).

Link Judul

Title Atribut menentukan informasi tambahan tentang elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas sebuah elemen.

Contoh :
<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>
<p>Tittle Atribut menentukan informasi tambahan tentang suatu elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas elemen.</p>
<a href="https://www.fajaryusuf.com/" title="Judul ini akan muncul ketika mouse berada diatas elemen link">Kunjungi web belajar pemrograman FajarYusuf.Com</a>

</body>
</html>
Hasil :
Link Judul
klik gambar untuk memperbesar

Link HTML - Membuat Bookmark

bookmark HTML digunakan untuk memungkinkan pembaca untuk melompat ke bagian tertentu dari halaman Web.

Bookmark dapat berguna jika halaman Web kamu sangat panjang.

Untuk membuat link bookmark, kamu harus terlebih dahulu membuat bookmark, dan kemudian menambahkan link untuk itu.

Ketika link diklik, halaman akan gulir ke lokasi dengan penunjuk tersebut.

Contoh
Pertama, buat bookmark dengan idatribut:
<h2 id="C4">Bab 4</h2>
Kemudian, menambahkan link ke bookmark ( "Langsung ke Bab 4"), dari dalam halaman yang sama:
<a href="#C4">Langsung ke Bab 4</a>
Atau, menambahkan link ke bookmark ( "Langsung ke Bab 4"), dari halaman lain:

Contoh :
<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Langsung ke Bab 4 </a> </p>

<h2> Bab 1 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 2 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 3 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2 id = "C4"> Bab 4 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 5 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 6 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 7 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 8 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 9 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 10 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 11 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 12 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 13 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 14 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 15 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 16 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 17 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 18 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 19 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 20 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 21 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 22 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 23 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

</body>
</html>
Hasil :
Link HTML - Membuat Bookmark
klik gambar untuk memperbesar

Link eksternal

halaman eksternal dapat dirujuk dengan URL penuh atau dengan path relatif ke halaman web saat ini.

Contoh ini menggunakan URL lengkap untuk link ke halaman web:

Contoh :
<a href="https://www.fajaryusuf.com/">Pemrograman tutorial</a>

Contoh ini link ke halaman yang terletak di folder html di situs web saat ini:

Contoh :
<a href="/p/html-editor-fajaryusufcom.html">HTML Editor FajarYusuf.Com</a>



Ringkasan

  • Gunakan elemen <a> untuk mendefinisikan link
  • Gunakan href atribut untuk menentukan alamat link
  • Gunakan target atribut untuk menentukan di mana untuk membuka dokumen terkait
  • Gunakan <img> elemen (dalam <a>) untuk menggunakan gambar sebagai link
  • Gunakan id atribut (id = " value ") untuk menentukan bookmark di halaman
  • Gunakan href atribut (href = "#value ") untuk menghubungkan ke bookmark
Disqus Comments