HTML5 EMOJIS CHAPTER 19

19th TUTORIAL ON  HTML EMOJIS


Using Emojis in HTML

Emojis are characters from the UTF-8 character set: 😄 😍 💗

 

What are Emojis?

Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) alphabet.

UTF-8 covers almost all of the characters and symbols in the world.

 

The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

<meta charset="UTF-8">

If not specified, UTF-8 is the default character set in HTML.

UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

  • A is 65
  • B is 66
  • C is 67

Example

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>I will display A B C</p>

<p>I will display &#65; &#66; &#67;</p>

</body>

</html>

OUTPUT

I will display A B C

I will display A B C

 

Example Explained

The <meta charset="UTF-8"> element defines the character set.

The characters A, B, and C, are displayed by the numbers 65, 66, and 67.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).

Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

  • 😄 is 128516
  • 😍 is 128525
  • 💗 is 128151

Example

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>

</html>

OUTPUT

My First Emoji

😀

Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.

Example

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h1>Sized Emojis</h1>

<p style="font-size:48px">

&#128512; &#128516; &#128525; &#128151;

</p>

</body>

</html>                                                                                                  OUTPUT

Sized Emojis

😀 😄 😍 💗


Emoji

Value

🗻

#128507;

🗼

#128508;

🗽

#128509;

🗾

#128510;

🗿

#128511;

😀

#128512;

😁

#128513;

😂

#128514;

😃

#128515;

😄

#128516;

😅

#128517;

 

 

 

 

 

 

 

 

 

 

 

 

 









The @charset CSS Rule

You can use the CSS @charset rule to specify the character encoding used in a style sheet:

Example

Set the encoding of the style sheet to Unicode UTF-8:

@charset "UTF-8";


THIS FILE DOWNLOAD LINK BELOW:

Comments

Post a Comment

Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more