Saturday, March 2, 2013

Membuat Tautan Ketitik Tertentu di HTML

Melanjuti artikel Membuat Tautan Didalam Dokumen HTML, kali ini bagaimana membuat tautan yang apabila diklik akan menuju kepada titik tertentu di dalam dokumen HTML yang sama dan kepada titik tertentu di dalam dokumen HTML yang berlainan.

Untuk kedua hal itu perlu melibatkan atribut NAME di dalam elemen A untuk dijadikan target dari suatu tautan.

Ketitik dokumen yang sama
Contoh berikut membuat titik target dari tautan:

<A NAME="nama">Titik Target</A>

Dan untuk membuat tautan yang apabila diklik akan menuju ke nama (elemen A di atas), anda bisa menuliskan seperti berikut:

<A HREF="#nama">Menuju ke Titik Target</A>

Pastikan nilai HREF diawali dengan #, baru nilai dari atribut NAME-nya.

Contoh:

<HTML> <BODY> <P>Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. <A HREF="#nama">Menuju ke Titik Target</A> Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet.</P> <H2><A NAME="nama">Titik Target</A></H2> <P STYLE="height:1000px;">Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet.</P> </BODY> </HTML>

Ketitik dokumen yang berlainan
Contoh berikut sama seperti contoh sebelumnya, hanya saja berlainan dokumen. Misalkan elemen A di bawah ini berada dalam dokumen bernama HTMLDoc2:

<A NAME="nama">Titik Target</A>

Lalu misalnya elemen A yang akan mengakses nama di atas berada di dalam dokumen HTML yang bernama HTMLDoc1, maka bentuknya akan seperti berikut:

<A HREF="HTMLDoc2.html#nama">Menuju ke Titik Target</A>

Untuk jelasnya, tuliskan kode HTML di bawah ini, lalu simpan dengan nama HTMLDoc1:

<HTML> <BODY> <A HREF="HTMLDoc2.html#nama">Menuju ke Titik Target</A> </BODY> </HTML>

Lalu tuliskan lagi kode HTML di bawah ini, lalu simpan dengan nama HTMLDoc2. Untuk contoh ini pastikan HTMLDoc2 disimpan pada direktori yang sama di mana HTMLDoc1 tersimpan:

<HTML> <BODY> <P STYLE="height:1000px;">Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet.</P> <H2><A NAME="nama">Titik Target</A></H2> <P STYLE="height:1000px;">Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet. Lorem imsum dolor siamet.</P> </BODY> </HTML>

Klik link di dalam dokumen HTMLDoc1, nantinya akan diantarkan kepada titik anchor di dalam dokumen HTMLDoc2.