BELAJAR HTML 8 : Cara Membuat Link di HTML

html

Cara membuat Link di HTML

Tujuan kata hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainya. HTML menggunakan tag <a> untuk keperluan ini.


Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar) Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).

Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat kode seperti dibawah ini.

Contoh penggunaan tag link <a>:



 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>Penggunaan Tag Link </title>  
 </head>  
 <body>  
  <h1>Belajar Tag Link</h1>  
  <p>Saya sedang belajar HTML dari   
  <a href="http://www.duniailkom.com">Duniailkom</a></p>  
 </body>  
 </html>
Save dengan nama link.html, lalu buka dengan browser.
tag link 

Alamat Absolute dan Alamat Relatif

Pada contoh diatas kita menuliskan alamat link secara lengkap dengan bagian “http://www.”. Penulisan seperti ini disebut juga dengan external link, yang berarti kita membuat link ke alamat lain di internet, atau lebih dikenal dengan: alamat absolut.

Alamat absolut adalah penulisan alamat file dengan menyertakan nama website, seperti: href=”http://www.duniailkom.com/belajar_html.html”, atau href=”http://www.wikipedia.org”.
Namun jika kita ingin membuat link di dalam situs yang sama, maka tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file saat ini. Jenis alamat ini disebut alamat relatif.

Sebagai contoh alamat relatif, apabila kita ingin membuat link kepada file hello.html pada folder yang sama dengan file saat ini, maka atribut hrefnya, berisi: href=”hello.html”. Berikut adalah kode HTMLnya:

Contoh penggunaan tag link <a> untuk alamat relatif:

 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>Penggunaan Tag Link </title>  
 </head>  
 <body>  
  <h1>Belajar Tag Link</h1>  
  <p>Halaman HTML pertama saya adalah <a href="hello.html">Hello</a></p>  
 </body>  
 </html>
Save dengan nama link2.html, lalu bukan dengan browser :
tag link 

Alamat absolute ditulis dengan lengkap, seperti http://www.igemx.blogspot.com, atau jika kita merujuk kepada halaman tertentu, menjadi http://www.igemx.blogspot.com/nama_halaman.html.
Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini. Seandainya nama file kita adalah belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita dapat menggunakan href=”belajar_list.html” untuk membuat link ke halaman belajar_list.html.

Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatifnya menjadi href=”lagi_belajar/belajar_list.html”. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../belajar_list.html”, untuk naik 2 folder diatasnya.

Atribut tag <a>: target
Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.
Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.

Contoh penggunaan tag link <a> dengan atribut target:


 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Penggunaan Tag Link </title>  
 </head>  
 <body>  
 <h1>Belajar Tag Link</h1>  
 <p>Saya sedang belajar html dari <a href="http://www.duniailkom.com"  
 target="_blank">Duniailkom</a> dan akan terbuka pada tab baru</p>  
 </body>  
 </html>
Save dengan nama link3.html, lalu buka dengan browser :
tag html 

Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru, dan tidak menimpa tab saat ini.

ideSelain digunakan untuk menghubungkan halaman HTML, Tag <a> juga bisa digunakan untuk dihubungkan ke bagian lain dari halaman yang sama, atau disebut Internal Link. 
Cara pembuatan internal link adalah dengan membuat link berisi atribut id dari tag lain. Untuk lebih jelasnya, akan kita bahas pada tutorial HTML Lanjutan: Cara Membuat Internal Link ke Bagian Lain Dokumen (atribut id).
Melanjutkan pembahasan mengenai tutorial belajar HTML dasar, pada tutorial selanjutnya kita akan membahas tentang Cara Menambahkan Gambar di HTML, menggunakan tag <img>.


Sumber : duniailkom.com

Komentar

Posting Komentar

Postingan populer dari blog ini

BELAJAR PHP 5 : Cara Menjalankan File PHP dengan XAMPP

Gambar
Mengenal Folder htdoc Agar dapat mengakses halaman PHP dari web browser , maka anda harus menempatkan file PHP di dalam folder khusus yang merupakan folder home dari web server. Pada aplikasi XAMPP , folder tersebut adalah folder htdocs yang berada di dalam folder instalasi XAMPP . Jika anda mengubah tempat instalasi XAMPP menjadi D:\xampp ( jika mengikuti tutorial sebelumnya), maka folder tersebut seharusnya berada di D:\xampp\htdocs . Anda bisa meletakkan file PHP langsung di dalam folder ini, atau agar memudahkan pencarian file , buatlah sebuah folder baru di dalam folder htdocs ini. Untuk tutorial belajar PHP , saya akan membuat folder "belajar". Folder belajar inilah yang aka kita jadikan sebagai tempat file PHP nantinya. Cara menulis File PHP File PHP pada dasarnya merupakan file text biasa yang bisa di buat menggunakan aplikasi notepad bawaan windows, namun untuk fitur yang lebih, anda dapat menggunakan aplikasi editor text seperti Notepat++ , yang dapat di dow
Baca selengkapnya

BELAJAR PHP 10 : CARA PENULISAN KOMENTAR DALAM KODE PHP

Gambar
BELAJAR PHP 10 : CARA PENULISAN KOMENTAR DALAM KODE PHP Pada tutorial Belajar PHP kali ini kita akan membahas cara penulisan komentar di dalam kode PHP . PHP menyediakan beberapa cara untuk menambahkan komentar yang mirip dengan cara memberikan komentar di bahasa pemograman lain seperti C, C++ dan Unix Shell Komentar di perlukan untuk memberikan penjelasan kepada orang lain yang membaca kode kita. komentar sepenuhnya akan diabaikan oleh PHP pada saat eksekusi. Walaupun anda berfikir bahwa mungkin hanya anda yang akan membaca kode program tersebut, namun itu adalah ide yang bagus. saya sendiri sering bingung ketika memahami beberapa baris kode program setelah beberapa bulan tidak melihatnya. Komentar yang baik adalah komentar singkat dan tidak terlalu panjang, namun memberikan penjelasan tentang kegunaan kode atau variabel tersebut dibuat. Selain sebagai tempat membuat penjelasan, sifat komentar yang tidak akan dieksekusi oleh PHP , memberikan ke
Baca selengkapnya

BELAJAR PHP 8 : CARA MENGUBAH FILE KONFIGURASI PHP (php.ini)

Gambar
BELAJAR PHP 8 : CARA MENGUBAH FILE KONFIGURASI PHP (php.ini). Dalam tutorial belajar PHP kali ini kita akan mempelajari cara mengubah/mengedit file konfigurasi PHP melalui file php.ini. Hal ini terdengar sedikit rumit. Namun dengan mengetahui cara mengubah settingan PHP , akan membantu kita dalam menguasi PHP .  Mencari file php.ini dengan phpinfo() Sama seperti MySQL , seluruh setingan PHP berada dalam sebuah file konfigurasi yang bernama php.ini. Tergantung settingan awal, file php.ini bisa berada dalam folder sistem Windows , atau di dalam folder PHP itu sendiri. Untuk mengetahui lokasi file php.ini, jalankan XAMPP dan web server Apache , lalu dari halaman awal localhost, cari menu phpinfo() pada menu sebelah kiri. phpinfo() merupakan sebuah fungsi bawaan PHP yang digunakan untuk mengetahui settingan PHP itu sendiri. Anda juga bisa menampilkan phpinfo dengan membuat sebuah file PHP, dan menuliskan kode berikut : <?php echo phpinfo(); ?> Didalam t
Baca selengkapnya