ویژگی ها و صفات HTML

ویژگی های HTML

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

آنچه در این آموزش خواهید آموخت:

لیست ویژگی ها در برچسب های HTML

صفات HTML

همه عناصر HTML می توانند ویژگی داشته باشند
ویژگی ها اطلاعات بیشتری در مورد عناصر ارائه می دهند
ویژگی ها همیشه در برچسب شروع مشخص می شوند

برای آشنایی بیشتر با مفاهیم عناصر HTML میتوانید آموزش زیر را مشاهده نمایید:

عناصر HTML

ویژگی href

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

مثال:

<a href="آدرس سایت مورد نظر">متن مورد نظر</a>

صفت src

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

مثال:

<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> همچنین باید دارای مشخصه های عرض و ارتفاع باشد ، که عرض و ارتفاع تصویر (در پیکسل) را مشخص می کند:

مثال:

<img src="فایل تصویر.jpg" عرض="500" ارتفاع="600">

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">

 

ویژگی alt یا متن جایگزین

ویژگی
alt
مورد نیاز برای برچسب <img> متنی جایگزین برای یک تصویر را مشخص می کند ، این ویژگی علاوه بر کاربردش در موتورهای جستجو ارتباط دادن یک تصویر با یک عبارت قابل درک، زمانی که به هر دلیل تصویر قابل نمایش نباشد (مثلا آدرس آن اشتباه باشد) این متن جایگزین به جای تصویر نمایش داده می شود.

مثال:

<img src="فایل تصویر.jpg" alt="متن مورد نظر">

مثال:

ببینید اگر بخواهیم تصویری را که وجود ندارد نمایش دهیم ، چه اتفاقی می افتد:

<img src="فایل تصویر.jpg" alt="متن مورد نظر">

ویژگی Style

از ویژگی
سبک(Style)
 برای افزودن سبک به یک عنصر مانند رنگ ، قلم ، اندازه و موارد دیگر استفاده می شود.

مثال:

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

صفت زبان

برای اعلام زبان صفحه وب ، همیشه باید ویژگی
lang
را درون برچسب
<html>
قرار دهید. این به منظور کمک به موتورهای جستجو و مرورگرها است.

مثال زیر فارسی را به عنوان زبان مشخص می کند:

<!DOCTYPE html>
<html زبان="fa">
<body>
...
</body>
</html>

کدهای کشور همچنین می توانند به کد زبان در ویژگی
lang
اضافه شوند. بنابراین ، دو نویسه اول زبان صفحه
HTML
را تعریف می کنند ، و دو نویسه آخر کشور را تعریف می کنند.

مثال زیر انگلیسی را به عنوان زبان و ایالات متحده را به عنوان کشور مشخص می کند:

<!DOCTYPE html>
<html زبان="en-US">
<body>
...
</body>
</html>

ویژگی عنوان 

ویژگی عنوان، برخی اطلاعات اضافی در مورد یک عنصر را تعریف می کند.

اگر نشانه گر ماوس خود را روی متن پاراگراف ببرید و نگه دارید، مقدار ویژگی عنوان (title) را به صورت یک کادر راهنما در کنار نشانه گر ماوس خود مشاهده خواهید کرد.مانند مثالی که در زیر آمده است:
(من یک راهنما هستم)

هنگامی که روی عنصر قرار می گیرید ، مقدار ویژگی عنوان، به عنوان یک راهنما نمایش داده می شود:

<p title="من یک راهنما هستم">این یک پاراگراف است.</p>

خوب:

<a href="https://upweb.ir/html/">به آموزش HTML ما مراجعه کنید</a>

بد:

<a href=https://upweb.ir/html/>به آموزش HTML ما مراجعه کنید</a>

بعضی اوقات مجبورید از نقل قول استفاده کنید. این مثال ویژگی عنوان را به درستی نمایش نمی دهد ، زیرا حاوی یک فاصله است:

مثال:

<p title=درباره آپ وب>

نقل قول های یک یا دو نفره؟

نقل قول های مضاعف در اطراف مقادیر صفت ، معمول ترین در HTML هستند ، اما می توان از نقل قول های منفرد نیز استفاده کرد.

در برخی شرایط ، هنگامی که مقدار صفت خود شامل دو نقل قول است ، استفاده از نقل قول های منفرد ضروری است:

<p title='محمد "علی" امیر'>

یا بر عکس

<p title="محمد 'علی' امیر>