Membuat karakter khusus

Pandue Essentials, Membuat karakter khusus

Pedoman karakter khusus

Pedoman Branding Pandu Essentials | Elemen Merek

Dalam pengembangan web, sering kali kita membutuhkan kemampuan untuk menampilkan karakter khusus, seperti simbol matematika, tanda mata uang, atau bahkan ikon. HTML menyediakan beberapa cara untuk mencapai ini dengan mudah.

Halaman ini memberi tahu Anda cara membuat karakter khusus menggunakan HTML.

Membuat Karakter Khusus Menggunakan HTML

Bagaimana cara membuat karakter khusus dengan HTML untuk website? Untuk membuat karakter khusus dengan HTML, Anda bisa menambahkan karakter khusus ke halaman web dengan menggunakan entity references dalam HTML, contohnya & untuk tanda "dan" dan € untuk simbol euro (€).

Ada banyak karakter yang digunakan sebagai pelengkap kata/kalimat/paragraf. Sebagian karakter juga berfungsi untuk membuat teks preformat dalam halaman web. Berikut ini adalah beberapa karakter yang dapat Anda terapkan ke dalam teks dokumen Anda:

Menggunakan Karakter Khusus HTML

Dalam HTML, karakter khusus dapat ditambahkan menggunakan entitas karakter. Entitas karakter dimulai dengan ampersand (&) dan diakhiri dengan titik koma (;). Berikut adalah beberapa contoh karakter khusus yang sering digunakan:

& untuk tanda ampersand (&)
< untuk tanda kurang dari (<)
> untuk tanda lebih dari (>)
" untuk tanda kutip (")
© untuk simbol hak cipta (©)
® untuk simbol merek terdaftar (®)

Menggunakan Karakter Unicode

Unicode adalah standar internasional untuk pengkodean karakter dalam teks. HTML memungkinkan penggunaan karakter Unicode langsung dalam kode. Misalnya:

© untuk simbol hak cipta (©)
® untuk simbol merek terdaftar (®)

Menggunakan CSS untuk Karakter Khusus

Selain itu, CSS juga dapat digunakan untuk menambahkan karakter khusus menggunakan properti content. Ini berguna ketika ingin menambahkan ikon atau karakter kustom dari font yang didefinisikan sendiri. Contohnya:

Contoh

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Karakter Khusus</title>
    <style>
    .icon:before {
        content: "\2605"; /* Menampilkan bintang menggunakan Unicode */
        font-size: 24px;
    }
    </style>
  </head>

  <!--[ <body> open ]-->
  <body>
    <div class="icon"></div>
    
  </body>
  <!--[ </body> close ]-->
</html>

Entitas karakter

Catatan: Untuk mempelajari karakter khusus HTML menggunakan Unicode, gunakan referensi Unicode, pilih karakter yang sesuai, gunakan HTML entity, uji kompatibilitas lintas-platform, dokumentasikan penggunaan, dan berlatih secara konsisten.

Karakter Khusus HTML Menggunakan Entitas Karakter

  - Spasi non-breaking
