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

617

0

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

این پست بخشی از مسیر متخصص HTML است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

در ادامه سری آموزش های طراحی وب، به سراغ زبان برنامه نویسی HTML رفته ایم. ما در این آموزش قصد داریم، استفاده از ایموجی در HTML را به شما آموزش دهیم. تا انتها همراه ما باشید و از آموزش متنی لذت ببرید.

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

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

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

ایموجی ها از انواع کاراکترهایی هستند که در charset UTF-8 وجود دارند. می توان گفت که UTF-8 از غنی ترین منابع کاراکتری در جهان هست و شامل تمامی حروف و نماد و… می شود. در مقاله های بعدی حتما در مورد charset  ها توضیح خواهیم داد. برای استفاده از کاراکترهایی که بر روی صفحه کلید کیبورد ما وجود دارند مشکلی نداریم و به راحتی می توانیم از آنها استفاده کنیم و برای استفاده از یکسری نماد ها و یا ایموجی ها باید از کدهای هگزا دسیمال و یا کدهای موجودیت کاراکترها بهره برد.

به طور مثال کد کاراکتر A عدد 65 هست و B عدد 66  می باشد. برای ایموجی ها نیز اعداد خاصی وجود دارند که در ادامه به بررسی آنها می پردازیم.

<!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>

 

با اجرای کدهای بالا شاهد نتیجه یکسانی خواهیم بود که در پایین مشاهده می کنید.

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

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

&#128507; 🗻
&#128508; 🗼
&#128509; 🗽
&#128510; 🗾
&#128511; 🗿
&#128512; 😀
&#128513; 😁
&#128514; 😂
&#128515; 😃
&#128516; 😄
&#128517; 😅

 

برای مشاهده باقی ایموجی ها می توانید به سایت زیر مراجعه کنید.

لیست کامل ایموجی

ایموجی ها نیز کاراکتر هایی همانند بقیه کاراکترها هستند و می توانیم تمام خصوصیت هایی که به کارکترهای دیگر می دهیم را نیز به ایموجی ها هم بدهیم. در ادامه با افزایش سایز فونت می توانیم ایموجی ها را بزرگتر نمایش بدهیم.

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

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

</body>
</html>

خروجی کد بالا به شکل زیر خواهد بود.

به پایان آموزش “استفاده از ایموجی در HTML” رسیدیم. چنانچه ابهام و اشکال داشتید، می توانید در بخش نظرات مطرح نمایید.

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی

2سال در کنار تاتژن

اشتراک
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments