Tag Pre (Pre - Formatted)

Motivation - Di Artikel Tutorial Blog sebelumnya ada sesorang yang bertanya mengenai salah satu tag yang digunakan dalam penulisan suatu artikel di blog, apakah itu? yaitu Tag Pre. Apakah anda sudah tahu apa itu Tag pre? atau anda baru dengar? Yah, memang jika dibilang baru dengar sih jawabannya pasti Ya, karena tag ini kurang digunakan dalam penulisan suatu artikel. Baiklah, diartikel kali ini, kita akan membahas mengenai Tag Pre lebih jauh lagi. Silahkan disimak pembahasannya dibawah ini,

Mengenal Tag Pre

Tag Pre (Pre-Formatted) - Salah satu macam tag yang digunakan dalam penulisan artikel yang berfungsi untuk menampilkan format teks yang sesuai dengan apa yang ditulis, baik dalam jarak seperti spasi, line break, dan tab.

Tag Pre sendiri ini, hampir sama kegunaanya dengan fungsi dari blockquote, namun, dengan menggunakan Tag Pre ini, kita akan lebih mudah menampilkan kode source widget dan semacamnya.

Sebagai Contohnya, Anda dapat membuatnya dengan cara tulis kode dibawah ini kedalam HTML.

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

<p>
ini     adalah contoh
  tag pre
    coba      tulis
      seperti
  ini di
blog sobat
</pre>

Lihat Pada Mode Compose, Dengan menggunakan tag <pre> , maka posisi spasi akan dipertahankan. sementara dengan tag <p> , mode penulisan akan seperti biasanya, yaitu lurus dan berjajar (walaupun anda menekan "Enter" Maka teks akan tetap berada di baris yang sama).

Lebih Baik Mana? Tag Pre atau BlockQuote?

Dibandingkan dengan BlockQuote, Tag Pre lebih baik digunakan dalam penulisan code/script, karena, Tag Pre memiliki kelebihan dibandingkan BlockQuote. Apa Itu?

1. Struktur HTML lebih mudah difahami, lihat gambar dibawah ini,
   
   
   Lihat Gambar. Yang saya tandai dengan garis merah, jelas mana pembuka dan mana penutup. Anda akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, anda akan cukup kesulitan untuk memahami struktur htmlnya.
2. Standar huruf menggunakan monospace.
   Artinya, tanpa CSS pun tag pre akan mempunya hurup monospace, yaitu dimana hurup 'w' akan sama dengan huruf 'd' atau lainnya dalam segi ukuran. lebih jelasnya baca disini.
3. Anda Bisa Menyisipkan SyntaxHighlighter (Kode warna warni).
   Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat dan dipandang), tapi dengan pembedaan warna, maka kita akan lebih mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.
   
   Mungkin masih banyak kelebihan lainnya yang tersebar di web-web lain, silahkan bisa sobat cari dan temukan.

Lalu Bagaimana Kita Menggunakan Tag Pre Ini? Bagaimana Cara Menulis Kode Menggunakan Tag Pre?

• Standar Mode,
  

  <pre>
  isi kode/script/teks anda disini
  </pre>

• With SyntaxHighlighter
  

  <pre><code>
  isi kode/script/teks anda disini
  </code></pre>

  
  atau
  
  

  <pre lang="css">
  isi kode/script/teks anda disini
  </code>

Tentang Tag Pre

1. Browser Support :

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

2. Atribut

•     align (optional)
•     class (optional)
•     dir (optional)
•     id (optional)
•     lang (optional)
•     onclick (optional)
•     ondblclick (optional)
•     onkeydown (optional)
•     onkeypress (optional)
•     onkeyup (optional)
•     onmousedown (optional)
•     onmousemove (optional)
•     onmouseout (optional)
•     onmouseover (optional)
•     onmouseup (optional)
•     style (optional)
•     title (optional)

3. Contents:

Teks. Beberapa tag yang valid pada 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

4. Valid Context :

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

Nah, Itulah Artikel Tentang Tag Pre (Pre-Formatted). Semoga Bermanfaat, terima kasih.

Motivation_2014Arsip