Link HTML

Link adalah sebuah elemen yang ketika di-click akan membuka sebuah web page (halaman web) baru.

Link memiliki nama lain yaitu hyperlink atau anchor.

Tag anchor

Tag anchor berguna untuk memunculkan sebuah link.

Contoh 1:

<a>Ini adalah link!</a>

Hasil contoh 1:

Ini adalah link!

Contoh diatas sudah tampak seperti sebuah link, tapi sebenarnya elemen di atas harus dilengkapi dengan atribut lain. Attribute yang kurang di sini adalah href atau Hypertext Reference.

Atribut href

Atribut href (hypertext reference) adalah atribut yang berisi URL atau alamat web yang akan dibuka jika link di-click.

Berikut ini adalah sebuah link yang telah dilengkapi dengan atribut href:

Contoh 2:

<a href="http://www.wordpress.org/">WordPress self host</a>

Hasil contoh 2:

WordPress self host

Atribut target

Atribut target berguna untuk menentukan cara munculnya web page yang dibuka jika link di-click.

Berikut ini adalah beberapa pilihan atribut target:

target= Keterangan
_blank Buka halaman web di window atau tab baru
_self Halaman yang sedang dibuka diubah dengan halaman yang akan dibuka (default)
_parent Buka halaman di parent frame
_top Buka halaman di window yang sedang dibuka, membatalkan semua frame

*Pada HTML5, "_parent" dan "_top" sudah deprecated karena web sekarang tidak ditulis berdasarkan frame atau frameset.

Berikut ini adalah contoh atribut target _blank:

Contoh 3:

<a href="http://id.forums.wordpress.com/" target="_blank">forum WordPress.com Indonesia</a>

Hasil contoh 3:

forum WordPress.com Indonesia

Global dan local link

Ada beberapa jenis URL yang bisa digunakan oleh sebuah link. Diantaranya yaitu global dan local link. Url link yang ditulis secara lengkap dengan nama domain seperti dibawah ini disebut sebagai global link:

<a href="http://bangjuju.com/link-html/">Link HTML</a>

Url link yang ditulis singkat tanpa nama domain seperti di bawah ini disebut sebagai local link:

<a href="/link-html/">Link HTML</a>

Global link bisa digunakan untuk link yang membuka web page pada external site (berbeda domain) maupun web page pada web site yang sama (domain yang sama). Sedangkan local link hanya bisa digunakan untuk link yang membuka web page pada web site yang sama.

Relative dan absolute path

Relative dan absolute path adalah jenis lainnya dari URL yang bisa digunakan oleh sebuah link.

Relative path

Relative path adalah alamat file, folder atau web page (file path) yang dituju tergantung dari alamat file yang sedang digunakan.

Contoh, Ada dua buah file yaitu [index.html] dan [a.html]. Pada file [index.html] yang sedang digunakan atau dibuka ada link yang menuju ke file [a.html]. File [index.html] berada di dalam directory:

http://www.mydomain.com/products/sales/

File [a.html] berada di dalam directory:

http://www.mydomain.com/products/

Lokasi file [a.html] berada satu directory lebih tinggi dari file [index.html] sehingga code link pada file [index.html] yang menggunakan relative path tampak seperti berikut ini:

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

Code [../] pada relative path menunjukkan bahwa alamat file yang dituju berada satu tingkat lebih tinggi daripada alamat file yang sedang digunakan.

Berdasarkan contoh di atas, untuk membuat sebuah relative path tergantung dari alamat file yang sedang digunakan.

Link yang menggunakan relative path hanya bisa digunakan untuk internal link karena URL domain tidak dituliskan dalam relative path.

Absolute path

Absoute path adalah alamat file yang dimulai dengan URL domain. Dinamakan absolute karena alamat file yang dituju sudah pasti dan tidak tergantung dari alamat file yang sedang digunakan.

Absoute path bisa ditulis dalam dua bentuk yaitu bentuk lengkap dan bentuk pendek. Bentuk lengkap absolute path ditulis dengan URL domain.

Contoh,

Pada contoh berikut ini kita menggunakan contoh yang sama seperti contoh relative path di atas. Bedanya adalah link pada file [index.html] ditulis menggunakan absolute path:

  1. http://www.mydomain.com/products/a.html
  2. /products/a.html

Contoh pertama di atas adalah absolute path dalam bentuk lengkap sedangkan contoh kedua adalah absolute path dalam bentuk pendek.

Pada contoh dua yaitu: /products/a.html, character slash / pada bagian awal menandakan bahwa alamat file tersebut adalah absolute path.

Pada penulisan absolute path bentuk pendek, bagian URL domain (document root) dihilangkan.

Perbedaan absolute path bentuk pendek dan relative path

Absolute path bentuk pendek bisa juga disebut relative path terhadap document root (URL) karena setiap absolute path bentuk pendek tergantung dari document root yang sedang digunakan. Sedangkan relative path tergantung dari alamat file yang sedang digunakan.

