-->

Iklan bawah header

Belajar HTML Part 15 - Menampilkan Karakter dan Simbol Khusus di HTML

karakter dan simbol khusus di html

Biasanya saat kita membuat sebuah tulisan hanya menggunakan text saja. Nah, bagaimana jika kita ingin memasukan karakter-karakter khusus yang tidak ada pada keyboard seperti § © ® ¥.

Sementara itu ada juga beberapa karakter dan simbol yang merupakan syntax dari html seperti < >, jika hanya mengetikkan saja seperti biasa pada skrip html, maka simbol tersebut akan terbaca sebagai syntax html sehingga tidak akan tampil sebagai simbol saat skrip dijalankan di browser.

Nah, pada kesempatan kali ini kita akan membahas mengenai cara menampilkan karakter dan simbol khusus di html.

Menampilkan Karakter dan Simbol Khusus di HTML

Ada 2 cara untuk menampilkan karakter dan simbol khusus di dalam html, yaitu :

  1. Menggunakan penomeran angka (numeric entity)

  2. Menggunakan singkatan dari karakter (named entity)

Untuk penggunaan kedua cara tersebut yaitu dengan diawali oleh karakter (&), dan diakhiri oleh karakter (;)

Untuk lebih jelasnya kalian bisa perhatikan skrip dibawah ini :



<html>
<head>
<title>Belajar HTML</title>
</head>
  
<body>
<h3>Selamat datang di © OFFAWEB</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 ¥ § © ®
nah mudah kan, anda tinggal mengetikkan menggunakan (numeric entity) atau (named entity)</p>
</body>
  
</html>

Lalu jalankan skrip tersebut pada browser maka hasilnya akan seperti ini:

menampilkan karakter dan simbol khusus

Bisa kalian lihat, dengan menggunakan numeric entity dan named entity kita bisa menampilkan simbol khusus di html.

Berikut adalah tabel mengenai karakter dan simbol khusus :

ISO 8859-1 characters

Example Named Entity Numeric Entity Description
&nbsp; &#160; non-breaking space
¢ &cent; &#162; cent sign
£ &pound; &#163; pound sign
¤ &curren; &#164; currency sign
¥ &yen; &#165; yen sign
¦ &brvbar; &#166; broken vertical bar
§ &sect; &#167; section sign
¨ &uml; &#168; diaeresis
© &copy; &#169; copyright sign
ª &ordf; &#170; feminine ordinal indicator
« &laquo; &#171; left-pointing double angle quotation mark
¬ &not; &#172; not sign
­ &shy; &#173; soft hyphen
® &reg; &#174; registered sign
¯ &macr; &#175; macron
° &deg; &#176; degree sign
± &plusmn; &#177; plus-minus sign
² &sup2; &#178; superscript two
³ &sup3; &#179; superscript three
´ &acute; &#180; acute accent
µ &micro; &#181; micro signB5
&para; &#182; pilcrow sign
· &middot; &#183; middle dot
¸ &cedil; &#184; cedilla
¹ &sup1; &#185; superscript one
º &ordm; &#186; masculine ordinal indicator
» &raquo; &#187; right-pointing double angle quotation mark
¼ &frac14; &#188; vulgar fraction one- quarter
½ &frac12; &#189; vulgar fraction one- half
¾ &frac34; &#190; vulgar fraction three- quarters
¿ &iquest; &#191; inverted question mark
À &Agrave; &#192; Latin capital letter A with grave
Á &Aacute; &#193; Latin capital letter A with acute
 &Acirc; &#194; Latin capital letter A with circumflex
