Tutorial HTML <pre>
HTML pre Tag - belajar html pre. Element
<pre> mempunyai definisi sebagai preformatted text atau teks yang terformat.Element
<pre> memiliki sifat apa adanya, maksudnya seperti apapun teks yang ditulis didalamnya akan menampilkan sama dengan apa yang ditulis, baik jumlah space dan penggunaan enter, diluar penggunaan element html.
Dalam penulisan pada html, elemen
<pre> bisa ditulis didalamnya element html lainnya seperti : <code>, <span>, <kbd>, <b>, <i>, <u>, <var>, <button>, dan lain lain yang terkait dengan teks.Beberapa penggunaan html
<pre> yang banyak dipakai oleh blogger adalah tempat atau wadah untuk menuliskan menuliskan code html, css, javascript, PHP code dan bahasa computer code lainnya, serta blog yang membahas chord guitar atau pun lirik lagu, blog yang membahas puisi, syair dan beberapa blog yang membahas ilmu pengetahuan khususnya matematika, fisika dan biologi.Contoh HTML <pre>
<pre>
body {
display: block;
margin: 8px;
}
</pre>
<pre>
function demo (){
alert("Javascript aktif");
}
</pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
/*hanya untuk demo*/
pre {
background: #f9e1fb;
padding: 10px;
border: 1px solid #cecece;
border-radius: 5px;
font-size: 15px;
}
</style>
</head>
<body>
<pre>
body {
display: block;
margin: 8px;
}
</pre>
<pre>
function demo (){
alert("Javascript aktif");
}
</pre>
</body>
</html>
Contoh HTML <pre>
<pre>
[INTRO]
G Am Bm Am C <span style="color:red;">D</span>
[Verse 1]
D G Bm Am
Bengawan Solo
D G Am Bm
Riwayatmu kini
E Am D
Sedari dulu jadi
A D7 G Am Bm
Perhatian insani
</pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
/*hanya untuk demo*/
pre {
background: #dde9fd;
padding: 10px;
border: 1px solid #cecece;
border-radius: 5px;
overflow: auto;
}
</style>
</head>
<body>
<h4>Contoh untuk penulisan chord guitar</h4>
<pre>
[INTRO]
G Am Bm Am C <span style="color:red;">D</span>
[Verse 1]
D G Bm Am
Bengawan Solo
D G Am Bm
Riwayatmu kini
E Am D
Sedari dulu jadi
A D7 G Am Bm
Perhatian insani
[Verse 2]
D G Bm Am
Musim kemarau
D G Am Bm
Tak s'brapa airmu
E Am D
Di musim hujan air
A D7 G C G
Meluap sampai jauh
...<em>dan seterusnya</em> ini hanya untuk demo
</pre>
</body>
</html>
Global Attribute
Element
<pre> mencakup Global Attributes HTML.Event Attribute
Element
<pre> mencakup Event Attributes HTML.Browser Support :
| HTML | |||||
|---|---|---|---|---|---|
| Element | Chrome | Safari | Firefox | Opera | IE / Edge |
<pre> | Ya | Ya | Ya | Ya | Ya |
Default CSS :
Browser yang support dengan element
<pre>, mempunyai nilai default :pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}