Perhatikan absolute path bentuk pendek berikut ini:

/products/a.php

Alamat file di atas selalu tergantung pada document root (http://www.mydomain.com). Artinya adalah jika kita memiliki alamat file seperti di atas maka alamat file tersebut akan selalu sama artinya dengan: http://www.mydomain.com/products/a.php.

Absolute path bentuk pendek bisa juga disebut setengah absolute dan setengah relative karena absolute path bentuk pendek merupakan perpaduan antara absolute dan relative atau tidak 100% absolute dan juga tidak 100% relative.

Perhatikan relative path berikut ini:

products/a.php

Relative path di atas selalu tergantung pada alamat file yang sedang digunakan.

Jika alamat file yang sedang digunakan adalah: http://mydomain.com dan kita menggunakan code link: <a href="products/a.php">a</a> maka link tersebut akan menuju ke: http://www.mydomain.com/products/a.php.

Sedangkan jika alamat file yang sedang digunakan adalah: http://mydomain.com/some/path dan kita menggunakan code link yang sama, yaitu: <a href="products/a.php">a</a> maka link tersebut akan menuju ke: http://mydomain.com/some/path/products/a.php.

Penggunaan absolute path dan relative path

Gunakan absolute path dalam bentuk pendek atau relative path untuk internal link karena bisa mempercepat page load.

Sedangkan link yang menuju external site hanya bisa menggunakan absolute path dalam bentuk lengkap.

Manfaat lainnya menggunakan absolute path dalam bentuk pendek atau relative path adalah jika kamu mengubah nama domain maka link yang kamu gunakan tidak perlu diubah.

Contoh

Berikut ini adalah directory dari file yang sedang dibuka atau file yang berisi link:

http://www.mydomain.com/products/sales/july/

Sedangkan di bawah ini adalah daftar dari alamat file atau alamat directory yang dituju beserta alamat relative dan absolutenya yang harus digunakan:

Jenis Level Absolute Path (lengkap) Absolute Path (pendek) Relative Path
Directory Sama http://www.mydomain.com/products/sales/july/ /products/sales/july/
File Sama http://www.mydomain.com/products/sales/july/index.html /products/sales/july/index.html
Directory 1 Level Up http://www.mydomain.com/products/sales/ /products/sales/ ../
File 1 Level Up http://www.mydomain.com/products/sales/summary.html /products/sales/summary.html ../summary.html
File 1 Level Up http://www.mydomain.com/products/sales/services/index.html /products/sales/services/index.html ../services/index.html
Directory 2 Level Up http://www.mydomain.com/products/ /products/ ../../
File 2 Level Up http://www.mydomain.com/products/demo.html /products/demo.html ../../demo.html
File 2 Level Up http://www.mydomain.com/products/category/index.html /products/category/index.html ../../category/index.html
Directory 3 Level Up http://www.mydomain.com / ../../../
File 3 Level Up http://www.mydomain.com/index.html /index.html ../../../index.html
File 3 Level Up http://www.mydomain.com/aboutus/index.html /aboutus/index.html ../../../aboutus/index.html
Directory 1 Level Down http://www.mydomain.com/products/sales/july/images/ /products/sales/july/images/ images/
File 1 Level Down http://www.mydomain.com/products/sales/july/images/product1.jpg /products/sales/july/images/product1.jpg images/product1.jpg

Penjelasan:

Pada contoh di atas, file yang berisi link berada pada directory:

http://www.mydomain.com/products/sales/july/

Link dari file yang berada pada directory di atas menuju file yang berada pada directory yang lebih tinggi dua tingkat maka link tersebut akan tampak seperti berikut ini:

  • Absolute Path (pendek): <a href="/products/category/index.html">index</a>
  • Relative Path: <a href="../../category/index.html">index</a>

Bookmark link

Bookmark link adalah link yang menuju ke bagian tertentu dari sebuah halaman web.

Contoh 4:

Pertama, pilih elemen pada halaman web yang ingin ditampilkan dan beri atribut id seperti berikut ini:

<h3 id="anchor">Tag anchor</h3>

Atribut id berguna untuk memberi nama atau label pada sebuah elemen yang nantinya elemen tersebut bisa dipanggil atau diakses menggunakan atribut id tersebut.

Jika halaman web yang dituju masih sama dengan halaman web tempat link bookmark berada maka link bookmark bisa dibuat sederhana seperti berikut ini:

<a href="#anchor">Menuju Tag anchor</a>

Jika bagian elemen yang dituju berada pada halaman web lain maka link bisa ditulis seperti berikut ini:

<a href="http://bangjuju.com/link-html/#anchor">Menuju Tag anchor</a>

Hasil contoh 4:

Menuju Tag anchor

Link bookmark di atas akan menuju bagian Tag anchor pada halaman web ini.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>