ویژگی ها و صفات HTML
ویژگی های HTML
ویژگی های HTML اطلاعات بیشتری در مورد عناصر HTML ارائه می دهند.
آنچه در این آموزش خواهید آموخت:
لیست ویژگی ها در برچسب های HTML
| نام ویژگی | توضیح عملکرد ویژگی |
|---|---|
| alt | یک متن جایگزین برای تصویر و مرتبط با آن تعریف می کند |
| disabled | المان ورود (input) را غیر فعال می کند |
| href | یک آدرس URL(Uniform Resource Locator) را برای پیوند به آن صفحه مشخص می کند |
| id | یک شناسه منحصر به فرد برای شناسایی تگ مورد نظر را مشخص می کند |
| src | یک آدرس URL را برای فراخوانی تصویر مورد نظر فراهم می کند |
| style | سبک CSS درون خطی را برای یک عنصر مشخص می کند |
| title | اطلاعات اضافی درباره یک تگ HTML به صورت نمایش یک عنوان در کنار نشانه گر ماوس هنگامی که روی المان قراردارد را مشخص می کند |
| value | یک مقدار برای المان ورود (input) به صورت متن مشخص می کند. |
صفات HTML
همه عناصر HTML می توانند ویژگی داشته باشند
ویژگی ها اطلاعات بیشتری در مورد عناصر ارائه می دهند
ویژگی ها همیشه در برچسب شروع مشخص می شوند
برای آشنایی بیشتر با مفاهیم عناصر HTML میتوانید آموزش زیر را مشاهده نمایید:
ویژگی href
برچسب <a> پیوند را تعریف می کند. ویژگی URL ، href صفحه ای را که لینک به آن می رود مشخص می کند:
مثال:
|
1 |
<a href="آدرس سایت مورد نظر">متن مورد نظر</a> |
صفت src
از برچسب <img> برای قرار دادن تصویر در صفحه HTML استفاده می شود. ویژگی src مسیر تصویری را برای نمایش مشخص می کند:
مثال:
|
1 |
<img src="فایل تصویر.jpg"> |
برای تعیین URL در ویژگی src به دو روش وجود دارد:
1. URL مطلق:
پیوند به یک تصویر خارجی که در وب سایت دیگری میزبانی می شود.
مثال:
src=”https://upweb.ir/images/img_girl.jpg”
یادداشت ها: ممکن است تصاویر خارجی تحت حق چاپ باشند. اگر اجازه استفاده از آن را نگرفتید ، ممکن است قوانین کپی رایت را نقض کنید. علاوه بر این ، شما نمی توانید تصاویر خارجی را کنترل کنید. می تواند ناگهان حذف یا تغییر کند.
2. URL نسبی:
پیوندهایی به تصویری که در وب سایت میزبانی می شود. در اینجا ، URL شامل نام دامنه نیست.
اگر URL بدون بریدگی شروع شود ، نسبت به صفحه فعلی خواهد بود. مثال: src = “img_girl.jpg”.
اگر URL با بریدگی آغاز شود ، نسبت به دامنه خواهد بود. مثال:src = “/ images / img_girl.jpg”.
نکته: تقریباً همیشه بهتر است از URL های نسبی استفاده کنید. در صورت تغییر دامنه ، آنها از بین نمی روند.
ویژگی های عرض و ارتفاع
برچسب <img> همچنین باید دارای مشخصه های عرض و ارتفاع باشد ، که عرض و ارتفاع تصویر (در پیکسل) را مشخص می کند:
مثال:
|
1 |
<img src="فایل تصویر.jpg" عرض="500" ارتفاع="600"> |
|
1 |
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream"> |
ویژگی alt یا متن جایگزین
ویژگی alt مورد نیاز برای برچسب <img> متنی جایگزین برای یک تصویر را مشخص می کند ، این ویژگی علاوه بر کاربردش در موتورهای جستجو ارتباط دادن یک تصویر با یک عبارت قابل درک، زمانی که به هر دلیل تصویر قابل نمایش نباشد (مثلا آدرس آن اشتباه باشد) این متن جایگزین به جای تصویر نمایش داده می شود.
مثال:
|
1 |
<img src="فایل تصویر.jpg" alt="متن مورد نظر"> |
مثال:
ببینید اگر بخواهیم تصویری را که وجود ندارد نمایش دهیم ، چه اتفاقی می افتد:
|
1 |
<img src="فایل تصویر.jpg" alt="متن مورد نظر"> |
ویژگی Style
از ویژگی سبک(Style) برای افزودن سبک به یک عنصر مانند رنگ ، قلم ، اندازه و موارد دیگر استفاده می شود.
مثال:
|
1 |
<p style="color:red;">این یک پاراگراف قرمز است.</p> |
صفت زبان
برای اعلام زبان صفحه وب ، همیشه باید ویژگی lang را درون برچسب <html> قرار دهید. این به منظور کمک به موتورهای جستجو و مرورگرها است.
مثال زیر فارسی را به عنوان زبان مشخص می کند:
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html زبان="fa"> <body> ... </body> </html> |
کدهای کشور همچنین می توانند به کد زبان در ویژگی lang اضافه شوند. بنابراین ، دو نویسه اول زبان صفحه HTML را تعریف می کنند ، و دو نویسه آخر کشور را تعریف می کنند.
مثال زیر انگلیسی را به عنوان زبان و ایالات متحده را به عنوان کشور مشخص می کند:
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html زبان="en-US"> <body> ... </body> </html> |
ویژگی عنوان
ویژگی عنوان، برخی اطلاعات اضافی در مورد یک عنصر را تعریف می کند.
اگر نشانه گر ماوس خود را روی متن پاراگراف ببرید و نگه دارید، مقدار ویژگی عنوان (title) را به صورت یک کادر راهنما در کنار نشانه گر ماوس خود مشاهده خواهید کرد.مانند مثالی که در زیر آمده است:(من یک راهنما هستم)
هنگامی که روی عنصر قرار می گیرید ، مقدار ویژگی عنوان، به عنوان یک راهنما نمایش داده می شود:
|
1 |
<p title="من یک راهنما هستم">این یک پاراگراف است.</p> |
ما پیشنهاد می کنیم: همیشه از کلمات کوچک در تگ ها استفاده کنید
استاندارد HTML نیازی به نام ویژگی های کوچک ندارد.
ویژگی عنوان (و همه ویژگی های دیگر) را می توان با بزرگ یا کوچک مانند title یا TITLE نوشت.
با این حال ، W3C ویژگی های کوچک را در HTML توصیه می کند و برای انواع سند سختگیرانه تری مانند XHTML ویژگی های کوچک را می طلبد.
ما پیشنهاد می کنیم: همیشه مقادیر ویژگی را نقل قول کنید
استاندارد HTML نیازی به نقل قول در مورد مقادیر ویژگی ندارد.
با این حال ، W3C نقل قولها را در HTML پیشنهاد می کند ، و برای انواع سندهای سختگیرانه تر مانند XHTML نقل قول را پیشنهاد میدهد.
خوب:
|
1 |
<a href="https://upweb.ir/html/">به آموزش HTML ما مراجعه کنید</a> |
بد:
|
1 |
<a href=https://upweb.ir/html/>به آموزش HTML ما مراجعه کنید</a> |
بعضی اوقات مجبورید از نقل قول استفاده کنید. این مثال ویژگی عنوان را به درستی نمایش نمی دهد ، زیرا حاوی یک فاصله است:
مثال:
|
1 |
<p title=درباره آپ وب> |
نقل قول های یک یا دو نفره؟
نقل قول های مضاعف در اطراف مقادیر صفت ، معمول ترین در HTML هستند ، اما می توان از نقل قول های منفرد نیز استفاده کرد.
در برخی شرایط ، هنگامی که مقدار صفت خود شامل دو نقل قول است ، استفاده از نقل قول های منفرد ضروری است:
|
1 |
<p title='محمد "علی" امیر'> |
یا بر عکس:
|
1 |
<p title="محمد 'علی' امیر> |