آشنایی با اتریبیوت (Attribute) و نمونه های آن

اتربیوت (Attribute) به معنای صفت است. یعنی صفت و ویژگی‌هایی را برای تگ ها ایجاد می‌کند. به عنوان مثال وقتی ما از یک عنصری مثل P استفاده می‌کنیم و متنی را به عنوان پاراگراف می‌نویسیم، نوشته ما بسیار ساده خواهد بود. در این حالت اتربیوت هایی وجود دارند که باعث می شوند ویژگی‌های ظاهری مثل رنگ متن و اندازه و … پاراگراف تغییر کند. حال به سراغ انواع اتربیوت ها و معرفی برخی از آن ها می‌رویم.

انواع اتریبیوت ها (Attributes)

اتربیوت ها به دو دسته‌ی عمومی و غیرعمومی تقسیم می‌شوند. به این معنا است که برخی از آن‌ها را می‌توانیم برای همه ی عناصر به کار ببریم که به آن‌ها عمومی می‌گویند. برخی از اتربیوت ها را فقط می‌توانیم برای تگ های خاصی استفاده کنیم. به عنوان مثال اتربیوت src یک اتربیوت خاص است و برای آدرس دهی در تگ مربوط به تصاویر استفاده می‌شود. اتربیوت های زیادی وجود دارد که هر کدام کاربرد متفاوتی دارد. برخی از اتربیوت های مهم عبارتند از id , class , title , href , src , style  و…  که به چند تا از آن ها اشاره می‌کنیم.

اتربیوت Dir برای راست چین و یا چپ چین کردن متن است. وقتی متنی را درون سند خود بنویسید، در حالت پیش فرض متن شما از چپ به راست خواهد بود که می‌توانید با استفاده از این ویژگی جهت متن خود را تغییر دهید. هر اتربیوت می‌تواند مقادیر مختلفی را بگیرد. اتربیوت Dir هم دو مقدار مختلف می‌گیرد. Ltr یعنی از چپ به راست و Rtl یعنی از راست به چپ مقادیری هستند که این اتربیوت می‌گیرد.

ساختار اتریبیوت ها

ساختار کلی اتربیوت ها به صورت زیر است:

attribute=””

اتربیوت ها در تگ های زوج، درون تگ آغازین قرار می‌گیرند. این تگ را می‌توانید درون تگ هایی مانند تگ P ویا تگ H قرار دهید. به عنوان مثال می‌توانید از اتربیوت Dir به صورت زیر در تگ <html> اسفاده نمایید.

<html dir=”rtl”>

<head>

</head>

<body>

<p>من یک متن با جهت از راست به چپ هستم</p>

</body>

</html>

اتریبیوت Lang و Title

اتربیوت دیگری به نام Lang وجود دارد که برای مشخص کردن زبان سند است. شما باید به مرورگرها و موتورهای جستجو بگویید که برای نوشتن سندتان از چه زبانی استفاده کرده‌اید. معمولا این اتربیوت را در تگ <html> قرار می‌دهیم. این اتربیوت هم مقادیر مختلفی از جمله fa-IR و en-US و… را دربرمی‌گیرد.

اما اتربیوت Title چه کاری برای ما انجام می دهد؟ این اتربیوت برای تگی که به کار می‌رود Tooltip ایجاد می‌کند. اما Tooltip چیست؟ احتمالا تاکنون در یک سایتی در حین خواندن متون و محتوای آن ماوس خود را روی متنی برده‌اید و مشاهده کرده‌اید  که یک متن توضیحی ظاهر شده است و وقتی ماوس خود را از روی آن متن برداشته‌اید دیگر آن متن را نمایش داده نمی‌شود به این متن که توضیح اضافی را نشان می دهد Tooltip می‌گویند. اگر اتربیوت Title را درون تگ P و یا تگ های مربوط به Heading  قرار دهید، این خاصیت را ایجاد می‌کند. مثال زیر را انجام دهید تا با این موضوع بیشتر آشنا شوید.

<html >

<head>

</head>

<body>

<p title=”من یک توضیح اضافی برای این پاراگراف هستم”>

موس خود را نگه دارید تا متن اضافی را ببینید

</p>

</body>

</html>

اتریبیوت Style

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

Style=”property:value;”

همانطور که می‌بینید ساختار آن با اتربیوت های دیگر کمی متفاوت است. Property به معنای خصوصیت است و مقدارهای مختلفی می‌گیرد و شامل مواردی مانند color، background-color ، font-size، font-family و…  هست که هر کدام از این موارد مقدار متناسب با خود را می‌گیرد. به مثال زیر توجه کنید تا بهتر این موضوع را متوجه شوید.

Style=”color:blue;”

Style=”font-size:60px;background-color:red;”

اتریبیوت Text-Align

آخرین اتربیوتی که می خواهیم در این قسمت به شما بگوییم، اتربیوت text-align است. کار این اتربیوت ترازبندی افقی متن‌ها است. مقادیری که این اتربیوت میگیرد: right، left و center هستند. همانطور که از معنای این مقادیر معلوم هست می‌توانیم متن خود را در سمت راست، چپ و یا وسط صفحه قرار دهیم.