Belajar HTML Part 14 Cara Menampilkan Karakter dan Simbol Khusus di HTML

Masih dalam seri pembahasan tutorial html, dalam kesempatan kali ini kita akan membahas mengenai cara menampilkan karakter dan simbol khusus di html.

jika biasanya teman – teman itu membuat paragraf hanya dengan menggunakan text saja, maka bagaimana kalau ingin memasukan karakter – karakter khusus seperti  § ® Æ œ < > kan gak ada tuh di keyboard .

nah beberapa karakter dan simbol merupakan syntax dari html seperti < > , jika kita hanya mengetikkan saja di dalam skrip html, maka simbol tersebut akan terbaca sebagai syntax HTML sehingga tidak akan ditampilkan simbolnya di browser, nah dalam kesempatan ini kita akan membahas mengenai hal tersebut.

Cara menampilkan karakter dan simbol khusus di html

untuk menampilkan karakter dan simbol khusus di dalam html, kita bisa menggunakan 2 cara antara lain :

1. menggunakan penomeran angka (numeric entity)
2. menggunakan singkatan dari karakter (named entity)

kedua cara tersebut akan diawali oleh karakter ‘&’ , dan diakhiri oleh karakter ‘;’

wah tambah bingung ya, baik langsung saja kita coba.

contohnya nih jika kita ingin menuliskan karakter “<br>” di dalam html, anda tidak bisa menulisnya secara langsung, karena otomatis html akan membacanya sebagai syntax break, yang artinya html akan melakukan perintah ganti baris karena kita menuliskan syntax <br>, lalu bagaimana caranya ?

• jika anda menggunakan numeric entity anda bisa menuliskan skrip seperti ini :
  &#60; br &#62;
• jika anda menggunakan named entity anda bisa menuliskan skrip seperti ini :
  &lt; br &gt;

nah sebagai referensi saya cantumkan tabel mengenai karakter dan simbol khusus yang sering digunakan serta bagaimana skrip yang digunakan untuk menampilkannya baik dengan menggunakan numeric entity ataupun named entity :

ISO 8859-1 characters

Example	Named Entity	Numeric	Entity Description
	 	 	non-breaking space
¢	¢	¢	cent sign
£	£	£	pound sign
¤	¤	¤	currency sign
¥	¥	¥	yen sign
¦	¦	¦	broken vertical bar
§	§	§	section sign
¨	¨	¨	diaeresis
©	©	©	copyright sign
ª	ª	ª	feminine ordinal indicator
«	«	«	left-pointing double angle quotation mark
¬	¬	¬	not sign
	­	­	soft hyphen
