Minggu, 14 November 2010

5.Belajar HTML - Entitas karakter HTML

Setelah sebelumnya kita sudah belajar tentang atribut HTML, sekarang kita akan be lajar cara menampilkan karakter khusus dalam HTML.
Beberapa karakter khusus seperti karakter <, punya arti khusus dalam HTML (sebagai tanda tag HTML), karena itu kamu tidak akan bisa menggunakannya sebagai teks dalam arti dituliskan langsung sebagai < dalam kode HTML kamu.
Untuk menampilkan tanda lebih kecil (<) dalam HTML, kamu perlu belajar tentang Entitas Karakter HTML.




Entitas karakter

Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil (<) yang mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser menampilkan tanda lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam kode HTML kita.
Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama entitas atau sebuah # yang diikuti nomor entitas dan diakhiri dengan tanda titik koma (;).
Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita harus menuliskan : < atau <
Keuntungan menggunakan nama dibandingkan nomor adalah bahwa nama lebih mudah untuk diingat. Kekurangannya adalah bahwa tidak semua browser mendukung nama-nama entitas yang baru, namun demikian hampir semua browser mendukung nama entitas standar.
Catatan: entitas bersifat case sensitif.
Spasi berurutan

Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi.
HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan 10 spasi pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk menambahkan spasi pada dokumen HTML kamu, gunakan entitas karakter  

Beberapa entitas karakter yang sering dipakai:


Hasil Penjelasan Nama Entitas Nomor Entitas
Spasi    
< Kurang dari < <
> Lebih dari > >
" Tanda kutip " "
' Kutip tunggal ' (Ndak berlaku di IE) '
& Dan & &

Beberapa komentar yang ada meminta agar tutorial ini ditambah dengan contoh agar lebih jelas. Nah, berikut ini contoh untuk memperjelas tentang apa yang dimaksud dengan entitas karakter.

Kasusnya sangat mudah kok. Kita kan udah tahu, kalau yang namanya HTML itu menggunakan tag, iya kan? Salah satu contoh adalah tag untuk menebalkan huruf.

Sekarang bayangkan kalau suatu ketika kamu diminta untuk menulis tutorial tentang HTML dan kebetulan akan menulis tentang tag HTML yang berfungsi untuk menebelkan huruf. Misalnya kamu pengen baris berikut tampil di tutorial kamu (perhatikan, kamu ingin agar tag dan muncul dalam baris tersebut).

Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag dan

Nah, coba pikirkan, bagaimana menuliskan bari sederhana ini tanpa entitas karakter. Ndak bisa kan? Misalnya kamu menulis seperti ini:

Untuk menebalkan huruf seperti kata tebal ini,
kamu memerlukan tag dan

Apa yang terjadi? Browser akan menampilkan kalimat berikut:

Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag dan

Apa bedanya? Ya...tag dan tidak muncul, sebagai gantinya, kata dan akan tampil dalam huruf tebal.

Untuk membuat agar tag dan dapat muncul, kamu memerlukan entitas karakter, sehingga kamu harus menuliskan kode HTML menjadi seperti ini:

Untuk menebalkan huruf seperti kata tebal ini,
kamu memerlukan tag <b> dan </b>

Perhatikan, tanda < saya ganti dengan entitas karakter <, sedangkan tanda > saya ganti dengan >.

Lhah ... nambah lagi tuh pertanyaan di komentar. Gini pertanyaannya, terus gimana dunks cara kita menampilkan > biar yang keluar bukan >.

Mudah aja, kita bisa gunakan & di depannya untuk meng-escape tanda & sehingga kamu bisa tulis seperti ini & > (tanpa spasi di antara & dan >. Saya terpaksa menuliskan menggunakan spasi, karena tidak mungkin saya tuliskan tanpa spasi.)

Gampang kan? Ok, mudah-mudahan contoh ini bisa meningkatkan pemahaman kamu tentang apa yang dimaksud dengan entitas karakter ini.

Nah, kamu udah belajar HTML cukup jauh saat ini. So, jangan lupa kembali lagi ke Prothelon.com tempat di mana tutorial terbaik tersedia secara gratis.

Kalau udah menguasai HTML dengan cukup baik, saya sarankan kamu mulai belajar PHP, bisa yang gratis atau yang lebih canggih lengkap dengan tempat praktek online.

2 komentar:

  1. Anonim2/21/2011

    cuma copas kerjaannya biar rame blognya..plagiat

    BalasHapus
  2. Anonim3/28/2011

    iya betul....setuju sama anonim

    BalasHapus