درس پنجم : ویژگی‌های HTML

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

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

ویژگی‌های HTML

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

ویژگی href

تگ <a> یک هایپرلینک را تعریف می‌کند. ویژگی href آدرس URL صفحه‌ای را که لینک به آن می‌رود، مشخص می‌کند:
<a href=“https://www.CSLearn.ir”>Visit CSLearn</a>

ویژگی src

تگ <img> برای جاسازی یک تصویر در صفحه HTML استفاده می‌شود. ویژگی src مسیر تصویری که باید نمایش داده شود را مشخص می‌کند:
<img src=“img_girl.jpg”>
دو روش برای تعیین URL در ویژگی src وجود دارد:
  1. Absolute URL: به یک تصویر خارجی در وب‌سایتی دیگر لینک می‌دهد.
  2. Relative URL: به تصویری که در همان وب‌سایت میزبانی شده لینک می‌دهد.

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

تگ <img> همچنین باید شامل ویژگی‌های width (عرض) و height (ارتفاع) باشد که ابعاد تصویر را به پیکسل مشخص می‌کنند:
<img src=“img_girl.jpg” width=“500” height=“600”>

ویژگی alt

ویژگی ضروری alt برای تگ <img>، یک متن جایگزین را مشخص می‌کند تا در صورتی که تصویر به هر دلیلی (سرعت کم، خطا در آدرس، یا استفاده از صفحه‌خوان) نمایش داده نشد، آن متن ظاهر شود.
<img src=“img_typo.jpg” alt=“Girl with a jacket”>
Girl with a jacket (نمای متن جایگزین وقتی تصویر پیدا نمی‌شود)

ویژگی style

ویژگی style برای افزودن استایل‌هایی مانند رنگ، فونت، اندازه و غیره به یک عنصر استفاده می‌شود.
<p style=“color:red;”>This is a red paragraph.</p>

This is a red paragraph.

ویژگی lang

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

ویژگی title

ویژگی title اطلاعات اضافی درباره یک عنصر تعریف می‌کند که هنگام نگه داشتن ماوس روی آن (Tooltip)، نمایش داده می‌شود.
<p title=“من یک تولتیپ هستم”>This is a paragraph.</p>

ماوس را اینجا نگه دارید (This is a paragraph)

پیشنهادات CSLearn:

  • همیشه از حروف کوچک استفاده کنید: اگرچه HTML به حروف بزرگ حساس نیست، اما استفاده از حروف کوچک توصیه می‌شود.
  • همیشه مقادیر را داخل کوتیشن قرار دهید: برای جلوگیری از خطا (مخصوصاً وقتی مقدار دارای فاصله است)، همیشه از " " استفاده کنید.

خلاصه فصل

ویژگی توضیحات
href آدرس مقصد یک لینک را مشخص می‌کند.
src مسیر تصویر را مشخص می‌کند.
alt متن جایگزین برای تصویر ارائه می‌دهد.
style استایل‌های CSS درون‌خطی اضافه می‌کند.
title اطلاعات اضافی به صورت Tooltip نمایش می‌دهد.

تمرین (Exercise):

کدام یک از موارد زیر سینتکس صحیح برای استفاده از ویژگی HTML است؟

۱. <img src=’img_girl.jpg’> (پاسخ صحیح)

۲. <img src(‘img_girl.jpg’)> ۳. <img src:’img_girl.jpg’>
درس قبلی
بازگشت به دوره
درس بعدی