html attributes-  اتریبیوت های html
html attributes- اتریبیوت های html

اتریبیوت های  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> 

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

 

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

 

 

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با آموزش های بعدی ما همراه باشید.

مقاله قبلی   مقاله بعدی

جدیدترین ویدئوهای آموزشی

در بخش TV باگتو، آموزش های کوتاه و جدید را مشاهده نمایید

0 نظرات

برای ارسال نظر باید وارد حساب کاربری خود شوید
ورود به حساب کاربری ثبت نام

بیش از 50% تخفیف به مناسبت جمعه سیاه
فقط تا پایان امروز