HTML PArt 12 : Link Pada HTML

Assalamu alaikum Wr Wb.

Dalam pertemuan kali ini, saya akan memaparkan mengenai Link Pada HTML.

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

Link HTML - Hyperlink

Link HTML adalah hyperlink.

Anda dapat mengklik link dan melompat ke dokumen lain.

Bila Anda memindahkan mouse di atas link, panah mouse akan berubah menjadi tangan kecil.

Catatan: Sebuah link tidak harus berupa teks. Hal ini dapat hgambar atau elemen lain HTML.

Link HTML - Sintaks

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

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

Contoh

<a href="http://www.allifsulthonia.blogspot.co.id/">Visit our HTML tutorial</a>

• Tag href atribut menentukan alamat tujuan (http://www.allifsulthonia.blogspot.co.id/) link.

• Tag link teks adalah bagian yang terlihat (Kunjungi tutorial HTML saya).

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

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

Link Lokal

Contoh di atas digunakan URL absolut (A alamat web penuh).

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

Contoh

<a href="html_image.asp">HTML Images</a>

HTML Warna Tautan

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

Link yang belum dikunjungi adalah digarisbawahi dan berwarna biru.

Sebuah link dikunjungi adalah digarisbawahi dan berwarna ungu.

Link aktif adalah digarisbawahi dan berwarna merah.

Anda dapat mengubah warna default, dengan meggunakan gaya:

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

Link HTML - Target Atribut

Tag Target atribut menentukan di mana untuk membuka dokumen terkait.

Atribut target dapat memiliki salah satu dari nilai berikut.

_blank - Membuka dokumen terkait di jendela baru atau tab

_self - Membuka dokumen terkait di jendela yang sama / tab seperti yang diklik (ini adalah default).

_parent - Membuka dokumen terkait dalam kerangka induk

_top - Membuka dokumen terkait dalam tubuh penuh jendela

framename - Membuka dokumen terkait dalam bingkai bernama.

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

Contoh

<a href="http://www.allifsulthonia.blogspot.co.id/" target="_blank">Visit Allif Blog!</a>

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

Contoh

<a href="http://www.allifsulthonia.blogspot.co.id/" target="_top"> HTML5 Tutorial!</a>

HTML Link - Gambar Sebagai Link

Hal ini umum untuk menggunakan gambar sebagai link:

Contoh

< a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width: 42px; height: 42px; border: 0;">

</a>

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

Link HTML - Membuat Bookmark

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

Bookmark dapat berguna jika halaman Web Anda sangat penting.

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

<h2 id="tips">Gunakan Pilihan Tips</h2>

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

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

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

Contoh

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

Jalur 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="http://www.allifsulthonia.blogspot.co.id">HTML Tutorial</a>

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

Contoh

<a href="/html/default.asp">HTML Tutorial</a>

Contoh ini link ke halaman yang terletak di folder yang sama dengan halaman saat.

Contoh

<a href="default.asp">HTML Tutorial<a/>

REFERENSI

http://www.w3schools.com/html/html_links.asp