انواع اموجی‌ها و نمادهای خاص در html

اموجی‌ها که امروزه در شبکه‌های اجتماعی و مسنجرها پر کاربرد هستند، به همراه نمادهای خاص در صفحات html نیز به کار می‌روند که در این مقاله بررسی خواهد شد

قبلا در خصوص برخی تگ‌های html نکاتی را خدمت دوستان و همراهان نیوسان‌وب عرض کردیم. گرچه هنوز این مطالب به ایستگاه پایانی خود نرسیده و ادامه خواهد داشت، اما برای ایجاد تنوع می‌خواهیم در خصوص کد ایموجی در html و کاراکترهای خاص نکات لازم ارائه کنیم و در نهایت با استفاده از مطالبی که یاد خواهیم گرفت، یک مثال پایایانی ساده را برای تمرین بیشتر انجام می‌دهیم.

اموجی چیست؟

اموجی‌ها یا شکلک‌ها که به ویژه امروزه به دفعات در شبکه‌های اجتماعی و مسنجرهای مختلف مانند تلگرام، واتساپ و … استفاده می‌شوند، در واقع شاید آنها را با صورتک‌هایی به شکل گرافیگی می‌شناسید که نشانگر احساسات و عواطف شخصی هستند که به بهترین حالت و به شکلی ساده می‌خواهد آن را به طرف مقابل خود نشان دهد. اموجی‌ها ممکن است حالت خنده، ناراحتی، عصبانیت و سایر احساسات لازم را به نمایش بگذارید. این هم لازم است گفته شود که اموجی‌ها تنها به علایم چهره انسان محدود نمی‌شوند. شاید برای شما جالب باشد که بخواهید بدانید که در یکی از بررسی‌های پژوهشی که در سال 2017 گزارش شده است، از حدود 427 میلیون پیام از 4 میلیون تلفن همراه هوشمند که از 212 کشور انتخاب شده بودند، درصد استفاده از اموجی‌های مختلف، به صورت کلی به شکل زیر بود:

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

درصد استفاده از اموجی در پیام پس اهمیت استفاده از اموجی برای شما تا حدودی مشخص شد. شاید برای شما پیش آمده باشد که بخواهید از این شکلک‌ها در صفحات html خودتان نیز استفاده کنید اما به خوبی ندانید که باید چکار کنید. برای راهنمایی باید گفت که اگر قصد دارید از اموجی‌ها در سایت یا صفحات HTML خودتان استفاده کنید، باید از یک سری عدد و کاراکتر بهره بگیرید که با علایم & و # شروع شده و بعد از آنها چندین رقم آورده می‌شود. در این مقاله ما برخی از کدهای آنها را ذکر خواهیم کرد و در نخایت یک سایت را معرفی خواهیم کرد تا بتوانید در صورت لزوم خودتان از آن، کدهای لازم را استخراج کنید.

1- اموجی‌های لبخند

😀 | 😁 | 😂 | 😃 | 😄 و …

2- اموجی‌های نشان دهنده عشق

😍 | 😻 | 💕 و …

3- علامت لا اله الا الله

☫

4- اموجی‌های شطرنج (شاه، وزیر، اسب، رخ، سرباز و … در رنگ‌های مشکی یا سفید)

♚ | ♕ | ♞ | ♜ | ♟ و …

5-اموجی علامت مرگ

☠

در بالا لیست برخی کدهای اموجی را گفتیم، اما اموجی‌ها تنها به اینها ختم نمی‌شوند و برای اموجی‌های بیشتر می‌توانید به سایت amp-what.com یک سر بزنید و انواع آنها را بیابید.

لیستی از این اموجی ها در سایت معروف w3schools هم جهت استفاده به نمایش در آمده است.

نمادها یا کاراکترهای خاص

برای استفاده از نمادها یا کاراکترهای خاص هم کدهایی تعریف شده اند که ما ابتدا برخی از آنها را بر خواهیم شمرد و در پایان یک لیست کلی از آنها را در وبسایت نیوسان‌وب ارائه خواهیم داد.

1- نماد کپی‌رایت

2- نماد میکرون

3- یک چهارم

اگر بخواهید لیست کلی اینها را داشته باشید، کدهای آنها در html در تصویر زیر مشخص شده است.

کدهای کاراکترهای خاص در html

استفاده از اموجی و کاراکترهای خاص در مثال

در این بخش یک مثال از مطالب گفته شده (اموجی‌ها و کاراکترهای خاص) می‌خواهیم ارائه کنیم که در آن هم پرچم ایران را با توجه به نکاتی که تاکنون یاد گرفته‌ایم، بسازیم و هم اینکه از چند کاراکتر خاص و اموجی استفاده کنیم تا به شکل بهتری مطالب گفته شده را بفهمیم.

برای انجام این مثال، ابتدا یک فولدر جدید در ادامه مطالب آموزشی قبلی ایجاد می کنیم و آن را 011 می‌نامیم؛ یک فایل به نام Index.html ایجاد می‌کنیم و با استفاده از visual studio code، کدهای زیر را پیاده‌سازی می‌کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsunwe.com - Emoji and Special Characters</title>
</head>
<body>
    <h1>Examples</h1>
    <h2>Here is the Iranian Flag</h2>
    <div style="text-align:center; padding:2px;">
        <div style="border: 1px solid gray; width:50%; height: 100px; display: inline-block; background-color: green;">
             
        </div>
        
        <div style="border: 1px solid gray; width:50%; height: 100px; display: inline-block; background-color: white;">
           <span style="font-size:5rem;">&#9771;</span>
        </div>

        <div style="border: 1px solid gray; width:50%; height: 100px; display: inline-block; background-color: red;">

        </div>
    </div>
    <br>
    <hr>
    <h2>Using emojies: </h2>
      <p style="font-size:18px;">
        Happiness: &#128512;  | &#128513; | &#128514; | &#128515; | &#128516;
      </p>
      <p style="font-size:30px;">
          Chess: &#9818; | &#9813; | &#9822; | &#9820; | &#9823;
      </p>
      <br>
      <hr>
      <h2>Using Special Characters: </h2>
      <p style="font-size:18px;">
        Spacial Characters: &#169;  | &#181; | &#188;
      </p>
     
</body>
</html>

که نتیجه آن به شکل زیر خواهد بود:

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

توجه شود که اگر با برخی از ویژگی‌هایی که برای style مقداردهی کردیم، آشنایی کافی ندارید زیاد نگران نباشید؛ چرا که در بخش‌های بعدی این مساله بیشتر توضیح داده خواهد شد؛ اما بد نیست برای درک بیشتر آنچه گفته شد، حتما مقالات آشنایی با صفت style و تفاوت عناصر block و inline در hmtl را مطالعه کنید. البته چنانچه سوالی در خصوص موارد گفته شده وجود داشت هم در بخش کامنت‌ها می‌توانید آن را مطرح کنید تا پاسخ داده شود یا با توضیحات بیشتری در متن تکمیل گردد.

جمع‌بندی

در این مقاله در خصوص اموجی‌ها و کاراکترهای خاص، اهمیت به کار گیری آنها و همچنین نحوه استفاده از آنها در صفحات html توضیحاتی را ارائه کردیم و در پایان با یک مثال عملی آنها را به پایان رساندیم که امیدواریم مورد استفاده دوستان و همراهان نیوسان‌وب قرار گیرد. همچنان با ما همراه باشید، به زودی با نکات تکمیلی در خدمت شما دوستان خواهیم بود.

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.