Pada tutorial kali ini kita akan mempelajari dua tag HTML. Yaitu <code> dan <pre> kedua tag tersebut hampir memiliki fungsi yang sama dan kita akan pelajari fungsi dan cara menggunakanya.
MEMBUAT FORMAT CODE
Format kode digunakan untuk membuat sebuah text dari code komputer. Format code pada HTML ditulis dengan menggunakan tag <code>. Code ini diletakkan dalam tag <body> yang berada dalam dokumen HTML. Web browser akan menampilkan element atau teks yang berada dalam <code> sama dengan tampilan kita menuliskan kode aplikasi kedalam text editor.
Isi dari tag code tidak akan dieksekusi oleh web browser, tetapi ditampilkan dalam bentuk text yang berformat syntax atau kode program.
<code> pada HTML termasuk kelompok inline event element, dan mengikuti alur text yang ada. Umumnya web browser akan menampilkan text yang berada di dalam tag <code> sama dengan jenis font tag <pre>, yakni dengan font monospace, namun dengan perbedaan bahwa tag <code> akan menghapus semua spasi yang lebih dari 1.
Berikut ini adalah contoh penggunaan dari <code>
Dari contoh diatas dapat kita lihat perbedaan antara <code> dengan <p>
. Salah satu perbedaan yang paling menonjol adalah font yang digunakan.
Kesimpulanya <code> digunakan dalam penulisan code program dalam
halaman web. Salah satu contoh penggunaan <code> dalam aplikasi
adalah pembuatan text editor online.
PENGGUNAAN TAG PRE
Tag <pre> adalah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk text yang ‘belum’ diformat. Jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada.
Tag <pre> termasuk ke dalam kelompok block level element, sehingga akan ditampilkan di baris baru, terpisah dari text yang ada sebelum tag ini. Berikut ini adalah contoh penggunaan dari <pre> :
Dalam penggunaan tag pre maka akan di tampilkan apa adanya dalam script. Dari contoh di atas makan akan terlihat perbedaan dari penggunaan format code <code> dan <pre>. Tag <pre> bersifat Block Element, Sementara <pre>
bersifat inline element. Tag <pre> akan menampilkan seluruh
element tanpa spasi sementara tag <code> spasi tidak berpengaruh
pada tag ini.
REFERENSI : www.malesngoding.com
MEMBUAT FORMAT CODE
Format kode digunakan untuk membuat sebuah text dari code komputer. Format code pada HTML ditulis dengan menggunakan tag <code>. Code ini diletakkan dalam tag <body> yang berada dalam dokumen HTML. Web browser akan menampilkan element atau teks yang berada dalam <code> sama dengan tampilan kita menuliskan kode aplikasi kedalam text editor.
Isi dari tag code tidak akan dieksekusi oleh web browser, tetapi ditampilkan dalam bentuk text yang berformat syntax atau kode program.
<code> pada HTML termasuk kelompok inline event element, dan mengikuti alur text yang ada. Umumnya web browser akan menampilkan text yang berada di dalam tag <code> sama dengan jenis font tag <pre>, yakni dengan font monospace, namun dengan perbedaan bahwa tag <code> akan menghapus semua spasi yang lebih dari 1.
Berikut ini adalah contoh penggunaan dari <code>
<!DOCTYPE html>
<html>
<head>
<title>HTML : FORMAT CODE</title>
</head>
<body>
<p>HTML ---> Ini menggunakan tag paragraf</p>
<p>HTML Adalah singkatan dari <code>Hypertext Markup Lenguage</code></p>
</body>
</html>
Hasil script saat di run |
PENGGUNAAN TAG PRE
Tag <pre> adalah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk text yang ‘belum’ diformat. Jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada.
Tag <pre> termasuk ke dalam kelompok block level element, sehingga akan ditampilkan di baris baru, terpisah dari text yang ada sebelum tag ini. Berikut ini adalah contoh penggunaan dari <pre> :
<!DOCTYPE html>
<html>
<head>
<title> Format Code</title>
</head>
<body>
<pre>
<h2> MEMBUAT FORMAT CODE PRE </h2>
Text ini
menggunakan sintag
pre
</pre>
</body>
</html>
Hasil script saat di run |
REFERENSI : www.malesngoding.com
EmoticonEmoticon