®	®	®	registered sign
¯	¯	¯	macron
°	°	°	degree sign
±	±	±	plus-minus sign
²	²	²	superscript two
³	³	³	superscript three
´	´	´	acute accent
µ	µ	µ	micro signB5
¶	¶	¶	pilcrow sign
·	·	·	middle dot
¸	¸	¸	cedilla
¹	¹	¹	superscript one
º	º	º	masculine ordinal indicator
»	»	»	right-pointing double angle quotation mark
¼	¼	¼	vulgar fraction one- quarter
½	½	½	vulgar fraction one- half
¾	¾	¾	vulgar fraction three- quarters
¿	¿	¿	inverted question mark
À	À	À	Latin capital letter A with grave
Á	Á	Á	Latin capital letter A with acute
Â	Â	Â	Latin capital letter A with circumflex
Ã	Ã	Ã	Latin capital letter A with tilde
Ä	Ä	Ä	Latin capital letter A with diaeresis
Å	Å	Å	Latin capital letter A with ring above
Æ	Æ	Æ	Latin capital letter AE
Ç	Ç	Ç	Latin capital letter C with cedilla
È	È	È	Latin capital letter E with grave
É	É	É	Latin capital letter E with acute
Ê	Ê	Ê	Latin capital letter E with circumflex
Ë	Ë	Ë	Latin capital letter E with diaeresis
Ì	Ì	Ì	Latin capital letter I with grave
Í	Í	Í	Latin capital letter I with acute
Î	Î	Î	Latin capital letter I with circumflex
Ï	Ï	Ï	Latin capital letter I with diaeresis
ð	ð	Ð	Latin capital letter eth
Ñ	Ñ	Ñ	Latin capital letter N with tilde
Ò	Ò	Ò	Latin capital letter O with grave
Ó	Ó	Ó	Latin capital letter O with acute
Ô	Ô	Ô	Latin capital letter O with circumflex
Õ	Õ	Õ	Latin capital letter O with tilde
Ö	Ö	Ö	Latin capital letter O with diaeresis
×	×	×	multiplication sign
Ø	Ø	Ø	Latin capital letter O with stroke
Ù	Ù	Ù	Latin capital letter U with grave
Ú	Ú	Ú	Latin capital letter U with acute
Û	Û	Û	Latin capital letter U with circumflex
Ü	Ü	Ü	Latin capital letter U with diaeresis
Ý	Ý	Ý	Latin capital letter Y with acute
þ	þ	Þ	Latin capital letter thorn
ß	ß	ß	Latin small letter sharp
à	à	à	Latin small letter a with grave
á	á	á	Latin small letter a with acute
â	â	â	Latin small letter a with circumflex
ã	ã	ã	Latin small letter a with tilde
ä	ä	ä	Latin small letter a with diaeresis
å	å	å	Latin small letter a with ring above
æ	æ	æ	Latin small letter ae
ç	ç	ç	Latin small letter c with cedilla
è	è	è	Latin small letter e with grave
é	é	é	Latin small letter e with acute
ê	ê	ê	Latin small letter e with circumflex
ë	ë	ë	Latin small letter e with diaeresis
ì	ì	ì	Latin small letter i with grave
í	í	í	Latin small letter i with acute
î	î	î	Latin small letter i with circumflex
ï	ï	ï	Latin small letter i with diaeresis
ð	ð	ð	Latin small letter eth
ñ	ñ	ñ	Latin small letter n with tilde
ò	ò	ò	Latin small letter o with grave
ó	ó	ó	Latin small letter o with acute
ô	ô	ô	Latin small letter o with circumflex
õ	õ	õ	Latin small letter o with tilde
ö	ö	ö	Latin small letter o with diaeresis
÷	÷	÷	division sign
ø	ø	ø	Latin small letter o with stroke
ù	ù	ù	Latin small letter u with grave
ú	ú	ú	Latin small letter u with acute
û	û	û	Latin small letter u with circumflex
ü	ü	ü	Latin small letter u with diaeresis
ý	ý	ý	Latin small letter y with acute
þ	þ	þ	Latin small letter thorn
ÿ	ÿ	ÿ	Latin small letter y with diaeresis

---

Symbols, Mathematical Characters, Greek and Latin Letters.

