Iklan bawah header

Belajar HTML Part 21 - Mengenal Tag pre dan code di HTML

Pada tutorial kali ini kita akan belajar mengenai tag <pre> dan tag <code>, apa sih fungsi dari kedua tag tersebut, tag pre dan tag code ini masih ada hubungannya dengan memanipulasi dari teks di html.

Tak perlu basa-basi lagi, mari kita mulai pembahasannya.

Tag <pre>

Tag pre (preformatted text) digunakan untuk menampilkan teks dengan tampilan apa adanya. Jelasnya di HTML itu ada aturan dari penulisan teksnya, salah satunya contohnya adalah spasi tidak dihitung pada penulisan teks html. Istilah tersebut biasa dikenal dengan nama white spacing. Jadi kalau kita menuliskan lebih dari satu spasi di html, maka akan tetap dianggap satu spasi oleh html.

lalu, bagaimana kalau kita mau menuliskan lebih dari satu spasi ?

Nah disinilah tag pre ini bisa digunakan, karena dengan menggunakan tag <pre> berarti teks akan ditampilkan dengan format apa adanya sesuai dengan yang dituliskan.

Tag pre merupakan block level element yang berarti akan ditampilkan pada baris baru dalam penggunaanya. Silahkan kalian lihat skrip html dibawah ini :

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Pre</title>
</head>
<body>
<h3>Contoh Penggunaan Tag Pre</h3>
<hr/>
Ini adalah text                                    tanpa menggunakan pre <pre>Ini adalah text                                    tanpa menggunakan pre</pre>
</body>
</html>

simpan dan buka filenya di browser.

Tag <code>

Terdapat kesamaan antara tag code dengan tag pre, terutama pada jenis font yang digunakannya. Lalu bagaimana dengan fungsinya?

Sedangkan untuk fungsinya, tag <code> hanya menghitung satu spasi saja tidak seperti tag <pre>, meskipun kita mengetikan spasi berulang kali yang akan dihitung hanya satu spasi saja.

tag pre merupakan tag yang bersifat block level element, sedangkan untuk tag code merupakan tag yang bersifat inline element, jadi teks yang menggunakan tag code akan ditampilkan langsung dibaris yang sama.

Coba tuliskan code html di bawah ini :

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Code</title>
</head>
<body>
<h3>Contoh Penggunaan Tag Code</h3>
<hr/>
Ini adalah text biasa <code> Ini adalah text dengan menggunakan             tag code</code></p>
</body>
</html>

Lalu simpan dan jalankan di browser, maka hasilnya akan seperti ini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel