مفهوم ویژگی ها در HTML
مفهوم ویژگی ها در HTML
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به بررسی مفهوم ویژگی ها در attributes) HTML) خواهیم پرداخت.
ما چند تگ HTML و کاربرد آنها مانند تگ های عنوان <h1> ، <h2> ، پاراگراف <p> و سایر برچسب ها را دیده ایم. ما تاکنون از آنها در ساده ترین شکل خود استفاده کرده ایم، اما اکثر تگ های HTML نیز می توانند ویژگی هایی داشته باشند که بیت بیشتری از اطلاعات هستند.
یک ویژگی برای تعریف ویژگی های یک عنصر HTML استفاده می شود و در داخل تگ باز عنصر قرار می گیرد. همه ویژگی ها از دو قسمت تشکیل شده اند – یک نام و یک مقدار (name و a value)
Name: نام خاصیتی است که باید تنظیم کنید. به عنوان مثال ، پارامتر <p> عنصر در مثال دارای صفتی است که نام آن align است، که می توانید از آن برای نشان دادن تراز بند در صفحه استفاده کنید.
Value: مقدارهمان چیزی است که شما می خواهید ارزش املاک تنظیم شود و همیشه در قیمت ها قرار گیرد. مثال زیر سه مقدار ممکن از ویژگی align را نشان می دهد: چپ ، مرکز و راست.
نام ویژگی ها و مقادیر ویژگی نسبت به حروف کوچک هستند. با این حال، کنسرسیوم شبکه جهانی وب (W3C) ویژگی های کوچک / مقادیر ویژگی را در HTML 4 توصیه می کند.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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> |
خروجی
|
1 2 3 4 5 |
This is left aligned This is center aligned This is right aligned |
ویژگی های اصلی در HTML
چهار ویژگی اصلی که می تواند در اکثر عناصر HTML استفاده شود:
- شناسه (id)
- عنوان (title)
- کلاس (class)
- سبک (style)
از ویژگی id یک تگ HTML می توان برای شناسایی منحصر به فرد هر عنصر در صفحه HTML استفاده کرد. دو دلیل اصلی وجود دارد که ممکن است بخواهید از یک ویژگی id بر روی یک عنصر استفاده کنید –
- اگر یک عنصر دارای یک ویژگی id به عنوان یک شناسه منحصر به فرد باشد، می توان فقط آن عنصر و محتوای آن را شناسایی کرد.
- اگر درون یک صفحه وب (یا صفحه سبک) دو عنصر با یک نام دارید، می توانید از ویژگی id برای تشخیص عناصر با نام یکسان استفاده کنید.
مثال
|
1 2 |
<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 attribute عنوانی را برای عنصر پیشنهاد می کند. نحو آنها برای مشخصه عنوان همان است که برای صفت id توضیح داده شده است –
رفتار این ویژگی به عنصری که آن را دارا می باشد بستگی خواهد داشت ، اگرچه اغلب هنگامی که مکان نمای ماوس از روی عنصر می آید یا هنگام دانلود عنصر، به عنوان یک راهنمای ابزار نمایش داده می شود.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <h3 title = "Hello HTML!">Titled Heading Tag Example</h3> </body> </html> |
خروجی
|
1 |
Titled Heading Tag Example |
اکنون سعی کنید نشانگر خود را بر روی “Titled Heading Tag” قرار دهید و خواهید دید که هر عنوانی را که در کد خود استفاده کردید به عنوان یک راهنمای نشانگر tooltip در حال نمایش است.
ویژگی کلاس (class Attribute)
از ویژگی کلاس برای مرتبط سازی یک عنصر با یک صفحه سبک استفاده می شود و کلاس عنصر را مشخص می کند. هنگامی که Cascading Style Sheet (CSS) را یاد بگیرید، در مورد استفاده از ویژگی کلاس بیشتر می آموزید.
مقدار ویژگی ممکن است لیستی از نام کلاس ها با فاصله باشد که بوسیله ی space یا کاراکتر فضای خالی از هم جدا شده اند . به عنوان مثال:
|
1 |
class = "className1 className2 className3" |
ویژگی style Attribute) style)
ویژگی style به شما امکان می دهد قوانین Cascading Style Sheet (CSS) را در عنصر تعیین کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style = "font-family:arial; color:#FF0000;">Some text...</p> </body> </html> |
خروجی
|
1 |
Some text... |
درونی کردن ویژگی ها (Internationalization Attributes)
سه ویژگی درونی وجود دارد که برای اکثر عناصر XHTML (هرچند نه همه) در دسترس است.
- dir
- lang
- xml:lang
ویژگی dir
ویژگی dir این امکان را برای شما فراهم می کند تا به مسیر مرور متن، جهت مرورگر را نشان دهید. همانطور که در زیر مشاهده می کنید ، ویژگی dir می تواند یکی از دو مقدار را داشته باشد:
| مقدار | معنی |
| ltr | از چپ به راست (مقدار پیش فرض) |
| rtl | راست به چپ (برای زبانهایی مانند عبری یا عربی که از راست به چپ خوانده می شوند) |
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html dir = "rtl"> <head> <title>Display Directions</title> </head> <body> This is how IE 5 renders right-to-left directed text. </body> </html> |
خروجی
|
1 |
This is how IE 5 renders right-to-left directed text. |
هنگامی که از ویژگی dir در برچسب <html> استفاده می شود ، نحوه ارائه متن در کل سند را تعیین می کند. هنگامی که در یک برچسب دیگر استفاده می شود ، جهت متن را فقط برای محتوای آن برچسب کنترل می کند.
ویژگی lang Attribute) lang)
ویژگی lang به شما امکان می دهد زبان اصلی مورد استفاده در یک سند را نشان دهید، اما این ویژگی فقط برای سازگاری با نسخه های قبلی HTML در HTML نگهداری می شود. این ویژگی با اسناد xml: lang در اسناد جدید XHTML جایگزین شده است.
مقادیر ویژگی lang، کدهای زبان دو کاراکتر استاندارد ISO-639 است.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang = "en"> <head> <title>English Language Page</title> </head> <body> This page is using English Language </body> </html> |
خروجی
|
1 |
This page is using English Language |
ویژگی xml: lang
ویژگی xml: lang جایگزینی XHTML برای ویژگی lang است. مقدار ویژگی xml: lang باید یک کد کشور ISO-639 باشد همانطور که در بخش قبلی ذکر شد.
ویژگی های عمومی
در اینجا جدول برخی از ویژگی های دیگر است که به راحتی با بسیاری از تگ های HTML قابل استفاده هستند.
| Attribute | Options | Function |
| align | right, left, center | تگ ها را به صورت افقی تنظیم می کند |
| valign | top, middle, bottom | تگ ها را به صورت عمودی در یک عنصر HTML تنظیم می کند |
| bgcolor | numeric, hexidecimal, RGB values | یک رنگ پس زمینه در پشت یک عنصر قرار می دهد |
| background | URL | یک پس زمینه عکس پشت یک عنصر قرار می دهد |
| id | User Defined | یک عنصر را برای استفاده با Cascading Style Sheets طبقه بندی می کند. |
| class | User Defined | برای استفاده یک عنصر از Cascading Style Sheets یک کلاس تنظیم می کند |
| width | Numeric Value | عرض جدول یا تصویر یا سلول جدول را تعیین می کند |
| height | Numeric Value | ارتفاع جدول یا تصویر یا سلول جدول را تعیین می کند |
| title | User Defined | عنوان هر عنصر را “Pop-up” می کند |
لیست جلسات قبل آموزش برنامه نویسی HTML
.svg)
دیدگاه شما