نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 4876
تاریخ بروزرسانی ۷ اردیبهشت ۱۴۰۱

معرفی Attribute ها در HTML و کاربردشان

معرفی اتریبیوت های html

Html به ما قدرت قرار دادن متن، تصویر، فیلم، لینک، استفاده از استایل دهی css و امکانات فراوان دیگری را با استفاده از تگ هایی که دارای ویژگی های مختلفی هستند می دهد. پس از یادگیری تگ های html لازم است که با Attribute ها در HTML و ویژگی های تک تک آن ها آشنا شوید.در این بخش از آموزش می خواهم برخی ویژگی ها و attribute های html را آموزش دهیم. با تیم طراحی سایت اصفهان وب یار همراه باشید.

اتریبیوت چیست ؟

تگ های html می تواند ویژگی هایی داشته باشد که توضیحات بیشتری در رابطه با آن تگ بدهد یا حالت و موقعیت آن تگ را در خروجی به ما نشان دهد که به آن Attribute گفته می شود .

اتریبیوت در کجا استفاده می شود؟

یک attribute برای تعریف ویژگی ها و خصوصیات زبان html و در بین تگ ها استفاده می شود.

نحوه نمایش attribute های html چگونه است؟

معرفی attribute های مختلف html

ساختار کلی Attribute به صورت زیر می باشد که در آن name نام ویژگی و value مقدار ویژگی می باشد که باید داخل دابل کوتیشن قرار بگیرد.

“value” Name:

در زیر مثالی برای تگ lang در html5 زده شده که نوع زبان را مشخص می کند. lang مخفف کلمه language می باشد که به معنی زبان می باشد. fa برای مشخص کردن نوع زبان است که در اینجا فارسی می باشد و IR نوع کشور را مشخص کرده که در اینجا ایران است. می بینید که بین این دو کلمه از علامت – استفاده شده که ضروری است.

<!DOCTYPE html>
<html lang=”fa-IR”>
<head>
</head>
<body>
تگ های مورد نظر برای نمایش در صفحه
</body>
</html>

انواع attribute در  html:

به طور کلی html دارای attribute زیادی می باشد که در زیر به توضیح مهمترین آن ها پرداختیم.

Alt : این ویژگی متن جایگزین برای تصاویر مشخص می کند که اگر عکس مشاهده نشد این متن به جای آن نمایش داده شود.
Style : این ویژگی برای استایل دهی به وسیله css می باشد
Href: این گزینه برای آدرس دادن لینک ها استفاده می شود این که پس از کلیک بر روی لینک به کجا برود.
Src : برای آدرس دادن به تصاویر و چندرسانه ها استفاده می شود مثلا در تک img بعد از این کلمه src را نوشته و بعد مکان فایل مورد نظر را وارد می کنیم.
Title : هنگامی که این گزینه تعریف شود پس از رفتن روی قسمت مورد نظر متن نوشته شده در title به ما نشان داده می شود.
Value: مشخص می کند چه مقداری برای ورود در قسمت input باشد.
Id: برای مشخص کردن نامی شخصی برای یک تگ که به وسیله آن در css به آن استایل می دهیم.
Class: برای مشخص کردن نامی برای یک سری از تگ ها که می خواهیم به صورت گروهی در css به آن ها استایل بدهیم.
Disabled: این گزینه المان ورود input را غیر فعال می کند.
Placeholder: این ویژگی برای نوشته به صورت کمرنگ در inbox می باشد که اگر کاربر متنی وارد کند دیگر نمایش داده نمی شود.
Width: عرض عنصر را مشخص میکند.
Height: طول عنصر را مشخص می کند.
lang: مشخص کننده زبان می باشد مانند مثال بالا.
Translate: مشخص کننده ترجه شدن یا نشدن آن عنصر می باشد که با مقدار yes یا no مشخص می شود.
Hidden: این ویژگی برای مخفی کردن عناصر به کار میرود.
Contenteditable: این ویژگی مشخص می کند که محتوای عناصر تغییر کند یا خیر.
Contextmenu: با راست کلیک بر روی عناصر این منو ظاهر می شود درصورتی که در قسمت id این گزینه مشخص شود.
Data: برای ذخیره ی داده های سفارشی و خصوصی در صفحه یا برنامه استفاده می شود.
Spellcheck: برای اینکه مشخص کنیم دستور زبان بررسی شود یا خیر از این ویژگی استفاده می شود.
Tabindex: ترتیب تب بندی ها را مشخص می کند.
Checked: مشخص می کند که در حالت پیشفرض این گزینه انتخاب شده باشد یا خیر.

اگر به طراحی صفحات وب علاقه دارید پایه و اساس همه ی سایت ها زبان html است که باید با همه ی تگ ها و attribute آشنا باشید برای اطلاع بیشتر و یادگیری کامل طراحی سایت می توانید در کلاس آموزشی طراحی سایت اصفهان شرکت کنید همچنین می توانید در اینستاگرام وب یار همراه ما باشید.

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.