آموزش Attributeها در HTML-آموزش HTML

اتریبیوت‌های HTML (attributes)

اتریبیوت‌های HTML اطلاعات اضافی درباره عناصر HTML فراهم می‌کنند.

اتریبیوت‌های HTML

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

اتریبیوت href

تگ < a> یک لینک را تعریف می‌کند. اتریبیوت href url صفحه را به لینک اختصاص می‌دهد:

    


    
This is left aligned
    
This is center aligned

اتریبیوت src

تگ < img> برای اضافه کردن یک عکس به صفحه HTML استفاده می‌شود. اتریبیوت src یک مسیر را به عکس اختصاص می‌دهد تا به نمایش درآید:

    


    
Titled Heading Tag 

دو راه برای اختصاص URL در اتریبیوت src وجود دارد:

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

اتریبیوت‌های طول و عرض

تگ < img> همچنین باید دارای اتریبیوت‌های width و height نیز باشد که به آن طول و عرض (به پیکسل) اختصاص می‌دهند:

    


    
Some 

اتریبیوت alt

اتریبیوت alt به تگ < img> یک متن جایگزین اختصاص می‌دهد تا اگر تصویر به هر دلیلی نمایش داده نشد، این متن نمایش داده شود. این مشکل می‌تواند به علت سرعت پایین اینترنت، و یا ایرادی در اتریبیوت src، یا این باشد که کاربر از screen reader استفاده می‌کند.

    


    This is how IE 5 renders right-to-left directed text.

اتریبیوت style

اتریبیوت style برای اضافه کردن استایل‌ها به یک عنصر استفاده می‌شود، مانند رنگ، فونت، اندازه و غیره

    


    This page is using English Language

اتریبیوت lang

همیشه برای مشخص کردن زبان یک صفحه وب، از اتریبیوت lang در داخل تگ < html> استفاده کنید. این کار به منظور کمک به موتور‌های جستجو و مرورگر‌ها انجام می‌شود.

مثال زیر برای اختصاص زبان انگلیسی است:

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

کد کشور‌ها نیز می‌توانند به کد زبان در اتریبیوت lang اضافه شوند. در نتیجه، دو کاراکتر اول معرف زبان صفحه HTML و دو کاراکتر آخر معرف کشور هستند.

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

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

اتریبیوت title

اتریبیوت title مقداری اطلاعات اضافی درباره یک عنصر تعریف می‌کند.

مقدار موجود در این اتریبیوت به صورت یک tooltip وقتی که موس را روی آن حرکت می‌دهید به نمایش درمی‌آید:

پیشنهادات ما:

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

استاندارد HTML الزامی بر استفاده از حروف کوچک برای اسم اتریبیوت‌ها ندارد. اتریبیوت title (و همه اتریبیوت‌ها) می‌توانند هم به صورت title و هم TITLE نوشته شوند. به هر حال، پیشنهاد ما استفاده از حروف کوچگ برای اتریبیوت‌ها است.

همیشه مقدار اتریبیوت‌ها را کووت کنید

استاندارد HTML الزامی بر کووت کردن مقدار اتریبیوت‌ها ندارد. اما، ما پیشنهاد استفاده کردن از "" را می‌دهیم.

مثال خوب:

Visit our HTML tutorial         
        

مثال بد:

بعضی اوقات، کووت کردن الزامی است. در مثال زیر، مقدار اتریبیوت title به درستی نمایش داده نمی‌شود چراکه داخل خود دارای فاصله است:

کووت سینگل (single) یا دابل (double)؟

کووت دابل رایج‌ترین نوع کووت کردن در HTML است، اما کووت سینگل هم می‌تواند استفاده شود. در برخی شرایط، وقتی خود اتریبیوت کووت دابل دارد، استفاده از کووت سینگل الزامی است:

و بالعکس:

خلاصه سرفصل:

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