Cara Membuat Text HTML Tanpa Format

belajar HTML dan CSS untuk pemula

Pada HTML, untuk menampilkan text supaya dapat tampil dengan spasi dan karakter sesuai aslinya (text tanpa format) kita membutuhkan tag khusus, yaitu tag <pre>. Bila di dalam tag biasa, HTML akan mengabaikan spasi antar karakter (jika terdapat lebih dari 1 spasi secara berurutan), text yang ada di dalam tag <pre> akan ditampilkan dengan ‘apa adanya’.

Pada tutorial Text HTML saat ini kita akan membicarakan mengenai Cara Membuat Text HTML Tanpa Format dengan memakai tag <pre> dan tag <code>.

Tag <pre>

Tag <pre> ialah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini dipakai untuk text yang ‘belum’ diformat. Bila text diinput ke dalam tag <pre>, maka HTML akan menampilkan text itu sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text itu 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 ialah contoh cara penulisan dan pemakaian tag <pre> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Infanthree</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Infanthree.com</h3>
<pre>
Spasi di dalam bagian 
ini akan ditampilkan dengan apa adanya
 
</pre>
</body>
</html>

Seperti yang tampak, spasi akan tetap ditampilkan sebagaimana yang ditulis. Juga jenis font yang dipakai pada umumnya font berjenis “monospace” yang mempunyai panjang karakter yang sama untuk tiap hurufnya.

Tag <pre> juga biasa digunakan untuk membuat contoh program. Semua contoh kode program di infanthree ini ditampilkan di dalam tag <pre>. Namun kita perlu mengkonversi karakter “<” dan “>” jadi karakter HTML Entity. Lebih jauh bisa ke: Cara Menampilkan dan Memasukkan Karakter Khusus ke dalam HTML.

Tag <code>

Sesuai dengan namanya, tag <code> diperuntukkan bagi memasukkan kode ke dalam HTML. Umumnya web browser akan menampilkan text yang ada di dalam tag <code> sama dengan jenis font tag <pre>, yaitu dengan font monospace, tetapi dengan perbedaan bahwa tag <code> akan menghapus seluruh spasi yang lebih dari 1.

Tag <code> termasuk kelompok inline level element, dan mengikuti alur text yang ada.

Berikut ialah contoh cara penulisan dan pemakaian tag <code> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Infanthree</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Infanthree.com</h3>
<p>HTML ialah singkatan dari 
<code>Hypertext Markup          Language</code></p>
</body>
</html>

Dari contoh bisa dilihat perbedaan dari tag <pre> dan tag <code>. Tag <pre> bersifat block elemen, sedangkan tag <code> bersifat inline elemen. Tag <pre> akan menampilkan semua text tanpa menformat spasi, tetapi di dalam tag <code>, bila didapati karakter spasi dengan jumlah lebih dari 1, maka cuma 1 yang dipakai.

Selain memakai tag <pre> dan tag <code>, HTML versi 4.01 mempunyai tag <tt> yang akan menghasilkan tampilan yang sama dengan tag <code>. Tag <tt> ialah singkatan dari Teletype, dan akan ditampilkan dengan font “monospace”.

HTML5 mengatakan tag <tt>: deprecated, yang berarti dianjurkan agar tidak dipakai, dan kemungkinan tak akan didukung web browser. Kamu barangkali masing mendapatkan tag ini terutama dalam website lama.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *