Cara Membuat Simbol-Simbol di HTML Menggunakan Entitas HTML (HTML Entities)
Hypertext Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman website. File HTML pada umumnya dapat dibaca dan diterjemahkan menjadi dalam bentuk tampilan yang lebih manusiawi dengan menggunakan web browser. HTML di tulis dalam berkas format American Standard Code for Information Interchange (ASCII) merupakan suatu standar internasional dalam kode huruf dan simbol seperti Hex dan Unicode tetapi ASCII lebih bersifat universal ASCII disimpan sebagai sandi 8 bit.
Penulisan Tag dan Element pada HTML ditulis seperti berikut ini :
<html>
<head>
<title>HTML Entities</title>
</head>
<body>
<h1>HTML Heading 1</h1>
</body>
</html>
<head>
<title>HTML Entities</title>
</head>
<body>
<h1>HTML Heading 1</h1>
</body>
</html>
Dapat anda lihat source code html diatas menggunakan tanda "<" lebih besar dan tanda ">" lebih kecil untuk mendeklarasikan suatu tag atau suatu element pada HTML. Beberapa web browser versi lama akan mengalami kebingungan dalam menerjemahkan tampilan website apabila terdapat simbol atau tanda-tanda yang mempengaruhi penulisan HTML, untuk penulisan simbol atau suatu tanda yang supaya web browser dapat membedakan yang merupakan format tag HTML dan yang hanya akan ditampilkan secara biasa dapat menggunakan HTML Entities / HTML Entity.
HTML Entities
HTML Entities / HTML Entity atau bisa disebut dengan Entitas HTML adalah karakter dicadangkan dalam bentuk teks dapat dipanggil atau dideklarasikan dengan menggunakan tanda pembuka dan (&), diakhiri dengan tanda titik koma (;) yang memiliki arti atau dapat diterjemahkan oleh web browser menjadi bentuk karakter lain.
Dengan kata lain dapat diartikan bahwa untuk membuat simbol atau untuk membuat suatu karakter tertentu dapat menggunakan Entitas HTML.
Beberapa Fungsi Simbol di HTML
- Simbol-simbol pada html biasanya digunakan untuk membuat logo copyright yang diletakkan di bagian footer.
- Dapat juga digunakan untuk menghias navigasi bar atau tampilan wab yang lainnya.
- Simbol pada HTML sangat bermanfaat apabila anda ingin menampilkan suatu perhitungan atau sebuah rumus.
- Menampilkan suatu perbandingan atau logika pada file html.
Cara Mendeklarasikan / Penulisan Entitas HTML
Terdapat 2 cara untuk untuk menuliskan atau mendeklarasikan simbol pada HTML dengan menggunakan HTML Entities yaitu :
1. Dengan mendeklarasikan Entity Name
Menggunakan text atau atau string yang biasanya merupakan nama dari simbol, diawali dengan tanda & diakhiri dengan menggunakan tanda titik koma (;). Berikut ini contoh penggunaan Entity Number untuk membuat simbol pada HTML :
Contoh Source code :
2018 © Copyright
Hasil :
2018 © Copyright
2. Dengan mendeklarasikan Entity Number
Sama seperti Entity Name untuk mendeklarasikan suatu simbol menggunakan Entity Number diawali dengan tanda & diakhiri dengan menggunakan tanda titik koma (;), code yang digunakan berupa angka. Berikut ini contoh penggunaan Entity Number untuk membuat simbol pada HTML :
Contoh Source code :
2018 © Copyright
Hasil :
2018 © Copyright
Berikut ini adalah daftar beberapa simbol yang dapat dibuat menggunakan HTML :
ASCII Characters (Printable)
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
|   | Space | ||
| ! | ! | Exclamation mark | |
| " | " | Quotation mark | |
| # | # | Number sign | |
| $ | $ | Dollar sign | |
| % | % | Percent sign | |
| & | & | & | Ampersand |
| ' | ' | Apostrophe | |
| ( | ( | Opening/Left Parenthesis | |
| ) | ) | Closing/Right Parenthesis | |
| * | * | Asterisk | |
| + | + | Plus sign | |
| , | , | Comma | |
| - | - | Hyphen | |
| . | . | Period | |
| / | / | Slash | |
| 0 | 0 | Digit 0 | |
| 1 | 1 | Digit 1 | |
| 2 | 2 | Digit 2 | |
| 3 | 3 | Digit 3 | |
| 4 | 4 | Digit 4 | |
| 5 | 5 | Digit 5 | |
| 6 | 6 | Digit 6 | |
| 7 | 7 | Digit 7 | |
| 8 | 8 | Digit 8 | |
| 9 | 9 | Digit 9 | |
| : | : | Colon | |
| ; | ; | Semicolon | |
| < | < | < | Less-than |
| = | = | Equals sign | |
| > | > | > | Greater than |
| ? | ? | Question mark | |
| @ | @ | At sign | |
| A | A | Uppercase A | |
| B | B | Uppercase B | |
| C | C | Uppercase C | |
| D | D | Uppercase D | |
| E | E | Uppercase E | |
| F | F | Uppercase F | |
| G | G | Uppercase G | |
| H | H | Uppercase H | |
| I | I | Uppercase I | |
| J | J | Uppercase J | |
| K | K | Uppercase K | |
| L | L | Uppercase L | |
| M | M | Uppercase M | |
| N | N | Uppercase N | |
| O | O | Uppercase O | |
| P | P | Uppercase P | |
| Q | Q | Uppercase Q | |
| R | R | Uppercase R | |
| S | S | Uppercase S | |
| T | T | Uppercase T | |
| U | U | Uppercase U | |
| V | V | Uppercase V | |
| W | W | Uppercase W | |
| X | X | Uppercase X | |
| Y | Y | Uppercase Y | |
| Z | Z | Uppercase Z | |
| [ | [ | Opening/Left square bracket | |
| \ | \ | Backslash | |
| ] | ] | Closing/Right square bracket | |
| ^ | ^ | Caret | |
| _ | _ | Underscore | |
| ` | ` | Grave accent | |
| a | a | Lowercase a | |
| b | b | Lowercase b | |
| c | c | Lowercase c | |
| d | d | Lowercase d | |
| e | e | Lowercase e | |
| f | f | Lowercase f | |
| g | g | Lowercase g | |
| h | h | Lowercase h | |
| i | i | Lowercase i | |
| j | j | Lowercase j | |
| k | k | Lowercase k | |
| l | l | Lowercase l | |
| m | m | Lowercase m | |
| n | n | Lowercase n | |
| o | o | Lowercase o | |
| p | p | Lowercase p | |
| q | q | Lowercase q | |
| r | r | Lowercase r | |
| s | s | Lowercase s | |
| t | t | Lowercase t | |
| u | u | Lowercase u | |
| v | v | Lowercase v | |
| w | w | Lowercase w | |
| x | x | Lowercase x | |
| y | y | Lowercase y | |
| z | z | Lowercase z | |
| { | { | Opening/Left curly brace | |
| | | | | Vertical bar | |
| } | } | Closing/Right curly brace | |
| ~ | ~ | Tilde |
ISO-8859-1 Characters
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
| À | À | À | Capital a with grave accent |
| Á | Á | Á | Capital a with acute accent |
| Â | Â | Â | Capital a with circumflex accent |
| Ã | Ã | Ã | Capital a with tilde |
| Ä | Ä | Ä | Capital a with umlaut |
| Å | Å | Å | Capital a with ring |
| Æ | Æ | Æ | Capital ae |
| Ç | Ç | Ç | Capital c with cedilla |
| È | È | È | Capital e with grave accent |
| É | É | É | Capital e with acute accent |
| Ê | Ê | Ê | Capital e with circumflex accent |
| Ë | Ë | Ë | Capital e with umlaut |
| Ì | Ì | Ì | Capital i with grave accent |
| Í | Í | Í | Capital i with accute accent |
| Î | Î | Î | Capital i with circumflex accent |
| Ï | Ï | Ï | Capital i with umlaut |
| Ð | Ð | Ð | Capital eth (Icelandic) |
| Ñ | Ñ | Ñ | Capital n with tilde |
| Ò | Ò | Ò | Capital o with grave accent |
| Ó | Ó | Ó | Capital o with accute accent |
| Ô | Ô | Ô | Capital o with circumflex accent |
| Õ | Õ | Õ | Capital o with tilde |
| Ö | Ö | Ö | Capital o with umlaut |
| Ø | Ø | Ø | Capital o with slash |
| Ù | Ù | Ù | Capital u with grave accent |
| Ú | Ú | Ú | Capital u with acute accent |
| Û | Û | Û | Capital u with circumflex accent |
| Ü | Ü | Ü | Capital u with umlaut |
| Ý | Ý | Ý | Capital y with acute accent |
| Þ | Þ | Þ | Capital thorn (Icelandic) |
| ß | ß | ß | Lowercase sharp s (German) |
| à | à | à | Lowercase a with grave accent |
| á | á | á | Lowercase a with acute accent |
| â | â | â | Lowercase a with circumflex accent |
| ã | ã | ã | Lowercase a with tilde |
| ä | ä | ä | Lowercase a with umlaut |
| å | å | å | Lowercase a with ring |
| æ | æ | æ | Lowercase ae |
| ç | ç | ç | Lowercase c with cedilla |
| è | è | è | Lowercase e with grave accent |
| é | é | é | Lowercase e with acute accent |
| ê | ê | ê | Lowercase e with circumflex accent |
| ë | ë | ë | Lowercase e with umlaut |
| ì | ì | ì | Lowercase i with grave accent |
| í | í | í | Lowercase i with acute accent |
| î | î | î | Lowercase i with circumflex accent |
| ï | ï | ï | Lowercase i with umlaut |
| ð | ð | ð | Lowercase eth (Icelandic) |
| ñ | ñ | ñ | Lowercase n with tilde |
| ò | ò | ò | Lowercase o with grave accent |
| ó | ó | ó | Lowercase o with acute accent |
| ô | ô | ô | Lowercase o with circumflex accent |
| õ | õ | õ | Lowercase o with tilde |
| ö | ö | ö | Lowercase o with umlaut |
| ø | ø | ø | Lowercase o with slash |
| ù | ù | ù | Lowercase u with grave accent |
| ú | ú | ú | Lowercase u with acute accent |
| û | û | û | Lowercase u with circumflex accent |
| ü | ü | ü | Lowercase u with umlaut |
| ý | ý | ý | Lowercase y with acute accent |
| þ | þ | þ | Lowercase thorn (Icelandic) |
| ÿ | ÿ | ÿ | Lowercase y with umlaut |
ISO-8859-1 Symbols
| Symbol | Entity Name | Entity Number | Description |
|---|---|---|---|
| |   | Non-breaking space | |
| ¡ | ¡ | ¡ | Inverted exclamation mark |
| ¢ | ¢ | ¢ | Cent |
| £ | £ | £ | Pound |
| ¤ | ¤ | ¤ | Currency |
| ¥ | ¥ | ¥ | Yen |
| ¦ | ¦ | ¦ | Broken vertical bar |
| § | § | § | Section |
| ¨ | ¨ | ¨ | Spacing diaeresis |
| © | © | © | Copyright |
| ª | ª | ª | Feminine ordinal indicator |
| « | « | « | Opening/Left angle quotation mark |
| ¬ | ¬ | ¬ | Negation |
| ­ | ­ | Soft hyphen | |
| ® | ® | ® | Registered trademark |
| ¯ | ¯ | ¯ | Spacing macron |
| ° | ° | ° | Degree |
| ± | ± | ± | Plus or minus |
| ² | ² | ² | Superscript 2 |
| ³ | ³ | ³ | Superscript 3 |
| ´ | ´ | ´ | Spacing acute |
| µ | µ | µ | Micro |
| ¶ | ¶ | ¶ | Paragraph |
| ¸ | ¸ | ¸ | Spacing cedilla |
| ¹ | ¹ | ¹ | Superscript 1 |
| º | º | º | Masculine ordinal indicator |
| » | » | » | Closing/Right angle quotation mark |
| ¼ | ¼ | ¼ | Fraction 1/4 |
| ½ | ½ | ½ | Fraction 1/2 |
| ¾ | ¾ | ¾ | Fraction 3/4 |
| ¿ | ¿ | ¿ | Inverted question mark |
| × | × | × | Multiplication |
| ÷ | ÷ | ÷ | Divide |
Math Symbols
| Symbol | Entity Name | Entity Number | Description |
|---|---|---|---|
| ∀ | ∀ | ∀ | For all |
| ∂ | ∂ | ∂ | Part |
| ∃ | ∃ | ∃ | Exist |
| ∅ | ∅ | ∅ | Empty |
| ∇ | ∇ | ∇ | Nabla |
| ∈ | ∈ | ∈ | Is in |
| ∉ | ∉ | ∉ | Not in |
| ∋ | ∋ | ∋ | Ni |
| ∏ | ∏ | ∏ | Product |
| ∑ | ∑ | ∑ | Sum |
| − | − | − | Minus |
| ∗ | ∗ | ∗ | Asterisk (Lowast) |
| √ | √ | √ | Square root |
| ∝ | ∝ | ∝ | Proportional to |
| ∞ | ∞ | ∞ | Infinity |
| ∠ | ∠ | ∠ | Angle |
| ∧ | ∧ | ∧ | And |
| ∨ | ∨ | ∨ | Or |
| ∩ | ∩ | ∩ | Cap |
| ∪ | ∪ | ∪ | Cup |
| ∫ | ∫ | ∫ | Integral |
| ∴ | ∴ | ∴ | Therefore |
| ∼ | ∼ | ∼ | Similar to |
| ≅ | ≅ | ≅ | Congurent to |
| ≈ | ≈ | ≈ | Almost equal |
| ≠ | ≠ | ≠ | Not equal |
| ≡ | ≡ | ≡ | Equivalent |
| ≤ | ≤ | ≤ | Less or equal |
| ≥ | ≥ | ≥ | Greater or equal |
| ⊂ | ⊂ | ⊂ | Subset of |
| ⊃ | ⊃ | ⊃ | Superset of |
| ⊄ | ⊄ | ⊄ | Not subset of |
| ⊆ | ⊆ | ⊆ | Subset or equal |
| ⊇ | ⊇ | ⊇ | Superset or equal |
| ⊕ | ⊕ | ⊕ | Circled plus |
| ⊗ | ⊗ | ⊗ | Circled times |
| ⊥ | ⊥ | ⊥ | Perpendicular |
| ⋅ | ⋅ | ⋅ | Dot operator |
Greek Letters
| Letter | Entity Name | Entity Number | Description |
|---|---|---|---|
| Α | Α | Α | Alpha |
| Β | Β | Β | Beta |
| Γ | Γ | Γ | Gamma |
| Δ | Δ | Δ | Delta |
| Ε | Ε | Ε | Epsilon |
| Ζ | Ζ | Ζ | Zeta |
| Η | Η | Η | Eta |
| Θ | Θ | Θ | Theta |
| Ι | Ι | Ι | Iota |
| Κ | Κ | Κ | Kappa |
| Λ | Λ | Λ | Lambda |
| Μ | Μ | Μ | Mu |
| Ν | Ν | Ν | Nu |
| Ξ | Ξ | Ξ | Xi |
| Ο | Ο | Ο | Omicron |
| Π | Π | Π | Pi |
| Ρ | Ρ | Ρ | Rho |
| Σ | Σ | Σ | Sigma |
| Τ | Τ | Τ | Tau |
| Υ | Υ | Υ | Upsilon |
| Φ | Φ | Φ | Phi |
| Χ | Χ | Χ | Chi |
| Ψ | Ψ | Ψ | Psi |
| Ω | Ω | Ω | Omega |
| α | α | α | alpha |
| β | β | β | beta |
| γ | γ | γ | gamma |
| δ | δ | δ | delta |
| ε | ε | ε | epsilon |
| ζ | ζ | ζ | zeta |
| η | η | η | eta |
| θ | θ | θ | theta |
| ι | ι | ι | iota |
| κ | κ | κ | kappa |
| λ | λ | λ | lambda |
| μ | μ | μ | mu |
| ν | ν | ν | nu |
| ξ | ξ | ξ | xi |
| ο | ο | ο | omicron |
| π | π | π | pi |
| ρ | ρ | ρ | rho |
| ς | ς | ς | sigmaf |
| σ | σ | σ | sigma |
| τ | τ | τ | tau |
| υ | υ | υ | upsilon |
| φ | φ | φ | phi |
| χ | χ | χ | chi |
| ψ | ψ | ψ | psi |
| ω | ω | ω | omega |
| ϑ | ϑ | ϑ | Theta symbol |
| ϒ | ϒ | ϒ | Upsilon symbol |
| ϖ | ϖ | ϖ | Pi symbol |
Miscellaneous HTML entities
| Symbol | Entity Name | Entity Number | Description |
|---|---|---|---|
| Π| Π| Π| Uppercase ligature OE |
| œ | œ | œ | Lowercase ligature OE |
| Š | Š | Š | Uppercase S with caron |
| š | š | š | Lowercase S with caron |
| Ÿ | Ÿ | Ÿ | Capital Y with diaeres |
| ƒ | ƒ | ƒ | Lowercase with hook |
| ˆ | ˆ | ˆ | Circumflex accent |
| ˜ | ˜ | ˜ | Tilde |
|   |   | En space | |
|   |   | Em space | |
|   |   | Thin space | |
| | ‌ | ‌ | Zero width non-joiner |
| | ‍ | ‍ | Zero width joiner |
| | ‎ | ‎ | Left-to-right mark |
| | ‏ | ‏ | Right-to-left mark |
| – | – | – | En dash |
| — | — | — | Em dash |
| ‘ | ‘ | ‘ | Left single quotation mark |
| ’ | ’ | ’ | Right single quotation mark |
| ‚ | ‚ | ‚ | Single low-9 quotation mark |
| “ | “ | “ | Left double quotation mark |
| ” | ” | ” | Right double quotation mark |
| „ | „ | „ | Double low-9 quotation mark |
| † | † | † | Dagger |
| ‡ | ‡ | ‡ | Double dagger |
| • | • | • | Bullet |
| … | … | … | Horizontal ellipsis |
| ‰ | ‰ | ‰ | Per mille |
| ′ | ′ | ′ | Minutes (Degrees) |
| ″ | ″ | ″ | Seconds (Degrees) |
| ‹ | ‹ | ‹ | Single left angle quotation |
| › | › | › | Single right angle quotation |
| ‾ | ‾ | ‾ | Overline |
| € | € | € | Euro |
| ™ | ™ | ™ | Trademark |
| ← | ← | ← | Left arrow |
| ↑ | ↑ | ↑ | Up arrow |
| → | → | → | Right arrow |
| ↓ | ↓ | ↓ | Down arrow |
| ↔ | ↔ | ↔ | Left right arrow |
| ↵ | ↵ | ↵ | Carriage return arrow |
| ⌈ | ⌈ | ⌈ | Left ceiling |
| ⌉ | ⌉ | ⌉ | Right ceiling |
| ⌊ | ⌊ | ⌊ | Left floor |
| ⌋ | ⌋ | ⌋ | Right floor |
| ◊ | ◊ | ◊ | Lozenge |
| ♠ | ♠ | ♠ | Spade |
| ♣ | ♣ | ♣ | Club |
| ♥ | ♥ | ♥ | Heart |
| ♦ | ♦ | ♦ | Diamond |
~Semoga Bermanfaat~
0 Response to "Cara Membuat Simbol-Simbol di HTML Menggunakan Entitas HTML (HTML Entities)"
Post a Comment