Pada tutorial Text HTML kali ini kita akan membahas tentang Cara Membuat Text HTML Tanpa Format dengan menggunakan tag <pre> dan tag <code>.
Tag <pre> Untuk Membuat Preformatted Text HTML
Tag <pre> adalah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk text yang ‘belum’ diformat. Jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada.Tag <pre> termasuk ke dalam kelompok block level element, sehingga akan ditampilkan di baris baru, terpisah dari text yang ada sebelum tag ini.
Berikut adalah contoh cara penulisan dan penggunaan tag <pre> di dalam HTML:
Seperti yang terlihat, spasi akan tetap ditampilkan sebagaimana yang ditulis. Juga jenis font yang digunakan biasanya font berjenis “monospace” yang memiliki panjang karakter yang sama untuk setiap hurufnya.
Tag <pre> juga sering dipakai untuk membuat contoh program. Seluruh contoh kode program di duniailkom ini ditampilkan di dalam tag <pre>. Tapi kita harus mengkonversi karakter “<” dan “>” menjadi karakter HTML Entity. Lebih lanjut bisa ke: Cara Menampilkan dan Memasukkan Karakter Khusus ke dalam HTML
Tag <code> untuk Penulisan Kode
Sesuai dengan namanya, tag <code> ditujukan untuk memasukkan kode ke dalam HTML. Umumnya web browser akan menampilkan text yang berada di dalam tag <code> sama dengan jenis font tag <pre>, yakni dengan font monospace, namun dengan perbedaan bahwa tag <code> akan menghapus semua spasi yang lebih dari 1.Tag <code> termasuk kelompok inline level element, dan mengikuti alur text yang ada.
Berikut adalah contoh cara penulisan dan penggunaan tag <code> di dalam HTML:
.
Dari contoh dapat dilihat perbedaan dari tag <pre> dan tag <code>. Tag <pre> bersifat block elemen, sedangkan tag <code> bersifat inline elemen. Tag <pre> akan menampilkan seluruh text tanpa menformat spasi, namun di dalam tag <code>, jika ditemukan karakter spasi dengan jumlah lebih dari 1, maka hanya 1 yang digunakan.
Selain menggunakan tag <pre> dan tag <code>, HTML versi 4.01 memiliki tag <tt> yang akan menghasilkan tampilan yang sama dengan tag <code>. Tag <tt> adalah singkatan dari Teletype, dan akan ditampilkan dengan font “monospace”.
HTML5 menyatakan tag <tt>: deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.
HTML5 menyatakan tag <tt>: deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.
Tutorial HTML Lanjutan: Format Text HTML
- Tutorial Text HTML Part 9: Cara Untuk Merubah Arah Text dalam HTML (tag bdo)
- Tutorial Text HTML Part 10: Tag Untuk Penulisan Hal Teknis (tag samp, kbd, var)
- Tutorial Text HTML Part 11: Cara Menampilkan Karakter Khusus HTML
- Tutorial Text HTML Part 12: Tag abbr, cite, dfn, dan small untuk Struktur Text HTML
- Tutorial Text HTML Part 13: Tag-tag Deprecated untuk Struktur Text dalam HTML
No comments:
Post a Comment