Mengenal Tag Pre

Mengenal Tag Pre - Pre Tag, saya ajak sobat mengenal lebih jauh apa itu tag pre

PRE artinya pre-formatted atau secara mudahnya, apabila text ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break, atau tab.)

Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tab pre, spasi akan tetap. Untuk lebih memahaminya coba sobat copy code ini pada postingan (mode HTML) 

<pre>ini     adalah contoh  tag pre    coba      tulis      seperti  ini diblog sobat</pre>
ini     adalah contoh  tag pre    coba      tulis      seperti  ini diblog sobat

kemudian lihat hasilnya di mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag pre, spasi akan di pertahankan, berbeda dengan penggunaan p, hasilnya akan lurus atau berjejer kebawah.

pre dan blockquote

Banyak yang menggunakan blockquote untuk berbagai kode, Pengertian blockquote :

Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca.

Kalau melihat pengertian blockquote, tentunya kurang pas untuk berbagai kode, secara bahasa pun sudah dimengerti blockquote merupakan 'blok kutipan'. menurut saya sah - sah saja menggunakan blockquote sebagai tempat kode.

Kelebihan tag pre dibanding blockquote

1. Struktur HTML lebih difahami, lihat gambar :

Lihat yang saya tandai dengan garis merah, jelas mana pembuka dan penutup. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, rada susah untuk memahami struktur HTMLnya.

2. Standart huruf menggunakan monospace

artinya tanpa CSS pun tag pre akan mempunyai huruf monospac, dimana huruf "W" akan sama dengan huruf "s" atau lainnya dalam segi ukuran.

3. Bisa disisipi Syntax Highlighter (kode warna - warni)

Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.

Bagaiman Cara Menulis Kode dengan Tag PRE?

Untuk penulisan standart seperti ini,

<pre>isikode</pre>

apabila menggunakan syntax highlighter, ada beberapa tambahan seperti :

<pre>isikode</pre>
apabila menggunakan syntax highlighter, ada beberapa tambahan seperti :

<pre><code>isi kode</code></pre>
atau
<pre lang="css">isi kode</code></pre>
dan lain-lain

Tag Pre Details 

1. Browser Support :

• Netscape 2,3,4,6,7 dst
• Chrome 1, dst
• Firefox 1, dst
• Internet Exploler 2,3,4,5,6 dst
• Opera 3,4,5,6,7,8 dst
• Safari 1 dst
• WebTV / MSNTV
• HTML 3.2, 4.0
• XHTML 1.0
• XHTML Text Module, XHTML Legacy Module

2. Atribut :

• aign (optional)
• class (optional)
• dir (optional)
• id (optional)
• lang (optional)
• onclick (optional)
• ondblclick (optional)
• onkeydown (optional)
• onkeypress (optional)
• onkeyup (optional)
• style
• title
• dll

Contents :

Beberapa tag yang vaild dengan tag pre,

tag : a,abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

Valid Context :

blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.

Sumber : www.blog.kangismet.net