18. Simbol Dan Emoji

HTML Dasar: Simbol Dan Emoji

Ada banyak sekali simbol-simbol yang tidak bisa kita ketik secara manual (karena tidak ada di keyboard). Sebut saja seperti simbol sigma ∑, simbol copyright ©, mata uang euro €, akar √, atau bahkan sampai emoji seperti 😂😬😁😅😆😎.

Di dalam aplikasi teks prosesor seperti Microsoft Office, Google Docs, atau Libre Office, penulisan simbol atau emoji sangat mudah dilakukan: kita hanya perlu mencari tombol symbol kemudian mengklik simbol yang kita inginkan.

Tangkapan layar untuk menambahkan simbol pada libre office:

Menambahkan Simbol Pada HTML

Terdapat 3 cara untuk menambahkan simbol pada HTML:

  1. Cara yang pertama dan yang paling mudah adalah: melakukan copy/paste dari aplikasi lain. Kita bisa mencari sebuah simbol baik dari dokumen web, dari aplikasi teks prosesor, dan lain sebagainya, kemudian menyalinnya ke dalam dokumen HTML kita.

  2. Cara yang kedua adalah: menggunakan nama entitas. Sebagian besar simbol memiliki nama entitas. Kita bisa menggunakan paduan sintaks &<nama-entitas>; untuk menampilkan simbol tertentu.

    Misal kita ingin menampilkan simbol dengan nama entitas copy dan euro, kita bisa menuliskannya seperti berikut:

    • &euro; = €
    • &copy; = ©

  3. Cara yang ketiga adalah menggunakan kode entitas. Sintaks penulisannya sama seperti jika kita menggunakan nama entitas, kita hanya perlu mengganti namanya dengan kodenya:

    • &#169; = ©
    • &#8364; = €

Entitas

Berikut ini adalah contoh karakter entitas pada HTML:

HasilDeskripsiNama EntitasKode Entitas
non-breaking space (spasi paksa)&nbsp;&#160;
<kurang dari (less than)&lt;&#60;
>lebih dari (greater than)&gt;&#62;
&dan&amp;&#38;
"petik dua&quot;&#34;
'petik satu&apos;&#39;
¢mata uang sen&cent;&#162;
£mata uang pound&pound;&#163;
¥mata uang yen&yen;&#165;
€mata uang euro&euro;&#8364;
©copyright&copy;&#169;
®registered trademark&reg;&#174;

Contoh menggunakan simbol spasi:

<p>Aku             suka makan bakso</p>
<p>Aku &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; suka minum kopi</p>

Hasil keluaran:

Contoh yang salah untuk menampilkan simbol (<) dan (>): ❌❌❌❌

<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>

Hasil keluaran:

Contoh yang benar: ✅✅✅✅

<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>

Hasil keluaran:

Kumpulan Simbol

CharNumberEntity
∀&#8704;&forall;
∂&#8706;&part;
∃&#8707;&exist;
∅&#8709;&empty;
∇&#8711;&nabla;
∈&#8712;&isin;
∉&#8713;&notin;
∋&#8715;&ni;
∏&#8719;&prod;
∑&#8721;&sum;

Lebih lengkapnya: Referensi simbol matematika.

Emoji

Untuk menampilkan emot (emoji) kita juga bisa melakukan 3 cara:

  • langsung copy paste dari sumber lain.
  • menggunakan kode desimal tiap emoji &#<nomor>;.
  • dan menggunakan kode hexadecimal tiap emoji &#x<hexa>.

Perhatikan contoh berikut:

<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>

Hasil keluaran:

Kumpulan Emoji Wajah

EmojiNomor DesimalNomor Hexadecimal
😀1285121F600
😁1285131F601
😂1285141F602
😃1285151F603
😄1285161F604
😅1285171F605
😆1285181F606
😇1285191F607
😈1285201F608
😉1285211F609
😊1285221F60A
😋1285231F60B
😌1285241F60C
😍1285251F60D
😎1285261F60E
😏1285271F60F
😐1285281F610
😑1285291F611
😒1285301F612
😓1285311F613
😔1285321F614
😕1285331F615
😖1285341F616
😗1285351F617
😘1285361F618
😙1285371F619
😚1285381F61A
😛1285391F61B
😜1285401F61C
😝1285411F61D
😞1285421F61E
😟1285431F61F
😠1285441F620
😡1285451F621
😢1285461F622
😣1285471F623
😤1285481F624
😥1285491F625
😦1285501F626
😧1285511F627
😨1285521F628
😩1285531F629
😪1285541F62A
😫1285551F62B
😬1285561F62C
😭1285571F62D
😮1285581F62E
😯1285591F62F
😰1285601F630
😱1285611F631
😲1285621F632
😳1285631F633
😴1285641F634
😵1285651F635
😶1285661F636
😷1285671F637
🙁1285771F641
🙂1285781F642
🙃1285791F643
🙄1285801F644
🤐1292961F910
🤑1292971F911
🤒1292981F912
🤓1292991F913
🤔1293001F914
🤕1293011F915
🤠1293121F920
🤡1293131F921
🤢1293141F922
🤣1293151F923
🤤1293161F924
🤥1293171F925
🤧1293191F927
🤨1293201F928
🤩1293211F929
🤪1293221F92A
🤫1293231F92B
🤬1293241F92C
🤭1293251F92D
🤮1293261F92E
🤯1293271F92F
🧐1294881F9D0

Untuk mendapatkan list emoji lebih lengkap silakan kunjungi getemoji.com, kalian tinggal melakukan salin dan tempel dari situs tersebut.

Kesimpulan

Tidak semua simbol dan karakter tersedia di keyboard kita. Oleh karena itu HTML memberikan kita sebuah cara untuk menampilkan simbol, karakter, atau bahkan emoji menggunakan entitas &[kode];.

Selain cara manual seperti itu, kita juga bisa melakukan praktik salin / tempel untuk menambahkan simbol atau emoji yang kita inginkan.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang pengenalan form HTML.

Stay tune!