HTML - Entities
Hai sana, bakal pengembang web! Sebaga guru komputer di lingkungan Anda, saya senang 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 masuk ke detil, mari pahami apa entitas HTML itu. Pahamilah itu seperti kode khusus yang mewakili karakter yang mungkin sulit untuk ditampilkan di HTML. Itu seperti memiliki bahasa rahasia untuk halaman web Anda!
Mengapa Kita Butuh Entitas HTML?
Imaginasi Anda ingin menampilkan simbol kurung kurawal kecil (<) di halaman HTML Anda. Jika Anda mengetiknya secara langsung, browser Anda mungkin mengira itu adalah awal tag HTML baru! Itulah tempat entitas datang untuk menyelamatkan. Mereka memungkinkan kita untuk menampilkan karakter khusus ini tanpa mengganggu browser.
Entitas Karakter HTML Nama dan Kode
Mari kita mulai dengan beberapa entitas HTML paling umum. Kita akan melihat baik nama maupun kode numeriknya.
| Karakter | Nama Entitas | Kode Numerik |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
Lihatlah ini dalam aksi:
<p>Saya menyukai untuk menggunakan <strong> tag 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 menampilkan ampersand. Cobalah menghapus entitas ini dan lihat apa yang terjadi!
Entitas Spasi Tidak Pemutus Nama dan Kode
Sekarang, mari bicarakan entitas khusus yang sangat berguna: spasi yang tidak memutus.
| Karakter | Nama Entitas | Kode Numerik |
|---|---|---|
| (spasi) |
Spasi yang tidak memutus seperti superhero spasi – itu mencegah pemutus baris di tempat Anda tidak inginkannya. Misalnya:
<p>Saya menyukai HTML entitas!</p>Ini memastikan "HTML" dan "entitas" selalu tetap di baris yang sama.
Contoh Entitas HTML
Mari kita 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 lainnya. 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 Prancis untuk "beach" adalah "plage" (dibaca "plâzh").</p>Entitas Lainnya 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>Bergerak maju → dan terus belajar! ⌣</p>Ingat, meskipun entitas ini menyenangkan, penting untuk menggunakannya secara bijak. Penggunaan berlebihan entitas dapat membuat HTML Anda sulit dibaca dan dipelihara.
Kesimpulan
Selamat! Anda baru saja masuk ke dalam dunia entitas HTML. Dari menampilkan karakter khusus hingga menambahkan simbol menyenangkan, Anda sekarang memiliki alat kuat di dalam kotak alat pengembangan web Anda.
Sementara kita menutup, ini adalah cerita kecil dari pengalaman mengajar saya: Saya pernah memiliki murid yang frustasi karena ampersandnya terus menghilang dari halaman webnya. Ketika saya menunjukkan kepadanya entitas HTML, wajahnya bersinar seperti dia telah menemukan harta karun tersembunyi. Itu adalah magisnya belajar – selalu ada solusi menunggu untuk ditemukan!
Ingat, latihan membuat sempurna. Cobalah untuk mensertakan entitas ini dalam proyek HTML Anda, dan segera mereka akan menjadi kebiasaan. Selamat coding, dan semoga halaman web Anda penuh dengan karakter dan simbol yang tergambar sempurna!
Credits: Image by storyset