Bootstrap 4 Code - Menulis Kode
Belajar Menulis kode dengan bootstrap 4. Dalam HTML, ada dua jenis tampilan kode, yaitu inline (berbaris) dan block (blok). Inline code biasanya kode yang ditulis berbaris, sebaris atau beriringan dengan teks lain dalam sebuah paragraf. Sedangkan, block code adalah terpisah (berdiri sendiri) pada sebuah baris baru (paragraf baru).
Menulis Kode inline (Inline Code)
Menulis kode inline dapat menggunakan HTML <code> element. Mengenai element ini, dapat Anda pelajari selengkapnya pada HTML <code> tag.
Tulislah kode inline di dalam <code>...</code> element. Sebelumnya, pastikan karakter < di-escape menjadi < dan karakter > di-escape menjadi > juga karakter lain yang dikenali sebagai bagian dari kode (markup) HTML. Sehingga, jika Anda menulis kode <p> harus di-escape dan ditulis: <p>. Ada banyak sekali HTML escape tools online yang dapat Anda gunakan secara otomatis, sehingga Anda tidak perlu menulis dan meng-escape karakter tersebut secara manual.
Contoh
Menulis kode dengan <code>
Pada contoh dibawah ini, saya menulis HTML <p> element yang digunakan untuk menulis sebuah paragraf, kemudian saya menyisipkan HTML <code> element didalamnya.
<p>Di Bootstrap, kita bisa membuat tabel cantik hanya dengan menggunakan nama class <code>.table</code></p>
Untuk menuliskannya sebagai sebuah tampilan kode, maka harus di-escape seperti ini:
<p>Di Bootstrap, kita bisa membuat tabel cantik hanya dengan menggunakan nama class <code>.table</code></p>
Menulis Blok Code (code block)
Untuk menulis blok kode atau kode lebih dari satu baris, gunakan HTML <pre> element. Sama seperti contoh sebelumnya, karakter khusus harus di-escape.
Sebagai tambahan, bootstrap menyediakan nama class .pre-scrollable jika kita menginginkan tampilan blok kode yang panjang dapat di-scroll (digulung) apabila melebihi batas lebar atau tinggi element tersebut. Juga perlu diperhatikan bahwa tinggi element dibatasi maksimal 350px (max-height: 350px).
Contoh
Blok kode dengan <pre>
Contohnya, jika Anda ingin menulis output kode (menampilkan kode) dalam sebuah dokumen HTML (Bootstrap khususnya) seperti ini:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Mari Belajar Bootstrap</title>
</head>
<body>
<h1>Halo Dunia, Apa Kabar?</h1>
<p>Belajar Bootstrap itu Mengasyikkan.</p>
</body>
</html>
Maka, Anda harus meng-escape beberapa karakter khusus sehingga menjadi seperti ini:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Mari Belajar Bootstrap</title>
</head>
<body>
<h1>Halo Dunia, Apa Kabar?</h1>
<p>Belajar Bootstrap itu Mengasyikkan.</p>
</body>
</html>
Terakhir, kita meletakkannya didalam element <pre><code> seperti contoh berikut:
<pre><code><!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Mari Belajar Bootstrap</title>
</head>
<body>
<h1>Halo Dunia, Apa Kabar?</h1>
<p>Belajar Bootstrap itu Mengasyikkan.</p>
</body>
</html></code></pre>
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Mari Belajar Bootstrap</title>
</head>
<body>
<h1>Halo Dunia, Apa Kabar?</h1>
<p>Belajar Bootstrap itu Mengasyikkan.</p>
</body>
</html>Pada contoh diatas saya menulis kode (yang telah di-escape) tersebut didalam element <pre><code>
... </code></pre>
Pada titik tiga (...) tersebut maksudnya adalah kode yang telah di-escape kita masukkan didalamnya.
Variable
variabel
Untuk menunjukkan sebuah variabel (variable) kita dapat menulisnya di dalam element <var> seperti contoh berikut:
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Menulis User Input (Keyboard)
Biasanya dalam sebuah tutorial, dimana kita menulis tombol/kunci keyboard seperti Ctrl + Shift + Alt + o maka untuk menunjukkan kunci-kunci tersebut kita dapat menggunakan HTML element <kbd> seperti contoh berikut:
<p>Untuk menyimpan dokumen, gunakan shortcut <kbd><kbd>Ctrl</kbd> + <kbd>s</kbd></kbd></p>
Untuk menyimpan dokumen, gunakan shortcut Ctrl + s
Sample output (Keluaran) Program
Untuk menunjukkan sebuah output (keluaran) sebuah program (komputer, misalnya) kita bisa menulisnya dalam sebuah HTML <sample> element seperti contoh di bawah ini.
<samp>Teks ini dimaksudkan sebagai contoh keluaran (output) sebuah program komputer</samp>
SHARE