ویژگی ها در زبان HTML – برنامه نویسی HTML بخش هشتم

ارسال توسط

در تاریخ ۱۴۰۴-۰۱-۲۹

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

یک ویژگی در زبان HTML چیست؟

ویژگی های در زبان HTML عبارت های خاصی هستند که اطلاعات اضافه تری را درباره تگ ها و عناصر HTML در اختیار ما می گذارند. ویژگی ها همیشه در تگ باز قرار می گیرند و می توانند درباره ساختاربندی و رفتار تگ ها اطلاعاتی را به ما ارائه کنند. تمام تگ ها از دو جز نام (name) و مقدار (value) ساخته شده اند.

بخش نام (Name): یک ویژگی می تواند دارای یک عبارت کیلدی (Keyword) خاص باشد که به آن معرف ویژگی (Attribute identifier) نیز گفته می شود. این عبارت ویژگی که باید در یک عنصر به کار گرفته شود را مشخص می کند. برای مثال در عنصر پاراگراف
(که در مثال پایین نیز به آن اشاره شده است)، ویژگی Align قرار گرفته است که می تواند نحوه چینش حروف در یک پاراگراف را مشخص کند.
بخش مقدار (Value): مقدار در یک ویژگی اطلاعات را ارائه می کند در آن مشخص می کند یک ویژگی باید بر روی چه میزانی تنظیم شود. مقدار ها همیشه در درون یک جفت دبل کوتیشن (“”) قرار می گیرند. برای مثال “left”، “center” یا “right” که در اینجا یکی از این گزینه ها می تواند به ویژگی align انتساب داده شود. در مثال زیر ما نمونه ای از به کارگیری این تگ را به شما معرفی کرده ایم.

در مثال زیر می توانید به کارگیری ویژگی ها در عناصر و تگ های HTML را مشاهده کنید:

<tag_name attribute="Value">...</tag_name>

قوانین و خصوصیت ویژگی ها در زبان HTML

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

به کارگیری ویژگی ها یک کار اختیاری است و باید بسته به موضوع کار یک عنصر به کار گرفته شود. با کمک ویژگی ها شما می توانید اطلاعات اضافه تری را درباره کار کرد یک عنصر به مرورگر بدهید.
ویژگی ها همیشه به صورت جفت نام و مقدار ظاهر می شوند، اما برخی از ویژگی ها نیز وجود دارند که دارای مقدار نیستند . این ویژگی ها به عنوان ویژگی های شرطی (Boolean) شناخته می شوند.
یک عنصر HTML می تواند دارای چندین ویژگی باشد، ولی باید بین آن ها یک فاصله وجود داشته باشد.
ویژگی ها همیشه باید در تگ های باز نوشته شوند.
تمام عناصر HTML دارای ویژگی هستند، البته برخی از تگ های مانند تگ<head> ، <title> و <script> نیز وجود دارد که ویژگی ندارند.
کنسرسیوم جهانی وب توصیه می کند که ویژگی ها همیشه با حروف کوچک نوشته شوند و همیشه مقدار های یک ویژگی در میان دو دبل کوتیشن (“value”) نوشته شود.

نمونه ای از ویژگی ها در زبان HTML

این مثال نشان دهنده نحوه استفاده از ویژگی ها در عناصر HTML است. در اینجا ما از ویژگی align در پاراگراف های مختلف استفاده کرده ایم.

<!DOCTYPE html>
<html>

<head>
    <title>Example of HTML Attributes</title>
</head>

<body>
    <p align="left">Left Aligned</p>
    <p align="center">Center Aligned</p>
    <p align="right">Right Aligned</p>
</body>

</html>

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

ویژگی id

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

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

ما در مثال زیر از ویژگی id برای ایجاد تمایز میان دو پاراگراف زیر بهره گرفته ایم:

<!DOCTYPE html>
<html>

<head>
    <title>ID Attribute Example</title>
</head>

<body>
    <p id="html">This para explains what is HTML</p>
    <p id="css">This para explains what is Cascading Style Sheet</p>
</body>

ویژگی title

ویژگی title یا title attribute برای انتساب یک عنوان به یک عنصر به کار می رود. سینتکس ویژگی title دقیقاً مشابه با همان مواردی است که برای ویژگی id توضیح داده ایم.
رفتار این ویژگی بستگی به عنصر اعمال شده دارد. اگرچه به صورت معمول مقدار این ویژگی به صورت پرچمک های ابزار (tooltip) در زمانی که نشانگر ماوس بر روی عنصر باشد، نمایش داده می شود و به کاربر در درک بهتر کار کمک می کند.
مثال

<!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 ببریم، مشاهده می کنیم که عبارت Hello HTML بر روی آن نشان داده می شود.

ویژگی Class

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

class="className1 className2 className3"

ویژگی style

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

مثال

<!DOCTYPE html>
<html>

<head>
    <title>The style Attribute</title>
</head>

<body>
    <p style="font-family:arial; color:#FF0000;">Welcome to Host baz...</p>
</body>

</html>

در مثال بالا، ما استایل عبارت Welcome to Hostbaz را تغییر داده و آن را با خط Arial و رنگ قرمز نوشته ایم.

ویژگی های بسیار مهم در زبان HTML

در اینجا سه ویژگی بسیار مهم (Internationalization Attributes) وجود دارد که تقریباً در تمام نسخه های زبان HTML و XHTML به کرا گرفته می شوند.

ویژگی dir

ویژگی dir یا dir attribute به ما اجازه می دهد که جهت نوشتن نوشته ها در یک خط را تغییر دهیم. ویژگی dir می تواند دارای یکی از دو مقدار زیر باشد:

مقدار ltr: که نشان دهنده نوشته شدن از سمت چپ به راست (Left to right) است. این نحوه نوشتن به صورت پیش فرض در همه مرورگرها رعایت می شود.
مقدار rtl: که نشان دهنده نوشته شدن از سمت راست به چپ (Right to Left) است. این نحوه برای زبان های عبری، عربی، فارسی که از راست به چپ نوشته می شوند به کار می رود.

مثال:

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

اگر این کد را اجرا کنید مشاهد می کنید که نوشته های بر روی صفحه از سمت راست آرایش پیدا کرده اند.
در زمانی که از ویژگی dir در تگ استفاده می کنیم جهت تمام نوشته ها در صفحه وب ما عوض می شود. اما در زمانی که در هر کدام از تگ های زیرمجموعه از این ویژگی استفاده شود، تغییر جهت نوشته تنها در همان تگ اتفاق می افتد.

ویژگی lang

ویژگی lang یا lang attribute به شما اجازه می دهید تا بتوانید زبان اصلی یک صفحه وب را مشخص کنید. این کارسبب می شود که مرورگرها بتوانند سازگاری لازم برای نمایش محتوای یک صفحه وب را ایجاد کنند. این ویژگی با ویژگی xml:lan در پرونده های XHTML جدید جایگزین شده است.
مقدار ویژگی lan مطابق با استاندارد ISO-639 برابر با دوکاراکتر است. برای این موضوع می توانید استاندارد HTML Language Codes ISO 639 را بررسی کنید که در آن فهرست کاملی از زبان ها و اختصارهای آن ها آماده است.
مثال

<!DOCTYPE html>
<html lang="en">

<head>
    <title>English Language Page</title>
</head>

<body>
    This page is using English Language
</body>

</html>

ویژگی های دودویی (Boolean) در زبان HTML

ویژگی های بولین یا دو دویی، نشان دهنده مقدار درست (True)، غلط (False) هستند. این ویژگی ها نیازمند استفاده از ویژگی مقدار نیستند. برای ست کردن مقدار True شما تنها باید نام این ویژگی را وارد کند و در صورتی که می خواهید مقدار False را برای آن ست کنید، می توانید این ویژگی را از عنصر حذف کنید.
در اینجا ما فهرستی از ویژگی های بولین در HTML را نمایش داده ایم:

Disabled
Readonly
Required
Inert
Autocomplete

مثال
در مثال زیر ما از ویژگی دو دویی در زبان HTML استفاده کرده ایم:

<!DOCTYPE html>
<html>

<body>

    <h1>Example of "required" attribute</h1>

    <form>
        <label for="user_name">Input User Name:</label>
        <input type="text" id="user_name" name="user_name" required>
        <input type="submit">
    </form>

</body>

</html>

ویژگی xml:lang

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

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

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

ویژگی	آپشن های قابل انتخاب	عملکرد
Align	Right, left, center	به صورت افقی محل قرار گرفتن یک تگ را مشخص می کند.
Valign	Top, middle, bottom	به صورت عمومی محل قرار گرفتن یک عنصر HTML را مشخص می کند.
Bgcolor	مقدارهای عددی، هگزادسیمال و RGB	یک رنگ پس زمینه را برای یک عنصر مشخص می کند.
Background	آدرس	یک تصویر را در پس زمینه یک عنصر قرار می دهد.
Id	نام انتخابی کاربر	یک نام منحصر به فرد را برای انتساب استایل های CSS به تگ انتخابی مشخص می کند.
Class	نام انتخابی کاربر	یک نام را برای انتساب استایل های CSS به مجموعه ای از تگ ها مشخص می کند.
Width	مقدار عددی	یک مقدار مشخص برای تعیین عرض یک تگ را مشخص می کند.
Height	مقدار عددی	یک مقدار مشخص برای تعیین ارتفاع یک تگ را مشخص می کند.
Title	عنوان انتخابی کاربر	عنوانی را در پرچمک ابزار یک عنصر نشان می دهد.

ما در مثال هایی که در این آموزش و در آموزش های بعدی خواهید دید به بررسی هر کدام یک از این ویژگی ها می پردازیم. همچنین در بخش مراجع می توانید لیست کاملی از تگ ها، عناصر و غیر را با توضیحات مرتبط به آن ها پیدا کنید.

بهترین روش برای استفاده از ویژگی های HTML

در اینجا چند روش وجود دارد که می توانید با کمک آن ها از ویژگی ها به بهترین شیوه استفاده کنید.

مقدارها را در میان دبل کوتیشن وارد کنید.

شما باید مقدارهای هر کدام از ویژگی ها را در میان یک جفت دبل کوتیشن (“”) وارد کنید.

<!-- Good Practice -->
<a href="https://www.tutorialspoint.com/html/html_overview.htm">
    HTML Introduction
    <a>

        <!-- Bad Practice -->
        <a href=https://www.tutorialspoint.com/html/html_overview.htm>
            HTML Introduction
            <a>

از حروف کوچک استفاده کنید.

زبان HTML حساسیتی نسبت به حروف کوچک و بزرگ دارد، اما بهتر است که تمام ویژگی ها و نام تگ ها را با حروف کوچک بنویسید.

<input type="text">

از کوتیشن و دبل کوتیشن به درستی استفاده کنید.

در زمانی که نیاز به وارد کردن یک عبارت نوشتاری (استرینگ – string) دارید، بهتر است که آن ها را به درستی در هم دیگر به کار ببرید (دقیقاً مانند قرار دادن تگ ها تو در تو).

<!-- Can use single and double Quotes -->
<p title="We are known for 'Simple Easy Learning'">
    Hostbaz.com
</p>
<p title='We are known for "Simple Easy Learning"'>
    Hostbaz.com
</p>