Tag <pre> - html pre tag

Tag pre berfungsi untuk menampilkan "pre-formatted text". Tag pre memungkinkan untuk menampilkan teks sesuai dengan spasi, tab, dan perpindahan baris setiap teks. Tag "pre" umumnya digunakan untuk menuliskan kode html seperti xHTML, kode php, javascript dan kode css. Beberapa pengaturan pada tag pre dapat dilakukan untuk mendapatkan tampilan output berbeda. Pengaturan bisa dilakukan dengan menambahkan beberapa attribute seperti class, id atau style. Jika pengaturan dilakukan melalui attribute id atau class anda dapat melakukannya dengan menambahkan beberapa properti css. Penambahan properti css secara langsung (inline css) dapat juga dilakukan namun terasa tidak praktis/simple.

Kode dasar tag pre

<pre>Text here!</pre>

Tag pre dengan inline css (melalui attribute style)

<pre> style="font:normal 12px Courier New;color:#000;background:#fff;padding:20px 10px;max-height:200px;overflow:auto;">Text here!</pre>

Menambahkan attribute "class" pada tag pre

Catatan :
Menambah attribute class tak jauh berbeda dengan menambahkan attribute id.
<style type="text/css">
pre.mycode { /* attribute class - mycode */
    margin: 20px 0;
    padding: 15px 10px;
    background: #eee;
    color: #000;
    font: normal 12px Courier New, Courier, Monospace;
    line-height: 18px;
    white-space: pre-wrap;
    border: 1px solid #555;
    max-height: 350px;
    overflow: auto;
}
</style>

<pre class="mycode">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;javascript Allert&lt;/title&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
function confirmation() {
    var answer = confirm("Hiiii... haaa...")
    if (answer){
        alert("Ha...ha.. Hiii...hi... He...he...!")
    window.location = "http://gubhugreyot.blogspot.com/";
 }
    else{
        alert("Thanks for you visiting me!")
    }
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;input type="button" onclick="confirmation()" value="Huu....ha....ha..."&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

Beberapa kode tertentu yang harus diperhatikan saat menggunakan tag pre

> tuliskan sebagai &gt;
< tuliskan sebagai &lt;
" tuliskan sebagai &quot;
Contoh :
<div class="mybox"></div> dituliskan seperti berikut:
<pre>&lt;div class=&quot;mybox&quot;&gt;&lt;/div&gt;</pre>
Edit kode dalam box demo di bawah untuk mendapatkan output tag pre sesuai harapan dan keinginan anda!.
Please click the button to display. Continue with editing code and click to see the results!

2 komentar:

My ProfileC l o s e

FollowerC l o s e