100% کامل شده تا
به‌روزرسانی شده در: ۱۶ روز پیش

ویژگی ها (Attributes) در HTML

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

ویژگی‌ها اطلاعات اضافی در مورد عنصرهای HTML فراهم می‌کنند.[۱]

ویژگی های HTML

  • همهٔ عناصر می‌توانند ویژگی هایی داشته باشند
  • ویژگی‌ها در مورد یک عنصر اطلاعات اضافی فراهم می‌کنند
  • ویژگی‌ها همیشه در تگ آغازی تعیین می‌شوند
  • ویژگی‌ها معمولاً بصورت زوج‌های نام / مقدار هستند مانند: name="value"

ویژگی href

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://wikicod.ir">Visit WikiCod</a>

</body>
</html>

Responsive demo.svg

در بخش آموزش پیوندهای HTML، مطالب بیشتری دربارهٔ لینک‌ها در HTML خواهید آموخت.

ویژگی src

تصاویر در HTML با تگ <img> تعریف می‌شوند. نام فایل منبع تصویر در ویژگی src تعیین می‌شود:

مثال

<img src="img_girl.jpg">

مثال

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

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

</body>
</html>


برای تعیین URL در ویژگی src، دو روش وجود دارد:

  • URL مطلق - پیوند به یک تصویر خارجی که در وب سایت دیگری میزبانی می‌شود. مثال:
    • src="https://www.w3schools.com/images/img_girl.jpg
یادداشت‌ها: ممکن است تصاویر خارجی تحت قانون حق چاپ باشند. اگر اجازه استفاده از آن را نگرفتید، ممکن است قوانین کپی رایت را نقض کنید. علاوه بر این، شما نمی‌توانید تصاویر خارجی را کنترل کنید. آنها می‌تواند ناگهان حذف شوند یا تغییر کنند.
  • URL نسبی - پیوند به تصویری که در وب سایت میزبانی می‌شود.
    • در اینجا، URL شامل نام دامنه نیست. اگر URL بدون / (slash)شروع شود، صفحهٔ فعلی را نشان خواهد داد. مثال: src="img_girl.jpg". اگر URL با / (slash) آغاز شود، نسبت به دامنه خواهد بود. مثال: src="/images/img_girl.jpg"
نکته: تقریباً همیشه بهتر است از URLهای نسبی استفاده کنید. در صورت تغییر دامنه، آنها از بین نمی‌روند.

ویژگی های عرض و ارتفاع (The width and height Attributes)

تصویرهای HTML ویژگی‌های width (به فارسی: عرض) و height (به فارسی: ارتفاع) هم دارند که عرض و ارتفاع تصویر (در پیکسل) را مشخص می‌کند:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Width and Height Attributes</h2>

<p>The width and height attributes of the img tag, defines the width and height of the image:</p>

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

</body>
</html>

ویژگی alt

اگر تصویری را به دلایلی نتوان نمایش داد، ویژگی alt متن جایگزین آن برای استفاده را مشخص می‌کند. این می‌تواند به دلیل اتصال کند، یا خطا در ویژگی src باشد، یا اگر کاربر از صفحه خوان (screen raders) استفاده کند.

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

</body>
</html>


مثال

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

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

مثال

<!DOCTYPE html>
<html>
<body>

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

<p>If we try to display an image that does not exist, the value of the alt attribute will be displayed instead. </p>

</body>
</html>

در مورد تصاویر در بخش تصاویر در HTML بیشتر خواهید آموخت.


ویژگی style

ویژگی style برای مشخص کردن طراحی (styling) یک عنصر مانند رنگ، خط، سایز و … به کار می‌رود.

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>

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

</body>
</html>

Responsive demo.svg

در مورد استایل‌ها در این آموزش بیشتر خواهید آموخت.

ویژگی lang

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

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

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


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

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

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

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

ویژگی title

در این مثال یک ویژگی title به عنصر <p> اضافه شده‌است.

ویژگی title برخی اطلاعات اضافی در مورد یک عنصر (element)را تعریف می‌کند.

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>

</body>
</html>

Responsive demo.svg

پیشنهاد ما: از ویژگی های با حروف کوچک (Lowercase) استفاده کنید

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

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

W3C حروف کوچک را در HTML پیشنهاد می‌کند و برای انواع سند سخت‌تر مانند X HTML حروف کوچک را درخواست می‌کند.

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

پیشنهاد ما: مقادیر ویژگی ها را نقل قول کنید

در استاندارد HTML نیازی به قرار دادن مقادیر در نقل قول " " نیست.

با این حال، W3C نقل قول‌ها " " را در HTML پیشنهاد می‌کند، و برای انواع سندهای سختگیرانه‌تر مانند XHTML نیز نقل قول خواسته است.

خوب:

<a href="https://wikicod.ir/html/">Visit our HTML tutorial</a>


بد:

<a href=https://wikicod.ir/html/>Visit our HTML tutorial</a>


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

مثال

<p title=About WikiCod>

مثال

<!DOCTYPE html>
<html>
<body>

<h1>About WikiCod</h1>

<p title=About WikiCod>
You cannot omit quotes around an attribute value 
if the value contains spaces.
</p>

<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from the title.
</b></p>

</body>
</html>

Responsive demo.svg

در ویکی‌کد، ما همیشه از نقل قول در اطراف مقادیر ویژگی استفاده می‌کنیم.

نقل قول های تکی ' ' یا دوتایی " "؟ (Single or Double Quotes?)

در HTML نقل قول دوتایی " " برای مقدار ویژگی رایج‌ترین است اما نقل قول تکی ' ' را هم می‌توان استفاده کرد.

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

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


یا برعکس:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>

<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>

</body>
</html>

Responsive demo.svg

خلاصه بخش (Chapter Summary)

  • همهٔ عنصر های HTML می‌توانند ویژگی هایی داشته باشند
  • ویژگی href از a، URL صفحه ای که پیوند به آن ارجاع می‌شود را مشخص می‌کند
  • ویژگی src از <img>، مسیر تصویری را که باید نمایش داده شود را مشخص می‌کند
  • ویژگی‌های width و height اطلاعات اندازه تصاویر را فراهم می‌کند
  • ویژگی alt از <img>، متن جایگزین برای یک تصویر را فراهم می‌کند
  • ویژگی style برای مشخص کردن طراحی (styling) یک عنصر مانند رنگ، خط، سایز و … به کار می‌رود
  • ویژگی lang از تگ <html>، زبان صفحه وب را اعلام می‌کند
  • ویژگی title اطلاعات “tool-tip” اضافی فراهم می‌کند
  • ویژگی title برخی اطلاعات اضافی در مورد یک عنصر را تعریف می‌کند

مرجع ویژگی های HTML

لیست کامل ویژگی‌ها برای هر عنصر HTML در مرجع ویژگی HTML ما آمده‌است.


منابع آموزشی

  1. ↑ w3schools.com: HTML Attributes





برگرفته از «https://wikicod.ir/w/index.php?title=HTML:Tutorial/ویژگی_ها&oldid=24136»