اتربیوت (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 هستند. همانطور که از معنای این مقادیر معلوم هست می‌توانیم متن خود را در سمت راست، چپ و یا وسط صفحه قرار دهیم.
12 دیدگاه. Leave new
سلام و خدا قوت . تقریبا چقد طول میکشه تا همه قسمت های آموزش رو ضبط و منتشر کنید ؟
سلام وقت شما بخیر،
از همراهی شما بسیار ممنونیم ، احتمالا تا اواسط سال این مورد کامل خواهد شد.
با تشکر.
از مهندس آرزو محرابی و گروه شایسته ابزار وردپرس برای انتشار چنین آموزشی اونهم با چنین شیوه تدریس زیبا و صبورانه ای صمیمانه تشکر می کنم . پایدار و سربلند باشید.
سلام وقت شما بخیر،
از همراهی شما بسیار ممنونیم و خوشحالیم که آموزش ها برایتان مناسب بوده است.
با تشکر.
سلام و درود به تیم ابزار وردپرس و سلامی ویژه خدمت مهندس آرزو محرابی برای وقت و حوصله ای گران را در طبق اخلاص گذاشتند تا ما بتونیم از دانش ایشان به رایگان بهره ببریم و معتقدم هر چه دانش آی تی کشور در سطح بالاتری قرار بگیره در مقابل آن افراد بیشتری در این راه به کسب درآمد میرسند و برای پیشرفت خودشون بفکر توسعه آن میافتند و در این بستر تراکنشهای زیادی پدیدار میشود و بثولی رونق این مسیر به شما برخواهد گشت پس امیدوارم چنین آموزشهایی از رایگان بودن بعضی از آموزشها فکر نکنند کار بیهوده ایست خیر بیهوده نیست . درود بی پایان بر شما و زنده باد ایران
درود بر شما جناب علیشاهی عزیز،
از همراهی شما بسیار ممنونیم و تلاش ما ارایه خدمات جهت ارتقا دانش هموطنان عزیز در حوزه وب می باشد.
باتشکر از شما
سلام وخسته نباشید.
یسوال داشتم خدمتتون
تو تگ html میشه dir و lang و یا چیزهای دیگه کنار هم استفاده کنیم ؟مثل الگوی colour و font و غیره ک میتونیم همزمان با هم استفاده کنیم
سلام بر شما
بله، در تگ HTML می‌توانید ویژگی‌های مختلف را همزمان با هم استفاده کنید، از جمله `dir`، `lang` و سایر ویژگی‌ها.
بطور کلی، هر تگ HTML می‌تواند بیش از یک ویژگی داشته باشد، و شما می‌توانید ویژگی‌ها را با استفاده از فاصله جدا کنید. به عنوان مثال:
تصویر
در این مثال، تگ `
` دارای دو ویژگی `dir` و `lang` است. ویژگی `dir` برای تعیین جهت متن (راست به چپ یا چپ به راست) و ویژگی `lang` برای تعیین زبان متن استفاده شده است. با استفاده از این دو ویژگی، می‌توانید به مرورگر اطلاع دهید که متن مورد نظر چه جهت و زبانی را دارد.
همچنین، در تگ‌های دیگر نیز می‌توانید ویژگی‌ها را همزمان با هم استفاده کنید. البته، برخی از ویژگی‌ها ممکن است برای برخی تگ‌ها معنایی نداشته باشند یا تأثیری نداشته باشند. بنابراین، در استفاده از ویژگی‌ها، به نوع تگ و ویژگی‌های قابل قبول برای آن تگ توجه کنید.
خسته نباشید و خداقوت به خانوم محرابی از آموزش های خوبتون سپاس گزارم
خدا قوت