Penggunaan Tag Pre dan Tag Code untuk Membuat Text HTML Tanpa Format

Penggunaan Tag Pre dan Tag Code

Dalam HTML penekanan tombol ENTER, Tab, Spasi tidak memberikan pengaruh pada web page yang kita buat, atau diabaikan.
Bagaimana jika misalnya kita betul-betul ingin menambahkan spasi dan enter pada teks dalam web page kita. Masalah ini dapat dipecahkan dengan menggunakan tag <PRE>…..</PRE>.
Sehingga teks yang berada di dalam tag pre akan mengikuti sesuai dengan pengetikan yang kita lakukan.

Tag <pre> Membuat Preformatted Text

Tag <pre> diambil dari kata Preformatted Text. tag ini digunakan untuk text yang ‘belum’ diformat. Artinya text dalam tag ini akan tampil sesuai yang kita ktik.

Contoh Tag <pre>

<pre>
Teks ini menggunakan s p a s i dan ENTER
untuk berpindah ke baris ini.
</pre>
Tag pre juga sangat cocok untuk menampilkan baris-baris kode
program
seperti dibawah ini
<pre>
<b>for i = 1 to 10
 print i
next i
</b></pre>
&nbsp;
Kita Juga dapat membuat gambar dengan format teks seperti berikut
:
<pre>
 /_/
 ( o o )
 - meooongg........
</pre>

Dari contoh diatas kita bisa membuat space, text program, untuk membandingkan tag pre dan tanpa tag pre silahkan hapus tag pre pada code diatas lalu klik jalankan. dan lihat perbandingan nya.

Tag <code> untuk Menulis Kode

Jika tag <pre> untuk menampilkan tulisan sesuai dengan yang kita ktik, maka tag <code> akan sedikit berbeda, tag code akan menghapus space jika lebih dari satu.
Tag <code> digunakan untuk memasukkan kode. Tag <code> adalah jenis inline element artinya tidak akan membuat baris baru.

Contoh tag <code>

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML murdah</title>
</head>
<body>
<h3>contoh tag code</h3>
<p>HTML adalah
<code>HyperText Markup     Language</code></p>
</body>
</html>

Dari contoh dapt kita bandingkan perbedaan antara kedua tag <pre> dan tag <code>.
Dengan tag <pre> text akan tampil tanpa di format, tampil sesuai dengan yang kita ktik. namun pada tag code spasi yang lebih dari satu akan dihapus.

Info
Untuk menampilkan hasil dari tag <code> sesuai dengan apa yang kita ktik silakan di edit tag <code> menjadi seperti ini <pre><code>HyperText Markup     Language</code></pre></p> dengan mengabungkan tag pre dan tag code maka hasil dari tag code akan sesuai seperti apa yang kita ktik.
Selain tag diatas ada juga tag <tt> namun di html5 tag ini sudah dihapus.

Keyword:

  • selain tag p apa yang bisa buat text indent

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas