Tutorial Formating Text HTML: Cara Memasukkan dan Menampilkan Karakter Khusus di HTML
Halo gan. Di postingan sebelumnya, kita sudah membahas tag-tag HTML yang digunakan untuk penulisan hal teknis di HTML.
Kita review sedikit. Ada 3 tag yang sudah kita pelajari di postingan sebelumnya, yakni tag <samp>, tag <kbd>, dan tag <var>.
Tag <samp> digunakan untuk menuliskan kode program. Tag <kbd> digunakan untuk menandai teks yang merupakan teks pada keyboard. Sedangkan tag <var>, digunakan untuk menandai teks yang merupakan variabel matematika atau variabel program.
Kali ini, kita akan membahas cara memasukkan dan menampilkan karakter khusus di HTML. Contoh karakter khusus yakni tanda kurung siku, "<" dan ">".
Di HTML tanda tersebut digunakan sebagai tag, artinya setiap kali ada karakter tersebut, akan diterjemahkan oleh web browser sebagai sebuah perintah/tag.
Bagaimana supaya karakter tersebut bisa ditampilkan di web browser?
Baca juga ya..
- Tutorial Formating Text HTML: Tag-Tag HTML untuk Penulisan Hal Teknis
- Tutorial dan Tips Trick Ngeblog
- Tutorial Formating Text HTML: Cara Mengubah Arah Teks di HTML
Kita review sedikit. Ada 3 tag yang sudah kita pelajari di postingan sebelumnya, yakni tag <samp>, tag <kbd>, dan tag <var>.
Tag <samp> digunakan untuk menuliskan kode program. Tag <kbd> digunakan untuk menandai teks yang merupakan teks pada keyboard. Sedangkan tag <var>, digunakan untuk menandai teks yang merupakan variabel matematika atau variabel program.
Kali ini, kita akan membahas cara memasukkan dan menampilkan karakter khusus di HTML. Contoh karakter khusus yakni tanda kurung siku, "<" dan ">".
Di HTML tanda tersebut digunakan sebagai tag, artinya setiap kali ada karakter tersebut, akan diterjemahkan oleh web browser sebagai sebuah perintah/tag.
Bagaimana supaya karakter tersebut bisa ditampilkan di web browser?
Cara memasukkan karakter khusus ke dalam HTML
Supaya karakter khusus tidak terbaca sebagai sebuah perintah/tag, karakter tersebut harus di-'escape' terlebih dahulu. Istilah escape adalah menggantikan karakter khusus dengan angka atau referensi yang merujuk ke karakter khusus tersebut.
Ada 2 cara untuk men-'escape' karakter khusus di HTML, yang pertama dengan menggunakan penomoran angka (numeric entity), dan yang kedua dengan menggunakan singkatan untuk karakter (named entity).
Kedua cara tersebut ditulis dengan karakter '&' di depan penulisan dan ';' di akhir penulisan. Pengganti karakter khusus ini disebut juga sebagai HTML Entity.
Contoh, kita ingin menuliskan karakter "<" dan ">" di dalam konten HTML, maka penulisannya seperti berikut:
Ini tanda buka kurung siku < dan ini tanda tutup kurung siku >
Tabel referensi karakter khusus
Untungnya, ada banyak referensi di internet yang memuat karakter-karakter khusus dalam bentuk tabel lengkap.
Bayangkan kalau seandainya tak ada tabel referensi HTML Entity, waduh, kita harus menghapal satu per satu.
Berikut ini tabel referensi yang diambil dari http://www.w3schools.com/html/html_entities.asp.
Referensi lain yang menampilkan tabel karakter khusus dapat dilihat juga di http://www.webstandards.org/learn/reference/charts/entities/.
Mari kita coba terapkan ke kodingan HTML.
<!DOCTYPE html> <html> <head> <title>Memasukkan dan menampilkan karakter khusus di HTML</title> </head> <body> <p>Tanda hak cipta: © adalah salah satu karakter khusus.</p> </body> </html>
Seperti ini hasilnya.
Baca juga ya..
- Tutorial Formating Text HTML: Tag-Tag HTML untuk Penulisan Hal Teknis
- Tutorial dan Tips Trick Ngeblog
- Tutorial Formating Text HTML: Cara Mengubah Arah Teks di HTML
Informasi tambahan, karakter khusus 'non-breaking space'
Karakter 'non-breaking space' ditulis sebagai yang berfungsi untuk menggandeng kata-kata yang seharusnya tidak terpisah namun terlihat terpisah.
Misalnya, ada 2 kata seperti yang ditulis seperti ini: Ane Iqbal.
Hasil yang tampil di web browser adalah Ane Iqbal. Tanda akan berubah menjadi spasi sehingga kata tersebut terlihat terpisah. Namun, kedua kata tersebut dianggap sebagai satu kesatuan dan tidak akan terpisah walaupun berada di akhir baris atau ukuran web browser diperkecil.
Berikut penampakan fungsi dari karakter khusus ini pada ukuran web browser yang sama.
Menggunakan karakter khusus
Tanpa menggunakan karakter khusus
Seperti itulah cara memasukkan dan menampilkan karakter khusus ke dalam HTML. Selanjutnya, kita akan bahas tag abbr, cite, dfn, dan small untuk struktur teks HTML.