& - Tanda ampersand (&)
< - Tanda kurang dari (<)
> - Tanda lebih dari (>)
" - Tanda kutip ganda (")
' - Tanda kutip tunggal (')
¢ - Simbol sen (¢)
£ - Simbol pound sterling (£)
¥ - Simbol yen (¥)
€ - Simbol euro (€)
© - Simbol hak cipta (©)
® - Simbol merek terdaftar (®)
™ - Simbol merek dagang (™)
§ - Simbol bagian (§)
¶ - Simbol paragraf (¶)
• - Bulatan (•)
– - Tanda hubung en (–)
— - Tanda hubung em (—)
‘ - Tanda kutip tunggal kiri (‘)
’ - Tanda kutip tunggal kanan (’)
“ - Tanda kutip ganda kiri (“)
” - Tanda kutip ganda kanan (”)
« - Tanda kutip ganda bukaan Prancis («)
» - Tanda kutip ganda penutup Prancis (»)
… - Elipsis horizontal (…)
&permil; - Permille (‰)
′ - Tanda kutip tunggal (pertama) (′)
″ - Tanda kutip ganda (kedua) (″)
&frasl; - Garis miring (patah-patah) (/)
¹ - Superskrip satu (¹)
² - Superskrip dua (²)
³ - Superskrip tiga (³)
¼ - Pecahan satu per empat (¼)
½ - Pecahan satu per dua (½)
¾ - Pecahan tiga per empat (¾)
ª - Indeks ordinal feminin (ª)
º - Indeks ordinal maskulin (º)
° - Simbol derajat (°)
µ - Simbol mikro (µ)
· - Titik tengah (·)
¸ - Cedilla (¸)
⊃ - Superskrip (ˆ)
± - Simbol plus-minus (±)
× - Simbol perkalian (×)
÷ - Simbol pembagian (÷)
» - Tanda kutip ganda penutup Prancis (»)
½ - Pecahan satu per dua (½)
» - Tanda kutip ganda penutup Prancis (»)
&circ; - Tanda sirkumfleks (^)
&tilde; - Tanda gelombang (~)
¨ - Diaeresis (¨)
&grave; - Tanda grave (`)
´ - Tanda akut (´)
¦ - Garis vertikal bercabang (¦)
¯ - Tanda makron (¯)
&oline; - Garis atas (‾)
¼ - Pecahan satu per empat (¼)
½ - Pecahan satu per dua (½)
¾ - Pecahan tiga per empat (¾)
≠ - Tanda tidak sama dengan (≠)
≤ - Tanda kurang dari atau sama dengan (≤)
≥ - Tanda lebih besar dari atau sama dengan (≥)
&there4; - Karena itu (∴)
∀ - Untuk semua (∀)
∃ - Ada (∃)
∅ - Himpunan kosong (∅)
∈ - Anggota dari (∈)
∉ - Tidak anggota dari (∉)
&ni; - Mempunyai anggota (∋)
∏ - Simbol produk (∏)
∑ - Simbol penjumlahan (∑)
√ - Akar kuadrat (√)
∫ - Integral (∫)
∂ - Parsial (∂)
∇ - Nabla (∇)
&inf; - Infimum (∞)
⊃ - Supremum (∨)
&perp; - Tegak lurus (⊥)
&ang; - Sudut (∠)
° - Simbol derajat (°)
′ - Tanda kutip tunggal (pertama) (′)
″ - Tanda kutip ganda (kedua) (″)
&cong; - Tanda kongruen (≅)
≈ - Tanda hampir sama dengan (≈)
&loz; - Lintang (◊)
&spades; - Kartu spade (♠)
&clubs; - Kartu klub (♣)
&hearts; - Kartu hati (♥)
&diams; - Kartu wajik (♦)
&ensp; - Spasi en ( )
&emsp; - Spasi em ( )
  - Spasi tipis ( )
&zwnj; - Nol lebar (‌)
&zwj; - Nol lebar bergabung (‍)
&lceil; - Tanda plafon kiri (⌈)
&rceil; - Tanda plafon kanan (⌉)
&lfloor; - Tanda lantai kiri (⌊)
&rfloor; - Tanda lantai kanan (⌋)
&lang; - Tanda kurung sudut buka (⟨)
&rang; - Tanda kurung sudut tutup (⟩)
&lozf; - Lintang hitam kecil (◆)
&target; - Target (⌖)
&alefsym; - Alef simbol (ℵ)
&image; - Gambar kompleks (ℑ)
&real; - Bilangan riil (ℜ)
&weierp; - P (℘)
™ - Merek dagang (™)
← - Panah ke kiri (←)
↑ - Panah ke atas (↑)
→ - Panah ke kanan (→)
↓ - Panah ke bawah (↓)
↔ - Panah kiri-kanan (↔)
&crarr; - Panah pindah ke bawah (↵)
⇐ - Dua panah ke kiri (⇐)
&uArr; - Dua panah ke atas (⇑)
⇒ - Dua panah ke kanan (⇒)
&dArr; - Dua panah ke bawah (⇓)
⇔ - Dua panah kiri-kanan (⇔)
∀ - Untuk semua (∀)
∂ - Parsial (∂)
∃ - Ada (∃)
∅ - Himpunan kosong (∅)
∇ - Nabla (∇)
∈ - Anggota dari (∈)
∉ - Tidak anggota dari (∉)
&ni; - Mempunyai anggota (∋)
∏ - Simbol produk (∏)
∑ - Simbol penjumlahan (∑)
− - Tanda minus (−)
&lowast; - Asterisk kecil (∗)
√ - Akar kuadrat (√)
&prop; - Proporsional dengan (∝)
∞ - Tak terbatas (∞)
&ang; - Sudut (∠)
&and; - Dan logis (∧)
&or; - Atau logis (∨)
∩ - Hasil irisan (∩)
∪ - Hasil gabungan (∪)
∫ - Integral (∫)
&there4; - Karena itu (∴)
&sim; - Tanda similar (∼)
&cong; - Tanda kongruen (≅)
≈ - Tanda hampir sama dengan (≈)
≠ - Tanda tidak sama dengan (≠)
&equiv; - Tanda identik dengan (≡)
≤ - Tanda kurang dari atau sama dengan (≤)
≥ - Tanda lebih besar dari atau sama dengan (≥)
⊂ - Subskrip (⊂)
⊃ - Superskrip (⊃)
&nsub; - Tidak subskrip (⊄)
&sube; - Subskrip sama dengan atau kurang dari (⊆)
&supe; - Superskrip sama dengan atau lebih dari (⊇)
&oplus; - Tanda tambah lingkaran (⊕)
&otimes; - Tanda kali lingkaran (⊗)
&perp; - Tegak lurus (⊥)
⋅ - Titik bintang (∙)
&lceil; - Tanda plafon kiri (⌈)
&rceil; - Tanda plafon kanan (⌉)
&lfloor; - Tanda lantai kiri (⌊)
&rfloor; - Tanda lantai kanan (⌋)
&lang; - Tanda kurung sudut buka (⟨)
&rang; - Tanda kurung sudut tutup (⟩)
&langd; - Sudut besar buka (⦑)
&rangd; - Sudut besar tutup (⦒)
&lozf; - Lintang hitam kecil (◆)
&target; - Target (⌖)
&alefsym; - Alef simbol (ℵ)
&image; - Gambar kompleks (ℑ)
&real; - Bilangan riil (ℜ)
&weierp; - P (℘)
&Trade; - Merek dagang (™)
&rarrfs; - Panah kanan dengan kait (⤠)
&larrbfs; - Panah kiri dengan kait belakang (⤟)
&rarrc; - Panah kanan melengkung atas (⤳)
&cudarrrl; - Panah kanan bawah kiri berengsel (⤸)
&lurdshar; - Panah kiri atas kanan bawah (⥊)
&ldrushar; - Panah kiri bawah kanan atas (⥋)
&dharl; - Panah lurus ke kiri bawah (⥤)
&uharl; - Panah lurus ke atas kiri (⥯)
&lrhard; - Panah lurus ke kanan bawah (⥭)
&urhard; - Panah lurus ke atas kanan (⥱)
&cularr; - Panah kiri atas (⤽)
&curarr; - Panah kanan atas (⤼)
&olcross; - Salib luar (⦻)
&oltail; - Ekor luar (⦺)
&cirscir; - Lingkaran dengan lingkaran di dalamnya (⧃)
&cirE; - Tanda isyarat lingkaran sama dengan (⧂)
&olcir; - Lingkaran besar dengan tepi (⦾)
&ogt; - Lebih besar dari dengan lebih besar dari (⧁)
&orslope; - Garis miring paralel ke atas dengan garis miring ke kanan (⩗)
&cupdot; - Gabungan dengan titik (⊍)
&capdot; - Irisan dengan titik (⩀)
&cups; - Gabungan dengan irisan (⩆)
&dotminus; - Tanda minus dengan titik (∸)
&midast; - Tanda asterisk (⁎)
&xvee; - Gabungan besar (⋁)
&xwedge; - Irisan besar (⋀)
&boxHu; - Kotak vertikal dengan garis horizontal di atas (╭)
&boxhU; - Kotak vertikal dengan garis horizontal di atas (╮)
&boxhu; - Kotak vertikal dengan garis horizontal di atas (╯)
&boxh; - Garis horizontal dalam kotak (─)
&boxH; - Kotak vertikal dengan garis horizontal di bawah (╰)
&boxV; - Kotak horizontal dengan garis vertikal di samping (┃)
&boxv; - Garis vertikal dalam kotak (│)

Karakter Khusus HTML Menggunakan Unicode

Perhatian: Perlu diperhatikan bahwa ini bukanlah daftar lengkap.

Orang lain juga bertanya (FAQ)

Berikut adalah beberapa pertanyaan yang mungkin sering diajukan pengguna saat mencari tentang dasar-dasar Tabel:

Dasar membuat tabel

Kuasai dasar membuat tabel dengan mudah dan efektif untuk meningkatkan produktivitas Anda dengan panduan dasar membuat tabel.

Cara membuat bingkai atau border tabel

Tambahkan sentuhan profesional pada tabel Anda dengan cara mudah membuat bingkai atau border pada tabel yang elegan.

Mengatur tinggi dan lebar sel tabel

Optimalkan tata letak tabel Anda dengan mempelajari cara mudah mengatur tinggi dan lebar sel tabel untuk presentasi data yang lebih menarik dan informatif.

Memberi warna background sel tabel

Berikan sentuhan visual yang menakjubkan pada tabel Anda dengan tutorial lengkap tentang cara memberi warna latar belakang sel tabel untuk meningkatkan daya tarik dan keterbacaan sekarang.

Memasukan gambar ke dalam tabel

Tambahkan dimensi visual yang mengesankan ke dalam tabel Anda dengan panduan lengkap memasukkan gambar ke dalam sel tabel agar dapat menjadi lebih menarik.

Mengatur jarak antar sel pada tabel

Perfeksionis tabel Anda dengan mudah! Pelajari trik pintar mengatur jarak antar sel pada tabel untuk tampilan yang rapi dan terorganisir dalam sekejap.

Mengatur jarak teks dengan border tabel

Desain profesional tabel untuk tampilan yang presisi dan elegan dengan mempelajari cara mengatur jarak teks dengan border tabel.

Membentangkan sel menjadi beberapa baris

Pelajari bagaimana cara membentangkan sel menjadi beberapa baris untuk presentasi data yang lebih terperinci dan menarik.

Membentangkan sel menjadi beberapa kolom

Kembangkan fleksibilitas tampilan tabel Anda dengan mempelajari cara membentangkan sel menjadi beberapa kolom untuk visualisasi data yang lebih dinamis dan informatif.

Selain beberapa pertanyaan diatas, ada beberapa pertanyaan lain yang mungkin ingin Anda tahu mengenai materi pemprograman web.

Bagaimana cara menjadikan gambar sebagai link?

Bergaya dan efektif: temukan cara mudah menjadikan gambar sebagai link untuk meningkatkan interaktivitas halaman web Anda!.

Teks Alignment (left, right, center & justify)

Persembahkan tampilan yang rapi dan profesional dengan panduan lengkap tentang teks alignment (kiri, kanan, tengah, dan rata kanan-kiri) - pelajari rahasia tata letak yang sesuai dengan gaya Anda!

Format teks (Bold, Italic, Underline)

Untuk memberi tampilan yang menarik pada konten Anda, pelajari cara membuat teks bold, italic, dan underline dengan tutorial praktis.

Tambahkan sentuhan hukum ke situs web Anda: pelajari cara membuat dan menampilkan karakter copyright untuk melindungi karya dan memberi identitas pada halaman web Anda!

Pandu Essentials

Table of Content