Loading...
خصوصیت ها در HTML
خصوصیت ها اطلاعات اضافی را در مورد عناصر HTML فراهم می کنند.
خصوصیت ها
- تمام عناصر HTML می توانند دارای خصوصیت باشند.
- خصوصیت ها اطلاعات بیشتری را در مورد عناصر فراهم می کنند.
- خصوصیت ها همیشه در تگ شروع مشخص می کنند.
- خصوصیت ها معمولا به صورت نام / مقدار تعریف می شوند. مانند name=”value”.
خصوصیت href
لینک ها در HTML با تگ <a> مشخص می شوند. آدرس لینک در خصوصیت href مشخص می شود.
1 | <a href="https://www.goole.com">This is a link</a> |
در مورد لینک ها و تگ <a> بعدا مطالب بیشتری را یاد می گیرید.
خصوصیت src
عکس ها در HTML با تگ <img> تعریف می شوند و نام و آدرس عکس در خصوصیت src مشخص می شود.
1 | <img src="sample.jpg"> |
خصوصیت عرض و ارتفاع
عکس ها در HTML مجموعه از خصوصیت ها مربوط به اندازه را دارند که عرض و ارتفاع عکس ها را مشخص می کنند.
1 | <img src="sample.jpg" width="500" height="600"> |
اندازه عکس ها با پیکسل مشخص می شود. برای مثال width=”500″ یعنی عرض تصویر 500 پیکسل است. در مورد عکس ها و خصوصیت ها آن ها در بخش ها بعدی بیشتر می آموزید.
خصوصیت alt
خصوصیت alt یک متن جایگزین برای عکس مشخص می کند تا زمانی که نمی توان عکس را نمایش داد یا عکس موجود نیست، این متن به کاربر نشان داده شود.
1 | <img src=" sample.jpg" alt="Image not found"> |
خصوصیت style
خصوصیت style برای مشخص کردن استایل یک عنصر مانند رنگ، فونت، اندازه و … مورد استفاده قرار می گیرد.
1 | <p style="color:red">I am a paragraph</p> |
خصوصیت lang
زبان سند را می توان در تگ <hml> اعلام کرد. این اعلام با استفاده از خصوصیت lang انجام می شود. مشخص بودن زبان سند برای برنامه ها دسترسی و موتور های جستجو از اهمیت بالایی برخوردار است.
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> |
دو حرف اول (en) در مقدار خصوصیت lang زبان را مشخص می کند و اگر زبان دارای گویش خاصی باشد از دو حرف دوم (US) برای اعلام آن استفاده می کنیم.
خصوصیت title
در اینجا خصوصیت title به یک عنصر <p> اضافه شده است. مقدار داخل خصوصیت title زمانی که اشاره گر ماوس بر روی عنصر قرار بگیرد، به عنوان راهنمای ابزار نمایش داده می شود.
1 2 3 | <p title="I'm a tooltip"> This is a paragraph. </p> |
پیشنهاد ما: استفاده از حروف کوچک برای نام خصوصیت است
در استاندارد HTML 5 الزامی برای استفاده از حروف کوچک برای نام خصوصیت وجود ندارد. برای مثال خصوصیت title هم می تواند به صورت TITLE و هم به صورت title نوشته شود. ما در این آموزش همیشه از حروف کوچک برای نام عناصر استفاده می کنیم.
پیشنهاد ما: استفاده از علامت نقل قول (“) برای مقادیر خصوصیت است
در HTML 5 نیازی به استفاده از علامت (“) برای مقادیر خصوصیت ها نیست. برای نمونه خصوصیت href نشان داده شده در بالا می تواند بدون علامت نقل قول نوشته شود.
Bad
1 | <a href=https://www. google.com> |
Good
1 | <a href="https://www.google.com"> |
اما W3C توصیه می کند تا از علامت نقل قول در اسناد HTML و همچنین اسناد پیچیده تر مانند XHTML استفاده شود.
در بعضی از مواقع لازم است تا از علامت نقل قول استفاده کنیم. برای نمونه به مثال زیر توجه کنید:
1 | <p title=About html> |
مثال بالا به درستی کار نخواهد کرد زیرا مقدار خصوصیت title شامل فضای خالی می باشد. استفاده نکردن از نقل قول ها می تواند باعث بروز خطا های غیره منتظره شود.
علامت نقل قول تکی (‘) یا دوتایی (“)
در اسناد HTML رایج است که از علامت نقل قول دوتایی برای مقادیر استفاده می شود اما از علامت نقل قول تکی نیز می توان استفاده کرد.
در برخی موارد، زمانی که مقدار خصوصیت خود شامل علامت نقل قول دوتایی است، لازم می شود تا از علامت نقل تکی استفاده شود.
1 | <p title='John "ShotGun" Nelson'> |
یا برعکس
1 | <p title="John 'ShotGun' Nelson"> |
خلاصه
- تمام عناصر HTML می توانند خصوصیت داشته باشند.
- خصوصیت title اطلاعاتی را به عنوان راهنمای ابزار فراهم می کند.
- خصوصیت href اطلاعات ادرس را برای لینک ها مشخص می کند.
- خصوصیت های width و height اطلاعات مربوط به اندازه عکس را مشخص می کنند.
- خصوصیت alt یک متن جایگزین برای عکس و خوانندگان صفحه فراهم می کند.
خصوصیت های HTML
در زیر یک لیست کوچک از خصوصیت های که اغلب در HTML استفاده می شوند را مشاهده می کنید که به صورت الفبایی مرتب شده است.
| توضیحات | خصوصیت |
| یک متن جایگزین برای عکس مشخص می کند تا زمانی که نمی توان عکس را نمایش داد یا عکس موجود نیست، این متن به کاربر نشان داده شود | alt |
| مشخص می کند که عنصر ورودی باید غیرفعال باشد | disabled |
| آدرس اینترنتی را برای لینک مشخص می کند | href |
| یک شناسه منحصر به فرد برای عنصر را مشخص می کند | id |
| نشانی یا آدرس را برای یک تصویر مشخص می کند | src |
| یک استایل درونی برای عنصر مشخص می کند | style |
| اطلاعات اضافی در مورد یک عنصر را مشخص می کند (به عنوان راهنمای ابزار نمایش داده می شود) | title |
هیچ نظری ثبت نشده است