Belajar Kode CSS & Desain Blog: Tag <pre>

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 >
< tuliskan sebagai <
" tuliskan sebagai "

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!

<!DOCTYPE html>
<html>
<title>Tag <code> - html "code" tag</title>
<head>
<style type="text/css">
#konten{margin:15px 5px;padding:20px;background:#eee;box-shadow:0 0 20px #555;border-radius:6px;}
h2{padding-bottom:5px;color:green;margin:3px 0;border-bottom:5px double #444;}
.clear{clear:both;}

</style>
</head>

<body>
<div id="konten">

<h2>bentuk dasar tag "pre"</h2>
<pre>Tag pre memungkinkan anda 
     menampilkan teks sesuai dengan      spasi,   tab atau 

perpindahan 

         baris yang diinginkan tanpa perlu bantuan kode 
             html baru/tertentu.</pre>
<h2>Menambahkan background-image pada tag pre</h2>

<style type="text/css">
pre.black{
    max-height: 200px;
    overflow: auto;
    font: normal 12px Verdana, Arial, Tahoma;
    background-image: url(https://lh3.googleusercontent.com/-qYkD_oiBBF8/UIgFh-prT6I/AAAAAAAAAZ8/Ti9BA9nmYyE/s128/bgPREdorengGrayV36H1.gif);
    padding: 17px 10px;
    overflow: auto;
    line-height: 18px;
    color: #fff;
    border: 1px solid blue;
}
</style>

<pre class="black">&lt;style type=text/css"&gt;
#mybox {
    width:400px;
    height: 200px;
    padding: 10px;
    background: #eee;
    color: #000;
    font: normal 12px Verdana;
    border: 1px solid #555;
    overflow: auto;
}
&lt;/style&gt;</pre>
    
</div>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

Tag <pre> - html pre tag

Kode dasar tag pre

Tag pre dengan inline css (melalui attribute style)

Menambahkan attribute "class" pada tag pre

Beberapa kode tertentu yang harus diperhatikan saat menggunakan tag pre

Contoh :

1 komentar:

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('10.25.2012');

Tag <pre> - html pre tag

Kode dasar tag pre

Tag pre dengan inline css (melalui attribute style)

Menambahkan attribute "class" pada tag pre

Beberapa kode tertentu yang harus diperhatikan saat menggunakan tag pre

Contoh :

1 komentar:

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e