Example	Named Entity	Numeric Entity	Description
ƒ	ƒ	ƒ	Latin small f with hook
Α	Α	Α	Greek capital letter alpha
Β	Β	Β	Greek capital letter beta
Γ	Γ	Γ	Greek capital letter gamma
Δ	Δ	Δ	Greek capital letter delta
Ε	Ε	Ε	Greek capital letter epsilon
Ζ	Ζ	Ζ	Greek capital letter zeta
Η	Η	Η	Greek capital letter eta
Θ	Θ	Θ	Greek capital letter theta
Ι	Ι	Ι	Greek capital letter iota
Κ	Κ	Κ	Greek capital letter kappa
Λ	Λ	Λ	Greek capital letter lambda
Μ	Μ	Μ	Greek capital letter mu
Ν	Ν	Ν	Greek capital letter nu
Ξ	Ξ	Ξ	Greek capital letter xi
Ο	Ο	Ο	Greek capital letter omicron
Π	Π	Π	Greek capital letter pi
Ρ	Ρ	Ρ	Greek capital letter rho
Note: There’s no Sigmaf, ” final sigma”, ΢ defined in iso-grk
Σ	Σ	Σ	Greek capital letter sigma
Τ	Τ	Τ	Greek capital letter tau
Υ	Υ	Υ	Greek capital letter upsilon
Φ	Φ	Φ	Greek capital letter phi
Χ	Χ	Χ	Greek capital letter chi
Ψ	Ψ	Ψ	Greek capital letter psi
Ω	Ω	Ω	Greek capital letter omega
α	α	α	Greek small letter alpha
β	β	β	Greek small letter beta
γ	γ	γ	Greek small letter gamma
δ	δ	δ	Greek small letter delta
ε	ε	ε	Greek small letter epsilon
ζ	ζ	ζ	Greek small letter zeta
η	η	η	Greek small letter eta
θ	θ	θ	Greek small letter theta
ι	ι	ι	Greek small letter iota
κ	κ	κ	Greek small letter kappa
λ	λ	λ	Greek small letter lambda
μ	μ	μ	Greek small letter mu
ν	ν	ν	Greek small letter nu
ξ	ξ	ξ	Greek small letter xi
ο	ο	ο	Greek small letter omicron
π	π	π	Greek small letter pi
ρ	ρ	ρ	Greek small letter rho
ς	ς	ς	Greek small letter final sigma
σ	σ	σ	Greek small letter sigma
τ	τ	τ	Greek small letter tau
υ	υ	υ	Greek small letter upsilon
φ	φ	φ	Greek small letter phi
χ	χ	χ	Greek small letter chi
ψ	ψ	ψ	Greek small letter psi
ω	ω	ω	Greek small letter omega
ϑ	ϑ	ϑ	Greek small letter theta symbol
ϒ	ϒ	ϒ	Greek upsilon with hook symbol
ϖ	ϖ	ϖ	pi symbol
•	•	•	bullet
…	…	…	horizontal ellipsis
′	′	′	prime
″	″	″	double prime
‾	‾	‾	overline
⁄	⁄	⁄	fraction slash
℘	℘	℘	script capital
ℑ	ℑ	ℑ	blackletter capital I
ℜ	ℜ	ℜ	blackletter capital R
™	™	™	trade mark sign
ℵ	ℵ	ℵ	alef symbol
←	←	←	leftward arrow
↑	↑	↑	upward arrow
→	→	→	rightward arrow
↓	↓	↓	downward arrow
↔	↔	↔	left right arrow
↵	↵	↵	downward arrow with corner leftward
⇐	⇐	⇐	leftward double arrow
⇑	⇑	⇑	upward double arrow
⇒	⇒	⇒	rightward double arrow
⇓	⇓	⇓	downward double arrow
⇔	⇔	⇔	left-right double arrow
∀	∀	∀	for all
∂	∂	∂	partial differential
∃	∃	∃	there exists
∅	∅	∅	empty set
∇	∇	∇	nabla
∈	∈	∈	element of
∉	∉	∉	not an element of
∋	∋	∋	contains as member
∏	∏	∏	n-ary product
∑	∑	∑	n-ary summation
−	−	−	minus sign
∗	∗	∗	asterisk operator
√	√	√	square root
∝	∝	∝	proportional to
∞	∞	∞	infinity
∠	∠	∠	angle
∧	∧	∧	logical and
∨	∨	∨	logical or
∩	∩	∩	intersection
∪	∪	∪	union
∫	∫	∫	integral
∴	∴	∴	therefore
∼	∼	∼	tilde operator
≅	≅	≅	approximately equal to
≈	≈	≈	almost equal to
≠	≠	≠	not equal to
≡	≡	≡	identical to
≤	≤	≤	less-than or equal to
≥	≥	≥	greater-than or equal to
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	⊄	not a subset of
Note: ⊅ , ⊅ “not a superset of” is not defined.
⊆	⊆	⊆	subset of or equal to
⊇	⊇	⊇	superset of or equal to
⊕	⊕	⊕	circled plus
⊗	⊗	⊗	circled times
⊥	⊥	⊥	up tack
⋅	⋅	⋅	dot operator
⌈	⌈	⌈	left ceiling
⌉	⌉	⌉	right ceiling
⌊	⌊	⌊	left floor
⌋	⌋	⌋	right floor
〈	⟨	〈	left-pointing angle bracket
〉	⟩	〉	right-pointing angle bracket
◊	◊	◊	lozenge
♠	♠	♠	black (solid) spade suit
♣	♣	♣	black (solid) club suit
♥	♥	♥	black (solid) heart suit
♦	♦	♦	black (solid) diamond suit

---

Markup-significant Characters

Example	Named Entity	Numeric Entity	Description
“	"	"	quotation mark
&	&	&	ampersand
<	&lt;	&#60;	less-than sign
>	&gt;	&#62;	greater-than sign
Œ	&OElig;	&#338;	Latin capital ligature OE
œ	&oelig;	&#339;	Latin small ligature oe
Š	&Scaron;	&#352;	Latin capital letter S with caron
š	&scaron;	&#353;	Latin small letter s with caron
Ÿ	&Yuml;	&#376;	Latin capital letter Y with diaeresis
ˆ	&circ;	&#710;	modifier letter circumflex accent
˜	&tilde;	&#732;	small tilde
	&ensp;	&#8194;	en space
	&emsp;	&#8195;	em space
	&thinsp;	&#8201;	thin space
