۴- ویژگی‌های اچ‌تی‌ام‌ال (HTML Attributes)

۲۷ اردیبهشت ۱۴۰۴

0 دیدگاه

اتریبیوت HTML چیست؟

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

اتریبیوت‌های HTML

همه عناصر HTML می‌توانند اتریبیوت داشته باشند
اتریبیوت‌ها اطلاعات اضافی درباره عناصر ارائه می‌دهند
اتریبیوت‌ها همیشه در تگ شروع مشخص می‌شوند
اتریبیوت‌ها معمولا به صورت جفت‌های نام/مقدار هستند:

				
					name="value"

اتریبیوت href

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

				
					<a href="https:/ /lampaa.ir">Lampaa Academy</a>

اتریبیوت src

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

				
					<img decoding="async" src="img.jpg">

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

1. URL مطلق – به یک تصویر خارجی که در وب‌سایت دیگری میزبانی می‌شود لینک می‌دهد. مثال:

				
					<img decoding="async" src="https://cdn.com/images/img.jpg">

نکته: شما کنترلی بر تصاویر خارجی ندارید؛ آن‌ها ممکن است به‌طور ناگهانی حذف یا تغییر کنند.

2. URL نسبی – به تصویری لینک می‌دهد که در داخل وب‌سایت میزبانی می‌شود. در اینجا، URL شامل نام دامنه نمی‌شود. اگر URL بدون اسلش شروع شود، نسبت به صفحه فعلی خواهد بود. مثال:

				
					<img decoding="async" src="img.jpg">

اگر URL با اسلش شروع شود، نسبت به دامنه خواهد بود. مثال:

				
					<img decoding="async" src="/images/img.jpg">

نکته: تقریبن همیشه بهتر است از URL‌های نسبی استفاده کنید. آن‌ها در صورت تغییر دامنه خراب نمی‌شوند.
‌

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

اتریبیوت‌های width و height

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

				
					<img fetchpriority="high" decoding="async" src="img.jpg" width="500" height="600">

اتریبیوت alt

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

				
					<img decoding="async" src="img.jpg" alt="توضیح تصویر">

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

اتریبیوت style

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

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

خلاصه این مطلب

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