à &Atilde; &#195; Latin capital letter A with tilde
Ä &Auml; &#196; Latin capital letter A with diaeresis
Å &Aring; &#197; Latin capital letter A with ring above
Æ &AElig; &#198; Latin capital letter AE
Ç &Ccedil; &#199; Latin capital letter C with cedilla
È &Egrave; &#200; Latin capital letter E with grave
É &Eacute; &#201; Latin capital letter E with acute
Ê &Ecirc; &#202; Latin capital letter E with circumflex
Ë &Euml; &#203; Latin capital letter E with diaeresis
Ì &Igrave; &#204; Latin capital letter I with grave
Í &Iacute; &#205; Latin capital letter I with acute
Î &Icirc; &#206; Latin capital letter I with circumflex
Ï &Iuml; &#207; Latin capital letter I with diaeresis
ð &eth; &#208; Latin capital letter eth
Ñ &Ntilde; &#209; Latin capital letter N with tilde
Ò &Ograve; &#210; Latin capital letter O with grave
Ó &Oacute; &#211; Latin capital letter O with acute
Ô &Ocirc; &#212; Latin capital letter O with circumflex
Õ &Otilde; &#213; Latin capital letter O with tilde
Ö &Ouml; &#214; Latin capital letter O with diaeresis
× &times; &#215; multiplication sign
Ø &Oslash; &#216; Latin capital letter O with stroke
Ù &Ugrave; &#217; Latin capital letter U with grave
Ú &Uacute; &#218; Latin capital letter U with acute
Û &Ucirc; &#219; Latin capital letter U with circumflex
Ü &Uuml; &#220; Latin capital letter U with diaeresis
Ý &Yacute; &#221; Latin capital letter Y with acute
þ &thorn; &#222; Latin capital letter thorn
ß &szlig; &#223; Latin small letter sharp
à &agrave; &#224; Latin small letter a with grave
á &aacute; &#225; Latin small letter a with acute
â &acirc; &#226; Latin small letter a with circumflex
ã &atilde; &#227; Latin small letter a with tilde
ä &auml; &#228; Latin small letter a with diaeresis
å &aring; &#229; Latin small letter a with ring above
æ &aelig; &#230; Latin small letter ae
ç &ccedil; &#231; Latin small letter c with cedilla
è &egrave; &#232; Latin small letter e with grave
é &eacute; &#233; Latin small letter e with acute
ê &ecirc; &#234; Latin small letter e with circumflex
ë &euml; &#235; Latin small letter e with diaeresis
ì &igrave; &#236; Latin small letter i with grave
í &iacute; &#237; Latin small letter i with acute
î &icirc; &#238; Latin small letter i with circumflex
ï &iuml; &#239; Latin small letter i with diaeresis
ð &eth; &#240; Latin small letter eth
ñ &ntilde; &#241; Latin small letter n with tilde
ò &ograve; &#242; Latin small letter o with grave
ó &oacute; &#243; Latin small letter o with acute
ô &ocirc; &#244; Latin small letter o with circumflex
õ &otilde; &#245; Latin small letter o with tilde
ö &ouml; &#246; Latin small letter o with diaeresis
÷ &divide; &#247; division sign
ø &oslash; &#248; Latin small letter o with stroke
ù &ugrave; &#249; Latin small letter u with grave
ú &uacute; &#250; Latin small letter u with acute
û &ucirc; &#251; Latin small letter u with circumflex
ü &uuml; &#252; Latin small letter u with diaeresis
ý &yacute; &#253; Latin small letter y with acute
þ &thorn; &#254; Latin small letter thorn
ÿ &yuml; &#255; Latin small letter y with diaeresis

Symbols, Mathematical Characters, Greek and Latin Letters.

Example Named Entity Numeric Entity Description
ƒ &fnof; &#402; Latin small f with hook
Α &Alpha; &#913; Greek capital letter alpha
Β &Beta; &#914; Greek capital letter beta
Γ &Gamma; &#915; Greek capital letter gamma
Δ &Delta; &#916; Greek capital letter delta
Ε &Epsilon; &#917; Greek capital letter epsilon
Ζ &Zeta; &#918; Greek capital letter zeta
Η &Eta; &#919; Greek capital letter eta
Θ &Theta; &#920; Greek capital letter theta
Ι &Iota; &#921; Greek capital letter iota
Κ &Kappa; &#922; Greek capital letter kappa
Λ &Lambda; &#923; Greek capital letter lambda
Μ &Mu; &#924; Greek capital letter mu
Ν &Nu; &#925; Greek capital letter nu
Ξ &Xi; &#926; Greek capital letter xi
Ο &Omicron; &#927; Greek capital letter omicron
Π &Pi; &#928; Greek capital letter pi
Ρ &Rho; &#929; Greek capital letter rho
Note: There’s no Sigmaf, ” final sigma”, &#930; defined in iso-grk
Σ &Sigma; &#931; Greek capital letter sigma
Τ &Tau; &#932; Greek capital letter tau
Υ &Upsilon; &#933; Greek capital letter upsilon
Φ &Phi; &#934; Greek capital letter phi
Χ &Chi; &#935; Greek capital letter chi
Ψ &Psi; &#936; Greek capital letter psi
Ω &Omega; &#937; Greek capital letter omega
α &alpha; &#945; Greek small letter alpha
β &beta; &#946; Greek small letter beta
γ &gamma; &#947; Greek small letter gamma
δ &delta; &#948; Greek small letter delta
ε &epsilon; &#949; Greek small letter epsilon
ζ &zeta; &#950; Greek small letter zeta
η &eta; &#951; Greek small letter eta
θ &theta; &#952; Greek small letter theta
ι &iota; &#953; Greek small letter iota
κ &kappa; &#954; Greek small letter kappa
λ &lambda; &#955; Greek small letter lambda
μ &mu; &#956; Greek small letter mu
ν &nu; &#957; Greek small letter nu
ξ &xi; &#958; Greek small letter xi
ο &omicron; &#959; Greek small letter omicron
π &pi; &#960; Greek small letter pi
ρ &rho; &#961; Greek small letter rho
ς &sigmaf; &#962; Greek small letter final sigma
σ &sigma; &#963; Greek small letter sigma
τ &tau; &#964; Greek small letter tau
υ &upsilon; &#965; Greek small letter upsilon
φ &phi; &#966; Greek small letter phi
χ &chi; &#967; Greek small letter chi
ψ &psi; &#968; Greek small letter psi
ω &omega; &#969; Greek small letter omega
ϑ &thetasym; &#977; Greek small letter theta symbol
ϒ &upsih; &#978; Greek upsilon with hook symbol
ϖ &piv; &#982; pi symbol
&bull; &#8226; bullet
&hellip; &#8230; horizontal ellipsis
&prime; &#8242; prime
&Prime; &#8243; double prime
&oline; &#8254; overline
&frasl; &#8260; fraction slash
&weierp; &#8472; script capital
&image; &#8465; blackletter capital I
&real; &#8476; blackletter capital R
&trade; &#8482; trade mark sign
&alefsym; &#8501; alef symbol
&larr; &#8592; leftward arrow
&uarr; &#8593; upward arrow
&rarr; &#8594; rightward arrow
&darr; &#8595; downward arrow
&harr; &#8596; left right arrow
&crarr; &#8629; downward arrow with corner leftward
&lArr; &#8656; leftward double arrow
&uArr; &#8657; upward double arrow
&rArr; &#8658; rightward double arrow
&dArr; &#8659; downward double arrow
&hArr; &#8660; left-right double arrow
&forall; &#8704; for all
&part; &#8706; partial differential
&exist; &#8707; there exists
&empty; &#8709; empty set
&nabla; &#8711; nabla
&isin; &#8712; element of
&notin; &#8713; not an element of
&ni; &#8715; contains as member
&prod; &#8719; n-ary product
&sum; &#8721; n-ary summation
&minus; &#8722; minus sign
&lowast; &#8727; asterisk operator
&radic; &#8730; square root
&prop; &#8733; proportional to
&infin; &#8734; infinity
&ang; &#8736; angle
&and; &#8743; logical and
&or; &#8744; logical or
&cap; &#8745; intersection
&cup; &#8746; union
&int; &#8747; integral
&there4; &#8756; therefore
&sim; &#8764; tilde operator
&cong; &#8773; approximately equal to
&asymp; &#8776; almost equal to
&ne; &#8800; not equal to
&equiv; &#8801; identical to
&le; &#8804; less-than or equal to
&ge; &#8805; greater-than or equal to
&sub; &#8834; subset of
&sup; &#8835; superset of
&nsub; &#8836; not a subset of
Note: &nsup; , &#8837; “not a superset of” is not defined.
&sube; &#8838; subset of or equal to
&supe; &#8839; superset of or equal to
&oplus; &#8853; circled plus
&otimes; &#8855; circled times
&perp; &#8869; up tack
&sdot; &#8901; dot operator
&lceil; &#8968; left ceiling
&rceil; &#8969; right ceiling
&lfloor; &#8970; left floor
&rfloor; &#8971; right floor
&lang; &#9001; left-pointing angle bracket
&rang; &#9002; right-pointing angle bracket
&loz; &#9674; lozenge
&spades; &#9824; black (solid) spade suit
&clubs; &#9827; black (solid) club suit
&hearts; &#9829; black (solid) heart suit
&diams; &#9830; black (solid) diamond suit

Markup-significant Characters

Example Named Entity Numeric Entity Description
&quot; &#34; quotation mark
& &amp; &#38; 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 lebih detailnya kalian bisa masuk ke dalam website http://wwww.webstandards.org/learn/reference/charts/entities/

Karakter non-breaking space

Yang perlu kalian ketahui bahwa html hanya membaca 1 spasi saja pada penulisan textnya, meskipun kita menuliskan spasi lebih dari satu, maka akan tetap dibaca 1 spasi oleh html.

Lalu bagaimana caranya untuk menampilkan spasi lebih dari satu, kalian bisa menggunakan karakter non-breaking space.

Dengan menggunakan karakter non-breaking space kalian bisa menampilkan lebih dari satu spasi, untuk penggunaanya dengan (&nbsp;)

Lihat contoh berikut ini :

<html>
<head>
<title>Belajar HTML</title>
</head>
  
<body>
<h3>Belajar Karakter non-breaking space</h3>
<p>Belajar HTML itu ternyata                    mudah</p>
<p>Belajar HTML itu ternyara&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mudah</p>
</body>
  
</html>

Jika dijalankan pada browser maka hasilnya akan seperti ini :

non-breaking space

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel