Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <pre> (Preformatted Text) Pada HTML

previous Previous Page

Tag <pre> merupakan suatu elemen HTML yang digunakan untuk mengidentifikasi kumpulan teks yang harus ditampilkan utuh apa adanya. Elemen ini akan menampilkan kumpulan teks lengkap dengan line break, indentasi dan juga spasi secara utuh.

Seperti diketahui bahwa HTML mempunyai aturan, jika terdapat deret spasi (white space) lebih dari satu akan menganggap sebagai satu spasi saja. HTML juga akan mengabaikan adanya line break yang dihasilkan dari penekanan tombol enter, begitu juga indentasi yang dihasilkan dari tombol tab.

Tag <pre> akan membantu anda menampilkan berbagai teks/kode komputer secara utuh, sehingga mudah untuk memahami kode tersebut. HTML akan menampilkan output dari elemen ini dalam bentuk teks dengan font monospace. Elemen <pre> ditulis dengan tag pembuka <pre> dan ditutup dengan tag penutup </pre>.

Berikut ini contoh penggunaan elemen <pre> pda HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>Demo tag pre HTML</title>
6.  </head>
7.  <body>
8.  <p>Contoh menggunakan tag pre pada HTML</p>
9.  <pre>
10.    &lt;p>Teks ini berada di sebuah elemen paragraf.&lt;/p>
11. </pre>
12. <pre>
13.    p {
14.    font-family: Arial;
15.    font-size: 14px;
16.    color: #000000;
17.    }
18. </pre>
19. <pre>
20.    if(empty($judul)){
21.    echo "Judul masih kosong, ulangi lagi";
22.    die();
23.    }
24. </pre>
25. 
26. </body>
27. </html>
28. 

tag pre (preformatted text) html

Elemen <pre> dapat juda digunakan untuk menampilkan karakter ANSII murni. Berikut ini contoh ANSII murni berbentuk kelinci (courtesy : https://www.ascii.co.uk)

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>Demo tag pre HTML</title>
6.  </head>
7.  <body>
8.  <p>Contoh menggunakan tag pre untuk output ANSII murni</p>
9.  <pre>
10.     mm. dM8
11.  YMMMb. dMM8
12.  YMMMMb dMMM'
13.  `YMMMb dMMMP
14.  `YMMM MMM'
15.  "MbdMP
16.  .dMMMMMM.P
17.  dMM MMMMMM
18.  8MMMMMMMMMMI
19.  YMMMMMMMMM
20.  "MMMMMMP
21.  MxM .mmm
22.  W"W """ VK
23. 
24. </pre>
25. </body>
26. </html>
27. 

tag pre (preformatted text) html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<pre>yayayayaya

Global Attributes :

Tag <pre> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <pre> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar(onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <pre> pada HTML:

pre{
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML