Belajar HTML Part 9 : Membuat Format Code dan Pre Pada HTML
SCRIPT KIDDIES - 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 adalah contoh cara penulisan dan penggunaan tag <code> didalam HTML :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part 9 : Membuat Format Code dan Pre Pada HTML</title>
</head>
<body>
<p>HTML ---> Ini menggunakan tag paragraf</p>
<p>HTML Adalah singkatan dari <code>Hypertext Markup Lenguage</code></p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part 9 : Membuat Format Code dan Pre Pada HTML</title>
</head>
<body>
<h2>Belajar Membuat Pre| SCRIPT KIDDIE</h2>
<pre>
Jika kita menggunakan tag pre
akan ditampilkan
dengan apa adanya
</pre>
</html>
Dari contoh diatas kita dapat melihat perbedaan antara tag <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. Jika ada pertanyaan silahkan berikan komentar, Sekian Terima Kasih
Kunjungi Juga : Tampan Squad
Referensi : Malas Ngoding
TUTORIAL HTML DASAR LAINYA
Belajar HTML : Mengenal Text Editor
Belajar HTML Part 1 : Mengenal HTML
Belajar HTML Part 2 : Mengenal Tag, Element, Atribut & Struktur Dasar HTML
Belajar HTML Part 3 : Mengenal Heading Pada HTML
Belajar HTML Part 4 : Format Text Pada HTML
Belajar HTML Part 5 : Membuat Paragraf Pada HTML
Belajar HTML Part 6 : Membuat Tabel Pada HTML
Belajar HTML Part 7 : Membuat Hyperlink Pada HTML
Belajar HTML Part 8 : Membuat List Pada HTML
Belajar HTML Part 9 : Membuat Format Code dan Pre Pada HTML
Belajar HTML Part 10 : Membuat Form Pada HTML
Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML
Tidak ada komentar :
Posting Komentar