Link dalam satu halaman – Pernahkah anda melihat sebuah website yang memiliki MENU ketika salah satu menu tersebut diklik yang terjadi bukan membuka halaman baru, namun halaman akan bergeser ke bawah menuju kalimat yang dituju dari Klik tadi. Itulah yang dinamakan hyperlink in pages ( link yang ada di satu halaman ).
Dengan menggunakan cara link seperti ini orang yang membaca dapat lebih mudah untuk melompat secara langsung ke bagian tertentu yang masih dalam satu halaman. Model website seperti ini biasa dikenal dengan istilah landing page. Jadi model website landing page pada dasarnya itu sebuah website yang hanya satu halaman, namun berisi tulisan dan gambar yang sangat panjang sekali.
Jika anda scroll manual dengan mouse mungkin bisa capek sekali karena saking panjangnya. Maka dari itu dibuatlah sebuah sistem landing page ini untuk mempermudah pembaca dalam membaca artikel yang diinginkan.
Website model landing page ini juga bertujuan seperti sebuah novel namun dalam satu halaman saja. Tujuan pembuat website landing page ini seakan ingin menceritakan sesuatu bisa produk/artikel/gambar yang berututan dari mulai atas sampai bawah.
Jika isi dari landing page ini sangat banyak sekali yang mungkin jika discroll dengan mouse bisa lama sekali, maka pembaca bisa bosan untuk membacanya. Oleh karena itu dengan membuat link dalam satu halaman ini pembaca dapat dengan mudah untuk pindah-pindah ke judul tertentu yang diinginkan.
Biasanya website model landing page ini memiliki menu yang tetap selalu di atas, jika mouse di scroll ke bawah menu tetap berada diatas seperti mengambang. Tujuan menu dibuat mengambang ini agar pembaca bisa pindah-pindah ke tujuan tertentu cukup dengan klik menu-menu tersebut tanpa harus scroll mouse. Ketika web dibuka melalui android secara otomatis pun menu ini juga akan berfungsi
OK, sekarang ke point bagaimana cara membuat link dalam satu halaman sebuah website baik berupa cms, wordpress bahkan blog.
Membuat Nama Target
Nama target dari link ini itu seperti sebuah kepala pada satu bagian tubuh. Kepala ini bisa berupa judul atau subjudul dari sebuah paragraf. Langkah pertama dengan membuat sebuah ID, dimana ID ini merupakan sebuah nama dari kepala tersebut.
Bisa dilihat dari gambar diatas ada sebuah paragraf tentang mobile apps. Nah rencananya kita beri paragraf ini sebuah nama ID “mobile-apps”. Untuk membuat sebuah ID dari link ini usahakan tidak memakai spasi. Anda bisa melihat penulisan ID untuk paragraf tersebut seperti gambar dibawah ini :
Kode membuat ID link target seperti contoh berikut :
<div id=”mobile-apps “>paragraph</div>
Menentukan Link ke Nama Target
Dalam membuat link hal pertama yang kita lakukan adalah membuat menu/kata yang akan dijadikan link tersebut. Koding yang dibuat untuk link tersebut seperti contoh berikut :
<a href=”https://rasytech.com/#mobile-apps”>
Terlihat dari gambar diatas bahwa menu yang dijadikan untuk link yaitu menu LAYANAN->Mobile Application. Dari tampilan di bagian kiri bawah tampak hasil link yang telah dibuat.
Ketika menu Mobile Application diklik maka website akan otomatis scroll/turun ke bawah dengan sendirinya.