مرکز درس | مرجع آموزش های جامع
فهرست مطالب
در این مقاله از مرکز درس می خواهیم در مورد صفت های html صحبت کنیم . این مقادیر در هنگام کدنویسی از اهمیت بالایی برخوردار هستند و در زمان استایل دهی نیز مرود استفاده قرار می گیرند.
صفت HTML
- صفت های HTML کلمات ویژه ای هستند که اطلاعات اضافی درباره عناصر ارائه می دهند و یا ویژگی های اصلاح کننده عنصر HTML هستند.
- هر عنصر یا تگ می تواند صفت هایی داشته باشد که رفتار و و ضعیت آن عنصر را تعریف می کنند.
- صفت ها همیشه باید در تگ شروع قرار گیرند.
- صفت باید همیشه با دوتایی نام و مقدار آن استفاده شود.
- نام و مقادیر صفت ها به کوچکی و بزرگی حروف حساس هستند و W3C (کنسرسیوم شبکه جهانی وب) توصیه می کند که فقط باید با حروف کوچک نوشته شوند.
- می توانید چندین صفت را همزمان به یک عنصر HTML اعمال کنید اما باید بین هر دو صفت فاصله قرار دهید.
ساختار
نام صفت=”مقدار صفت”>محتوانام تگ>
html>
This is Style attribute
style=”height: ۵۰px; color: blue”> It will add style property in element
style=”color: red”>It will change the color of content
توضیحات مثال بالا:
style=”height: ۵۰px; color: blue”>It will add style property in element
در جمله بالا از تگ پاراگراف استفاده کرده ایم که در آن صفت استایل به کار برده شده است. این صفت برای اعمال ویژگی CSS روی هر عنصر HTML استفاده می شود. با استفاده از این ویژگی ارتفاع پاراگراف px50 و رنگ آبی برای رنگ متن تنظیم شده است.
style=”color: red”>It will change the color of content
در جمله بالا دوباره از صفت استایل در تگ پاراگراف استفاده کرده ایم که رنگ قرمز برای قلم تعیین شده است.
توجه: در اینجا تعدادی از صفات رایج را آورده ایم. همه صفات همراه با توضیحات آن ها در لیست صفات HTML آورده شده است.
صفت title
توضیحات: از صفت title به عنوان tooltip ( پنجره شناور) متن در بیشتر مرورگرها استفاده می شود. هنگامی که کاربر مکان نما را بر روی یک پیوند یا متن حرکت می دهد، یک متن به صورت شناور نمایش داده می شود. می توانید از این صفت برای هر متن یا پیوند برای نشان دادن توضیح درباره آنها استفاده کنید. در مثال های زیر این صفت را با تگ های p و h1 استفاده کرده ایم.
مثال
با تگ
:
title=”This is heading tag”>Example of title attribute
با تگ
:
title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip
کد:
html>
title=”This is heading tag”>Example of title attribute
title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip
خروجی کد:
صفت href
توضیحات: صفت href صفت اصلی تگ انکر است. این صفت آدرس قرار گرفته در لینک را مشخص می کند. صفت href صفحه را به جایی دیگر پیوند می دهد و اگر مقدار آن خالی باشد در همان صفحه می ماند.
مثال
با آدرس پیوند:
href=”https://www.javatpoint.com/html-anchor”>This is a link
بدون آدرس پیوند:
صفت src
ویژگی src یکی از صفات مهم و ضروری عنصر است. این صفت حاوی آدرس منبع تصویری است که در مرورگر نمایش داده می شود. مقدار این ویژگی می تواند آدرس تصویری باشد که یا در همان دایرکتوری (همان پوشه حاوی کد) یا دایرکتوری دیگری قرار دارد. نام یا آدرس منبع تصویر باید به درستی نوشته شود، در غیر اینصورت مرورگر
تصویر را نشان نمی دهد.
مثال
src=”whitepeacock.jpg” height=”۴۰۰″ width=”۶۰۰″>
توجه: در مثال فوق، تگ img علاوه بر صفت src، صفات height و width نیز دارد که ارتفاع و عرض تصویر را در صفحه وب تنظیم می کند.
خروجی
کوتیشن ها: کوتیشن های تک یا کوتیشن های دوتایی؟
در این فصل متوجه شدید که ما مقادیر صفات را درون کوتیشن های دوتایی (دابل کوتیشن) قرار دادیم اما ممکن است برخی افراد از کوتیشن های تکی (سینگل کوتیشن) در HTML استفاده کنند. بنابراین استفاده از سینگل کوتیشن همراه با صفات نیز مجاز است. هر دو جمله زیر کاملاً صحیح هستند.
همچنین در HTML5 می توانید از مقدار صفت را بدون کوتیشن بنویسید.
