دوره‌ها / HTML / ویژگی های HTML(Attributes)

ویژگی های HTML(Attributes)

5 دقیقه Article پیش‌نمایش

ویژگی‌های HTML

ویژگی‌های HTML اطلاعات اضافی درباره عناصر HTML ارائه می‌دهند.

ویژگی‌های HTML

  • تمام عناصر HTML می‌توانند ویژگی داشته باشند
  • ویژگی‌ها اطلاعات اضافی درباره عناصر ارائه می‌دهند
  • ویژگی‌ها همیشه در تگ شروع مشخص می‌شوند
  • ویژگی‌ها معمولاً به صورت جفت نام/مقدار می‌آیند: name="value"

ویژگی href

تگ <a> یک هایپرلینک را تعریف می‌کند. ویژگی href URL صفحه‌ای را که لینک به آن می‌رود مشخص می‌کند:

مثال

<a href="https://www.parsrepo.com">از ParsRepo دیدن کنید</a>

در فصل لینک‌های HTML ما بیشتر درباره لینک‌ها یاد خواهید گرفت.

ویژگی src

تگ <img> برای جاسازی یک تصویر در صفحه HTML استفاده می‌شود. ویژگی src مسیر تصویری که باید نمایش داده شود را مشخص می‌کند:

مثال

<img src="img_girl.jpg">

دو روش برای مشخص کردن URL در ویژگی src وجود دارد:

  1. URL مطلق - به یک تصویر خارجی که در وب‌سایت دیگری میزبانی می‌شود لینک می‌دهد. مثال: src="https://www.parsrepo.com/images/img_girl.jpg".
    نکته: تصاویر خارجی ممکن است تحت قانون کپی‌رایت باشند. اگر اجازه استفاده از آن را ندارید، ممکن است قانون کپی‌رایت را نقض کنید. علاوه بر این، شما نمی‌توانید تصاویر خارجی را کنترل کنید؛ ممکن است ناگهان حذف یا تغییر کنند.
  2. URL نسبی - به تصویری که در داخل وب‌سایت میزبانی می‌شود لینک می‌دهد. در اینجا، URL شامل نام دامنه نمی‌شود. اگر URL بدون اسلش شروع شود، نسبت به صفحه فعلی خواهد بود. مثال: src="img_girl.jpg". اگر URL با اسلش شروع شود، نسبت به دامنه خواهد بود. مثال: src="/images/img_girl.jpg".
    نکته: تقریباً همیشه بهتر است از URL‌های نسبی استفاده کنید. اگر دامنه را تغییر دهید، آن‌ها خراب نمی‌شوند.

ویژگی‌های width و height

تگ <img> همچنین باید شامل ویژگی‌های width و height باشد که عرض و ارتفاع تصویر (به پیکسل) را مشخص می‌کنند:

مثال

<img src="img_girl.jpg" width="500" height="600">

ویژگی alt

ویژگی اجباری alt برای تگ <img> یک متن جایگزین برای تصویر مشخص می‌کند، در صورتی که تصویر به دلایلی نتواند نمایش داده شود. این می‌تواند به دلیل اتصال کند، خطا در ویژگی src، یا اگر کاربر از صفحه‌خوان استفاده می‌کند باشد.

مثال

<img src="img_girl.jpg" alt="دختری با ژاکت">

مثال

ببینید اگر سعی کنیم تصویری را نمایش دهیم که وجود ندارد چه اتفاقی می‌افتد:

<img src="img_typo.jpg" alt="دختری با ژاکت">

در فصل تصاویر HTML ما بیشتر درباره تصاویر یاد خواهید گرفت.

ویژگی style

ویژگی style برای اضافه کردن استایل‌ها به یک عنصر استفاده می‌شود، مانند رنگ، فونت، اندازه و موارد دیگر.

مثال

<p style="color:red;">این یک پاراگراف قرمز است.</p>

در فصل استایل‌های HTML ما بیشتر درباره استایل‌ها یاد خواهید گرفت.

ویژگی lang

