2012/07/26

Cara Membuat Link dari dan ke Halaman Yang Sama

Cara Membuat Link dari dan ke Halaman Yang Sama - Menargetkan link pada halaman yang sama tapi pada bagian yang berbeda ini banyak digunakan pada web-web ensiklopedia semacam wikipedia.org atau web yang mengandung banyak teks. Tetapi penggunaannya tidak terbatas untuk itu. Teknik ini juga saya gunakan di beberapa artikel saya yang terdahulu. Teknik Menargetkan link pada halaman yang sama ini biasa disebut sebagai Contribution Link.

Menargetkan link pada halaman yang sama ini menggunakan penargetan ID dari halaman yang sama. Misalnya, dengan menargetkan pada ID tertentu misalnya <a href='#contoh'>link contoh</a>, maka link akan menuju tag dengan ID 'contoh'. Misalnya <div id='contoh'>div</div> atau <span id='contoh'>span</span> bahkan format heading jika di beri ID seperti <h1 id=''>contoh heading</h1> dan lain sebagainya.

Untuk bahan praktek silahkan lihat Contribution Link dengan HTML yang menentukan penargetan URL dan ID berikut:

<ul>
 <li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
 <li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
</ul>

Url target harus sama dengan halaman target yang di tandai dengan target ID.
Ket :
no 2 menargetkant link unuk menuju pada halaman 2 dengan url target #contoh2.
no 2 menargetkant link unuk menuju pada halaman 3 dengan url target #contoh3.
Lihat contoh berikut
<h1 id="contoh2">Halaman 2</h1>
  <p><a href="#main">Top</a></p>
Baris pertama menandakan ID untuk kembali pada menu halaman dengan target #contoh1 yang sama.
Baris kedua menandakan untuk kembali ke tag yang diberi ID #main atau #top (biasanya tiap blog mempunyai ID ini untuk menandai bagian posting) atau kembali ke bagian awal.

Jika keseluruhan HTML di atas digabungkan maka akan menghasilkan HTML seperti di bawah ini
<ul>
 <li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
 <li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
</ul>
 <h1 id="contoh1">Halaman 1</h1>
  <p> ........ Isi Artikel/Naskah/Posting ........... </p>
 <h1 id="two">Halaman 2</h1>
  <p><a href="#main">Top</a></p>
  <p> ........ Isi Artikel/Naskah/Posting ........... </p>
 <h1 id="three">Halaman 3</h1>
  <p><a href="#main">Top</a></p>
  <p> ........ Isi Artikel/Naskah/Posting ........... </p>

Dengan cara menargetkan link pada halaman yang sama kita bisa membuat satu halaman yang sangat panjang dengan shostcut untuk menuju ke bagian tertentu dari halaman tersebut dengan meletaknnya di bagian paling atas artikel. Contohnya adalah seperti di wikipedia.org seperti saya singgung sebelumnya.

Tinggalkan komentar dan ikutan mejeng di Recent Comments.
- Komentar dimoderasi untuk mencegah komentar spam dan double post. Jadi komentar tidak akan langsung muncul.
- Daftarkan nama di profil blogger agar tidak tampil Unknown.
- Jangan pernah menuliskan no. HP maupun e-mail, komentar akan dihapus/tidak di publikasikan demi keamanan anda sendiri.
- Lihat halaman kontak untuk berkomunikasi secara intens dengan penulis artikel.
Kamus EmoticonSembunyikan