Ahlan wa sahlan !

Ahlan wa sahlan...
TIKmawar adalah blog TIK untuk guru dan siswa yang ingin memahami teknologi secara logis, praktis, dan menyenangkan. Bareng Bu Mawar, kita akan belajar TIK tidak hanya klik-klik, tetapi juga memahami maksudnya .

3 Cara Menampilkan Emoji di HTML

Emoji tidak hanya dipakai untuk mengirim pesan. Dalam html kamu juga bisa menyisipkan emoji lucu. 

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Halo, calon ahli digital masa depan!
Yuk, belajar bareng Bu Mawar—karena dari satu klik, bisa lahir sejuta ide dan manfaat.


Ada beberapa cara untuk menyisipkan emoji, diantaranya :

1. Metode Langsung (Paling Mudah)

Cara termudah adalah dengan menyalin dan menempel (copy-paste) langsung Emoji ke dalam kode HTML kamu. Gunakan keyboard tekan tombol Windows + .



Contoh Kode:

<p>✨Gabung dengan komunitas Gen Z ✨</p>
<h2>Pilihan Kegiatan Mingguan 📚</h2>
<button>DAFTAR SEKARANG! ➡️</button>

Catatan Penting:

  • Kelebihan: Sangat cepat dan mudah.

  • Kekurangan: Terkadang tampilan Emoji bisa sedikit berbeda antar sistem operasi (browser).

2. Menggunakan Kode Desimal (HTML Entity)

Setiap karakter, termasuk Emoji, memiliki kode numerik unik. Kamu bisa memanggil Emoji menggunakan kode desimalnya, yang diawali dengan &# dan diakhiri dengan titik koma (;).

Contoh Kode:

EmojiDeskripsiKode Desimal HTML
Sparkles&#10024;
🚀Rocket&#128640;
Check Mark&#9989;
<p>Selamat bergabung dengan Muslimah Vibe! Anda berhasil terdaftar.
 &#9989;</p>

3. Menggunakan Kode Heksadesimal (Hex Code)

Sama seperti kode desimal, tetapi menggunakan kode heksadesimal yang diawali dengan &#x dan diakhiri dengan titik koma (;).

Contoh Kode:

EmojiDeskripsiKode Heksadesimal HTML
🕌Masjid&#x1F54C;
💻Laptop&#x1F4BB;
💡Idea&#x1F4A1;

<p>Yuk,kita tingkatkan ilmu TIK kita hari ini. &#x1F4A1; &#x1F4BB;</p>

Agar browser dan Notepad++ dapat mengenali karakter unik seperti emoji,

file HTML Anda harus disimpan menggunakan pengkodean karakter yang tepat, yaitu UTF-8.

Langkah-langkah Pengaturan:

  1. Setel Encoding Notepad++:

    • Saat Anda membuka file di Notepad++, lihat menu bar di atas.

    • Klik menu Encoding.

    • Pilih Encode in UTF-8 atau Encode in UTF-8-BOM .

    • Catatan: Jika kamu membuat file baru, pilih menu New, lalu segera ubah encoding-nya.

  2. Setel Tag HTML <meta>:

    • Pastikan di dalam tag <head> kode HTML kamu sudah memiliki baris berikut.

    • Ini memberi tahu browser bahwa file menggunakan pengkodean UTF-8:


    <meta charset="UTF-8">
    
  3. Simpan File:

    • Setelah mengubah encoding dan memasukkan emoji, simpan file kamu (tekan Ctrl + S).

    • Pastikan saat menyimpan (Save As), opsi Encoding di jendela simpan adalah UTF-8.

❗ Mengapa Ini Penting?

  • Jika kamu menggunakan encoding lama seperti ANSI atau Western European,

  • browser tidak akan tahu bagaimana membaca emoji tersebut.

  • Emoji akan muncul sebagai karakter tidak dikenal (biasanya kotak kosong atau tanda tanya: ``).

  • Dengan menggunakan UTF-8, emoji akan terlihat benar di Notepad++ dan

  • akan ditampilkan dengan baik oleh browser (seperti Chrome, Firefox, atau Edge) saat kamu

  • membuka file HTML tersebut.


Html semakin menarik bukan? yuk belajar lagi!

Tidak ada komentar:

Posting Komentar