مفهوم Attribute ها در HTML چیست
تعریف attribute
یک مشخصه (attribute) برای تعریف ویژگی های یک عنصر HTML استفاده می شود و داخل “تگ باز کننده” عنصر قرار می گیرد. تمام صفات (attribute) از دو بخش تشکیل شده اند – نام (name) و ارزش (value)
شما می توانید برای عنصر یا property خود یک نام (name) تنظیم کنید. به عنوان مثال، عنصر <p> در مثال دارای attribute یا صفتی است که نام آن align است، که شما می توانید از آن برای هم ترازیِ پاراگرافِ خود در صفحه استفاده کنید.
- ارزش (value) چیزی است که مقدار property را تعیین می کند و همیشه در علامت نقل قول یا quotation قرار می گیرد. مثال زیر ، سه مقدار برای attribute یا ویژگی align نشان می دهد: left , center , right .
- نام (name) و مقدار(value) مشخصه ها یا attributeها به حروف کوچک و بزرگ حساس نیستند (case-insensitive).
با این حال، کنسرسیوم جهانی وب ( w3cیا the World Wide Web Consortium ) توصیه می کند مقادیر خصوصیات یا attribute ها در HTML 4 به صورت حروف کوچک نوشته شوند.
مثال :
<!DOCTYPE html> <html> <head> <title>Align Attribute Example</title> </head> <body> <p align = "left">This is left aligned</p> <p align = "center">This is center aligned</p> <p align = "right">This is right aligned</p> </body> </html>
کد فوق نتیجه زیر را تولید می کند –
ویژگی های اصلی
چهار ویژگی اصلی که می توانند در بسیاری از عناصر HTML استفاده شوند (البته نه همه) –
- شناسه یا id
- عنوان یا title
- کلاس یا class
- سبک یا style
مشخصه شناسه (Id Attribute)
آموزش ساخت سایت یکی از مباحث مهم در دنیای تکنولوژی امروز به شمار می رود . Attribute یا ویژگی id می تواند برای یک تگ HTML مورد استفاده قرار گیرد که باعث می شود آن تگ را منحصر به فرد کند ، تا هر عنصر در یک صفحه HTML براحتی قابل شناسایی باشد. دو دلیل اصلی وجود دارد که شما ممکن است بخواهید از ویژگی (attribute) شناسه یا id در یک عنصر استفاده کنید –
- اگر یک عنصر دارای attribute یا مشخصه منحصربفردی به نام id باشد ، براحتی می توان در سند Html به آن عنصر و محتوایش دسترسی داشت.
- اگر دو عنصر با یک نام در یک صفحه وب (یا style sheet) داشته باشید، می توانید از ویژگی id برای تشخیص بین عناصرِ هم نام استفاده کنید.
در آموزش های آتی بطور جداگانه ، در مورد Style Sheet بحث خواهیم کرد. در حال حاضر، اجازه دهید از ویژگی id برای تشخیص دو عنصر پاراگراف استفاده کنیم.
مثال :
<p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p>
مشخصه عنوان (title Attribute)
به وسیله ی ویژگی عنوان یا title می توان یک عنوانِ پیشنهادی برای هر عنصر، ارائه داد. Syntax ی که برای تعریف attribute یا ویژگی عنوان (title) برای هر عنصر در نظر گرفته شده است بسیار شبیه به syntax ی هست که برای تعریف ویژگی id استفاده می شود-
رفتار این ویژگی (attribute) به عنصری که این ویژگی را دارا می باشد بستگی دارد. اغلب اوقات وقتی مکان نما بر روی عنصر قرار می گیرد، مقدار این ویژگی یا attribute در قالب tooltip یا هنگامی که عنصری در حال بارگذاری (loading) هست نمایش داده می شود.
مثال :
<!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <h3 title = "Hello HTML!">Titled Heading Tag Example</h3> </body> </html>
کد فوق نتیجه زیر را تولید می کند –
اکنون سعی کنید مکان نما خود را بر روی عبارت ” Titled Heading Tag Example” قرار دهید و شما خواهید دید که عنوان یا Title ی که برای عنصر <h3> خود تعریف نموده اید بصورت یک tooltip نمایش داده خواهد شد.
ویژگی کلاس (class Attribute)
ویژگی class برای ارتباط یک عنصر با یک صفحه Style استفاده می شود و کلاس عنصر را مشخص می کند.در آموزش های آتی شما در مورد استفاده از خصیصه class زمانی که Cascading Style Sheet : CSSرا یاد بگیرید، بیشتر خواهید آموخت. بنابراین اکنون می توانید از این مطلب بصورت گذرا رد شوید.
مقدار attribute یا ویژگی class می تواند یک لیستی از نام های کلاس باشد که بوسیله ی space یا کاراکتر فضای خالی از هم جدا شده اند. به عنوان مثال –
class = "className1 className2 className3"
ویژگی style (style Attribute)
Attribute یا ویژگی style به شما اجازه می دهد تا دستورات Cascading Style Sheet : CSS را درون عنصر بیان کنید.
<!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style = "font-family:arial; color:#FF0000;">Some text...</p> </body> </html>
در این آموزش، ما قصد نداریم CSS را یاد بگیریم، بنابراین خود را درگیر آن نمی کنیم.
بلکه ما در این آموزش، می خواهیم درمورد attributesها یا ویژگی های HTML و چگونگی استفاده از آنها در هنگام قالب بندی (formatting) محتوا بیاموزیم.
درونی کردن ویژگی ها (Internationalization Attributes)
سه ویژگی درونی یا internationalization وجود دارد که برای اکثر (هر چند نه همه) عناصر XHTML در دسترس هستند.
- dir
- lang
- xml:lang
ویژگی dir (dir Attribute)
Attribute یا ویژگی dir اجازه می دهد تا شما جهت (direction) متن موجود در مرورگر را تعیین نمایید. ویژگی dir می تواند یکی از دو مقدار زیر را داشته باشد، همانطور که در جدول زیر می بینید –
<html dir = "rtl"> <head> <title>Display Directions</title> </head> <body> This is how IE 5 renders right-to-left directed text. </body> </html>
هنگامی که ویژگی dir در تگ <html> استفاده می شود، مشخص می کند که متن، چگونه در کل سند نمایش داده شود. هنگامی که در تگ دیگری از این attribute استفاده می کنید، جهت متن را فقط برای محتوای آن تگ کنترل می کنید.
مشخصه lang (lang Attribute)
ویژگی lang به شما اجازه می دهد که زبان اصلی مورد استفاده در یک سند را تعیین کنید، اما این ویژگی در HTML فقط برای سازگاری با نسخه های قبلی HTML نگهداری می شود. این خصیصه با ویژگی xml: lang در اسناد XHTML جدید جایگزین شده است.
مقادیر مشخصه lang عبارتند از کدهای دو کاراکتری استاندارد ISO-639.
مثال :
<!DOCTYPE html> <html lang = "en"> <head> <title>English Language Page</title> </head> <body> This page is using English Language </body> </html>
کد فوق نتیجه زیر را تولید می کند –
This page is using English Language
مشخصه xml: lang
ویژگی xml: lang جایگزین XHTML برای ویژگی lang است. مقدار ویژگی xml: lang باید یک کد کشور ISO-639 باشد که در بخش قبلی ذکر شده است.