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> 
    
    

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

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

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

    اطلاعات نویسنده
    • نویسنده: روشن احمدی

    ارسال دیدگاه

    برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید


    دیدگاه کاربران