آموزش HTML - ایموجی‌ها

استفاده از ایموجی‌ها در صفحات وب برای نشان دادن احساسات در متن‌های معمولی مجاز است. ایموجی‌ها به‌طور گسترده در شبکه‌های اجتماعی، برنامه‌های پیام‌رسان و صفحات وب استفاده می‌شوند تا کمی شوخ‌طبعی و احساسات به متن اضافه کنند. برای مثال، 😈، 😁، 😉

ایموجی‌ها چیستند؟

ایموجی‌ها نمادها یا آیکون‌های گرافیکی کوچکی هستند که نشان‌دهنده احساسات، اشیا، حیوانات، پرچم‌ها، طبیعت، مواد غذایی و بسیاری از موجودیت‌های مرتبط دیگر می‌باشند. اگرچه ایموجی‌ها شبیه نمادهای گرافیکی به نظر می‌رسند، اما در واقع کاراکترهایی از مجموعه کاراکترهای UTF-8 هستند.

ایموجی‌های UTF-8

چگونه ایموجی‌ها را به سند HTML اضافه کنیم؟

برای افزودن ایموجی‌ها به یک سند HTML، اولین قدم ما باید تعریف کدگذاری کاراکترها (Character Encoding) برای صفحه وب باشد. برای این منظور، از ویژگی charset در تگ <meta> استفاده می‌کنیم. توجه داشته باشید که تگ <meta> در داخل تگ <head> قرار می‌گیرد. مناسب‌ترین مقدار برای ویژگی charset، مقدار UTF-8 است، زیرا بیش از یک میلیون کاراکتر از جمله ایموجی‌ها را پوشش می‌دهد.

کدگذاری کاراکترها توسط تگ <meta> زیر مشخص می‌شود:

<meta charset = "UTF-8">

دو روش برای افزودن ایموجی به سند HTML وجود دارد:

• استفاده از کد دهدهی (Decimal Code)
• استفاده از کد شانزده‌شانزدهی (Hexadecimal Code)

استفاده از کد دهدهی برای افزودن ایموجی‌ها

ما می‌توانیم ایموجی‌ها را با استفاده از کدهای دهدهی مربوط به آن‌ها به سند HTML اضافه کنیم. این کدها با &# شروع می‌شوند، با ";" پایان می‌یابند و در میان آن‌ها اعداد قرار می‌گیرند.

مثال

در مثال زیر، قصد داریم چند ایموجی را با استفاده از کدهای دهدهی مربوط به آن‌ها در صفحه وب نمایش دهیم.

<!DOCTYPE html>
<html>
<head>
   <title>Emojis in HTML</title>
   <meta charset="UTF-8">
</head>
<body>
   <h2>
      Adding emojis in HTML document using 
      decimal code
   </h2>

   <div>
      <p>
         Devil Emoji: 
         <span>&#128520;</span>
      </p>
      <p>
         Face having Tears of Joy Emoji: 
         <span>&#128514;</span>
      </p>
      <p>
         Thumbs Up Emoji: 
         <span>&#128077;</span>
      </p>
   </div>

</body>
</html>

استفاده از کد شانزده‌شانزدهی برای افزودن ایموجی‌ها

همچنین می‌توانیم ایموجی‌ها را با استفاده از کدهای شانزده‌شانزدهی مربوط به آن‌ها مشخص کنیم. کدهای شانزده‌شانزدهی برای ایموجی‌ها با &#x شروع می‌شوند و با ";" پایان می‌یابند تا به مرورگر اطلاع دهند کاراکتر نشان‌داده‌شده توسط کد باید نمایش داده شود.

مثال

مثال زیر استفاده از کدهای شانزده‌شانزدهی را در نمایش ایموجی‌ها نشان می‌دهد.

<!DOCTYPE html>
<html>
<head>
   <title>Emojis in HTML</title>
   <meta charset="UTF-8">
</head>
<body>
   <h2>
      Adding emojis in HTML document 
      using Hexadecimal code
   </h2>
   <div>
      <p>
         Devil Emoji: 
         <span>&#X1F608;</span>
      </p>
      <p>
         Face having Tears of Joy Emoji: 
         <span>&#x1F602;</span>
      </p>
      <p>
         Thumbs Up Emoji: 
         <span>&#x1F44D;</span>
      </p>
   </div>
</body>
</html>

معایب استفاده از ایموجی‌های HTML

عیب استفاده از ایموجی‌ها در اسناد HTML این است که این کاراکترها به‌طور مستقیم برای استفاده ما در دسترس نیستند. کلیدهای مشخصی برای آن‌ها روی صفحه‌کلید کامپیوتر وجود ندارد. ما ملزم هستیم که کدهای مربوط به آن‌ها را حفظ کنیم یا به دنبال آن‌ها بگردیم.