Hai sahabat warung belajar bertemu lagi seri belajar HTML, saat ini sudah mencapai part ke 11, jika di part 10 kita telah belajar mengenai cara membuat kutipan di HTML.
nah di tutorial kali ini kita akan belajar mengenai tag <pre> dan tag <code>, apa sih fungsi dari tag <pre> dan tag <code>, mereka berdua masih ada hubungannya dengan memanipulasi dari text di html, baik langsung saja kita mulai pembahasannya.
Tag <pre>
Tag <pre> merupakan singkatan dari Preformatted Text, tag ini digunakan untuk menampilkan text dengan tampilan apa adanya, lho maksudnya gimana tuh ?
ehm jadi begini, di HTML itu ada aturan dari penulisan text, yang salah satunya adalah spasi tidak dihitung di penulisan text di HTML istilah ini dikenal dengan nama white spacing.
jadi kalau anda memberikan spasi lebih dari 1 di penulisan text html, html tetap menganggap spasinya ya cuma satu.
lah terus bagaimana kalau spasi antar textnya itu lebih dari satu ???
TARA….. nah itu fungsi dari penggunaan tag <pre>, dengan anda menggunakan tag <pre> berarti text akan ditampilkan dengan format apa adanya, kalau anda menuliskan spasi berapapun itu, ya tetap akan ditampilkan apa adanya sesuai yang ada tulis, gimana sudah paham bukan 
tag <pre> adalah tag yang block level element sehingga akan ditampilkan di baris baru jika, jadi tidak perlu tag <br> untuk mengganti di baris berikutnya.
Baik kita akan coba buat skrip sederhana untuk menjelaskan tag <pre>
<!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>silahkan di save, dan ditampilkan di browser, maka tampilannya adalah sebagai berikut :
Nah dari contoh diatas terlihat, saya membuat 2 paragraf yang satu pakai tag <pre> dan satu tidak, hasilnya yang tidak menggunakan tag <pre> akan ditampilkan sesuai aturan HTML spasinya cuma dihitung satu aja, di paragraf kedua karena menggunakan tag <pre> maka spasi tetap ditampilkan sesuai text yang ditulis.
Terlihat pula jika anda menggunakan tag <pre> maka text yang ditampilkan akan dengan format font yang berbeda, baik kita lanjut ke tag selanjutnya ya.
Tag <code>
Tag ini memiliki fungsi yang hampir sama dengan tag <pre>, kesamaannya adalah pada jenis font yang digunakan jika text menggunakan tag<code>, berarti sama aja dong fungsinya ?
nah yang menjadi berbeda adalah tag <code> hanya menghitung 1 spasi saja tidak seperti tag <pre>, sehingga jika di tag <code> terdapat text yang menggunakan lebih dari 1 spasi akan dihitung 1 spasi saja.
Selain itu jika tag <pre> adalah jenis tag yang bersifat block level element tetapi untuk tag code ini bersifat inline element, jadi text akan ditampilkan langsung di baris yang sama.
coba kita tulis skrip 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>silahkan disimpan dan buka di browser.
nah terlihat perbedaannya kan, jika anda menuliskan tag <code> text akan ditampilkan dengan font yang berbeda, ditampilkan di baris yang sama, tetapi spasi tetap dihitung satu.
Sekian dulu ya kawan, kita sudah belajar mengenai tag <pre> dan tag <code> di HTML, sampai jumpa di seri tutorial HTML lainnya.
Post a Comment