Di dalam HTML, untuk menampilkan text agar bisa tampil dengan spasi dan karakter sesuai aslinya (text tanpa format) kita memerlukan tag khusus, yakni tag <pre>. Jika di dalam tag biasa, HTML akan mengabaikan spasi antar karakter (apabila terdapat lebih dari 1 spasi secara berurutan), text yang berada di dalam tag <pre> akan ditampilkan dengan ‘apa adanya’.
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.
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h3>Cara Membuat Text HTML Tanpa Format</h3>
<pre>
Spasi di dalam bagian
ini akan ditampilkan
dengan apa adanya
</pre>
</body>
</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.
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.
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h3>Cara Membuat Text HTML Tanpa Format</h3>
<p>HTML adalah singkatan dari
<code>Hypertext Markup Language</code></p>
</body>
</html>
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.
0 komentar:
Bijaklah saat Anda memberikan komentar atau kritik !!