HTML - Entities
Hai teman-teman pengembang web masa depan! Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membawa Anda dalam perjalanan melalui dunia yang menarik dari entitas HTML. Jangan khawatir jika Anda baru belajar pemrograman – kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Pada akhir panduan ini, Anda akan menjadi ahli entitas HTML!
Apa Itu Entitas HTML?
Sebelum kita mendalam, mari pahami apa itu entitas HTML. Pikirkan mereka sebagai kode khusus yang mewakili karakter yang mungkin sulit ditampilkan dalam HTML. Itu seperti memiliki bahasa rahasia untuk halaman web Anda!
Mengapa kita perlu entitas HTML?
Imaginasi Anda ingin menampilkan simbol kurang dari (<) dalam HTML Anda. Jika Anda mengetiknya secara langsung, browser Anda mungkin mengira itu adalah awal tag HTML baru! Itu di mana entitas datang untuk menyelamatkan. Mereka memungkinkan kita untuk menampilkan karakter khusus tanpa mengganggu browser.
Entitas Karakter HTML Nama dan Kode
mari mulai dengan beberapa entitas HTML paling umum. Kita akan melihat kedua nama dan kode numerik mereka.
| Karakter | Nama Entitas | Kode Numerik |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
Lihatlah ini dalam tindakan:
<p>Saya menyukai menggunakan <strong> tags untuk membuat teks <strong>tebal</strong>!</p>
<p>Simbol ampersand (&) digunakan untuk entitas HTML.</p>Dalam contoh ini, kita menggunakan < dan > untuk menampilkan tag yang sebenarnya, dan & untuk menunjukkan ampersand. Cobalah menghapus entitas ini dan lihat apa yang terjadi!
Entitas Spasi Tidak Putus Nama dan Kode
Sekarang, mari bicarakan entitas khusus yang sangat berguna: spasi yang tidak putus.
| Karakter | Nama Entitas | Kode Numerik |
|---|---|---|
| (spasi) |
Spasi yang tidak putus seperti superhero spasi – ia mencegah pemisahan baris di tempat Anda tidak menginginkannya. Misalnya:
<p>Saya menyukai HTML entitas!</p>Ini memastikan "HTML" dan "entitas" selalu tinggal di baris yang sama.
Contoh Entitas HTML
mari uji pengetahuan kita dengan contoh yang menyenangkan:
<p>Saya belajar HTML & itu <em>menakjubkan</em>!</p>
<p>Hak cipta © 2023 oleh John Doe</p>Dalam contoh ini, kita menggunakan & untuk ampersand, < dan > untuk menampilkan tag <em>, © untuk simbol hak cipta, dan untuk menjaga "John" dan "Doe" bersama.
Entitas Simbol ISO 8859-1 Nama dan Kode
HTML juga menyediakan entitas untuk berbagai simbol. Berikut adalah beberapa yang umum:
| Simbol | Nama Entitas | Kode Numerik |
|---|---|---|
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
mari gunakan ini dalam contoh praktis:
<p>Perusahaan kami, Web Wizards™, menerima pembayaran dalam € dan £.</p>
<p>Semua konten adalah © 2023 Web Wizards®.</p>Entitas Karakter ISO 8859-1 Nama dan Kode
kadang-kadang, Anda mungkin perlu menampilkan karakter dengan aksen atau tanda diakritik lain. Entitas HTML sekali lagi datang untuk menyelamatkan:
| Karakter | Nama Entitas | Kode Numerik |
|---|---|---|
| à | à | à |
| é | é | é |
| ñ | ñ | ñ |
| ü | ü | ü |
Ini adalah cara Anda mungkin menggunakannya:
<p>Dalam Bahasa Spanyol, "hello" adalah "hola" dan "goodbye" adalah "adiós".</p>
<p Kata Bahasa Perancis untuk "beach" adalah "plage" (dibaca "plâzh").</p>Entitas Lain yang Didukung oleh Browser
Browser modern mendukung banyak entitas, termasuk simbol matematika, panah, dan bahkan emoji! Berikut adalah beberapa yang menyenangkan:
| Simbol | Nama Entitas | Kode Numerik |
|---|---|---|
| ∞ | ∞ | ∞ |
| ♥ | ♥ | ♥ |
| → | → | → |
| ☺ | ⌣ | ☺ |
mari gunakan ini untuk membuat pesan yang menyenangkan:
<p>Saya memiliki ∞ cinta untuk HTML! ♥</p>
<p>Mari maju → dan terus belajar! ⌣</p>Ingat, meskipun entitas ini menyenangkan, penting untuk menggunakannya dengan bijak. Penggunaan berlebihan entitas dapat membuat HTML Anda sulit dibaca dan dipelihara.
Kesimpulan
Selamat! Anda baru saja membuat pendekatan mendalam ke dunia entitas HTML. Dari menampilkan karakter khusus hingga menambahkan simbol yang menyenangkan, Anda sekarang memiliki alat kuat dalam kotak alat pengembangan web Anda.
Sementara kita mengakhiri, ini adalah cerita kecil dari pengalaman mengajar saya: Saya pernah memiliki siswa yang frustasi karena ampersandnya terus menghilang dari halamannya. Ketika saya menunjukkan kepadanya entitas HTML, wajahnya bersinar seperti dia menemukan harta karun tersembunyi. Itu keajaiban belajar – selalu ada solusi menunggu untuk ditemukan!
Ingat, latihan membuat sempurna. Cobalah untuk mencakup entitas ini dalam proyek HTML Anda, dan segera mereka akan menjadi kebiasaan. Selamat coding, dan may your web pages be filled with perfectly rendered characters and symbols!
Credits: Image by storyset