Membuat Teks Berformat pada HTML Menggunakan Tag PRE
Tag pre pada HTML digunakan untuk mendefinisikan block atau preformat teks yang merepresentasikan teks space, line break, tab, dan karakter format lainnya yang akan diabaikan oleh web browser. Teks pada elemen <pre> akan ditampilkan dalam bentuk huruf yang tetap, tetapi juga bisa dirubah dengan menggunakan kode CSS. Tag <pre> membutuhkan bagian awalan dan akhiran tag.
Sintak: <pre> Konten... </pre>
Sebelum memahami lebih dalam materi tentang Membuat Teks Berformat pada HTML Menggunakan Tag PRE, terlebih dahulu pelajari materi tentang: Membuat Teks Frase HTML Menggunakan Tag Phrase yang Tersedia, Membuat Parameter HTML Mengunakan Tag Param Untuk Plugin Object, dan Membuat Output Dinamis HTML Menggunakan Tag Output.
Contoh:
<html>
<head>
<title>
tag pre
</title>
</head>
<body>
<pre>
Blog Elfan, adalah blog tentang ilmu komputer.
</pre>
</body>
</html>
Output:Blog Elfan, adalah blog tentang ilmu komputer.
Contoh:
<html>
<head>
<title>
Tag pre dengan CSS
</title>
<style>
pre
{
font-family: Arial;
color: #009900;
margin: 25px;}
</style>
</head>
<body>
<pre>
Blog Elfan
portal ilmu komputer
</pre>
</body>
</html>
Output:Blog Elfan portal ilmu komputer
Dalam dunia pengembangan halaman web, struktur penyajian teks menjadi salah satu aspek yang penting untuk dipahami. Salah satu elemen dalam HTML yang memiliki peran besar dalam hal ini adalah tag PRE. Tag ini digunakan untuk menampilkan teks yang memiliki format tertentu dengan cara mempertahankan struktur spasi dan baris baru yang ada dalam kode sumbernya. Dengan menggunakan tag ini, teks yang sebelumnya dimasukkan dalam kode HTML akan ditampilkan dengan cara yang sama persis, tanpa adanya perubahan atau penghilangan spasi atau baris baru.
Tag PRE sering digunakan untuk menampilkan teks yang memiliki format yang perlu dipertahankan, seperti kode program atau informasi yang menggunakan indentasi khusus. Salah satu ciri khas utama dari tag ini adalah kemampuannya untuk mempertahankan jarak antar kata atau baris, yang sering kali diperlukan dalam berbagai aplikasi pengembangan web atau penyajian teks. Oleh karena itu, memahami cara kerja tag PRE dalam HTML sangat penting untuk memastikan teks dapat ditampilkan dengan benar sesuai dengan format yang diinginkan.
Pada dasarnya, tag PRE memberikan cara bagi pengembang untuk menampilkan teks dengan cara yang tidak mengubah struktur asli teks tersebut. Biasanya, dalam HTML, teks yang dimasukkan akan mengalami perubahan dalam formatnya, seperti penghilangan spasi ganda atau penggabungan baris yang terpisah menjadi satu baris. Namun, dengan tag PRE, spasi dan baris baru yang dimasukkan oleh pengembang akan dipertahankan sebagaimana adanya. Hal ini sangat bermanfaat untuk menyajikan teks yang memerlukan format khusus, seperti dalam contoh teks yang menggunakan indentasi atau teks yang diatur dalam kolom tertentu.
Baca Juga:
Tag ini bekerja dengan cara sederhana, namun efektif. Ketika teks dimasukkan ke dalam elemen PRE, HTML akan menampilkan teks tersebut sesuai dengan susunan aslinya, baik itu berupa baris baru, spasi ganda, atau tabulasi. Ini menjadikan tag PRE sangat berguna dalam banyak situasi. Penggunaan yang paling umum adalah untuk menampilkan kode program. Sebuah kode program sering kali mengandung indentasi atau spasi yang digunakan untuk memisahkan blok kode atau menata struktur yang lebih jelas. Dengan tag PRE, kode tersebut bisa ditampilkan dengan format yang sangat mirip dengan aslinya, sehingga memudahkan pembaca atau pengembang lain untuk memahami struktur kode yang disajikan.
Selain untuk kode program, tag PRE juga dapat digunakan untuk menampilkan data teks lainnya yang membutuhkan format khusus. Sebagai contoh, bisa digunakan untuk menampilkan teks yang terdiri dari beberapa baris yang panjang atau teks yang memiliki kolom yang teratur. Pada beberapa kasus, teks yang memiliki format tabulasi atau pemisahan tertentu akan lebih mudah dibaca jika disajikan menggunakan tag PRE. Misalnya, dalam tampilan data yang disusun dalam bentuk tabel, dimana setiap kolom memerlukan perataan yang presisi agar informasi dapat dipahami dengan jelas. Dalam kasus ini, tag PRE dapat membantu memastikan bahwa setiap kolom tetap terjaga susunannya, meskipun teks tersebut dimasukkan dalam halaman web.
Selain itu, tag PRE juga berguna untuk menyajikan teks dalam bentuk yang lebih terstruktur dan mudah diakses. Dalam pengembangan web, sering kali ada kebutuhan untuk menampilkan teks dalam bentuk yang sudah diformat sebelumnya, seperti ketika mengimpor teks dari file eksternal atau ketika menampilkan data yang dihasilkan oleh aplikasi. Dengan menggunakan tag ini, teks yang sudah diformat sebelumnya akan ditampilkan dengan cara yang sesuai, tanpa perubahan yang tidak diinginkan. Hal ini sangat membantu dalam situasi dimana akurasi dan kejelasan penyajian informasi sangat penting.
Namun, meskipun tag PRE sangat berguna, ada beberapa hal yang perlu diperhatikan saat menggunakannya. Salah satu hal yang perlu dipertimbangkan adalah ukuran teks yang ditampilkan. Karena tag PRE mempertahankan format teks yang asli, ini berarti bahwa teks yang disajikan dapat terlihat lebih besar atau lebih kecil, tergantung pada ukuran font dan panjangnya. Untuk mengatasi hal ini, pengembang dapat menyesuaikan tampilan teks menggunakan atribut atau elemen lain dalam HTML untuk memastikan bahwa teks ditampilkan dengan ukuran yang sesuai dengan kebutuhan tampilan halaman web.
Selain itu, karena tag PRE mempertahankan format asli dari teks, ini juga berarti bahwa pengembang perlu berhati-hati dalam memformat teks yang dimasukkan. Jika teks tersebut terlalu panjang atau memiliki spasi yang terlalu banyak, hal ini bisa menyebabkan teks tersebut tampak terpotong atau membuat tampilan halaman menjadi kurang rapi. Oleh karena itu, sangat penting untuk memastikan bahwa teks yang dimasukkan dalam tag PRE sudah diformat dengan baik, agar hasil tampilan di halaman web tetap terlihat terstruktur dan mudah dibaca.
Penggunaan tag PRE juga dapat dikombinasikan dengan elemen HTML lainnya untuk menciptakan tampilan yang lebih dinamis dan interaktif. Misalnya, tag ini bisa dipasangkan dengan elemen lain seperti CODE atau SAMP untuk memberikan penjelasan lebih lanjut mengenai jenis teks yang ditampilkan. Dengan demikian, meskipun tag PRE digunakan untuk menampilkan teks yang sudah diformat, kombinasi dengan elemen lain dapat memperkaya tampilan dan memberikan konteks lebih jelas bagi pembaca atau pengguna halaman web.
Secara keseluruhan, tag PRE memiliki peran yang sangat penting dalam pengembangan web, terutama dalam hal penyajian teks yang memerlukan format khusus. Kemampuannya untuk mempertahankan struktur teks asli menjadikannya pilihan yang tepat untuk berbagai aplikasi, mulai dari menampilkan kode program hingga menampilkan data yang memerlukan pengaturan format yang spesifik. Oleh karena itu, pemahaman yang baik tentang cara kerja tag ini dan kapan sebaiknya digunakan sangat penting bagi siapa saja yang bekerja dengan HTML. Meskipun sederhana, tag ini menawarkan fleksibilitas yang sangat besar dalam hal penyajian teks dengan format yang terjaga, sehingga memudahkan pengembang untuk membuat halaman web yang lebih terstruktur dan mudah dipahami.
Referensi Tambahan:
- 2 Contoh Pembagian Paragraf Menggunakan Tag Section HTML
- 2 Contoh Pembuatan Teks Berukuran Kecil Menggunakan Tag Small HTML
- 6 Contoh Pengelompokkan Elemen Menggunakan Tag Span pada HTML
- Membuat Garis Coret pada Teks Menggunakan Tag Strike HTML
- 2 Contoh Cara Menebalkan Teks Menggunakan Tag Strong pada HTML
- 6 Contoh Penerapan Tag Style untuk Modifikasi Tampilan Web HTML
- 5 Contoh Penggunaan Tag Subscript dan Superscript pada HTML
Artikel ini akan dibaca oleh: Muhammad Fairuz Zahir, Nabilahusna Nurul Imani, Naviatul Fadilla Nurrohmah, Nur Rahma Martiyana, dan Nur Zain Sholeh.
5 komentar untuk "Membuat Teks Berformat pada HTML Menggunakan Tag PRE"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan elemen pre pada dokumen HTML?
BalasHapusElemen HTML < pre > digunakan untuk mewakili teks yang telah diformat sebelumnya yang akan disajikan persis seperti yang tertulis dalam file HTML. Teks biasanya dirender menggunakan font non-proportional, atau "monospace".
HapusTag < pre > mendefinisikan teks yang telah diformat sebelumnya pada dokumen HTML. Teks dalam elemen tersebut kemudian ditampilkan dalam font fixed-width dengan ukuran lebar yang tetap, dan teks juga akan mempertahankan spasi dan jeda baris.
HapusApa perbedaan antara tag P dan tag PRE pada dokumen html?
BalasHapusTag P digunakan untuk mendefinisikan sebuah paragraf pada dokumen html. Dengan tag p, browser secara otomatis akan menambahkan beberapa spasi atau margin sebelum dan sesudah elemen < p >. Sedangkan tag PRE pada html digunakan untuk mendefinisikan teks yang telah diformat sebelumnya. Teks dalam elemen PRE akan ditampilkan dalam font, dan ukuran spasi yang tetap.
Hapus