ویژگی در HTML

همه المان های HTML می توانند ویژگی هایی داشته باشند.
ویژگی ها اطلاعات اضافی را برای المان های HTML فراهم می کنند.
ویژگی ها همیشه در تگ آغازین تعریف می شوند.
ویژگی ها معمولا به صورت یک جفت نام-مقدار (name/value) تعریف می شوند. مثل: name = "value"

ویژگی href در HTML

لینک های HTML توسط تگ <a> تعریف می شوند. آدرس لینک در ویژگی href تعریف می شود.

<a href="https://www.w3schools.com">Visit W3Schools</a>

در بخش آموزش لینک در HTML اطلاعات بیشتری راجع به لینک ها به دست خواهید آورد.

ویژگی src در HTML

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

<img src="img_girl.jpg">

دو روش برای اختصاص دادن URL به ویژگی src وجود دارد:

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

src="https://webtml.ir/images/img_girl.jpg"

نکته: عکس های خارجی ممکن است تحت قوانین کپی رایت باشند. اگر شما اجازه استفاده از آن ها را نداشته باشید؛ ممکن است قوانین کپی رایت را نقض کنید (البته در ایران قوانین کپی رایت اجرا نمی شوند). همچنین شما بر روی تصاویر خارجی کنترل ندارید و ممکن است تغییر کنند یا حذف شوند.

URL نسبی: لینک دادن به عکس هایی که بر روی وب سایت شما میزبانی می شوند. در این صورت URL شامل آدرس دامنه نمی باشد. اگر URL بدون علامت اسلش ( / ) شروع شود نسبت به صفحه فعلی خواهد بود. مثال: src="img_girl.jpg". اگر URL با یک اسلش ( / ) شروع شود نسبت به دامنه خواهد بود. مثال: src="/images/img_girl.jpg".

نکته: بهتر است همیشه از URL های نسبی استفاده کنید. در این صورت اگر دامنه عوض شود تصاویر درست نمایش داده می شوند.

ویژگی های عرض (width) و ارتفاع (height) در HTML

تگ <img> می تواند دارای ویژگی های width و height باشد. که عرض و ارتفاع تصویر را به پیکسل مشخص می کنند.

<img src="img_girl.jpg" width="500" height="600">

ویژگی alt در HTML

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

<img src="img_girl.jpg" alt="Girl with a jacket">

نتیجه:

در بخش آموزش تصاویر اطلاعات بیشتری کسب خواهید کرد.

ویژگی style در HTML

از ویژگی style برای فرمت دهی المان از قبیل: رنگ، فونت، اندازه و … استفاده می شود.

<p style="color:red;">This is a red paragraph.</p>

در بخش آموزش فرمت بندی اطلاعات بیشتری کسب خواهید کرد.

ویژگی lang در HTML

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

مثال زیر انگلیسی را به عنوان زبان تعریف می کند:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

می توان کد کشور را نیز به کد زبان اضافه کرد. به طوری که دو حرف اول زبان صفحه وب را مشخص می کنند و دو حرف آخر کشور را مشخص می کنند.

مثال زیر انگلیسی را به عنوان زبان و آمریکا را به عنوان کشور تعریف می کند:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

می توانید لیست کامل کد زبان ها را از لینک مرجع کدهای زبان HTML مشاهده کنید.

ویژگی title در HTML

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

مقدار ویژگی tilte هنگامی که موس بر روی المان قرار گیرد به صورت tooltip نمایش داده می شود.

<p title="I'm a tooltip">This is a paragraph.</p>

پیشنهاد می کنیم ویژگی ها را همیشه با حروف کوچک بنویسد

در استاندارد HTML نوشتن ویژگی ها با حروف کوچک الزامی نیست.

ویژگی title و همه ویژگی های دیگر را می توان با حروف کوچک یا حروف بزرگ نوشت. مثل title یا TITLE.

اگرچه W3C نوشتن ویژگی ها با حروف کوچک را پیشنهاد می کند. در اسناد سخت گیرانه تر مثل XHTML نوشتن ویژگی ها با حروف کوچک را مطالبه می کند.

در webtml ما پیشنهاد می کنیم ویژگی ها را همیشه با حروف کوچک بنویسید.

پیشنهاد می کنیم مقدار ویژگی ها را همیشه درون کوتیشن (“”) بنویسد

در استاندارد HTML نوشتن مقدار ویژگی ها درون کوتیشن اجباری نیست.

اگرچه W3C نوشتن کوتیشن را پیشنهاد می کند و در اسناد سخت گیرانه تر مثل XHTML نوشتن کوتیشن را مطالبه می کند.

خوب:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

بد:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

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

<p title=About W3Schools>

در webtml ما همیشه مقادیر ویژگی ها را درون کوتیشن می نویسیم.

تک کوتیشن یا جفت کوتیشن؟

در HTML بیشتر از جفت کوتیشن استفاده می شود، اما تک کوتیشن را نیز می توان به کار برد.

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

<p title='John "ShotGun" Nelson'>

یا برعکس:

<p title="John 'ShotGun' Nelson">

خلاصه ی فصل

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