در قسمت پنجم از آموزش زبان HTML با بحث ویژگیها، مشخصات، صفت ها یا خصیصه ها با شما همراه خواهیم بود. (تمامی این نامها نامهایی است که از Attribute (به انگلیسی) گرفته شده اند و به کارگرفتن هرشکل از آنها درست است).

تا اینجای کار چندبرچسب (تگ) HTML و کاربرد آنها مانند برچسبهای عنوان یا سرفصل یعنی <h1>, <h2> و برچسب پاراگراف یعنی <p> را مشاهده کردیم. اما تا اینجای کار ما از این تگها به شکل ساده و بدون هیچ افزودنی استفاده کرده ایم، ولی اکثر تگهای HTML میتوانند دارای ویژگی هایی باشند که بخشهای اضافی از اطلاعات ما هستند.

یک مشخصه برای تعریف ویژگیهای عناصر HTML استفاده میشود و در برچسب آغازین قرار میگیرد. تمام مشخصات از دوبخش تشکیل شده اند: نام و مقدار (ارزش)

اسم: اسم یا نام ویژگی است که میخواهید تنظیم کنید. به عنوان مثال، عنصر پاراگراف <p> در مثال زیر دارای صفتی است که نام آن align میباشد، که شما میتوانید از آن برای نشان دادن هم ترازی پاراگراف در صفحه استفاده کنید.

مقدار: ارزش یا مقدار چیزی است که میخواهید آنرا برای نام مشخصه خود وارد کنید و همیشه آنرا در یک نقل قول یعنی: "" قرار میدهید. در مثال زیر ما سه مقدار برای مشخصه align تعیین کردیم. چپ، مرکز و راست.

نامهای مشخصه ها و مقدار آنها به بزرگی و کوچکی حروف حساس نیستند بااین حال کنسرسیوم وب جهان گستر (W3C) توصیه میکند همیشه از حروف کوچک برای مشخصه ها یا صفتها در HTML4 استفاده کنید.

حال بپردازیم به یک مثال:

<!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>

با نوشتن کدهای بالا نتیجه زیر ظاهر میشود:

This is left aligned

This is center aligned

This is right aligned

 

ویژگی های اصلی

4ویژگی مهم وجود دارد که میتواند در بسیاری (نه لزوما برای همه) از عناصر HTML استفاده شود:

1.      Id

2.      Title

3.      Class

4.      Style

ویژگی id در HTML

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

1.      اگر یک عنصر مشخصه id را به عنوان یک شناسه منحصر به فرد داشته باشد، شناسایی آن عنصر و محتوای آن به تنهایی امکان پذیر میشود.

2.      اگر دو عنصر از یک نام در یک صفحه وب (استایل شیت) داشته باشید، میتوانید از مشخصه id برای تمایز بین عناصری که دارای یک نام هستند، استفاده کنید.

ما در پستی جداگانه در مورد استایل شیت صحبت خواهیم کرد. امّا در حال حاضر، اجازه بدهید از ویژگی id برای تشخیص بین دو عنصر پاراگراف استفاده کنیم.

مثال:

<p id = “html”> this para explains what is HTML</p>

<p id = “css”>this para explains what is cascading Style Sheet</p>

ویژگی عنوان

مشخصه عنوان به یک عنصر یک عنوان پیشنهادی ارائه میدهد. نحوه نوشتن دستور عنوان همانند ویژگی idخواهد بود.

عملکرد این ویژگی به عنصری که آنرا حمل میکند بستگی دارد، اگرچه اغلب اوقات به عنوان یک راهنمای آنی نمایش داده میشود (هنگامی که شما موس را برروی عنصر میبرید یک عنوان برای شما نمایش داده میشود).

مثال:

<!DOCTYPE html>

<html>

<head>

<title>the title attribute example</title>

</head>

<body>

<h3 title = “hello HTML!”> Titled Heading Example</h3>

</body>

</html>

نتیجه:

Titled Heading Tag Example

حالا ماوس خود را برروی متن بالا ببرید و عنوانی که تحت مشخصه title وارد کردیم را مشاهده کنید.

 

ویژگی کلاس

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

مقدار یک مشخصه نیز ممکن است یک فهرست از اسامی کلاس باشد. برای مثال:

class = "className1 className2 className3"

ویژگی استایل

ویژگی یا مشخصه استایل به شما اجازه میدهد که قواعد CSS را در عنصر مشخص کنید.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>the style attribute</title>

</head>

<body>

<p style = “font-family:arial; color:#ff0000;”>some text...</p>

</body>