‌	&zwnj;	&#8204;	zero width non-joiner
‍	&zwj;	&#8205;	zero width joiner
‎	&lrm;	&#8206;	left-to-right mark
‏	&rlm;	&#8207;	right-to-left mark
–	&ndash;	&#8211;	en dash
—	&mdash;	&#8212;	em dash
‘	&lsquo;	&#8216;	left single quotation mark
’	&rsquo;	&#8217;	right single quotation mark
‚	&sbquo;	&#8218;	single low-9 quotation mark
“	&ldquo;	&#8220;	left double quotation mark
”	&rdquo;	&#8221;	right double quotation mark
„	&bdquo;	&#8222;	double low-9 quotation mark
†	&dagger;	&#8224;	dagger
‡	&Dagger;	&#8225;	double dagger
‰	&permil;	&#8240;	per mille sign
‹	&lsaquo;	&#8249;	single left-pointing angle quotation
›	&rsaquo;	&#8250;	single right-pointing angle quotation
€	&euro;	&#8364;	euro sign

untuk belajar lebih lanjut anda bisa masuk ke dalam website http://www.webstandards.org/learn/reference/charts/entities/

---

baik agar lebih paham anda perhatikan skrip dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
  
<body>
<h3>Selamat datang di &#169; Warung Belajar</h3>
<p>dalam tutorial kita akan belajar mengenai bagaimana sih cara untuk menampilkan karakter dan simbol khusus di html, 
jadi simbol khusus itu contohnya seperti ini &sect; &#174; &AElig; &oelig; &#60; &gt;
nah mudah kan, anda tinggal mengetikkan menggunakan (numeric entity) atau (named entity)</p>
</body>
  
</html><!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
  
<body>
<h3>Selamat datang di &#169; Warung Belajar</h3>
<p>dalam tutorial kita akan belajar mengenai bagaimana sih cara untuk menampilkan karakter dan simbol khusus di html, 
jadi simbol khusus itu contohnya seperti ini &sect; &#174; &AElig; &oelig; &#60; &gt;
nah mudah kan, anda tinggal mengetikkan menggunakan (numeric entity) atau (named entity)</p>
</body>
  
</html>

lalu silahkan diakses melalui browser maka hasilnya adalah seperti berikut ini :

terlihat dengan dengan menggunakan numeric entity dan named entity, kita dapat menampilkan beberapa karakter dan simbol khusus di html, mudah kan.

Karakter non-breaking space

seperti yang anda ketahui bahwa html hanya membaca 1 spasi saja pada penulisan textnya, jadi kalau kita menuliskan lebih dari satu spasi, akan tetap dibaca satu spasi oleh html.

lalu bagaimana caranya jika anda ingin menampilkan lebih dari satu spasi, anda bisa menggunakan karakter non-breaking space.

karakter non breaking space itu adalah skrip yang bisa anda tulis untuk menambahkan spasi lebih dari satu, untuk skripnya adalah &nbsp;

anda perhatikan skrip dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
  
<body>
<h3>Selamat datang di &#169; Warung Belajar</h3>
<p>dalam tutorial kita akan belajar mengenai bagaimana sih cara untuk menampilkan karakter dan simbol khusus di html, 
jadi simbol khusus itu contohnya seperti ini &sect; &#174; &AElig; &oelig; &#60; &gt;
nah mudah kan, anda tinggal mengetikkan menggunakan (numeric entity) atau (named entity)</p>
</body>
  
</html>

jika kita akses di browser maka hasilnya adalah sebagai berikut :

terlihat untuk paragraf pertama yang tidak menggunakan non breaking space spasinya dihitung cuma satu, tetapi untuk paragraf kedua yang menggunakan non breaking space spasinya dihitung lebih dari satu.

jadi kalau menginginkan spasi lebih dari satu silahkan menggunakan non breaking space.

nah sekian dulu ya sahabat warung belajar, kita telah belajar mengenai cara menampilkan karakter dan simbol khusus di html, akan kita sambung lagi di sesi berikutnya tetap di tutorial html.