Tuesday, September 23, 2014

Memasang Link Pada HTML

Link adalah sebuah penanda untuk menghubungkan pengguna ke sebuah alamat atau URL sebuah halaman atau sebuah situs. Link sebenarnya merupakan sebutan singkat dari Hyperlink. Kegunaan Link dalam sebuah website diperlukan untuk akses pengguna yang lebih mudah dan cepat. Untuk menuju ke suatu halaman web pengguna cukup meng-klik sebuah Link yang diberikan oleh server. Link dapat berupa text ataupun gambar. Dalam artikel ini juga sekalian dibahas tentang cara memasang link dengan gambar pada sebuah halaman HTML.

Memasang Link pada HTML dengan Tag <a>

Untuk memasang Link digunakan tag <a>...</a> yang merupakan singkatan dari kata anchor. Untuk menentukan halaman tujuan digunakan atribut href, jadi sintak dasar minimal sebuah link pada html adalah sebagai berikut :
 <a href="url-link-tujuan">tampilan-link-text atau gambar</a>  
URL-Link tujuan dapat berupa sebuah halaman tertentu dalam satu situs misal tentang-kami.html atau lengkap menyebutkan nama situs dan halaman seperti www.nulis-ilmu.blogspot.com/tentang-kami.html atau juga hanya sekedar menyebutkan nama situs seperti www.nulis-ilmu.blogspot.com.
Tampilan link text atau gambar merupakan display link yang dapat dilihat dan di klik oleh pengguna. Untuk format text link dapat mengacu pada tag formatting HTML.

Ada beberapa atribut lain dalam membuat sebuah link, yaitu:

  1. HREF, menunjukkan alamat tujuan sebuah link. Ada tiga jenis penulisan nilai atribut HREF yaitu :
    • Halaman lokal adalam satu situs, cukup dengan cara menyebut langsung halaman, contoh:
       <a href="tentang-kami.html">Tentang Kami</a>  
      
    • Halaman tertentu yang terdapt pada situs lain, caranya dengan ditulis lengkap nama situs dengan http dan nama halaman, contoh:
       <a href="http://nulis-ilmu.blogspot.com/tentang-kami.html">Tentang Kami</a>  
      
    • Nama situs tanpa menyebut halaman, ditujukan untuk menuju ke situs tertentu dan akan langsung membuka halaman index situs tersebut. Untuk nama situs harus ditulis lengkap dengan http, contoh :
       <a href="http://nulis-ilmu.blogspot.com">Nulis Ilmu Bermanfaat</a>  
      
  2. TARGET, merupakan target tampilan sebuah link yang ditunjukkan oleh HREF. Ada beberapa nilai untuk atribut TARGET yang bisa dipilih, yaitu:
    • _blank, membuka link pada tab baru dalam satu jendela, contoh:
       <a href="tentang-kami.html" target="_blank">Tentang Kami</a>  
      
    • _self, membuka link pada frame dan tab yang sama. ini merupakan default atribut misal atribut tidak diset. contoh:
       <a href="tentang-kami.html" target="_self">Tentang Kami</a>  
      
    • _parent, membuka link pada jendela baru. Jadi browser akan membuat lagi satu window untuk menampilkan halaman yang dituju oleh link ini. contoh:
       <a href="tentang-kami.html" target="_parent">Tentang kami</a>  
      
    • _top, membuka link pada full body dari sebuah jendela. contoh:
       <a href="tentang-kami.html" target="_top">Tentang kami</a>  
      
  3. ID, merupakan atribut untuk menentukan id sebuah link. ID ini bisa digunakan untuk berbagai keperluan seperti bookmark dan javascript.
    contoh pemasangan atribut ID pada Link :
     <a href="tentang-kami.html" target="_blank" id="link1">Tentang kami</a>

Memasang link dengan gambar dengan tag <img>

Selain menggunakan text, link juga bisa dibuat dengan menggunakan gambar. Hal ini biasa dipakai saat akan menampilkan gambar besar melalui link thumbnail gambar yang berukuran lebih kecil. Atau juga bisa dipakai saat menampilkan preview post dalam bagian artikel terkait.

Untuk menampilkan link dengan gambar cukup dilakukan dengan meletakkan tag <img> diantara tag <a>...</a>. Semua atribut yang dipakai pada tag <img> juga bekerja saat dipakai untuk link.
Contoh pemasangan link menggunakan gambar:
 <a href="tentang-kami.html" target="_blank" id="link1"><img src="images/profil.jpg"></a>

Referensi :

2 komentar:

  1. Makasi infonya gan...

    Bagi agan yang berminat belajar mwmbuat web bisa dilihat di situs berikut ini Belajar Web Design

    ReplyDelete
    Replies
    1. sama-sama mas. trimakasih juga kunjungannya

      Delete