Belajar HTML Lengkap Part 16 : Cara Menampilkan dan Memasukkan Karakter Khusus ke dalam HTML

Cara Memasukkan Karakter Khusus ke dalam HTML

Oke pada kesempatan kali ini kita akan membahas tentang Cara Menampilkan dan Memasukkan Karakter Khusus atau yang di sebut dengan istilah men- 'escape' ke dalam HTML. Yang di maksud dengan men- 'escape' disini ialah menulis suatu karakter atau pun menulis simbol khusus yang tidak ada dalam keyboard ke dalam kode HTML dan kita ingin menampilkan karakter atau simbol tersebut pada halaman website, istilah men- 'escape' merupakan sebuah penulisan karakter atau simbol dengan cara lain yang merujuk pada karakter atau simbol yang di maksud seperti dengan cara penulisan penomoran angka (numeric entity), dan menggunakan singkatan untuk karakter (named entity) , kedua cara penulisan tersebut di awali dengan tanda "&" dan di akhiri dengan ";".

Oke.. disini saya ambil contoh kita ingin membagikan kode program seperti misal kode HTML ke dalam postingan website dalam kode tersebut pasti terdapat tanda buka kurang lancip "<" dan tanda tutup kurung lancip ">" jika teman-teman menuliskan nya secara langsung pada kode HTML kedua karakter tersebut merupakan sebuah elemen internal pada HTML sehingga ketika kita menuliskan karakter tersebut web browser akan menterjemahkan sebagai sebuah perintah atau syntax HTML, kemudian contoh berikutnya kita ingin menampilkan symbol copyright atau Hak Cipta "©" pada halaman website, simbol tersebut tidak ada dalam keyboard oleh sebab itu kita perlu penulisaan sebuah karakter atau simbol dengan cara escape.

Tabel Karakter Khusus dalam HTML

Ada banyak sekali karakter atau simbol khusus yang ada pada HTML tidak hanya "<" dan ">" ini saja atau ini "©". Berikut adalah tabel beberapa karakter atau simbol khusus yang tersedia pada HTML, di bawah ini :

Symbol	Named Entity	Numeric Entity
Space	 	 
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	¥
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬
Soft hyphen	­	­
®	®	®
¯	¯	¯
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	Æ	Æ
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
ð	ð	Ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
þ	þ	Þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ
ƒ	ƒ	ƒ
Α	Α	Α
Β	Β	Β
Γ	Γ	Γ
Δ	Δ	Δ
Ε	Ε	Ε
Ζ	Ζ	Ζ
Η	Η	Η
Θ	Θ	Θ
Ι	Ι	Ι
Κ	Κ	Κ
Λ	Λ	Λ
Μ	Μ	Μ
Ν	Ν	Ν
Ξ	Ξ	Ξ
Ο	Ο	Ο
Π	Π	Π
Ρ	Ρ	Ρ
Σ	Σ	Σ
Τ	Τ	Τ
Υ	Υ	Υ
Φ	Φ	Φ
Χ	Χ	Χ
Ψ	Ψ	Ψ
Ω	Ω	Ω
α	α	α
β	β	β
γ	γ	γ
δ	δ	δ
ε	ε	ε
ζ	ζ	ζ
η	η	η
θ	θ	θ
ι	ι	ι
κ	κ	κ
λ	λ	λ
μ	μ	μ
ν	ν	ν
ξ	ξ	ξ
ο	ο	ο
π	π	π
ρ	ρ	ρ
ς	ς	ς
σ	σ	σ
τ	τ	τ
υ	υ	υ
φ	φ	φ
χ	χ	χ
ψ	ψ	ψ
ω	ω	ω
ϑ	ϑ	ϑ
ϒ	ϒ	ϒ
ϖ	ϖ	ϖ
•	•	•
…	…	…
′	′	′
″	″	″
‾	‾	‾
⁄	⁄	⁄
℘	℘	℘
ℑ	ℑ	ℑ
ℜ	ℜ	ℜ
™	™	™
ℵ	ℵ	ℵ
←	←	←
↑	↑	↑
→	→	→
↓	↓	↓
↔	↔	↔
↵	↵	↵
⇐	⇐	⇐
⇑	⇑	⇑
⇒	⇒	⇒
⇓	⇓	⇓
⇔	⇔	⇔
∀	∀	∀
∂	∂	∂
∃	∃	∃
∅	∅	∅
∇	∇	∇
∈	∈	∈
∉	∉	∉
∋	∋	∋
∏	∏	∏
∑	∑	∑
−	−	−
∗	∗	∗
√	√	√
∝	∝	∝
∞	∞	∞
∠	∠	∠
∧	∧	∧
∨	∨	∨
∩	∩	∩
∪	∪	∪
∫	∫	∫
∴	∴	∴
∼	∼	∼
≅	≅	≅
≈	≈	≈
≠	≠	≠
≡	≡	≡
≤	≤	≤
≥	≥	≥
⊂	⊂	⊂
⊃	⊃	⊃
⊄	⊄	⊄
⊆	⊆	⊆
⊇	⊇	⊇
⊕	⊕	⊕
⊗	⊗	⊗
⊥	⊥	⊥
⋅	⋅	⋅
⌈	⌈	⌈
⌉	⌉	⌉
⌊	⌊	⌊
⌋	⌋	⌋
⟨	⟨	〈
⟩	⟩	〉
◊	◊	◊
♠	♠	♠
♣	♣	♣
♥	♥	♥
♦	♦	♦
"	"	"
&	&	&
<	&lt;	&#60;
>	&gt;	&#62;
Œ	&OElig;	&#338;
œ	&oelig;	&#339;
Š	&Scaron;	&#352;
š	&scaron;	&#353;
Ÿ	&Yuml;	&#376;
ˆ	&circ;	&#710;
˜	&tilde;	&#732;
en space	&ensp;	&#8194;
em space	&emsp;	&#8195;
thin space	&thinsp;	&#8201;
zero width non-joiner	&zwnj;	&#8204;
zero width joiner	&zwj;	&#8205;
left-to-right mark	&lrm;	&#8206;
right-to-left mark	&rlm;	&#8207;
–	&ndash;	&#8211;
—	&mdash;	&#8212;
‘	&lsquo;	&#8216;
’	&rsquo;	&#8217;
‚	&sbquo;	&#8218;
“	&ldquo;	&#8220;
”	&rdquo;	&#8221;
„	&bdquo;	&#8222;
†	&dagger;	&#8224;
‡	&Dagger;	&#8225;
‰	&permil;	&#8240;
‹	&lsaquo;	&#8249;
›	&rsaquo;	&#8250;
€	&euro;	&#8364;

