Ce Sunt Emoji-urile?
Emoji-urile arată ca niște imagini, dar nu sunt. Sunt litere (caractere) din setul de caractere UTF-8 (Unicode), care acoperă aproape toate caracterele și simbolurile din lume. Fiecare emoji are și un număr de entitate, deci de exemplu emoji-ul cu munte este 🗻, iar fața zâmbitoare este 😀.
Exemple de Emoji HTML
HTML suportă emoji-uri din multe categorii, incluzând smiley-uri, mâini, oameni, birou, locuri, transport, animale, mâncare, plante, fructe, sporturi, pământ și cer, vreme, îmbrăcăminte, audio și video, sărbătoare, divertisment și simboluri.
Atributul HTML charset
Pentru a afișa corect o pagină, browserul trebuie să știe setul de caractere folosit. Îl setezi în tag-ul <meta>. Dacă nu specifici unul, UTF-8 este implicit în HTML.
Meta tag pentru charset
Setarea setului de caractere la UTF-8.
<meta charset="UTF-8">
Caractere UTF-8
Multe caractere UTF-8 nu pot fi scrise de la tastatură, dar pot fi întotdeauna afișate folosind numere de entitate. De exemplu, A este 65, B este 66, iar C este 67. Începe un număr de entitate cu &# și termină-l cu punct și virgulă, astfel încât browserul să știe că afișezi un caracter.
Exemplu
Literele A, B și C afișate direct și prin numerele lor de entitate.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Voi afișa A B C</p>
<p>Voi afișa A B C</p>
</body>
</html>
Caractere Emoji
Emoji-urile sunt de asemenea caractere din setul UTF-8, deci fiecare are un număr; de exemplu, fața zâmbitoare 😄 este 128516. Deoarece sunt caractere, emoji-urile pot fi copiate, afișate și dimensionate la fel ca orice alt text.
Un singur emoji
Un emoji afișat prin numărul său de entitate.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Primul Meu Emoji</h1>
<p>😀</p>
</body>
</html>
Emoji-uri dimensionate
Emoji-uri mărite cu o dimensiune de font CSS.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Emoji-uri Dimensionate</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>