Pendahuluan
Anda dapat menggunakan HTML untuk melakukan berbagai hal seperti menampilkan blog, memasukkan gambar ke dalam Blog, atau memasukkan audio serta video ke dalam halaman Blog atau website.
Teks preformat (preformatted text) dalam HTML digunakan untuk menampilkan teks tanpa melakukan pemformatan tambahan, seperti pengaturan spasi dan baris baru. Ini berguna ketika Anda ingin mempertahankan format asli dari teks, misalnya untuk menampilkan kode pemrograman atau hasil dari output yang terstruktur. Untuk membuat teks preformat dalam HTML, Anda dapat menggunakan elemen <pre>.
Manfaat Penggunaan Teks Preformat
- Memelihara Format Asli: Teks preformat mempertahankan spasi, tab, dan baris baru, yang berguna untuk menampilkan kode atau teks yang memerlukan format khusus.
- Keterbacaan yang Lebih Baik: Penggunaan teks preformat membuat teks lebih mudah dibaca oleh pengguna, terutama ketika menampilkan kode sumber atau output program.
Penggunaan Elemen <pre>
Untuk menampilkan teks Preformatted Apa Adanya menggunakan tag apa? Untuk membuat teks preformat HTML, Anda dapat menggunakan tag <pre>, <code>, dan CSS. Ini akan mempertahankan format teks yang rapi dan terstruktur dengan mudah pada perangkat, termasuk spasi dan baris baru.
Elemen <pre> (singkatan dari "preformatted") digunakan untuk mengatur teks di dalamnya agar ditampilkan dengan format yang telah ditentukan, termasuk spasi, baris baru, dan teks monospasi.
Contoh penggunaan elemen <pre>:
Contoh:
<pre>
Ini adalah teks preformat.
Teks ini akan ditampilkan dengan format yang telah ditentukan di sini,
termasuk spasi dan baris baru.
Ini adalah contoh teks dengan indentasi.
</pre>
Output dari kode di atas akan menampilkan teks dengan format yang sama persis seperti yang ditulis dalam elemen <pre>, termasuk spasi, baris baru, dan indentasi.
Format umum penggunaan jenis ini adalah:
<pre>...</pre>
Contoh Penerapan
Misalkan Anda ingin menampilkan potongan kode HTML secara langsung di dalam halaman web Anda. Anda dapat menggunakan elemen <pre> untuk mempertahankan struktur kode tersebut tanpa adanya pemformatan tambahan yang biasa dilakukan oleh HTML.
Berikut adalah langkah-langkah untuk mengetahui perbedaan ukuran judul teks (h1, h2, h3, h4, h5 dan h6):
- Jalankan aplikasi Text Editor
- Isikan kode dibawah ini kedalam text editor
- Simpan file dengan nama text-preformat.html dan tempatkan ke dalam direktori kerja.
- Jalankan file tersebut melalui web browser dan lihat hasilnya.
<!DOCTYPE html>
<html>
<head>
<title>Format Teks</title>
</head>
<!--[ <body> open ]-->
<body>
<h2>Demo Membuat Teks Preformat</h2>
<p>Berikut ini adalah kode program sederhana dalam bahasa C++:</p>
<pre>
#include <iostream>
using namespace std;
int main() {
cout<<"Hello World";
return 0;
}
</pre>
</body>
<!--[ </body> close ]-->
</html>
Gambar dibawah ini adalah Gambar hasil praktikum membuat teks preformat sesuai dengan script diatas.
Pada contoh kode di atas, teks pada kode HTML yang diapit oleh tag <pre> dan </pre> akan ditampilkan sesuai dengan tampilan aslinya, tidak perlu tag <br /> atau <br>…</br> (untuk membuat baris baru), tidak perlu tag <p /> atau <p>…</p> (untuk membuat paragraf baru), karakter (untuk membuat spasi). Untuk memastikan konsep ini, anda bisa hilangkan tag <pre> dan </pre> pada kode diatas, lalu simpan kembali file tersebut dan coba Anda jalankan kembali melalui web browser. Apa yang Anda lihat? tampilannya menjadi tidak beraturan (menyamping) bukan?
Kesimpulan
Menggunakan elemen <pre> dalam HTML memungkinkan Anda untuk menampilkan teks dengan format yang telah ditentukan, seperti kode pemrograman, output konsol, atau teks yang memerlukan format khusus lainnya. Namun, perlu diingat bahwa penggunaan elemen <pre> sebaiknya dibatasi hanya untuk teks yang memerlukan format khusus, karena penggunaannya dapat mengabaikan aturan pemformatan standar HTML.
Dengan memahami cara menggunakan elemen <pre> dengan benar, Anda dapat meningkatkan kejelasan dan kekonsistenan tampilan teks di halaman web Anda.