ARI JULIANTO Network www.arijulianto.com

Oleh | HTML | | Dibaca 2.309 kali | 0 komentar

Link atau hyperlink adalah sebuah teks yang apabila di klik akan menuju ke dokumen lainnya baik dalam satu halaman ataupun luar halaman web page. Untuk membuat sebuah teks hyperlink diperlukan tag anchor <a>...</a> dengan atribut dasar href. Keberadaan link dalam sebuah web merupakan sesuatu yang sangat penting karena hyperlink lah yang menghubungkan antara satu halaman dengan halaman lain dalam sebuah website.

<a href="URL">...</a>

Sebuah tag anchor memiliki beberapa atribut seperti berikut:

  • href : diisi dengan URL atau lokasi halaman web yang ingin dituju, bisa halaman internal ataupun eksternal, domain internal ataupun domain eksternal.
  • name : nama dari sebuah anchor, harus berupa huruf, angka, dan beberapa simbol khusus: underscore (_) dan dash (-).
  • target : target bagaimana halaman web akan dibuka. Pilihannya terdiri dari
    • _blank - Halaman web terkait akan dibuka dalam window baru.
    • _parent - Halaman web terkait akan memuat dalam window atau frame yang sama.
    • _self - Halaman web akan dibuka di window atau frame yang sama dengan lokasi hyperlink. Ini adalah target default.
    • _top - Halaman baru akan memuat ke atas jendela reguardless berapa banyak framesets dalam link ini ditanamkan.

Dalam pemanggilan href dalam tag anchor, format penulisan URL harus mengikuti pola URL yang telah ditentukan. Silakan baca bahasan lebih lanjut mengenai URI dan URL di sini.

Lihat contoh berikut.

<a href="http://www.arijulianto.com">Klik link ini</a>

Hasilnya seperti ini

Mari kita lihat beberapa contoh pembuatan link berikut.

<a href="http://www.websaya.com/folder/myweb.html">Welcome</a>
<a href="tutorial/html/link_hyperlink.html">Tutorial</a>
<a href="../page/15.html">Hal 15</a>

Di sini saya akan mencoba membahas lebih jauh baris yang ketiga saja, karena saya kira itu merupakan sesuatu yang teramat penting dalam penulisan formar URL dengan domain internal khususnya.

Path

Dari contoh ketiga di atas (baris ketiga) mungkin beberapa diantara kita ada yang merasa aneh dengan contoh ketiga... Benar ga?? Atau mungkin menjawab seperti ini "titik dua kali itu adalah nama foldernya".

Ups... teman-teman semua, double dot itu bukan nama folder, tapi itu adalah sebuah cara untuk memanggil file yang berada di atas folder file yang aktif berada. Mari lihat contoh struktur direktori ini.

directory

misal, file index.html (folder paling atas) berisi code seperti ini:

<HTML>
<HEAD>
<title>Selamat Datang di Webku</title>
</HEAD>
<BODY>
<h1>Selamat Datang Di Websiteku yang Keren</h1>
<p>di sini Anda bisa melihat berbagai konten web yang menarik karyaku pribadi.</p>
<p><a href="index.html">Home</a> | <a href="myweb/page/15.html">Hal 15</a> | <a href="myweb/folder/test.html">Test</a></p>
<p>Silakan klik pada salah satu menu di atas untuk melihat konten yang ada...</p>
</BODY>
</HTML>

Misalkan dari halaman index.html itu kita klik link Test dimana file test.html itu berisi code seperti ini:

<HTML>
<HEAD>
<title>Selamat Datang di Webku</title>
</HEAD>
<BODY>
<h1>Halam Test Websiteku yang Keren</h1>
<p>di sini Anda bisa melihat berbagai konten web yang menarik karyaku pribadi.</p>
<p>
<a href="../../index.html">Home</a> |
<a href="../page/15.html">Hal 15</a> |
<a href="test.html">Test</a>
</p>
<p>Anda sudah mengklik link Test</p>
</BODY>
</HTML>

Mari kita bahas baris yang ini saja

<p>
<a href="../../index.html">Home</a> |
<a href="../page/15.html">Hal 15</a> |
<a href="test.html">Test</a>
</p>

href="../../index.html" => kalo dibaca dengan bahasa saya pribadi jadi seperti ini: 'naik satu folder (titik yg pertama, berarti menuju folder myweb) terus naik satu kali lagi (titik yg kedua, berarti menuju folder public_html) kemudian panggil index.html'.

Silakan coba baca yang href="../page/15.html" seperti yang saya contohkan tadi... Lalu lakukan percobaan secara langsung dengan membuat beberapa folder dan subfolder bila perlu buat kedalaman subfolder lebih dari dua, misalnya seperti ini:

complex directory

Lalu buat file-file di masing-masing folder, lalu lakukan percobaan membaca dan coba buat scriptnya di notepad untuk kemudian di save menjadi file HTML.

Link dengan Gambar

Setelah kita membuat link dengan teks, sekarang waktunya kita akan membahas cara membuat link dengan gambar. Selain menggunakan teks, link juga dapat dibuat dengan menggunakan image/gambar. Caranya adalah dengan mengkombinasikan antara tag <A> dan tag <IMG>. Berikut ini adalah contoh dokumen HTML yang menggunakan image sebagai link.

Image juga dapat dijadikan Link <a href="link_hyperlink.html"><img src="button.gif" width="65" height="38" border="2"></a>

Adapun hasilnya dapat dilihat pada browser berikut.

Image juga dapat dijadikan Link