Pengetahuan Bisnis : Chapter 05 - Hyperlink Pada Halaman Web


 

A ANATOMI LINK


    Link adalah suatu objek yang dapat berupa teks atau gambar yang dipakai dalam kode, HTML untuk menuju dari suatu bagian ke bagian yang lain pada halaman yang sama, atau menuju ke halaman (file) yang berbeda. Default suatu link  biasnya ditandai dengan teks warna biru dengan garis bawah, dan jika pointer mouse ditujukan ke link tersebut, maka akan berubah menjadi telunjuk tangan,
Peran link dalam halaman web sanagt besar dan selalu dibutuhkan untuk memudahakan untuk memudahkan pengguna web dalam berintraksi dengan halaman-halaman web yang ada. Link dalam HTML ditandai dengan tag <A> (Anchor) yang terdiri dari atribut HREE yang digunakan untuk menuliskan lokasi tujuan (file) dari link dan variabel NAME yang digunakan untuk menyimpan nama variabel kunci sebagai lokasi (bagian) `yang akan dituju` oleh link.
    

    Sintaks link adalah sebagai berikut: <a href=”url”> nama link</a>
Link dapat dibuat pada suatu teks atau gambar dengan cara melatakkan teks atau gambar tersebut di antara tag pembuka < A HREF> dan tag penutup </A>.
Contoh penulisan kode link adalah sebagai berikut :

<A HREF=”tugas.html” NAME=”#bagian1”> Ke BAB 2 </A>
<A HREF=”tugas.html#bagian1” NAME=”#bagian2”>
Ke BAB 1</A>
Link menggunakan gambar :
<A HREF=”tugas.html” NAME=”#bagian1”>
<img src=”logo.jpg> </A>

    Pada bagian href digunakan untuk referensi file tujuan, sehingga pada contoh di atas dapat ditulis href=”tugas.html”>.
Jika pada file tugas.html terdapat banyak bab dan penempatan link digunakan untuk berpindah antar bab, maka pada tiap link diberi nama variabel setelah tag name dan pada href disebutkan bagian bab yang dituju, sehingga penulisannya menjadi :
Href=”tugas.html1#bagian2”.


1.       Mengenal Jenis Link


    Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen html. Browser Web akan meyorot (“highleght”) teks atau gambar yang didefinisikan sebagai link dengan warna dan garis bawah untuk menunjukkan bahwa itu adalah hyperlink atau link.


a.       Link Relatif

    Link relatif merupakan link yang fungsinya untuk berpindah antar halaman web komputer yang sama. Jika dua halaman web berada pada satu direktori yang sama, maka dapat  dituliskan nama file halaman yang dituju. Contohnya : <A HREf =”halaman2.html”>Lanjut</A>


b.      Link Absolut

    Link absolut adalah link yang fungsinya untuk berpindah antara halaman website yang satu dengan website yang lain di  internet. Contohnya : <A HREF =http://www.rahuldi94.blogpot.com>Kunjungi blog saya</A>


FORMAT LINK ANATAR ISI PADA SUATU HALAMAN WEB


Pengertian

    

    Format link antar isi pada suatu halaman web biasa disebut juga dengan link dalam satu halaman, berbeda dengan hyperlink pada umumnya yang biasa digunakan untuk menghubungkan suatu tulisan dengan tulisan lain yang berada pada halaman yang berbeda atau blog yang berbeda, link itu lebih banyak digunakan untuk halaman yang sama. Misalnya membuat tautan link yang mengarah ke atas, ke tengah, dan ke bawah. Link ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. 

    Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link atar bagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga dalam dokumen akhir ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju ke bagian-bagian tersebut.


Prinsip Dasar Penggunaan

    

    Prinsip dasarnya adalah kita menandai terlebih dahulu suatu bagian dengan memberi tanda tag anchor misalnya < a name=”atas”>, kemudian pada bagian yang lain kita buat link untuk memangginya dengan kode < a href=”#atas”>Sintaksnya adalah sebagai berikut : 


<a name=”atas”>ATAS</a>                 <-- objek tujuan

<a href=”#atas”>ke Atas</a                <-- link menuju ke tujuan

Perhatikan tanda pagar (#) di atas, untuk objek tujuan tidak memakai tanda pagar, akan tetapi untuk link yang menuju ke tujuan harus memakai tanda pagar.


    Link yang menuju ke suatu bagian tertentu sangat berguna terutama untuk halaman web dengan postingan yang sangat panjang, sehingga link dengan target dalam satu halaman ini untuk mempermudah navigasi pengunjung website.


Cara Membuat Link dalam Satu halaman


a.       Menentukan nama terget


    Pilih bagian artikel yang ingin dijadikan  sebagai target link, bisa berupa sebuah paragraf, subjudul, kalimat, atau kata yang kita inginkan. Kemudian dibuat name atau id  pada kata yang dipilih tersebut dengan satu nama variabel, dalam pemberian nama variabel tersebut tanpa menggunakan spasi, karena spasi pada browser akan berubah menjadi “%20%


Contoh 1 :

                <div id=”bab3”> BAB III </div>

Contoh 2 :

                <a name=”bab4”> BAB IV </a>


b.      Membuat link ke target


    Buatlah kalimat atau kata yang ingin dijadikan sebagai link yang akan ditunjukan ke target link, misalnya sebagai berikut :

<a href=”#bab3”>Ke Bab III </a>

* <a href=”#bab4”>Ke Bab IV </a>


Link ke File


Ada beberapa cara penulisan sintaks link untuk menuju ke suatu halaman tertentu (file). Berikut ini adalah cara penulisan link yang menuju ke halaman yang berbeda.


* Jika file yang dituju berada pada folder/directory yang sama dengan file link, maka cukup dituliskan nama filenya, misalnya :


<a href=”produk.html”>Daftar Produk</a>


* Jika file yang dituju berada pada subfolder di dalamnya, maka dituliskan nama foldernya. misalnya:


<a href=”galery/macam.html”>Galery Produk</a>


* Jika file yang dituju berada pada folder di atas folder yang ditemapati oleh file link, maka penulisannya seperti berikut:


<a href=”../tentang.html”>About me</a>


* Jika file yang dituju berada dua tingkat di atas folder link, maka dituliskan dua kali titik seperti berikut ini:


<a href=”../../tentang.html”>About me</a>


Berdasarkan lokasi tujuannya, link dapat dibedakan menjadi 4 macam, yaitu:


a.       Link yang menuju ke bagian tertentu pada halaman yang sama <a href=”#bab2” name=”bab1”>Lihat Bab 2</a>

b.       Link yang menuju ke halaman yang lain dalam web yang sama <a href=”galery.html”>Galeri Foto</a>

c.       Link yang menuju ke halaman yang lain dalam web yang berbeda <a href=”http://www.rusydi94.blogspot.com/tentang.html”>Tutorial Web</a>

d.       Link yang menuju ke bagian tertentu pada halaman web yang berbeda <a href=”http://www.rahul94.blogspot.com/home.html#ling”>Linknya</a>


Tidak ada komentar:

Posting Komentar