HTML - Character Encodings
Selamat datang, para pengembang web yang sedang belajar! Hari ini, kita akan mendalami dunia yang menarik dari pengkodean karakter di HTML. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk menghidahkan Anda dalam perjalanan ini dengan penjelasan yang jelas, banyak contoh, dan sedikit humor. Jadi, ambil papan tulis virtual Anda, dan mari kita mulai!
Atribut Charset di HTML
Sebelum kita masuk ke dalam berbagai jenis set karakter, mari kita bicarakan bagaimana kita memberitahukan halaman web kita tentang pengkodean mana yang harus digunakan. Ini adalah tempat dimana atribut charset HTML memainkan perannya.
Atribut charset biasanya ditempatkan dalam tag <meta> di bagian <head> dokumen HTML Anda. Berikut adalah contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Halaman Web Saya yang Menakjubkan</title>
</head>
<body>
<h1>Selamat datang di website saya!</h1>
</body>
</html>Dalam contoh ini, kita memberitahukan browser untuk menggunakan pengkodean UTF-8 (lebih lanjut tentang ini nanti). PERTanyaannya seperti memberikan halaman web Anda sebuah kacamata khusus untuk membaca teks dengan benar.
Set Karakter ASCII
Sekarang, mari kita mulai perjalanan kita melalui set karakter dengan ASCII, kakek buyut dari semuanya. ASCII berarti American Standard Code for Information Interchange. Itu seperti Model T dari pengkodean karakter - tua tapi dasar.
ASCII menggunakan 7 bit untuk merepresentasikan 128 karakter, termasuk:
- Huruf kapital (A-Z)
- Huruf kecil (a-z)
- Angka (0-9)
- Tanda baca dasar
Berikut adalah contoh HTML yang menggunakan hanya karakter ASCII:
<p>Hallo, Dunia! 123</p>Baris ini akan ditampilkan dengan sempurna menggunakan pengkodean ASCII karena hanya mengandung karakter Latin dasar dan angka.
Set Karakter ANSI
Set karakter ANSI (American National Standards Institute) adalah seperti saudara yang lebih keren dan beragam dari ASCII. Itu memperpanjang ASCII untuk menggunakan 8 bit, memungkinkan 256 karakter. Ruang ekstra ini digunakan untuk karakter khusus bagi berbagai bahasa.
Namun, ANSI bukan standar tunggal - itu berubah tergantung pada pengaturan bahasa komputer. Ini bisa menyebabkan situasi yang lucu. Bayangkan mengirimkan surat cinta dalam ANSI, dan komputer kekasih Anda menampilkannya sebagai kode ganjil karena menggunakan halaman kode ANSI yang berbeda!
Set Karakter ISO-8859-1
ISO-8859-1, juga dikenal sebagai Latin-1, adalah seperti panduan wisata Eropa dari set karakter. Itu adalah pengkodean 8 bit yang mencakup karakter yang digunakan dalam bahasa-bahasa Barat Eropa.
Berikut adalah contoh yang menggunakan karakter di luar ASCII:
<p>Café Français</p>Jika Anda menggunakan pengkodean ISO-8859-1, ini akan ditampilkan dengan benar dengan tanda kesempurnaan. Tetapi hati-hati - jika Anda menggunakan pengkodean yang berbeda, Anda mungkin akhirnya mendapat "Café Français" saja!
Set Karakter UTF-8
Sekarang kita mencapai superhero dari pengkodean karakter - UTF-8. Itu seperti pisau Swiss Army dari set karakter, mampu mengkodekan hampir semua karakter yang Anda pikirkan.
UTF-8 menggunakan jumlah byte variabel untuk merepresentasikan karakter. Ini berarti itu dapat menghandle baik karakter ASCII sederhana (menggunakan hanya satu byte) dan karakter kompleks dari sistem penulisan lain (menggunakan beberapa byte).
Berikut adalah contoh yang menunjukkan fleksibilitas UTF-8:
<p>Hallo, नमस्ते, こんにちは, مرحبا</p>Dengan pengkodean UTF-8, baris ini akan ditampilkan dengan benar dalam Bahasa Inggris, Hindi, Jepang, dan Arab!
Set Karakter ISO
ISO telah mengembangkan berbagai set karakter untuk kelompok bahasa yang berbeda. PERTanyaannya seperti set alat khusus untuk wilayah tertentu. Berikut adalah tabel dari beberapa set karakter ISO umum:
| Set Karakter | Deskripsi |
|---|---|
| ISO-8859-1 | Bahasa-bahasa Barat Eropa |
| ISO-8859-2 | Bahasa-bahasa Tengah dan Timur Eropa |
| ISO-8859-3 | Bahasa-bahasa Selatan Eropa |
| ISO-8859-4 | Bahasa-bahasa Utara Eropa |
| ISO-8859-5 | Alpabet Kiril |
| ISO-8859-6 | Arab |
| ISO-8859-7 | Yunani |
| ISO-8859-8 | Ibrani |
Set Karakter UTF
UTF (Unicode Transformation Format) adalah solusi modern untuk pengkodean karakter. Itu seperti Perserikatan Bangsa-Bangsa dari set karakter, menggabungkan karakter dari semua sistem penulisan di dunia.
Ada tiga pengkodean UTF utama:
- UTF-8: Pengkodean lebar variabel, kompatibel mundur dengan ASCII.
- UTF-16: Menggunakan 16 bit untuk karakter yang paling umum, lebih banyak untuk yang lain.
- UTF-32: Menggunakan 32 bit untuk semua karakter.
Berikut adalah tabel perbandingan:
| Pengkodean | Karakteristik | Terbaik Untuk |
|---|---|---|
| UTF-8 | Lebar variabel (1-4 byte) | Halaman web, konteks kompatibel ASCII |
| UTF-16 | Lebar variabel (2 atau 4 byte) | Sistem operasi, Java |
| UTF-32 | Lebar tetap (4 byte) | Situasi di mana akses karakter cepat sangat penting |
Dalam tahun-tahun pengajaran saya, saya menemukan bahwa UTF-8 adalah yang paling banyak digunakan dan direkomendasikan untuk pengembangan web. Itu seperti " satu cincin untuk menguasai mereka semua" di dunia pengkodean karakter.
Untuk mengakhiri, mari kita lihat contoh praktis tentang bagaimana menggunakan UTF-8 dalam HTML Anda:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selamat Datang Berbahasa Multi</title>
</head>
<body>
<h1>Selamat datang di halaman internasional kami!</h1>
<p>Bahasa Inggris: Hello</p>
<p>Bahasa Spanyol: Hola</p>
<p>Bahasa Perancis: Bonjour</p>
<p>Bahasa Jerman: Guten Tag</p>
<p>Bahasa Rusia: Здравствуйте</p>
<p>Bahasa Cina: 你好</p>
<p>Bahasa Jepang: こんにちは</p>
<p>Bahasa Arab: مرحبا</p>
</body>
</html>Halaman ini akan ditampilkan dengan benar dalam beberapa bahasa, terima kasih kepada pengkodean UTF-8.
Ingat, memilih pengkodean karakter yang tepat adalah seperti memilih sepatu yang tepat untuk perjalanan. UTF-8 adalah seperti sepatu sneaker nyaman yang dapat membawa Anda ke mana saja, sedangkan pengkodean lain mungkin lebih spesialisasi untuk jenis permukaan tertentu.
Sebagai akhiran les ini, saya harap Anda telah memperoleh pemahaman yang kuat tentang pengkodean karakter di HTML. Terus latih, tetap bersemangat, dan jangan takut untuk mencoba pengkodean karakter yang berbeda. Selamat berkoding!
Credits: Image by storyset