HTML Emoji

Semboller oturumu, yasal ve para birimi işaretleri için © ve € gibi adlandırılmış varlıklar kullanmıştı. Emoji ise farklıdır: bunlar Unicode karakterlerdir — yüzler, jestler, nesneler, bayraklar — tarayıcıların sistem yazı tipleri ve emoji paletleriyle çizdiği karakterler. Genellikle metin olarak yapıştırırsınız; yapıştırma zor olduğunda sayısal karakter referansına başvurursunuz. Bu oturum, öğrenme siteleri ve ürün arayüzü metni için pratik bir alışkanlık oluşturur.

HTML belgesinde emoji nedir

Emoji hâlâ metindir. Sunucunuzda barındırdığınız bir <img> değildir ve CSS arka planı da değildir. Belge UTF-8 olarak kodlandığında tarayıcı kod noktalarını okur ve glifleri çizer. Yani emoji, Latin harfleri gibi HTML kaynağınızla birlikte taşınır; ancak görsel tasarımı yalnızca stil sayfanızdan değil, işletim sisteminden ve yazı tiplerinden gelir.

Doğrudan yanıt

Evet — HTML’de emoji kullanabilirsiniz. En basit yol, dosyayı UTF-8 olarak kaydetmek ve karakteri bir metin düğümüne, örneğin paragraf veya başlığa yapıştırmaktır. Alternatif olarak, gülen bir yüz için 😀 gibi bir sayısal karakter referansı yazın. Günlük yazım için UTF-8 yapıştırmayı tercih edin. Editör glifi güvenle yapıştıramıyorsa sayısal biçimleri yedek olarak tutun. Gerçek anlamı her zaman kelimelerde bırakın; çünkü ekran okuyucular, kültürler ve platform tasarımları emojiye farklı davranır.

UTF-8 temeldir

Modern HTML iş akışları zaten UTF-8’i varsayar. Editörünüz .html dosyalarını UTF-8 olarak kaydetmeli ve belgeniz charset UTF-8 bildirmelidir (charset’i sonraki bir oturumda yeniden ele alacaksınız). Dosya eski bir kodlamada kaydedilirse emoji çoğu zaman mojibake’e — bozuk karakterlere benzeyen karışık dizilere — dönüşür. Emoji “rastgele bozulduğunda,” içeriği yeniden yazmadan önce kodlamayı kontrol edin.

Emojiyi sıradan metin olarak yapıştırın

UTF-8 doğruysa yapıştırma diğer herhangi bir karakter gibi çalışır. Kaynak doğrudan glifi gösterebilir; dosyayı okuyan insanlar için bu sorun değildir.

Örneği okumak

• 👋 ve ✨ metin düğümlerinin içinde yer alır — özel bir HTML etiketi gerekmez
• Dosya UTF-8 kalmalıdır; aksi halde bu karakterler kaydetmede bozulabilir
• Çevredeki kelimeler mesajı taşır; emoji yalnızca ton ekler
• Başlıklarda emoji olabilir, ancak bir vurgu ikon geçitinden daha nettir

Yedek olarak sayısal karakter referansları

Sayısal karakter referansları bir kod noktasını rakamlarla yazar; örneğin 😀 veya 😀 gibi onaltılık biçimler. Bir ekip arkadaşının editörü yapıştırılan glifleri bozduğunda veya kaynağın ASCII-only kalmasını isteyip tarayıcıda yine de emoji göstermek istediğinizde işe yarar. Bu kurs için büyük Unicode tablolarını ezberlemeniz gerekmez — kalıbı öğrenin ve gerektiğinde kodlara bakın.

Yapıştırma mı, sayısal mı?

• Okunabilir kaynak ve hızlı düzenleme için UTF-8 yapıştırmayı tercih edin
• Yapıştırma başarısız olduğunda, bir hat ASCII dışı karakterleri sildiğinde veya ASCII-güvenli diff istediğinizde sayısal referansları tercih edin
• Yorum olmadan onlarca belirsiz sayısal kodu karıştırmayın — gelecekteki siz onları hatırlamaz
• © gibi adlandırılmış varlıklar yaygın semboller içindir; çoğu emojinin kısa günlük HTML adı yoktur, bu yüzden yapıştırma veya sayısal referanslar baskındır

Platform görünümü ve hissi

Aynı emoji kod noktası bir telefonda samimi, başka bir dizüstü bilgisayarda biraz farklı görünebilir. Üreticiler emojileri zamanla yeniden çizer. Bu beklenen bir durumdur. Önce anlamı kelimelerle tasarlayın. Emojiyi, platformlar arasında yazı tipleri gibi görsel olarak kayabilen isteğe bağlı süs olarak düşünün.

Erişilebilirlik ve netlik

Ekran okuyucular emojiyi uzun adlarla duyurabilir, tutarsız biçimde atlayabilir veya cümle akışını bölebilir. Başka kültürlerden okuyucular bir jesti farklı yorumlayabilir. Kritik yönergeler — “formu gönderin,” “zorunlu alan,” “hata” — emoji olmadan da okunabilir kalmalıdır. Bir durum satırı gören kullanıcılar için onay işareti içerebilir, ancak kelimeler yine de ne olduğunu söylemeli.

Öğrenme sayfaları için tasarım alışkanlığı

• Dostça bir karşılamanın yanındaki tek emoji davetkâr gelebilir
• Her maddeyi farklı bir emojiyle değiştirmek genellikle gürültü ekler
• Parolaları, hata kodlarını veya benzersiz kimlikleri asla emoji dizileri olarak kodlamayın
• Sayfa yalnızca metin bağlamlarında da çalışmalıysa, yalnız kelimeler fikri öğretmeye yetmelidir

Emoji bir düzen sistemi değildir

Emojilerin uzun dizilerini boşluk, ayırıcı veya sahte gezinme ikonu olarak kullanmaktan kaçının. Düzen için gerçek HTML yapısını (nav, listeler, başlıklar) ve CSS’i kullanın. Emoji, tonu desteklediğinde metne aittir — tasarım bileşenlerinin yerine geçmez.

Editörünüzde pratik

1. Dosyanın UTF-8 olarak kaydedildiğini doğrulayın.
2. Bir yapıştırılmış emoji ve net kelimelerle kısa bir karşılama paragrafı ekleyin.
3. Yalnızca sayısal referanslarla iki farklı emoji kullanan ikinci bir paragraf ekleyin.
4. Emoji kaldırılsa bile cümlenin doğru kaldığı bir durum satırı yazın.
5. Mümkünse sayfayı iki tarayıcıda veya cihazda açın ve görsel farkları not edin — bu çeşitlilik normaldir.

Kolay hatalar

• HTML’yi eski bir kodlamada kaydedip emojilerin mojibake’e dönüşmesi
• Uyarılar, başarı veya gezinme etiketleri için yalnızca emojiye güvenmek
• Her başlığı birden fazla emojiyle doldurup taramayı zorlaştırmak
• Emojiyi sunucuya yüklemeniz gereken barındırılmış görseller sanmak
• Her kültürün bir jesti sizin gibi okuduğunu varsaymak

Özet

• Emoji, barındırdığınız görseller değil, Unicode metin karakterleridir
• UTF-8 yapıştırma günlük yoldur; sayısal referanslar sağlam bir yedektir
• Görünüm işletim sistemine ve yazı tipine göre değişebilir
• Anlamı gerçek kelimelerde tutun; ton için emojiyi ölçülü kullanın
• Bozuk emojinin yaygın nedeni “kırık HTML etiketleri” değil, kodlama hatalarıdır