خاصیت ها در HTML

خاصیت ها در HTML

همانطور که میدانید، عناصر ، ساختار یک سند HTML را تعیین می کنند و به مرورگر اطلاع میدهند که وب سایت را چگونه به نمایش بگذارد (به عنوان مثال، تگ </ br> به مرورگر اطلاع میدهد که یک شکست خط ایجاد کند ). در برخی از عناصر می توانید اطلاعات بیشتری درباره محتوا به مرورگر ارائه دهید که به این اطلاعات، خاصیت (attribute) گفته میشود . خاصیت یکی دیگر از بخشهای مهم زبان نشانه گذاری HTML است و معمولا از دو بخش نام و  مقدار که با علامت مساوی (=) از یکدیگر جدا می شوند، تشکیل شده است.

خاصیت ها در HTML
خاصیت ها در HTML

 

نام (name) : خاصیتی است که به عنصر اضافه می کنیم. نام خاصیت به بزرگ یا کوچک بودن حروف حساس است.

مقدار (value): چیزی است که به عنوان مقدار خاصیت در نظر میگیریم.برخی از مقدار خاصیت ها، به بزرگ یا کوچک بودن حروف حساس هستند .

به طور کلی یک عنصر از یک تگ باز (شروع) ، یک یا چند خاصیت یا بدون خاصیت، محتوا و یک تگ بسته ( پایان ) تشکیل شده است . ساختار یک عنصر  که دارای یک خاصیت می باشد به صورت زیر است :

خاصیت ها در HTML
خاصیت ها در HTML

خاصیت ها در HTML

خاصیت ها همیشه در تگ شروع قرار میگیرند و بعد از علامت مساوی، جزئیات و مقدار خاصیت نوشته می شود. برای جدا کردن دستورات استایل های مختلف، بعد از هر خاصیت از علامت سمی کالن یا نقطه ویرگول (؛) استفاده میشود.

مثال اول :

 

این مثال در مرورگر به صورت زیر نمایش داده خواهد شد.

e1

میدانیم که تگ <p> در اسناد HTML نشاندهنده پاراگراف است  ، اما در مثال بالا یک خاصیت به تگ اضافه شده ، این خاصیت  ویژه ، style=”background-color:orange” به مرورگر فرمان میدهد که رنگ نارنجی به پس زمینه عنصر <p> اضافه شود . مرورگر می داند که باید پس زمینه را به رنگ نارنجی تغییر دهد چرا که ما برای تنظیم رنگ ،از تگ های استاندارد HTML و خاصیت ها (همراه با کدهای استاندارد CSS (شیوه نامه آبشاری)) استفاده کرده ایم.

 

مقدار یک خاصیت در HTML به صورت عادی، درون علامت کوتیشن یا نقل قول قرار میگیرد . اگر این مقدار از یک کلمه یا یک عدد تشکیل شده باشد، می توانیم آنها را به همان صورتی که هستند به عنوان مقدار وارد کنیم، اما به محض این که دو یا چند رشته از کاراکترها در مقدار قرار بگیرند باید درون علامت نقل قول نوشته شوند. بسیاری از توسعه دهندگان وب ترجیح می دهند برای جلوگیری از اشتباه و منظم بودن کدها همیشه از علامت نقل قول استفاده کنند . با این که HTML درباره استفاده از کوتیشن سختگیر نیست اما در XHTML حتما باید از آنها استفاده کنیم . در مثال زیر این جمله اشتباه است:

 

 در این مثال برای کلاس، مقدار ” foo bar ” در نظر گرفته شده اما ازآنجایی که هیچ علامت نقل قولی این مقدار را احاطه نکرده است ممکن است به این صورت خوانده شود :

 

 

هر تعداد خاصیتی ( نام=مقدار ) که میخواهید در یک عنصر بکار برید ، در صورتی که در آن عنصر قابل اجرا باشند ، با یک فاصله  (space ) از یکدیگر جدا می شوند . مطابق تصویر زیر :

4

 چند خاصیت وجود دارد که فقط می توانند یک مقدار داشته باشند. این خاصیت ها بولین هستند و میتوانیم مقدار آن را فقط با نام خاصیت پر کنیم یا کاملا خالی بگذاریم. به این ترتیب، ۳ نمونه زیر دارای معانی مشابه هستند :

 

 خاصیت ها، اغلب اوقات در تگ هایی مانند تگ body قرار میگیرد .

 مثال دوم :

در این مثال، ما با استفاده از تگ <a> یک لینک به یک صفحه وب در وب سایت دیگر ایجاد کرده ایم.

 

این مثال در مرورگر به صورت یک متن لینک دار نمایش داده خواهد شد:

link

مثال سوم :

 

توجه داشته باشید که برخی از تگ ها و خاصیت ها برای رنگ به جای colour از کلمه color استفاده میکنند. بنابراین مراقب باشید که از تلفظ مشابه استفاده نکنید، در غیر این صورت، مرورگر قادر به درک کدهای شما نخواهد بود. همچنین، فراموش نکنید که همیشه بعد از پایان یک خاصیت از علامت نقل قول استفاده کنید .

کدام عناصر می توانند از خاصیت استفاده کنند؟

خاصیت های زیادی در HTML وجود دارد، همانطور که عناصر بسیار مختلفی نیز وجود دارد. برخی از این خصوصیات فقط مختص یک عنصر می باشند، در حالی که برخی دیگر می توانند در عناصر مختلف استفاده شوند و بالعکس، بعضی از عناصر فقط می توانند یک نوع خاصیت داشته باشند، در حالی که سایر عناصر می توانند خصوصیات زیادی را شامل شوند.

 

برخی از خاصیت های رایج Class ، Style و Title هستند . فعلا لازم نیست این خاصیت ها را به طور کامل درک کنید . یک ویژگی خوب خاصیت ها این است که در اکثر موارد، اختیاری هستند. به خاصیت بسیاری از عناصر HTML یک مقدار پیش فرض اختصاص داده شده  است . این بدان معناست که اگر شما آن خاصیت را در نظر نگیرید، یک مقدار در هر صورت به آن اختصاص داده میشود . اما، برخی از تگ های HTML نیاز به یک خاصیت دارند (مانند مثال دوم این آموزش).

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *