Format Text HTML Tutorial 8: Cara Membuat Text Tanpa Format (tag pre dan tag code)

0
16

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:

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

Text tanpa format HTML, gurukomputer.com, welovebet.com

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:

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

Tag Code HTML, gurukomputer.com, welovebet.com

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here