آشنایی با نماد ها و اموجی ها در HTML

چگونه با استفاده از اموجی ها صفحات زیباتری را خلق کنیم؟

آشنایی با نماد ها و اموجی ها در HTML
آشنایی با نماد ها و اموجی ها در HTML

چگونه می‌توانیم نماد های مختلف را در اسناد HTML نمایش دهیم؟ چگونه اموجی های مختلف را در صفحات HTML نمایش دهیم؟ در این مقاله می‌خواهیم نماد ها و اموجی های موجود در HTML را مورد بررسی قرار دهیم.

نماد های موجودیت در HTML

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

<p>I will display &euro;</p>
<p>I will display €</p>
<p>I will display €</p>

بعضی از نماد های ریاضی پشتیبانی شده در HTML در جدول زیر آمده است:

کاراکتر عدد موجودیت توضیح
&forall; برای همه
&part; اختلاف جزئی
&exist; وجود دارد
&empty; مجموعه های خالی
&nabla; نابالا
&isin; عنصر
&notin; عنصری نیست
&ni; یک عضو دارد
&prod; محصول ان ری
&sum; سرشماری ان ری

رفرنس های نماد ها (منابع)

شما می‌توانید لیست کاملی از نماد های موجود در HTML را در ۳ صفحه زیر مشاهده کنید :

[box type=”note” align=”aligncenter” class=”” width=””]مرورگر های قدیمی تمامی نماد ها و اموجی های موجود در صفحات HTML را شناسایی نمی‌کنند.[/box]

استفاده از اموجی ها در HTML

? ? ?

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

اموجی ها یک سری از کاراکتر های موجود در Charset معروف و پر کاربرد UTF-8 هستند. (در رابطه با Charset ها قبلا در مقاله آشنایی با Charset ها صحبت کردیم، اگر نخوندین بخونیدش ضرری نداره)

[box type=”info” align=”aligncenter” class=”” width=””]به نقل از W3Schools دوست داشتنی، UTF-8 تقریبا تمامی کاراکتر ها ، نماد ها و اموجی های جهان را پوشش می‌دهد.[/box]

کاراکتر های اموجی

همانطور که گفتیم اموجی ها هم بخشی از کاراکتر های موجود در Unicode (UTF-8) هستند، مثلا اون ۳ تا اموجی بامزه ای که اول بخش اموجی ها قرار دادم رو یادتونه ؟ البته اگر یادتون نیست الان که شماره هاشون در UTF-8 را معرفی می‌کنم، یادتون میاد.

  • کد کاراکتر ? برابر 128516 هستش.
  • کد کاراکتر ? برابر 128525 هستش.
  • کد کاراکتر ? برابر 128151 هستش.
  • مهم : کد کاراکتر ? برابر 127820 هستش. :))

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

مثال

در مثال زیر قصد داریم تا اموجی ? را در صفحه HTML نمایش دهیم.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>اولین اموجی در میزفا</h1>

<p>&#128525;</p>

</body>
</html>
اولین اموجی در میزفا
اولین اموجی در میزفا

همانطور که مشاهده می‌کنید در مثال بالا با استفاده از &#Emojicode; توانستیم، اموجی ? را نمایش دهیم.

حال در مثال زیر می‌خواهیم با تغییر اندازه (Size) در اموجی‌ها کار کنیم.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>کار با سایز ها در اموجی میزفا</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151; &#127820;
</p>

</body>
</html>
کار با سایز های اموجی در HTML
کار با سایز های اموجی در HTML

همانطور که در گفتیم در این مثال با استفاده از font-size ، اندازه اموجی‌ها را بزرگ کردیم و مشاهده کردید که برای تغییر اندازه اموجی ها هم دقیقا مانند متن، می‌توانید آن‌ها را بزرگ و کوچک کنید.

تعدادی از اموجی های مختلف

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

اموجی مقدار
? &#128507;
? &#128508;
? &#128509;
? &#128510;
? &#128511;
? &#128512;
? &#128513;
? &#128514;
? &#128515;
? &#128516;
? &#128517;

رفرنس های emoji (منابع)

در زیر رفرنس ها یا منابعی از

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

یک صفحه HTML باز کنید و کد &#129409; را درون آن قرار دهید. چه چیزی مشاهده می‌کنید؟ کد کاراکتر قلب را نیز برایمان ارسال کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

این مقاله هم به پایان رسید، امیدوارم ازش استفاده کافی را برده باشید. اگر سوالی، پیشنهاد و انتقادی داشتید مثل همیشه منتظرشون هستم و در اولین فرصت بهشون پاسخ میدم. تا مقاله بعد فعلا…

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

14 نظر

14 پاسخ

    1. سلام فرهان، ممنون بابت پاسخت. ممنون برای اینکه اینکه دقیق کار ها رو انجام میدی.

    1. سلام محمد عزیز. تو هم همیشه در قلب ما هستی. بابت این تمرین زیبا برات Double شارژ انجام میدیم که بخشی از این محبتت رو جبران کنیم.

      1. سلام خسته نباشید یک سوالی از خدمتتون داشتم من می خوام از ایموجی ها در عنوان پست هام استفاده کنم همون تکنیک قدیمی که بیشتر سایت ها انجام می دادن حالا این کارو باید از طریق ایموجی های htmlانجام بدم یا نه برم سایت هایی که ایموجی دارند کپی کنم بعد برم در عنوان مقاله بزارم این کار باعث کندی نمیشه. من برای افزایش سرعت اسکریپت ایموجی خودووردپرس رو حذف کردم و از اون هم نمیتونم استفاده کنم .ممنون میشم اگر راهنمایی کنید

        1. سلام همون اموجی های کیبورد رو هم استفاده کنی میاد. درمورد بهینه بودنش توی موتور جست‌وجو بعید میدونم مشکلی باشه. ولی بعضی از دیوایس ها ممکنه شناساییش نکنن که این بده.

  1. ببخشید چطور میشه کاری کنیم تو بخش کامنت گذاری هم ایموجی هایی که کاربرا مینویسن اونطور نمایش داده بشن مثل همینجا????????

    1. همیشه ایموجی نمایش داده میشه، نمایش ایموجی بستگی به مرورگر داره تا طراحی سایت ?

  2. سلام .وقتتون بخیر . ممنون از سایت بسیار عالی و مطالب آموزنده و مفیدی که قرار دادین.
    چطوری میشه که یک ایموجی رو رنگ کنیم؟مثلا چشمهاش رنگ قرمز و داخل ایموجی زرد رنگ باشه(مثلا برای ایموجی که چشمهاش قلبی هست). با colorرنگ اطراف ایموجی رو تغییر دارم اما رنگ داخل یا تیکه های داخل ایموجی رو چطور میشه تغییر داد؟؟

    1. سلام ژیار.
      باید طراحی اختصاصی انجام بشه و با css نمیشه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=