شما همیشه باید ویژگی lang را داخل تگ <html> قرار دهید تا زبان صفحه وب را اعلام کنید. این برای کمک به موتورهای جستجو و مرورگرها است.

مثال زیر انگلیسی را به عنوان زبان مشخص می‌کند:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

کدهای کشور نیز می‌توانند به کد زبان در ویژگی lang اضافه شوند. بنابراین، دو کاراکتر اول زبان صفحه HTML را تعریف می‌کنند و دو کاراکتر آخر کشور را تعریف می‌کنند.

مثال زیر انگلیسی را به عنوان زبان و ایالات متحده را به عنوان کشور مشخص می‌کند:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

می‌توانید تمام کدهای زبان را در مرجع کد زبان HTML ما ببینید.

ویژگی title

ویژگی title برخی اطلاعات اضافی درباره یک عنصر تعریف می‌کند.

مقدار ویژگی title زمانی که ماوس را روی عنصر می‌برید به عنوان tooltip نمایش داده می‌شود:

مثال

<p title="من یک راهنمای ابزار هستم">این یک پاراگراف است.</p>

پیشنهاد ما: همیشه از ویژگی‌های حروف کوچک استفاده کنید

استاندارد HTML نیازی به نام‌های ویژگی با حروف کوچک ندارد.

ویژگی title (و تمام ویژگی‌های دیگر) می‌تواند با حروف بزرگ یا کوچک نوشته شود مانند title یا TITLE.

با این حال، ParsRepoویژگی‌های حروف کوچک را در HTML توصیه می‌کند و برای انواع سند سخت‌گیرانه‌تر مانند XHTML ویژگی‌های حروف کوچک را می‌طلبد.

در ParsRepo ما همیشه از نام‌های ویژگی با حروف کوچک استفاده می‌کنیم.

پیشنهاد ما: همیشه مقادیر ویژگی را درون کوتیشن قرار دهید

استاندارد HTML نیازی به کوتیشن دور مقادیر ویژگی ندارد.

با این حال، ParsRepoکوتیشن را در HTML توصیه می‌کند و برای انواع سند سخت‌گیرانه‌تر مانند XHTML کوتیشن را می‌طلبد.

خوب:

<a href="https://www.parsrepo.com/html/">از آموزش HTML ما دیدن کنید</a>

بد:

<a href=https://www.parsrepo.com/html/>از آموزش HTML ما دیدن کنید</a>

گاهی اوقات باید از کوتیشن استفاده کنید. این مثال ویژگی title را به درستی نمایش نمی‌دهد، زیرا شامل فاصله است:

مثال

<p title=توضیح ParsRepo>

در ParsRepo ما همیشه از کوتیشن دور مقادیر ویژگی استفاده می‌کنیم.

کوتیشن تکی یا دوتایی؟

کوتیشن دوتایی دور مقادیر ویژگی در HTML رایج‌تر است، اما کوتیشن تکی نیز می‌تواند استفاده شود.

در برخی موقعیت‌ها، زمانی که مقدار ویژگی خود شامل کوتیشن دوتایی است، لازم است از کوتیشن تکی استفاده کنید:

<p title='جان "شاتگان" نلسون'>

یا برعکس:

<p title="جان 'شاتگان' نلسون">

خلاصه فصل

  • تمام عناصر HTML می‌توانند ویژگی داشته باشند
  • ویژگی href از  <a>   مسیر صفحه‌ای را که لینک به آن می‌رود مشخص می‌کند
  • ویژگی src از <img> مسیر تصویری که باید نمایش داده شود را مشخص می‌کند
  • ویژگی‌های width و height از <img> اطلاعات اندازه برای تصاویر ارائه می‌دهند
  • ویژگی alt از <img> یک متن جایگزین برای تصویر ارائه می‌دهد
  • ویژگی style برای اضافه کردن استایل‌ها به یک عنصر استفاده می‌شود، مانند رنگ، فونت، اندازه و موارد دیگر
  • ویژگی lang از تگ <html> زبان صفحه وب را اعلام می‌کند
  • ویژگی title برخی اطلاعات اضافی درباره یک عنصر تعریف می‌کند

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید
درس قبلی درس بعدی