</html>

نیجه:

Some text...

در این آموزش ما CSS را یاد نمیگیریم، پس فقط از آن عبور کرده بدون آنکه بخواهیم اطلاعات بیشتری در مورد آن بدانیم. در اینجا شما فقط باید بدانید چه ویژگیهایی در HTML استفاده میشود و عملکرد آنها چیست.

ویژگیهای بین المللی

سه ویژگی بین المللی وجود دارد که برای اکثر عناصر XHTML در دسترس میباشد.

1.      Dir

2.      Lang

3.      Xml:lang

ویژگی Dir

ویژگی dir به مرورگر اجازه میدهد تا بفهمد متن در قالب به صورت راست چین است یا چپ چین. همانطور که گفتیم ویژگی dir میتواند دور ارزش یا مقدار را شامل شود که در HTML به صورت زیر به کار برده میشود:

معنی

مقدار

Left to right (the default value) - چپ به راست (به صورت پیشفرض و بدون وارد کردن، متون به صورت چپ به راست نوشته میشوند.)

ltr

راست به چپ (برای زبانهایی مانند فارسی یا عربی که از سمت راست خوانده میشوند)

rtl

مثال:

<!DOCTYPE html>

<html dir = “rtl”>

<head>

<title>Display Directions</title>

<body>

This is how IE 5 renders right-to-left directed text.

</body>

<html>

این نتیجه زیر را تولید می کند –

This is how IE 5 renders right-to-left directed text.

هنگامی که ویژگی dir در تگ <html> استفاده می شود، تعیین موقعیت ارائه متن در کل سند را مشخص می کند. هنگامی که در تگ دیگری استفاده می شود، جهت متن را فقط برای محتوای آن برچسب تعیین می کند.

ویژگی lang

ویژگی lang به شما اجازه می دهد که زبان اصلی مورد استفاده در یک سند را نشان دهید، اما این ویژگی درHTML فقط برای سازگاری با نسخه های قبلی HTML نگهداری می شود. این خصیصه با ویژگی xml: lang در اسناد XHTML جدید جایگزین شده است. مقادیر مشخصه lang عبارتند از کدهای زبان دوحرفی استاندارد ISO-639. به عنوان مثال کد مشخص کردن زبان فارسی fa میباشد. در یک مقاله جداگانه تمامی کدهای زبان در استاندارد ایزو639 را معرفی خواهیم کرد.

مثال:

<!DOCTYPE html>

<html lang = “fa”>

<head>

<title>صفحه زبان فارسی</title>

</heda>

<body>

این صفحه از زبان فارسی استفاده میکند

</body>

</html>

نتیجه دستورات بالا مشابه زیر خواهد بود:

این صفحه از زبان فارسی استفاده میکند

ویژگی xml: lang

ویژگی xml: lang XHTML جایگزینی برای ویژگی lang است. مقدار ویژگی xml: lang باید یک کد کشور ISO-639باشد که در بخش قبلی ذکر شده است.

ویژگیهای عمومی

در اینجا یک جدول از برخی از ویژگی های دیگر است که به راحتی با بسیاری از تگ های HTML قابل استفاده است.

تابع

گزینه ها

ویژگی

Horizontally aligns tags

راست، چپ، مرکز

Align

Vertically aligns tags within an HTML element.

top, middle, bottom

Valign

Places a background color behind an element

مقادیر عددی، hexidecimal، ارزشRGB

Bgcolor

Places a background image behind an element

نشانی اینترنتی

Background

Names an element for use with Cascading Style Sheets.

تعریف شده توسط کاربر

Id

Classifies an element for use with Cascading Style Sheets.

تعریف شده توسط کاربر

Class

Specifies the width of tables, images, or table cells.

مقدار عددی

Width

Specifies the height of tables, images, or table cells.

مقدار عددی

Height

"Pop-up" title of the elements.

تعریف شده توسط کاربر

title

شما در جلسات آینده نمونه های بیشتری از این مشخصه ها را خواهید دید زیرا از آنها در مثالهای جلسه بعد استفاده خواهیم کرد.

دانلود این مقاله به صورت PDF (بدون نیاز به پسورد)


برچسب ها

CSS | آموزش سی اس اس | آموزش زبان HTML | آموزش CSS | خصیصه HTML | Id | Title | Class | Style | استایل شیت | طراحی وبسایت | طراحی وب |
آخرین به روزرسانی این مطلب:

2019-01-02T13:14:15


پربازدیدترین

از اینجا می توانیدمحبوب ترین مطالب را مشاهده کنید