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

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

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

منظور از موجودیت چیست؟ چه کاراکتر هایی در  HTML باید با کاراکتر های موجودیت جا به جا شوند؟

در این مقاله با موجودیت ها در  HTML  آشنا می‌شویم.

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

برای نمایش کاراکتر های رزرو شده در  HTML  باید آنها با کاراکتر های موجودیت جا به جا شوند.

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

بعضی از کاراکتر ها در  HTML از پیش رزرو شده هستند به این معنا که مورد استفاده قواعد زبان هستند

به عنوان مثال اگر از علامت های (<) یا (>) در متون استفاده کنید، مرورگر آن ها را به جای تگ در نظر می گیرد.

مبحث موجودیت کاراکتر ها درHTML   برای نمایش دادن کاراکتر های رزرو شده در HTML استفاده می شود.

این کاراکتر ها چیزی شبیه به عبارات زیر هستند:

&entity_name;

OR

&#entity_number;

برای نمایش کاراکتر (<) باید به این شکل بنویسیم : &lt; یا <

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

استفاده از نام موجودیت برای نمایش کاراکتر های رزرو شده باعث آسانی در به خاطر سپردن آن ها می شود.

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

فاصله غیر قابل شکستن موجودیت ها

یک کاراکتر رایج در بین کاراکتر های موجودیت که فاصله غیر قابل شکستن دارد، کاراکتر &nbsp است.

فاصله غیر قابل شکستن در واقع فاصله ای است به خط جدید منتقل نمی شود؛

دو کلمه جدا شده توسط یک فاصله غیر قابل شکستن به هم می چسبند (در خط جدید از یک دیگر جدا نمی شوند).

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

نمونه های این کلمات:

• § 10
• 10 km/h
• 10 PM

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

اگر شما 10 فاصله پشت سر هم در بین متون اضافه کنید، مرورگر به صورت خودکار 9 فاصله را حذف می‌کند.

برای اضافه کردن 10 فاصله باید از &nbsp استفاده کنید.

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

نام های موجودیت به بزرگی و کوچکی کاراکتر ها حساس هستند.

ترکیب علامت های تفکیک کننده

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

علامت های تفکیک کننده می توانند بالا و پایین، داخل و یا بین دو حرف ظاهر شوند.

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

در اینجا چند نمونه از این کاراکتر ها وجود دارد.

ارتباط موجودیت و Charset

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

یا در بعضی از charset ها اصلا پشتیبانی نمی‌شوند.

ما در فرازنتورک مقاله ای کامل در رابطه با آشنایی با Charset نوشته ایم که پیشنهاد می‌کنم آن را بخوانید.

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

همچنین اهمیت استفاده از charset های درست برای استفاده از موجودیت ها را نیز بررسی کردیم.

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

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

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

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

بسیاری از علائم ریاضی، فنی و نماد های ارزی بر روی صفحه کلید های معمولی وجود ندارد.

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

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

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

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

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

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

• لیست نماد های عمومی موجود در HTML
• لیست نماد های موجود برای واحد‌های پول درHTML
• لیست نماد های حروفی درHTML
• لیست نماد های فلش (Arrow) درHTML
• لیست نماد های ریاضی درHTML
• لیست نماد های متفرقه در  HTML (شامل نماد الله پرچم ایران)

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

😄 😍 💗

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

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

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

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

• کد کاراکتر 😄 برابر 128516 هستش.
• کد کاراکتر 😍 برابر 128525 هستش.
• کد کاراکتر 💗 برابر 128151 هستش.
• مهم : کد کاراکتر 🍌 برابر 127820 هستش. :))

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

مثال

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

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

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

<p>😍</p>

</body>
</html>

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

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

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

<p style="font-size:48px">
😀 😄 😍 💗 🍌
</p>

</body>
</html>

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

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

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

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

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

• لیست کاملی از Emoji های موجود درHTML
• لیست Emoji لبندک ها (Smileys) درHTML
• لیست Emoji های همراه با رنگبندی پوستی درHTML

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

این مقاله هم به پایان رسید، امیدوارم ازش استفاده کافی را برده باشید.

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

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی