Link dalam HTML

7:35 PM

Tag <a> dan </a> adalah sepasang tag yang digunakan untuk menandai link di dalam kode HTML. Tag <a> memiliki atribut "href" yang digunakan untuk menentukan link yang dituju. Bagi yang belum tahu apa itu atribut, atribut dari suatu tag HTML adalah keterangan yang berisi nilai yang berkaitan dg kegunaan tag tersebut. Nilai atribut HTML dan nama atributnya dipisahkan dengan tanda sama dengan (=). Nilai tersebut diapit dengan tanda kutip ("). Contohnya, href pada tag <a> berguna untuk menentukan file atau alamat yang dituju saat link diklik.

<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <a href="http://infoq4all.blogspot.co.id/">klik di sini</a>
    </BODY>
</HTML>


Simpan dan jalankan. Jika kalian melakukan klik kiri pada tulisan tersebut maka kalian akan masuk ke blog "http://infoq4all.blogspot.com " atau halaman yang sesuai dengan nilai href. Jika ingin mengubah tujuannya, cukup ubah nilai href. Contohnya :
<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <a href="http://bahasaq4all.blogspot.co.id/">klik di sini</a>
</BODY>
</HTML>
Alamat website bisa didapat dengan menyalin isi "address bar" di browser. Alamat website biasanya diawali dengan HTTP atau HTTPS. Tanpa "http//:" atau "https//:" pada awal alamat website, link mungkin saja akan membuka file di folder yg sama sesuai nilai href.

Membuka File

Kita juga bisa mengubah nilai atribut href dengan nama file yang terletak di folder yang sama dengan file tempat kode HTML tersebut supaya saat diklik yang dibuka adalah file yang ada dalam nilai atribut "href".

Contoh :
<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <a href="file.htm">klik di sini</a>
</BODY>
</HTML>
Jika belum ada file tersebut, buat file dengan nama file.htm supaya file tersebut dibuka saat link diklik. Jika file yang ingin kita buka saat link diklik ada di dalam folder yang ada dalam folder tempat file yg sedang dijalankan, maka kita bisa meletakkan nama folder sebelum nama file. 
<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <a href="folderku/file.htm">klik di sini</a>
</BODY>
</HTML>

Atribut Target

Tag <a> juga mempunyai atribut target yang bisa menentukkan apakah file atau website tujuan dibuka di halaman baru atau di halaman yang sama. Nilai dari atribut "target" bisa berupa :
  1. _blank => membuka link di window atau tab yang baru tanpa menutup file sebelumnya.
  2. _self => membuka link di "frame" yg sama.
  3. _parent => membuka link di "frame" utama.
  4. _top => membuka di window yang sama dengan "menutup" file sebelumnya.
  5. nama frame  => membuka dokumen di frame dg nama tersebut.
Abaikan saja semua tentang "frame" karena saat ini kita belum belajar tentang tag <frame>. Lagipula, tag <frame> mulai ditinggalkan penggunaannya, walaupun masih ada tag <iframe> yang sejenis.

Atribut Id

Kalian bisa menuju bagian tertentu pada halaman yang tagnya memiliki atribut "id". Untuk "melompat ke bagian halaman sesuai nilai atribut id pada tag, kita bisa menambahkan tanda "#" sebelum nama "id" pada nilai href.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <a href="#idku">klik di sini untuk melompat ke paragraf ke-8</a>
    <p>paragraf ke-1. Ini adalah paragraf pertama. Paragraf ke-8 adalah paragraf pertama. Klik link di atas untuk melompat ke paragraf ke-8. </p>
    <p>paragraf ke-2</p>
    <p>paragraf ke-3</p>
    <p>paragraf ke-4</p>
    <p>paragraf ke-5</p>
    <p>paragraf ke-6</p>
    <p>
    Ini adalah paragraf ke-7.
    </p>
    <HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR />
    <HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR />
    <HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR />
    <HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR />
    <HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR /><HR /><BR />
    <p id="idku">paragraf 8. Ini adalah paragraf terakhir. Paragraf ke-8 adalah paragraf terakhir.</p>
    </BODY>
</HTML>


Simpan dan jalankan untuk melihat hasilnya. Klik link tersebut untuk mengetahui perbedaannya dg semua kode html sebelumnya. Jika belum ada perubahan saat link diklik, panjangkan paragraf selain paragraf terakhir hingga paragraf terakhir "tidak terlihat saat kode HTML baru dijalankan". Saat link diklik, seharusnya tampilan akan "melompat" ke paragraf terakhir yang id-nya jadi tujuan dari link.

Btw, link tidak hanya berupa tulisan. Kalian bisa menggunakan gambar, tombol, atau objek lain yang terlihat dalam halaman HTML. Kalian hanya perlu mengapit teks atau elemen HTML yang ingin kalian jadikan sebagai link dengan tag <a> dan </a>.

Atribut Download

Saat diklik, beberapa file seperti kode HTML, musik, video, dan gambar akan dibuka di halaman baru. Jika kalian ingin user bisa mendownload suatu file saat link diklik, ada saatnya kalian akan butuh atribut download. Atribut ini tidak perlu diberi nilai. Kalian cukup meletakkannya di tag pembuka.
<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <a href="gambarku.jpeg" download>klik di sini</a>
</BODY>
</HTML>
Saat link diklik di browser, file akan didownload jika tag <a> memiliki atribut download. Jika file tidak ada, tidak akan terjadi apa-apa. Beberapa file seperti exe, rar, dan file lain akan didownload tanpa perlu ada atribut download.

Subscribe to: Post Comments (Atom)