Biasanya, tag HTML tidak terlihat oleh pengguna akhir karena digunakan untuk merender konten halaman
Namun, Anda tetap dapat menampilkan tag pada halaman tersebut jika Anda memastikan entitas HTML
Entitas HTML adalah cara untuk menampilkan karakter tertentu dalam HTML. Dalam kasus kami, kami memerlukan cara untuk menampilkan karakter < dan >, karena ini adalah karakter yang dicadangkan dalam HTML
Karena mereka memiliki arti khusus dalam HTML, mereka biasanya tidak ditampilkan sebagai teks biasa
Berikut adalah contoh penggunaan entitas HTML untuk menampilkan tag HTML
<h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol>Beginilah tampilannya dirender di browser
<h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> _Berikut adalah daftar semua karakter HTML yang dicadangkan dan entitasnya
- <. <
- >. >
- &. <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> _0
- <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> _1. <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> _2
Setiap entitas dimulai dengan & dan diakhiri dengan <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> 4
Untuk menyandikan HTML, Anda dapat menggunakan pencarian dan penggantian untuk setiap karakter yang dicadangkan untuk mengonversinya menjadi entitas yang sesuai
Setelah Anda menyandikan HTML, Anda ingin mempertahankan format dan indentasi HTML
Untuk melakukannya, gunakan tag <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> _5. Tag ini digunakan pada teks yang telah diformat sebelumnya, oleh karena itu namanya
Berikut adalah contoh cara menggunakan tag <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> 5 dengan HTML yang disandikan
<pre> <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> </pre> _Kami telah melihat cara menampilkan tag HTML sebagai teks biasa menggunakan entitas HTML. Kita juga telah melihat cara menggunakan tag <h1>This is a heading.</h1> <ul> <li>This is a list item.</li> </ul> <ol> <li>This is a list item.</li> </ol> _7 untuk mempertahankan pemformatan dan indentasi HTML
Semoga postingan ini bermanfaat bagi Anda
Jika Anda ingin belajar tentang pengembangan web, mendirikan start-up, bootstrap SaaS, dan lainnya, ikuti saya di Twitter. Anda juga dapat bergabung dalam percakapan di Discord resmi kami
Selamat datang di tutorial tentang cara menampilkan kode HTML sebagai teks. Ingin menambahkan cuplikan kode HTML ke situs web Anda?
Untuk menampilkan kode HTML sebagai teks, cukup ganti < dengan <, dan > dengan >. Sebagai contoh
- <strong> Hello World! </strong>
- <p> Goodbye World! </p>
Itu mencakup dasar-dasar cepat, tetapi baca terus jika Anda membutuhkan lebih banyak tip dan contoh
ⓘ Saya telah menyertakan file zip dengan semua kode sumber di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk
SLIDE CEPAT
Unduh & Catatan
UNDUH & CATATAN
Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan
CATATAN CEPAT
Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman
DOWNLOAD KODE CONTOH
Klik di sini untuk mengunduh semua kode sumber contoh, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri
TAMPILKAN HTML SEBAGAI TEKS
Baiklah, sekarang mari kita masuk ke contoh untuk menampilkan kode HTML sebagai teks di halaman web
CONTOH 1) KODE HTML INLINE
1-inline-kode. html
<style> code { padding: 3px; border: 1px solid #dfe22b; background: #fffb89; } * { font-family: arial, sans-serif; box-sizing: border-box; } </style> <p> The <code><strong></code> tag is not to be used to bold text. It actually has a semantic meaning of "strong emphasis". </p>Tag <style>
pre {
color: #fff;
background: #384669;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
</style>
<pre><code><ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul></code></pre>0 tidak boleh digunakan untuk teks tebal
Ini sebenarnya memiliki arti semantik "penekanan kuat"
Seperti di pendahuluan, yang harus kita lakukan adalah mengganti < dengan < dan > dengan >
- <style> pre { color: #fff; background: #384669; } * { font-family: arial, sans-serif; box-sizing: border-box; } </style> <pre><code><ul> <li>First</li> <li>Second</li> <li>Third</li> </ul></code></pre>_5 disebut "entitas HTML". Secara khusus, ________ 24 _______ mewakili “kurang dari” dan > untuk “lebih besar dari”
- Ada banyak “karakter entitas HTML” lainnya, seperti <style> pre { color: #fff; background: #384669; } * { font-family: arial, sans-serif; box-sizing: border-box; } </style> <pre><code><ul> <li>First</li> <li>Second</li> <li>Third</li> </ul></code></pre>8 untuk ampersand. Saya akan meninggalkan tautan di bawah untuk daftar yang lebih lengkap
- Terakhir, membungkus kode HTML Anda dalam ________11______9 adalah opsional. Yah, lebih mudah untuk menambahkan kosmetik dengan cara ini, dan ini juga memberikan petunjuk semantik "ini adalah kode komputer" ke mesin pencari
CONTOH 2) SNIPPET KODE HTML
2-kode-cuplikan. html
<style> pre { color: #fff; background: #384669; } * { font-family: arial, sans-serif; box-sizing: border-box; } </style> <pre><code><ul> <li>First</li> <li>Second</li> <li>Third</li> </ul></code></pre><ul> <li>First</li> <li>Second</li> <li>Third</li> </ul>Jika Anda ingin menampilkan cuplikan, bungkus saja dengan sepasang <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul>0. Artinya, <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul>_1 teks yang telah diformat sebelumnya akan mempertahankan semua spasi dan jeda baris… Jadi Anda tidak perlu melakukan manual gila <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul>2 dan <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul>3
P. S. Sangat sulit untuk mengubah semua tag menjadi entitas HTML secara manual. Cukup lakukan pencarian untuk “kode entitas HTML online”, dan ada banyak alat online gratis
BIT & LINK YANG BERMANFAAT
Itu saja untuk tutorialnya, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda
EKSTRA) PENYOROT KODE
Jika Anda menginginkan "cuplikan kode yang cantik", ada beberapa pustaka Javascript di luar sana yang dapat Anda gunakan
- Sorot JS
- Pelangi
- Prisma
- Mikro
- Penyorot Sintaks
LINK dan REFERENSI
- Entitas HTML – MDN
- Simbol HTML – Toptal
LEMBAR CHEAT INFOGRAFIS
Terima kasih telah membaca, dan kami telah sampai pada akhir. Saya harap ini membantu Anda untuk lebih memahami, dan jika Anda ingin berbagi sesuatu dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode