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 :

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 :

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 :

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 :

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 :

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 :

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWMKs_4w4BupLyD8U8I-Ri8eA56j6dNay27FC-vMCX1I9I0Sgq0JgRGK2xEFcCP0_uqQZxgujnF4LbfeP7n9jsXBKCv4tYeelhtXGBPOy9Qq1kOi0xnBEJJ1_2oGFn9pmZjdTT7PVJkY/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 :

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 :

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 :

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

Traha Infinity a lancé une campagne événementielle de pré-inscription

Moai Games a officiellement annoncé la sortie d’ un nouveau MMORPG intitulé Traha Infinity , dans la première moitié de 2022. Ce jeu mobile devrait se dérouler 200 ans avant les événements des précédents jeux Traha , il a des graphismes Full 3D et optimisés performances haut de gamme pour smartphones. Traha a été un énorme succès en Corée avec 4,2 millions de précommandes avant sa sortie officielle en 2019, le jeu mobile n’a jamais eu de sortie mondiale. Ce jeu a été développé par Moai Games et publié par Nexon , et est devenu l’un des jeux les plus vendus de l’époque. Et maintenant, Traha Infinity continuera le même monde comme une suite, plutôt une préquelle. Le nouveau jeu présentera la même vision du monde et la même topographie que le jeu précédent, mais présentera un nouveau scénario. Ils se vantent d’ une qualité graphique Full 3D haut de gamme ainsi que d’un système optimisé pour les smartphones. Les joueurs pourront explorer l...

Baca Lebih »

FajarYusuf

Search This Blog