#31 Menulis kode atau puisi dengan tag pre pada HTML
tag pre adalah tag yang digunakan untuk menentukan blok teks yang telah diformat sebelumnya. tag pre berasal dari kata preformat ( performatted text).
jadi elemen HTML <pre> mewakili teks yang sudah diformat dan disajikan persis seperti yang ditulis dalam file HTML
dalam artian mempertahankan ruang teks, pemisah baris, tab dan karakter pemformatan lainnya yang diabaikan oleh browser web.
misal yang diabaikan oleh browser ketika kita menulis dengan spasi 4 kali, dihitung menjadi 1 spasi.
Baca juga : Tag dan Elemen pada HTML
pada HTML 4 sebelumnya terdapat atribut width pada tag pre yang digunakan untuk menentukan jumlah karakter maksimum per baris, sekarang tidak di gunakan lagi di HTML 5
Teks dalam tag pre diterjemahkan menggunakan font non-proposional (“monospace”). tetapi bisa diubah menggunakan CSS.
penulisan tag pre membutuhkan tag awal dan akhir, dibuka dengan tag <pre> dan ditutup dengan tag </pre>.
menulis tag kode didalam tag <pre> apakah harus menggunakan tag <code> ?
ya secara semantik perlu karena browser akan membaca bahwa itu menunjukan kode program bukan teks biasa.
setiap baris didalam tag pre ini dibaca, jadi ketika menulis kode didalam tag pre usahakan memulai kode disamping tag pre, seperti dibawah ini
klik coba script untuk melihat hasilnya
<!DOCTYPE html>
<html>
<head>
<title> Menampilkan kode dengan tag pre </title>
</head>
<body>
<hr>
<pre><code>
function cool(x) {
return x + 1;
}
</code></pre>
<hr>
<pre><code> function cool(x) {
return x + 1;
}
</code></pre>
<hr>
</body>
</html>Code language: HTML, XML (xml)perbedaan antara kode di atas dan dibawah adalah yang diatas ada satu baris putih, sedangkan yang dibawah tidak menggunakan baris putih
contoh tag <pre> dengan properti warna CSS:
<!DOCTYPE html>
<html>
<head>
<title> tag pre dengan properti css </title>
</head>
<body>
<pre>
<code>
body {
color:blue;
}
</code>
</pre>
</body>
</html>Code language: HTML, XML (xml)kita juga bisa menggunakan tag pre ini untuk menulis puisi.
<!DOCTYPE html>
<html>
<head>
<title> menulis puisi dengan tag pre </title>
</head>
<body>
<pre>
<b>Jalan Tuhan</b>
Ketika yang ku genggam pun akhirnya hilang,
Sudah pasti Tuhan tak berkenan,
Dan ketika yang ada kini datang lantas bertahan,
Sudah pasti Tuhan menginginkan…
</pre>
</body>
</html>Code language: HTML, XML (xml)seperti dijelaskan diatas semua spasi atau tab dihitung ketika menggunakan tag pre
kita bisa lihat di tutorial ini block warna hitam dibawah dan diatas untuk menulis kode program juga menggunakan tag pre yang didalamnya ada tag <code>
<!DOCTYPE html>
<html>
<head>
<title> membuat tingkatan dengan spasi </title>
</head>
<body>
<pre>
. empat
. tiga
. dua
satu
spasi disini dihitung
</pre>
</body>
</html>Code language: HTML, XML (xml)
Pencarian di thohirdev:
- fungsi tag pre
- pengertian tag pre
- html pre tag, pre tag, pre tag html, tag pre html