HTML5: Tentang Atribut, Link, dan Gambar

Selama ini kita sudah belajar banyak bahwa tag HTML digunakan untuk memberikan format tertentu terhadap suatu teks, misalnya hendak menampilkan teks menjadi tebal, miring, menampilkan sebagai judul dokumen, dan lain-lain.
Seringkali, tag HTML saja tidak cukup untuk menyatakan format yang hendak diterapkan terhadap teks. Diperlukan tambahan nilai tertentu yang dituliskan di dalam tag HTML tersebut agar format yang hendak dinyatakan ke dalam teks menjadi lebih lengkap.
Kita ambil ilustrasi yang mudah saja, misalnya saat kamu hendak membuat sebuah link ke URL tertentu. Tag yang digunakan untuk membuat link adalah <a> dan ditutup dengan </a>. Namun bila teks tersebut diformat dengan tag <a>, link memang berhasil dibuat tetapi tidak berfungsi karena tidak ada informasi tentang tujuan link tersebut. Karena itu di dalam tag <a> tadi perlu ditambahkan informasi tentang tujuan link tersebut.
Contoh penggunaan tag <a> yang sudah diberi tambahan informasi adalah sebagai berikut:
<a href=”http://tabloidpcplus.
com”>Ini teks link</a>
Informasi tambahan yang disematkan ke dalam sebuah tag HTML disebut dengan atribut. Tidak semua tag HTML memiliki atribut dan tidak setiap atribut wajib digunakan, artinya dalam situasi tertentu ada atribut yang sifatnya opsional saja.
Aturan Penulisan Atribut
Penulisan atribut memiliki aturan tersendiri yang tidak boleh dilanggar. Sintaks penulisan yang harus diikuti adalah sebagai berikut:
<tag atribut=”nilai”>teks</tag>
Bagaimana dengan tag HTML yang tidak memiliki penutup? Ya kurang lebih sama, seperti ini:
<tag atribut=”nilai” />
Apakah penggunaan tanda kutip pada penulisan nilai atribut hukumnya wajib? Sebenarnya sih tidak, namun akan jauh lebih aman jika nilai atribut ditulis di dalam tanda kutip. Bila tanda kutip tidak dituliskan, ada beberapa hal yang harus dihindari dalam penulisan nilai atribut, yaitu:
• Tidak boleh mengandung spasi.
• Tidak boleh mengandung tanda kutip, baik ganda maupun tunggal.
• Tidak boleh mengandung tanda sama dengan.
• Tidak boleh mengandung tanda lebih besar atau lebih kecil.
• Tidak boleh mengandung tanda garis miring.
Bila dituliskan dengan tanda kutip, praktis hal-hal di atas tidak lagi menjadi pengganjal. Sekarang pertanyaannya, tanda kutip yang digunakan sebaiknya tunggal atau ganda? Sederhana saja, tanda kutip ganda boleh, tanda kutip tunggal juga boleh.
Hanya saja, ada satu hal kecil yang perlu diperhatikan. Walau amat sangat jarang, nilai atribut mungkin saja mengandung tanda kutip tunggal atau tanda kutip ganda. Bila kebetulan kamu menemui kondisi seperti ini, tak perlu bingung. Tinggal dibalik saja penggunaan tanda kutip yang dipakai untuk mengapit nilai atribut tadi. Bila nilai atribut mengandung tanda kutip tunggal, apit dengan tanda kutip ganda. Sebaliknya bila nilai atribut mengandung tanda kutip ganda, apit dengan tanda kutip tunggal. Dan sepertinya hampir mustahil sampai kejadian ada nilai atribut yang mengandung tanda kutip tunggal dan ganda sekaligus.
Nah, kenapa judul artikel ini mengaitkan antara atribut, link, dan gambar? Sebab link dan gambar boleh dibilang merupakan dua komponen HTML yang relatif paling sering digunakan dan hampir pasti penggunaannya membutuhkan atribut. Karena itu dalam pembahasan tentang atribut ini, pembuatan link dan penggunaan gambar dalam dokumen HTML sangat cocok dijadikan contoh.
Pembuatan Link
Link yang ada pada dokumen HTML umumnya berupa teks yang diberi garis bawah (underline) dan bila diklik akan membawa kamu ke halaman web tertentu. Pembuatan link pada dokumen HTML mengikutisintaks berikut:
<a href=”alamat URL”>Teks</a>
Alamat URL dituliskan lengkap dengan protokolnya, misalnya awalan “http://” atau “https://”.
Bila kamu ingin link tersebut dibuka pada jendela baru browser yang digunakan, gunakan atribut target sebagai berikut:
<a href=”alamat URL” target=”_
blank”>Teks</a>
Arti nilai _blank pada atribut target adalah membuka link pada jendela baru yang masih kosong.
Bagaimana bila yang hendak dituju bukan sebuah URL halaman web tetapi bagian tertentu dari halaman web tersebut? Misalnya ada dokumen web yang terdiri dari beberapa bab dan link yang dibuat hendak mengacu langsung pada bab tertentu, bukan dari depan.
Untuk kasus seperti ini, kamu harus membuat anchor terlebih dahulu pada bagian yang hendak dituju. Nantinya, link akan mengacu ke anchor tersebut, bukan ke URL biasa. Anchor dibuat dengan tag  <a> juga, sintaksnya adalah sebagai berikut:
<a id=”nama”>Teks</a>
Jika hendak dibuat link ke anchor tersebut dari halaman web yang sama, gunakan sintaks berikut:
<a href=”#nama”>Teks</a>
Jika hendak dibuat link ke anchor tersebut dari halaman web lain, gunakan sintaks berikut:
<a href=”http://alamatURL.
com#nama”>Teks</a>
Penambahan Gambar
Penambahan gambar ke dalam dokumen HTML dilakukan dengan sintaks berikut:
<img src=”sumber gambar” />
Sintaks ini adalah sintaks yang paling sederhana karena hanya menyertakan atribut src saja. Pembahasan mengenai atribut tag <img> yang lebih lengkap akan diberikan pada kesempatan lain.
Listing 1
<!DOCTYPE html>
<html>
<head>
<title>Link dan Gambar</title>
</head>
<body>
Dokumen ini menjelaskan tentang Link dan Gambar. <br /> <br />
<a href=”http://tabloidpcplus.com”>Tabloid PCplus</a>.
Link ini akan membuka halaman web Tabloid PCplus.<br />
<a href=”http://tabloidpcplus.com” target=”_blank”>Tabloid PCplus</a>.
Link ini akan membuka halaman web Tabloid PCplus pada jendela baru.<br /><br />
Gambar logo PCplus: <br />
<img src=”logo-pcplus.jpg” /> <br /><br />
Gambar logo PCplus di bawah ini bisa menjadi link ke tabloidpcplus.com <br />
<a href=”http://tabloidpcplus.com”><img src=”logo-pcplus.jpg” /></a>
</body>
</html>