Emojiyi HTML, CSS ve JavaScript'te Kullanma
Emojiler, belirli duyguları veya duyguları ifade etmek için kullanılan dijital simgeler veya karakterlerdir. Geçtiğimiz on yılda ince bir iletişim aracı haline geldiler ve bu nedenle HTML5, bunları web sitelerimize dahil etmek için yeni özelliklere sahip. HTML Emojileri yalnızca görseller değil, UTF-8 (Unicode) karakter kümesindeki karakterlerdir.
Bu eğitimin sonuna doğru, emojilerin ne olduğu ve onları çalıştıran yapıların altındaki bazı ayrıntılar hakkında çok daha fazla ayrıntıya gireceğim. Şimdilik aşağıdakileri bilmeniz yeterli:
- Onlar sadece karakterdir. 😊🐓🌳🍔
- Onları seçebilir, kopyalayabilir, yapıştırabilir, boyutlarını ayarlayabilir vb.
- Görüntülenmelerini sağlamak için kullanabileceğiniz daha ilkel bir sayısal gösterime sahipler.
HTML'de Emojiler
Emojiyi görüntülemenin ilk ön koşulu, HTML belgesinin karakter kümesini eklemektir. Bu, HTML kısmında <head> altında <meta> etiketinde tanımlanır.
<meta charset="UTF-8">
UTF-8, HTML'nin varsayılan karakter kümesidir ve tüm karakterleri ve sembolleri kapsar.
Emojiyi DoÄŸrudan Kullanma
Bir emojiyi görüntülemenin en kolay yolu, yalnızca kopyalayıp yapıştırmayı içerir. Sadece emojileri yerel karakter biçiminde kopyalamanıza izin veren bir uygulamaya veya web sitesine ihtiyacınız var. Bunu yapmak için harika bir yer Emojipedia'dır.
Kopyaladıktan sonra, işaretlemenizdeki amaçlanan hedefe yapıştırmanız yeterlidir:
Emojiler metin tabanlı içerik olarak değerlendirildiğinden, bunları belgenizde metnin desteklendiği hemen her yere yapıştırabilirsiniz. Şimdi, metin tabanlı kodunuzda veya kod düzenleyicinizde rastgele görünen emojileri ilk kez görüyorsanız, biraz tuhaf görünecektir:
Emoji Kod Noktasını Belirleme
Hamburger emojisi için unicode(Hexadecimal) numarası U + 1F354'tür. Bu emojiyi kod noktasını kullanarak HTML'de belirtmek için, değeri biraz değiştirmeliyiz. U + karakterleri kaldırın, & # x Karakterlerini öne ekleyin.
İşte kod noktası formundaki hamburger emojimiz:
🍔
CSS'de Emojiler
Emojileri tamamen CSS'de kullanabilirsiniz. HTML'de emojiler için gördüğümüz aynı yöntemler, yalnızca bazı küçük değişikliklerle işe yarayacaktır. Emojiyi doğrudan belirtebilirsiniz:
h1::before {
content: "🍔";
}
Kod noktasını ayarlayarak da emojiyi belirtebilirsiniz:
h1::before {
content: "\01F354";
}
Kod noktasını nasıl belirttiğiniz, HTML için gördüğümüzden biraz farklıdır. Tek yapmanız gereken, U +'yı unicode uç noktasından kaldırmak ve hemen önüne \ 0 (eğik çizgi) karakterlerini eklemektir.
JavaScript'te Emojiler
Bakacağımız son şey, JavaScript'te emojilerin nasıl kullanılacağıdır. Doğrudan kullanma yaklaşımı burada da işe yarayacaktır. Emojiyi metin olarak ele aldığınızdan emin olun:
Bunun yerine kod noktası değeri aracılığıyla bir emoji kullanmak için onları String.fromCodePoint methodun'dan geçirmemiz gerekir. Bu method, bağımsız değişken olarak bir kod noktası değeri alır:
Emojiler. Decimal (Onlu) Sayı Sistemi ve Hexadecimal (Onaltılık) sayı sisteminde olabilir. Yukarda Hexadecimal Emojilerin HTML'de nasıl gösterileceği belirtildi. Aşağıdaki Emojiler Decimal (Onlu) Sayı Sisteminde.
| Emoji | Value |
|---|---|
| 🙂 | 🙂 |
| 🙁 | 🙁 |
| 😀 | 😀 |
| 😁 | 😁 |
| 😂 | 😂 |
| 😃 | 😃 |
| 😄 | 😄 |
| 😅 | 😅 |
| 😆 | 😆 |
| 😊 | 😊 |
| 😌 | 😌 |
| 😍 | 😍 |
| 😎 | 😎 |
| 😏 | 😏 |
| 😒 | 😒 |
| 😔 | 😔 |
| 😦 | 😦 |
| 😬 | 😬 |
| 😲 | 😲 |
| 😷 | 😷 |
| 😺 | 😺 |
| 😾 | 😾 |
| 🙈 | 🙈 |
| 🙉 | 🙉 |
| 🙊 | 🙊 |
| ✔ | ✔ |
| ☑ | ☑ |
| ✔ | ✔ |
| ✔ | ✔ |
| ✘ | ✘ |
| ← | ← |
| ↑ | ↑ |
| → | → |
| ↓ | ↓ |
| ↖ | ↖ |
| ↗ | ↗ |
| ↘ | ↘ |
| ↙ | ↙ |
| × | × |
| 📌 | 📌 |
| 📍 | 📍 |
| 👆 | 👆 |
| 👇 | 👇 |
| 👈 | 👈 |
| 👉 | 👉 |
| 👊 | 👊 |
| 👋 | 👋 |
| 👍 | 👍 |
| 👎 | 👎 |
| 👏 | 👏 |
| 👛 | 👛 |
| 👞 | 👞 |
| 👟 | 👟 |
| 👠 | 👠 |
| 👢 | 👢 |
| 👦 | 👦 |
| 👧 | 👧 |
| 👨 | 👨 |
| 👩 | 👩 |
| 👪 | 👪 |
| 👫 | 👫 |
| 👲 | 👲 |
| 👳 | 👳 |
| 👶 | 👶 |
| 💉 | 💉 |
| 💕 | 💕 |
| 💘 | 💘 |
| 💝 | 💝 |
| 💯 | 💯 |
| 💰 | 💰 |
| 💲 | 💲 |
| 💵 | 💵 |
| 💶 | 💶 |
| 💻 | 💻 |
| 💼 | 💼 |
| 📁 | 📁 |
| 📂 | 📂 |
| 📃 | 📃 |
| 📄 | 📄 |
| 📆 | 📆 |
| 📎 | 📎 |
| 📏 | 📏 |
| 📐 | 📐 |
| 📒 | 📒 |
| 📗 | 📗 |
| 📢 | 📢 |
| 📣 | 📣 |
| 📧 | 📧 |
| 📩 | 📩 |
| 📪 | 📪 |
| 📬 | 📬 |
| 📱 | 📱 |
| 🔉 | 🔉 |
| 🔊 | 🔊 |
| 🔋 | 🔋 |
| 🔌 | 🔌 |
| 🔍 | 🔍 |
| 🔎 | 🔎 |
| 🔐 | 🔐 |
| 🔗 | 🔗 |
| 🔦 | 🔦 |
| Emoji | Value |
|---|---|
| 🌏 | 🌏 |
| 🌞 | 🌞 |
| 🌟 | 🌟 |
| 🌠 | 🌠 |
| 🌡 | 🌡 |
| 🌤 | 🌤 |
| 🌥 | 🌥 |
| 🌦 | 🌦 |
| 🌧 | 🌧 |
| 🌩 | 🌩 |
| 🌲 | 🌲 |
| 🌳 | 🌳 |
| 🌴 | 🌴 |
| 🌵 | 🌵 |
| 🌻 | 🌻 |
| 🍀 | 🍀 |
| 🍁 | 🍁 |
| 🍄 | 🍄 |
| 🍉 | 🍉 |
| 🍓 | 🍓 |
| 🍒 | 🍒 |
| 🍔 | 🍔 |
| 🍵 | 🍵 |
| 🍼 | 🍼 |
| 🎀 | 🎀 |
| 🎁 | 🎁 |
| 🎨 | 🎨 |
| 🎵 | 🎵 |
| 🎶 | 🎶 |
| 🏡 | 🏡 |
| 🏦 | 🏦 |
| 🏷 | 🏷 |
| 🐄 | 🐄 |
| 🐅 | 🐅 |
| 🐇 | 🐇 |
| 🐈 | 🐈 |
| 🐊 | 🐊 |
| 🐋 | 🐋 |
| 🐌 | 🐌 |
| 🐍 | 🐍 |
| 🐎 | 🐎 |
| 🐏 | 🐏 |
| 🐐 | 🐐 |
| 🐑 | 🐑 |
| 🐒 | 🐒 |
| 🐓 | 🐓 |
| 🐔 | 🐔 |
| 🐕 | 🐕 |
| 🐛 | 🐛 |
| 🐜 | 🐜 |
| 🐝 | 🐝 |
| 🐞 | 🐞 |
| 🐟 | 🐟 |
| 🐠 | 🐠 |
| 🐢 | 🐢 |
| 🐣 | 🐣 |
| 🐤 | 🐤 |
| 🐥 | 🐥 |
| 🐦 | 🐦 |
| 🐧 | 🐧 |
| 🐨 | 🐨 |
| 🐪 | 🐪 |
| 🐫 | 🐫 |
| 🐬 | 🐬 |
| 🐭 | 🐭 |
| 🐯 | 🐯 |
| 🐰 | 🐰 |
| 🐱 | 🐱 |
| 🐳 | 🐳 |
| 🐴 | 🐴 |
| 🐵 | 🐵 |
| 🐶 | 🐶 |
| 🐸 | 🐸 |
| 🐹 | 🐹 |
| ☔ | ☔ |
| ☕ | ☕ |
| ☪ | ☪ |
| ☯ | ☯ |
| ☰ | ☰ |
| ♦ | ♦ |
| ♣ | ♣ |
| ♪ | ♪ |
| ✍ | ✍ |
| ✧ | ✧ |
| ✦ | ✦ |
| ✥ | ✥ |
| ✤ | ✤ |
| 🌍 | 🌍 |
| 🍵 | 🍵 |
| 🍶 | 🍶 |
| 🍬 | 🍬 |
| 🍴 | 🍴 |
| ̬ | ̬ |
| ̭ | ̭ |
| ͔ | ͔ |
| ͕ | ͕ |
| 🍍 | 🍍 |
| 🎻 | 🎻 |
| 🏃 | 🏃 |
| 🏍 | 🏍 |
| 🎮 | 🎮 |
Unicode emoji karekter deposu için bakın.
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MÄ°THRÄ°L FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESÄ°M ORTALAMA
- HTML RESME LÄ°NK VERME
- HTML FORM OLUÅžTURMA
- CSS YATAY MENÜ YAPIMI
- HTML RESÄ°M EKLEME
- CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
- HTML DÄ°V ve SPAN NEDÄ°R?
- HTML ARKAPLANA MÃœZÄ°K EKLEME
- KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME