فهرست مقاله [نمایش]

اتریبیوت های HTML کلمات ویژه ای هستند که اطلاعات اضافی در مورد عناصر HTML ارائه می دهند. هر عنصر یا تگ می تواند ویژگی هایی داشته باشد، که رفتار آن عنصر را تعریف می کند. اتریبیوت ها باید همیشه با تگ شروع اعمال شوند همچنین باید همیشه با نام و ارزش یا همان value آن اعمال شود. نام و ارزش صفات حساس به بزرگ وکوچیک بودن حروف هستند ، بنابراین موسسه W3C توصیه می کند که با حروف کوچک نوشته شوند. می توانید برای یک عنصر HTML چندین ویژگی داشته باشید ، اما باید فضای لازم را بین دو ویژگی ا را ایجاد کنید.

به وسیله ی صفت ها در HTML می‌توانیم ویژگی ها و تنظیمات خاصی را به تگ های HTML اعمال نماییم و کنترل بیشتری بر روی تگ های HTML داشته باشیم از این رو صفت ها یکی از مهم ترین و اصلی ترین بخش ها در HTML هستند.

ساختار تگ هایی که اتریبیوت دارند به این صورت نوشته می شود.

<element attribute_name="value">content</element>

مثال:

<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body>  
    <h1> This is Style attribute</h1>  
   <p style="height: 50px; color: blue">It will add style property in element</p>  
    <p style="color: red">It will change the color of content</p>  
</body>  
</html>

خروجی را با هم ببینیم

This is Style attribute

It will add style property in element

It will change the color of content

توضیح مثال بالا:

در جمله بالا ، در تگ پاراگراف از ویژگی style استفاده کرده ایم. این ویژگی برای اعمال ویژگی CSS در هر عنصر HTML استفاده می شود. ارتفاع عنصر پاراگراف 50px و آن را به رنگ آبی تبدیل می کند. در پاراگراف بعدی نیز به همین شکل نوشته ایم با این تفاوت که با اضافه کردن اتریبیوت رنگ تگ p را قرمز کرده ایم.

اتریبیوت title در html

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

در مثال زیر این ویژگی را در تگ پاراگراف و عنوان اعمال می کنیم.

<!DOCTYPE html>  
<html>  
  <head>  
 </head>  
<body>  
<h1 title="This is heading tag">Example of title attribute</h1>   
 <p title="This is paragraph tag"> you will see a description as a tooltip</p>   
    
 </body>  
</html>

وقتی در مرورگر آن را باز کنید و روی هر کدام از عناصر کلیک کنید توضیحاتی را که در مقدار اتریبیوت نوشته اید را نمایش می دهد.

html-title-attribute

اتریبیوت href در html

توضیحات: ویژگی href ویژگی اصلی تگ <a>است. این ویژگی آدرس لینک را مشخص می کند. اتریبیوت href باعث می شود لینک در سند html ایجاد شود و اگر این مقدار خالی باشد ، در همان صفحه باقی می مانید و به صفحه بعد انتقال داده نمی شوید.

نوشتن اتربیوت href به دو صورت زیر درست است شما می توانید هم quotes یا double quotes (")استفاده کنید.

<a href="https://bugeto.net/blog/webprograming-html/html-attributes">A link to HTML.</a>  
<a href='https://bugeto.net/blog/webprograming-html/html-attributes'>A link to HTML.</a>

در ورژن html 5 شما می توانید نقل قول یا (quotes) را حذف کنید و تگ شما نیز درست باشد.

<a href=https://bugeto.net/blog/webprograming-html/html-attributes>A link to HTML.</a>

<!DOCTYPE html>  
<html>  
  <head>  
 </head>  
<body>  
 
<a href="https://bugeto.net/blog/webprograming-html/html-attributes">This is a link</a>   
</body>  
</html>

خروجی را با هم ببینیم.

This is a link

در صفحه مرورگر به این صورت نمایش داده می شود

href-html-attribte

اتریبیوت src

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

<!DOCTYPE html>  
<html>  
  <head>  
 </head>  
<body>  
 <p>  src مثال برای اتریبیوت  </p>   
<img src="image/tulips.jpg"  height="100" width="300">   
  
</body>  
</html>

src با آموزش های بعدی ما همراه باشید.