سلام رفیق! 👋 امروز توی جلسه هجدهم آموزش HTML از سایت رایا وردپرس می‌خوایم درباره یکی از مفاهیم کلیدی و کاربردی صحبت کنیم: موجودیت‌ها (Entities). شاید تا حالا با کاراکترهای عجیبی مثل یا © برخورد کرده باشی و از خودت پرسیده باشی “اینا دیگه چی هستن؟” 🤔
موجودیت‌های HTML بهت کمک میکنن تا کاراکترهای ویژه‌ای رو که تو کیبورد عادی پیدا نمی‌کنی یا برا مرورگر معنای خاصی دارن، درست نمایش بدی. با دقت این جلسه رو دنبال کن تا بتونی از این موجودیت‌ها برای بهتر کردن محتوای وب‌سایتت استفاده کنی!
🧐موجودیت‌ها یا Entities در HTML چی هستن؟
موجودیت‌ها (Entities) در HTML کدهای خاصی هستن که مشکل نمایش کاراکترهای خاص رو حل میکنن! تصور کن میخوای توی وب‌سایتت علامت‌هایی مثل < یا > رو نشون بدی – اما اگه اینها رو مستقیم بنویسی، مرورگر کاملاً گیج میشه! 🤯
چرا؟ چون مرورگر فکر میکنه داری یه تگ HTML جدید تعریف میکنی! اینجاست که موجودیت‌ها مثل یه قهرمان وارد میشن! 🦸♂️
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
موجودیت‌ها یه جور کد رمزی هستن که به مرورگر میگن: “ببین، من واقعاً می‌خوام این کاراکتر خاص رو نشون بدم، نه اینکه کد HTML بنویسم!”
با موجودیت‌ها، میتونی هر کاراکتر خاصی رو بدون اینکه مرورگر رو گیج کنی یا خطایی ببینی، نمایش بدی! 🎯
مثال:
- به جای نوشتن
<مستقیم در کد HTML، باید از<استفاده کنی. - به جای نوشتن
&مستقیم در کد HTML، باید از&استفاده کنی.
📌 چرا موجودیت ها اینقدر مهمن؟
موجودیت‌ها در HTML مثل سوپرمن هستن که همیشه موقع نیاز به کمک میآن! 🦸♂️ اگه بخوام ساده بگم، موجودیت‌ها به دلایل زیر ضروری و کاربردی هستن:
۱. نمایش کاراکترهای خاص
بعضی کاراکترها مثل <, >, & و " برای HTML معنای خاصی دارن. اگه این کاراکترها رو مستقیم توی کد بنویسی، مرورگر فکر میکنه داری تگ یا دستور جدیدی تعریف میکنی و نمایشش نمیده! 😱
مثال: میخام خروجی کدم به شکل: <p>این یک پاراگرافه!</p> باشه برای اینکار من نمیتونم مستقیما از <p> استفاده کنم چون مرورگر فک میکنه دارم تگ پاراگراف تعریف میکنم!
درستش اینه که من بیام اینشکلی کدم رو بنویسم
<p>این یک پاراگرافه!</p>۲. نمایش کاراکترهای غیرقابل تایپ
بعضی کاراکترها رو نمیتونی مستقیماً از کیبورد تایپ کنی، مثل علامت کپی‌رایت (©)، علامت ثبت (®) یا علامت یورو (€). موجودیت‌ها اینجا به کمکت میان تا بتونی اینا موارد رو به درستی نمایش بدی.
مثال:
©→ ©€→ €®→ ®
۳. کنترل فاصله ها در صفحات وب
توی HTML، فاصله‌های اضافی (Space) نادیده گرفته میشن. اگه بخوای چند فاصله پشت سر هم داشته باشی، میتونی از موجودیت استفاده کنی.
مثال:
این یک متن با فاصله‌های زیاده.خروجی: این یک متن با فاصله‌های زیاده.
۴. نمایش حروف خاص زبان‌های مختلف
اگه بخوای حروف خاص زبان‌های دیگه رو توی صفحه وب نمایش بدی، موجودیت‌ها به کمکت میان. مثلاً:
á→ áü→ üß→ ß
۵. نمایش نمادها و علائم خاص
بعضی نمادها مثل علامت یورو (€)، علامت دلار ($) یا حتی شکلک‌ها (Emojis) رو میتونی با موجودیت‌ها نمایش بدی.
مثال:
♥→ ♥☆→ ☆€→ €
۶. جلوگیری از خطاهای مرورگر
اگه کاراکترهای خاص رو بدون موجودیت‌ها استفاده کنی، مرورگر ممکنه صفحه‌ات رو اشتباه تفسیر کنه و به هم بریزه! موجودیت‌ها کمک میکنن صفحه‌ات بدون خطا و تمیز نمایش داده بشه.
انواع موجودیت‌ها در HTML
برای استفاده از موجودیت‌ها در HTML، میتونی از 2 روش زیر استفاده کنی:
1. استفاده از نام موجودیت (Named Entities)
در این روش، به جای نوشتن کاراکتر اصلی، از نام مشخص‌شده آن بین علامت‌های & و ; استفاده می کنیم.
مثال: برای نمایش علامت کپی‌رایت میتونیم بنویسیم👈 ©
2. استفاده از کد موجودیت (Numeric Entities)
در این روش از کد عددی مربوط به کاراکتر استفاده میشه. این کد معمولاً بر اساس استاندارد Unicode هست.
مثال: نمایش همان علامت کپی‌رایت به صورت کد عددی به صورته 👈 © خواهد بود
🗺️ تفاوت این دو روش چیه؟
| روش نام موجودیت | روش کد موجودیت |
|---|---|
| نیاز به حفظ کردن اسم داره | نیاز به یادگیری کد عددی داره |
برای نمادهای معروف مثل < و © کاربرد داره | برای نمادهای نادر یا ایموجی ها مناسب تره |
| خوانایی بیشتری داره | انعطاف بیشتری برای نمادهای خاص داره |
موجودیت‌های پرکاربرد در HTML 🌟
بیا با هم نگاهی به چند موجودیت پرکاربرد در HTML بندازیم:
کاراکترهای خاص HTML
| کاراکتر | نام موجودیت | کد عددی | توضیح |
|---|---|---|---|
& | & | & | علامت آمپرسند (&) |
< | < | < | علامت کوچکتر از (<) |
> | > | > | علامت بزرگتر از (>) |
" | " | " | علامت نقل قول (") |
' | ' | ' | آپاستروف (') |
| ? | ? | ? | علامت سوال (؟) |
| * | * | * | ستاره ( * ) |
| % | % | % | علامت درصد (%) |
| @ | @ | @ | علامت (@) |
# | # | # | علامت هشتگ (#) |
| ^ | ˆ | ^ | علامت توان (^) |
| ! | ! | ! | علامت تعجب (!) |
| [ | [ | [ | کروشه باز |
[ | ] | ] | کروشه بسته |
| { | { | { | آکولاد باز |
| } | } | } | آکولاد بسته |
| ~ | ˜ | ~ | علامت تیلدا |
فاصله ها
| نام | موجودیت | کد عددی | توضیح |
|---|---|---|---|
| فاصله بدون شکست | |   | فاصله‌ای که باعث نمی‌شه متن به خط بعدی بره |
| فاصله EN |   |   | فاصله‌ای به اندازه‌ی عرض حرف N |
| فاصله EM |   |   | فاصله‌ای به اندازه‌ی عرض حرف M |
| فاصله نازک |   |   | فاصله‌ای باریک‌تر از بقیه |
علائم و نمادها
| کاراکتر | نام | موجودیت | کد عددی | توضیح |
|---|---|---|---|---|
| © | علامت کپی رایت | © | © | نشان‌دهنده‌ی حق کپی رایت |
| ® | علامت ثبت شده | ® | ® | برای برندهای ثبت‌شده استفاده میشه |
| ™ | علامت تجاری | ™ | ™ | برای نشان دادن علامت تجاری غیر ثبت‌شده |
| € | علامت یورو | € | € | واحد پول اتحادیه اروپا |
| £ | علامت پوند | £ | £ | واحد پول انگلیس |
| ¥ | علامت ین | ¥ | ¥ | واحد پول ژاپن |
| ° | درجه | ° | ° | برای نشان دادن درجه حرارت یا زاویه |
| ± | علامت به‌علاوه-منها | ± | ± | نشان‌دهنده‌ی مثبت/منفی بودن مقدار |
| × | علامت ضرب | × | × | نماد ریاضی برای ضرب |
| ÷ | علامت تقسیم | ÷ | ÷ | نماد ریاضی برای تقسیم |
| ≠ | علامت تفاوت | ≠ | ≠ | برای نمایش علامت تفاوت |
≤ | کمتر یا مساوی | ≤ | ≤ | برای نمایش علامت کمتر یا مساوی. |
≥ | بیشتر یا مساوی | ≥ | ≥ | برای نمایش علامت بیشتر یا مساوی. |
مثال‌های کاربردی و بیشتر از موجودیت‌ها 💻
بیا چند مثال ببینیم تا بهتر متوجه کاربرد موجودیت‌ها بشی:
مثال 1: استفاده از فاصله بدون شکست
فرض کن میخوای مطمئن بشی که دو کلمه همیشه کنار هم قرار میگیرن و به خط بعد منتقل نمیشن:
<p>دوره آموزشی HTML</p>با استفاده از مطمئن میشی که کلمات “آموزشی” و “HTML” همیشه کنار هم هستن و با هم به خط بعد منتقل میشن.
مثال 2 : استفاده از علائم خاص
اگه بخوای درباره دما صحبت کنی:
<p>دمای امروز 25°C است.</p>که در مرورگر به صورت: “دمای امروز 25°C است.” نمایش داده میشه.
مثال 3: حق کپی رایت
برای نشون دادن حق کپی رایت در فوتر سایتت:
<footer>© 1402 رایا وردپرس. تمامی حقوق محفوظ است.</footer>
که به این شکل نمایش داده میشه: “© 1402 رایا وردپرس. تمامی حقوق محفوظ است.”
مثال 4: کنترل طرح بندی متن
با استفاده از موجودیت‌های فاصله مثل ,   و   میتونی فاصله‌های دقیق بین کلمات و عناصر رو کنترل کنی.
<p>این یک فاصله عادی است. این یک فاصله بدون شکست است.</p>
<p>این یک فاصله عادی است. این یک فاصله EN است.</p>
<p>این یک فاصله عادی است. این یک فاصله EM است.</p>مثال 5: نمایش فرمول‌های ریاضی
برای نمایش فرمول‌های ریاضی ساده میتونی از موجودیت‌های ریاضی استفاده کنی:
<p>معادله: a × b = c</p>
<p>دما: 20°C ± 2°C</p>نکات مهم در استفاده از موجودیت ها ⚠️
- همیشه با
;تموم کن: یادت باشه که تمام موجودیت‌ها باید با;تموم بشن، وگرنه درست نمایش داده نمیشن.- کارایی: استفاده زیاد از موجودیت‌ها ممکنه حجم صفحه رو افزایش بده، پس در استفاده از اون ها متعادل باش.
- پشتیبانی مرورگرها: اکثر مرورگرهای مدرن از موجودیت‌های استاندارد HTML پشتیبانی میکنن، اما برخی از موجودیت‌های جدیدتر ممکنه در همه مرورگرها پشتیبانی نشن.
📌 بررسی حساسیت به بزرگی و کوچکی حروف در موجودیت های HTML
موضوع حساسیت به حروف (Case-Sensitivity) در نام موجودیت‌های HTML یکم موقعیت‌محوره یعنی بعضی موجودیت ها به حروف بزرگ و کوچیک حساس نیستن بعضیا حساسن. بیا دقیق تر بررسی کنیم:
۱. موجودیت‌های عمومی (مثل <، © ، &)
این موجودیت‌ها به حروف بزرگ و کوچک حساس نیستن! یعنی:
©→ ©©→ ©<→<<→<
✅ نتیجه: برای نمادهای عمومی مثل <، >، ©، & و… فرقی نداره که اسم موجودیت رو با حروف بزرگ یا کوچک بنویسی! اما بهترین روش اینه که همیشه از شکل دقیق موجودیت‌ها طبق استاندارد HTML استفاده کنی، چون در اکثر موارد، نام موجودیت‌ها با حروف کوچک نوشته میشه.
۲. موجودیت‌های مربوط به حروف خاص زبان ها (مثل Á، á، Ü)
این موجودیت‌ها به حروف بزرگ و کوچک حساس هستن! چون کاراکترهای متفاوتی رو نمایش میدن:
Á→ Áá→ áÜ→ Üü→ ü
❌ اشتباه رایج:
اگر به جای á از Á استفاده کنی، خروجی کاملاً متفاوتی میگیری!
۳. موجودیت‌های نمادهای ریاضی و خاص
برخی نمادها فقط با حروف کوچک تعریف شدن:
α→ α (حرف یونانی آلفا)Α→ Α (حرف یونانی آلفای بزرگ)
📌 توجه! اگرچه در نمادهای عمومی (مثل
<،©،&) میتونی از حروف بزرگ یا کوچیک برای نام موجودیت استفاده کنی، اما همیشه بهتره از حروف کوچیک استفاده کنی! دلیلش اینه:
- کدت تمیزتر و حرفه‌ای‌تر به نظر میرسه!
- مطابق با استانداردهای جهانی HTML هست
- سازگاری بین مرورگرهای مختلف رو تضمین میکنه
جمع بندی 📝
توی این جلسه با موجودیت‌ها در HTML آشنا شدی. یاد گرفتی که:
- موجودیت‌ها کدهای خاصی هستن که با
&شروع و با;تموم میشن - از اونها برای نمایش کاراکترهای خاص مثل
<,>,&و نمادهای خاص مثل©,®استفاده میشه - موجودیت‌های فاصله مثل
برای کنترل فاصله‌ها در متن مفید هستن - میتونی از موجودیت‌ها برای بهبود طرح‌بندی، نمایش فرمول‌های ریاضی و اطلاعات حقوقی استفاده کنی
مرسی که تا پایان این جلسه با من همراه بودی امیدوارم روز خوبی داشته باشی و نمودار زندگی ات همیشه رو به بالا و پیشرفت باشه تا جلسه بعدی به خدای بزرگ میسپارمت 💖😉
ارسال نظر ( 0 نظر تایید شده )