Untuk selengkapnya : https://www.w3schools.com/html/html_symbols.asp bisa teman-teman lihat disitu yang merupakan sumber daya lengkap untuk mengenal karakter dan simbol yang ada pada HTML.

Oke tabel karakter atau simbol khusus sudah ada di atas sekarang tinggal bagaimana cara menggunakan nya, langsung saja coba tuliskan contoh yang pertama kode HTML berikut, di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Menambahkan Karakter atau simbol khusus di HTML</title>
</head>
<body>
 <h3>Saya sedang belajar HTML di &copy; Ngodingtah.blogspot.com &#174; &trade;</h3>
 <p>Dalam episode ini, kita akan belajar cara menampilkan
 karakter atau simbol khusus seperti &lt;, &#062;, &hellip;</p>
</body>
</html>

Hasilnya seperti beriku ini :

Itulah salah satu cara menampilkan dan memasuskan karakter khusus pada HTML dengan cara men- 'escape' yang tujuan nya adalah penulisan dengan cara lain untuk menampilkan karakter atau simbol yang di maksud.

Kemudian contoh yang selanjutnya misalkan kita ingin membagikan kode program misalkan kode HTML pada postingan website, lihat contoh berikut di bawah ini :

Ini contoh a di bawah ini :

<pre><code><p><i>Elemen p ini akan di terjemahkan sebagai perintah HTML</i></p></code></pre>

Hasilnya sebagai berikut :

Perhatikan perbedaan nya dengan contoh b di bawah ini :

<pre><code>&lt;p&gt;&lt;b&gt;Elemen p ini akan di tampilkan apa adanya&lt;/b&gt;&lt;/p&gt;</code></pre>

Hasilnya :

Dari contoh a dan juga contoh b pada kode HTML di atas pasti teman-teman dapat menyimpulkan hasilnya mengapa bisa demikian ? jawaban nya adalah karena pada kode HTML di atas tanda "<" dan ">" yang merupakan elemen internal di HTML pada contoh a tidak di escape maka akan di terjemahkan sebagai perintah HTML bukan untuk di tampilkan apa adanya, sedangkan pada contoh b telah di lakukan escape maka kode HTML di tampilkan apa ada nya.

Demikian untuk pertemuan hari ini sobat, sampai jumpa pada waktu berikutnya dan terimakasih..

Incoming search terms:

→ kode html untuk karakter dan simbol khusus
→ cara menuliskan kode html untuk karakter khusus
→ karakter spesial html entity
→ alfanumerik dan karakter khusus
→ tag html untuk memunculkan karakter khusus
→ kumpulan simbol html
→ kumpulan karakter khusus di html
→ belajar simbol html
→ menyisipkan simbol di html
→ membuat simbol di html
→ menulis kode program pada postingan
→ kode simbol html lengkap
→ contoh skrip simbol html
→ rio ananda putra

Ngoding Tah ?

Manusia Kalem Yang Senang Ber-exsperimen.

Share this post