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

( یکشنبه ، 6 خرداد سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه سوم

آموزگار :

آرزو محرابی

اتربیوت (Attribute) به معنای صفت است. یعنی صفت و ویژگی‌هایی را برای تگ ها ایجاد می‌کند. اتربیوت ها به دو دسته‌ی عمومی و غیرعمومی تقسیم می‌شوند که در این جلسه از دوره آموزش HTML , CSS به صورت کامل درباره آن توضیح خواهیم داد. ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

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

( یکشنبه ، 6 خرداد سال 1403 )

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

  • متین نساج
    می 9, 2024 9:20 ب.ظ

    سلام و خدا قوت . تقریبا چقد طول میکشه تا همه قسمت های آموزش رو ضبط و منتشر کنید ؟

  • متین نساج
    می 9, 2024 9:18 ب.ظ

    از مهندس آرزو محرابی و گروه شایسته ابزار وردپرس برای انتشار چنین آموزشی اونهم با چنین شیوه تدریس زیبا و صبورانه ای صمیمانه تشکر می کنم . پایدار و سربلند باشید.

  • مهدی علیشاهی
    ژانویه 18, 2024 11:00 ب.ظ

    سلام و درود به تیم ابزار وردپرس و سلامی ویژه خدمت مهندس آرزو محرابی برای وقت و حوصله ای گران را در طبق اخلاص گذاشتند تا ما بتونیم از دانش ایشان به رایگان بهره ببریم و معتقدم هر چه دانش آی تی کشور در سطح بالاتری قرار بگیره در مقابل آن افراد بیشتری در این راه به کسب درآمد میرسند و برای پیشرفت خودشون بفکر توسعه آن میافتند و در این بستر تراکنشهای زیادی پدیدار میشود و بثولی رونق این مسیر به شما برخواهد گشت پس امیدوارم چنین آموزشهایی از رایگان بودن بعضی از آموزشها فکر نکنند کار بیهوده ایست خیر بیهوده نیست . درود بی پایان بر شما و زنده باد ایران

  • هانیه علیزاده
    می 28, 2023 6:17 ب.ظ

    سلام وخسته نباشید.
    یسوال داشتم خدمتتون
    تو تگ html میشه dir و lang و یا چیزهای دیگه کنار هم استفاده کنیم ؟مثل الگوی colour و font و غیره ک میتونیم همزمان با هم استفاده کنیم

    • علی حیدری
      می 29, 2023 11:40 ق.ظ

      سلام بر شما

      بله، در تگ HTML می‌توانید ویژگی‌های مختلف را همزمان با هم استفاده کنید، از جمله `dir`، `lang` و سایر ویژگی‌ها.

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

      تصویر

      در این مثال، تگ `

      ` دارای دو ویژگی `dir` و `lang` است. ویژگی `dir` برای تعیین جهت متن (راست به چپ یا چپ به راست) و ویژگی `lang` برای تعیین زبان متن استفاده شده است. با استفاده از این دو ویژگی، می‌توانید به مرورگر اطلاع دهید که متن مورد نظر چه جهت و زبانی را دارد.

      همچنین، در تگ‌های دیگر نیز می‌توانید ویژگی‌ها را همزمان با هم استفاده کنید. البته، برخی از ویژگی‌ها ممکن است برای برخی تگ‌ها معنایی نداشته باشند یا تأثیری نداشته باشند. بنابراین، در استفاده از ویژگی‌ها، به نوع تگ و ویژگی‌های قابل قبول برای آن تگ توجه کنید.

      • هانیه علیزاده
        می 29, 2023 1:45 ب.ظ

        ممنون از پاسخگوییتون.یسوال دیگه.من عملکرد هد و متوجه نشدم.هد دقیقا چکار میکنه؟وقتی رنگ و…تو بادی اعمال میکنم خروجی دارم.سعی کردم استایل تو هد اعمال کنم تا جایگاهشو متوجه شم اما خروجی نمیادو اینکه تگ hr فقط خط میندازه یا صفحرو هم جدا میکنه.اگه بخوام چندین صفحه داشته باشم چطوری صفحات و جدا کنم؟.
        اکه تو جلسات دیگه توضیح داده میشه ک اونارو میبینم اگه نه ممنون میشم راهنمایی کنید.

        • علی حیدری
          می 29, 2023 4:10 ب.ظ

          وقت شما بخیر
          لطفاً ادامه آموزش ها را مشاهده نمایید ، در نهایت اگر سوالی خارج از درس بود که آموزش نشده بود ، می توانید در گوگل دوره های پیشرفته تر را مشاهده نمایید. دوره ای که قرار گرفته است ، دوره مقدماتی است.
          عنصر در HTML مسئولیت هایی مانند تنظیم مشخصات صفحه، لینک کردن به فایل های خارجی مانند فایل های CSS و JavaScript و غیره را بر عهده دارد. به عبارت دیگر، عنصری نویسنده می تواند در آن برخی از مشخصات ضروری ، مانند عنوان صفحه، شرح ، لینک های هد ، اسکریپت ها، متا تگ ها و غیره قرار دهد تا ظاهر و عملکرد صفحه را بهبود بخشد.

  • حامد علیخانی
    می 27, 2023 2:36 ب.ظ

    خسته نباشید و خداقوت به خانوم محرابی از آموزش های خوبتون سپاس گزارم

  • خدا قوت

فهرست