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:




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:


<p>🐤</p>

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:


html emoji

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:


&#x1F354


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:


document.body.innerText = "😀";

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:


document.body.innerText = String.fromCodePoint(0x1F354);

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
🙂&#128578;
🙁&#128577;
😀&#128512;
😁&#128513;
😂&#128514;
😃&#128515;
😄&#128516;
😅&#128517;
😆&#128518;
😊&#128522;
😌&#128524;
😍&#128525;
😎&#128526;
😏&#128527;
😒&#128530;
😔&#128532;
😦&#128550;
😬&#128556;
😲&#128562;
😷&#128567;
😺&#128570;
😾&#128574;
🙈&#128584;
🙉&#128585;
🙊&#128586;
&#10004;
&#9745;
&#10004;
&#10004;
&#10008;
&#8592;
&#8593;
&#8594;
&#8595;
&#8598;
&#8599;
&#8600;
&#8601;
×&#215;
📌&#128204;
📍&#128205;
👆&#128070;
👇&#128071;
👈&#128072;
👉&#128073;
👊&#128074;
👋&#128075;
👍&#128077;
👎&#128078;
👏&#128079;
👛&#128091;
👞&#128094;
👟&#128095;
👠&#128096;
👢&#128098;
👦&#128102;
👧&#128103;
👨&#128104;
👩&#128105;
👪&#128106;
👫&#128107;
👲&#128114;
👳&#128115;
👶&#128118;
💉&#128137;
💕&#128149;
💘&#128152;
💝&#128157;
💯&#128175;
💰&#128176;
💲&#128178;
💵&#128181;
💶&#128182;
💻&#128187;
💼&#128188;
📁&#128193;
📂&#128194;
📃&#128195;
📄&#128196;
📆&#128198;
📎&#128206;
📏&#128207;
📐&#128208;
📒&#128210;
📗&#128215;
📢&#128226;
📣&#128227;
📧&#128231;
📩&#128233;
📪&#128234;
📬&#128236;
📱&#128241;
🔉&#128265;
🔊&#128266;
🔋&#128267;
🔌&#128268;
🔍&#128269;
🔎&#128270;
🔐&#128272;
🔗&#128279;
🔦&#128294;
Emoji Value
🌏&#127759;
🌞&#127774;
🌟&#127775;
🌠&#127776;
🌡&#127777;
🌤&#127780;
🌥&#127781;
🌦&#127782;
🌧&#127783;
🌩&#127785;
🌲&#127794;
🌳&#127795;
🌴&#127796;
🌵&#127797;
🌻&#127803;
🍀&#127808;
🍁&#127809;
🍄&#127812;
🍉&#127817;
🍓&#127827;
🍒&#127826;
🍔&#127828;
🍵&#127861;
🍼&#127868;
🎀&#127872;
🎁&#127873;
🎨&#127912;
🎵&#127925;
🎶&#127926;
🏡&#127969;
🏦&#127974;
🏷&#127991;
🐄&#128004;
🐅&#128005;
🐇&#128007;
🐈&#128008;
🐊&#128010;
🐋&#128011;
🐌&#128012;
🐍&#128013;
🐎&#128014;
🐏&#128015;
🐐&#128016;
🐑&#128017;
🐒&#128018;
🐓&#128019;
🐔&#128020;
🐕&#128021;
🐛&#128027;
🐜&#128028;
🐝&#128029;
🐞&#128030;
🐟&#128031;
🐠&#128032;
🐢&#128034;
🐣&#128035;
🐤&#128036;
🐥&#128037;
🐦&#128038;
🐧&#128039;
🐨&#128040;
🐪&#128042;
🐫&#128043;
🐬&#128044;
🐭&#128045;
🐯&#128047;
🐰&#128048;
🐱&#128049;
🐳&#128051;
🐴&#128052;
🐵&#128053;
🐶&#128054;
🐸&#128056;
🐹&#128057;
&#9748;
&#9749;
&#9770;
&#9775;
&#9776;
&#9830;
&#9827;
&#9834;
&#9997;
&#10023;
&#10022;
&#10021;
&#10020;
🌍&#127757;
🍵&#127861;
🍶&#127862;
🍬&#127852;
🍴&#127860;
̬&#812;
̭&#813;
͔&#852;
͕&#853;
🍍&#127821;
🎻&#127931;
🏃&#127939;
🏍&#127949;
🎮&#127918;

Unicode emoji karekter deposu için bakın.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

5317

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.