tutorial pengembangan web terbaru

Link HTML


Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik jalan mereka dari halaman ke halaman.


HTML Link Deskripsi

hyperlink, atau hanya link, adalah referensi untuk data yang pembaca dapat langsung mengikuti baik dengan mengklik, menekan, atau melayang.

Sebuah hyperlink menunjuk ke sebuah dokumen keseluruhan atau untuk elemen tertentu dalam dokumen. Hypertext adalah teks dengan hyperlink. Teks yang terhubung dari disebut jangkar teks.

Sebuah sistem perangkat lunak yang digunakan untuk melihat dan menciptakan hypertext adalah sistem hypertext, dan untuk membuat hyperlink adalah hyperlink (atau hanya untuk link). Seorang pengguna hyperlink berikut dikatakan untuk menavigasi atau menelusuri hypertext.


Link HTML - Hyperlink

link HTML adalah hyperlink.

Sebuah hyperlink adalah teks atau gambar Anda bisa klik pada, dan melompat ke dokumen lain.


Link HTML - Sintaks

Dalam HTML, link yang didefinisikan dengan <a> tag:

<a href=" url "> link text </a>

Contoh

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Cobalah sendiri "

The href atribut menentukan alamat tujuan (http://www.w3ii.com/html/default.html)

Teks link adalah bagian yang terlihat (Visit our HTML tutorial) .

Mengklik pada link teks, akan mengirimkan ke alamat yang ditentukan.

Teks link tidak harus berupa teks. Hal ini dapat gambar HTML atau elemen lain HTML.

Tanpa slash tertinggal pada alamat subfolder, Anda mungkin akan menghasilkan dua permintaan ke server. Banyak server secara otomatis akan menambahkan slash trailing untuk alamat, dan kemudian membuat permintaan baru.


Link lokal

Contoh di atas digunakan URL absolut (A full web address) .

Sebuah link lokal (link to the same web site) ditentukan dengan URL relatif (without http://www.... ) .

Contoh

<a href="html_images.asp">HTML Images</a>
Cobalah sendiri "

Link HTML - Warna

Bila Anda memindahkan mouse di atas link, dua hal yang biasanya akan terjadi:

  • Panah mouse akan berubah menjadi tangan kecil
  • Warna elemen link akan berubah

Secara default, link akan muncul seperti ini (in all browsers) :

  • Link yang belum dikunjungi adalah digarisbawahi dan biru
  • Sebuah link dikunjungi adalah digarisbawahi dan ungu
  • Link aktif adalah digarisbawahi dan merah

Anda dapat mengubah warna default, dengan menggunakan gaya:

Contoh

<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>
Cobalah sendiri "

Link HTML - The target Atribut

The target Atribut menentukan di mana untuk membuka dokumen terkait.

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

Contoh

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
Cobalah sendiri "
Target Nilai Deskripsi
_blank Membuka dokumen terkait di jendela baru atau tab
_self Membuka dokumen terkait dalam frame yang sama seperti yang diklik (this is default)
_parent Membuka dokumen terkait dalam kerangka induk
_top Membuka dokumen terkait dalam tubuh penuh jendela
framename Membuka dokumen terkait dalam bingkai bernama

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

Contoh

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Cobalah sendiri "

HTML Link - Gambar sebagai Link

Hal ini umum untuk menggunakan gambar sebagai link:

Contoh

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Cobalah sendiri "

border: 0 ditambahkan untuk mencegah IE9 (and earlier) dari menampilkan perbatasan di sekitar gambar.


Link HTML - Membuat Bookmark

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

Bookmark praktis jika website Anda memiliki halaman.

Untuk membuat bookmark, Anda 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 id atribut:

<h2 id="tips">Useful Tips Section</h2>

Kemudian, menambahkan link ke bookmark ("Useful Tips Section") , dari dalam halaman yang sama:

<a href="#tips">Visit the Useful Tips Section</a>

Atau, menambahkan link ke bookmark ("Useful Tips Section") , dari halaman lain:

Contoh

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Cobalah sendiri "

Bab Ringkasan

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

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »


HTML Tautan Tags

Menandai Deskripsi
<a> Mendefinisikan hyperlink