مقدمه:

در مقاله صفات در HTML به بررسی و معرفی این صفات در HTML و نحوه کاربرد آنها خواهیم پرداخت.

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

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

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

نام ویژگی ها و مقادیر ویژگی ها به کوچکی و بزرگی حروف حساس هستند. با این حال ، کنسرسیوم جهانی وب (W3C) خصوصیات / ویژگی های زا با حروف کوچک در توصیه 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>

این قطعه کد نتیجه زیر را در پی خواهد داشت:

This is left aligned

This is center aligned

This is right aligned

صفات اصلی

چهار صفت اصلی که در اکثر عناصر HTML قابل استفاده است (اگرچه در همه آنها نیست) اینها هستند :

شناسه (Id)
عنوان (Title)
کلاس (Class)
سبک (Style)

صفت شناسه (Id)

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

  • اگر یک عنصر یک ویژگی شناسه را به عنوان یک شناسه منحصر به فرد در اختیار داشته باشد ، می توان فقط آن عنصر و محتوای آن را شناسایی کرد.
  • اگر دو عنصر به همین نام در یک صفحه وب (یا style sheet) دارید ، می توانید از ویژگی id برای تمایز بین عناصری که دارای یک نام هستند استفاده کنید.
بیشتر بخوانید:  المنت های HTML

ما در یک آموزش جداگانه در مورد 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)

ویژگی عنوان برای عنصر، عنوانی پیشنهاد می دهد. سینتکس آنها برای ویژگی عنوان شبیه به ویژگی شناسه است –

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

مثال

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

اکنون سعی کنید مکان نما خود را روی “مثال تگ هیدینگ عنوان دار” ببرید و خواهید دید که هر عنوانی که در کد خود استفاده کرده اید به عنوان یک ابزار مکان نما در حال نمایش است.

صفت کلاس (class)

از ویژگی کلاس برای پیوند یک عنصر با یک شیوه نامه استفاده می شود و کلاس عنصر را مشخص می کند. هنگام یادگیری شیوه نامه آبشاری (CSS)، در مورد استفاده از ویژگی کلاس می توانید اطلاعات بیشتری کسب کنید. بنابراین در حال حاضر می توانید از آن عبور کنید.

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

class = "className1 className2 className3"

صفت سبک (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>

این قطعه کد نتیجه زیر را در پی خواهد داشت:

بیشتر بخوانید:  مقدمه ای بر HTML

Some text…

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

صفات بین المللی سازی

سه ویژگی بین المللی سازی وجود دارد که برای بیشتر (گرچه نه همه آنها) عناصر XHTML در دسترس است.

  • dir
  • lang
  • xml:lang

صفت dir

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

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

مثال

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

این قطعه کد نتیجه زیر را در پی دارد:

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

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

صفت lang

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

بیشتر بخوانید:  تگ های پایه ای HTML

مقادیر ویژگی lang، کدهای زبان دو کرکتر استاندارد ISO-639 است. کدهای زبان HTML را برای لیست کاملی از کدهای زبان ، 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 باشد، همانطور که در بخش قبلی گفته شد.

صفات عمومی

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

صفت گزینه ها عملکرد
align راست ، چپ ، مرکز تگ ها به صورت افقی تراز می شوند
valign بالا ، وسط ، پایین به طور عمودی تگ ها را در یک عنصر HTML تراز می کند.
bgcolor مقادیر عددی ، هگزادسیمال ، RGB یک رنگ پس زمینه را در پشت یک عنصر قرار می دهد.
background URL یک تصویر پس زمینه در پشت یک عنصر قرار می دهد.
id تعریف شده توسط کاربر عنصری برای استفاده با شیوه نامه های آبشاری (CSS) معرفی می کند.
class تعریف شده توسط کاربر یک عنصر را برای استفاده با شیوه نامه های آبشاری (CSS) طبقه بندی می کند.
width مقدار عددی عرض جداول ، تصاویر یا سلولهای جدول را مشخص می کند.
height مقدار عددی ارتفاع جداول ، تصاویر یا سلولهای جدول را مشخص می کند.
title تعریف شده توسط کاربر عنوان عناصر را پاپ-آپ می کند.

با مطالعه سایر تگ های HTML نمونه های مرتبط را خواهیم دید. برای لیست کاملی از تگ های HTML و ویژگی های مرتبط، لطفاً به لیست تگ های HTML مراجعه کنید (رفرنس).

در مقاله صفات در HTML به بررسی صفات مربوط به تگ ها و کاربرد و عملکرد آنها پرداختیم. در مقاله بعدی به قالب بندی HTML خواهیم پرداخت.


سیامک قربانی پور

سیامک قربانی پور هستم؛ مدیر عامل شرکت "آبتین ارتباط ایرانیان"؛ دانش آموخته کارشناسی ارشد مدیریت فناوری اطلاعات. موضوع فعالیت شرکت ما به شماره ثبت 1050، برنامه نویسی، طراحی وبسایت و شبکه های کامپیوتری هست. از سال 94 تا 96 به مدت دو سال مشاور مرکز رشد و کسب و کار پارک علم و فناوری چهارمحال و بختیاری بودم اما الان کسب و کار خودم رو در زمینه برنامه نویسی و طراحی وبسایت دارم. همچنین در زمینه مسائل کسب و کاری به علاقه مندان مشاوره هایی رو ارائه می دهم و مطالبی رو در این زمینه خصوصا در مورد کسب و کارهای حوزه فناوری اطلاعات و ارتباطات در این وبسایت منتشر می کنم.

0 دیدگاه

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

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

بیست − 7 =

تائید دیدگاه فعال است. دیدگاه شما ممکن است کمی طول بکشد تا ظاهر شود.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.