آموزش HTML - صفات

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

صفت ها در تگ آغازین عنصر HTML قرار می گیرند
همه صفات از دو بخش تشکیل شده اند :
- نام صفت
- مقدار

نام صفات ها و مقادیر آن ها ، به حروف بزرگ و کوچک حساس هستند.

نکته : با این حال توصیه می شود برای نوشتن کدهای HTML از حروف کوچک انگلیسی استفاده کنید .

مثال : صفتی داریم به اسم align که اگر پاراگرافی این صفت را همراه داشته باشد ، می تواند شکل چینش متن (راستچین ، وسطچین ، چپ چین) را مشخص کند . برای این که این صفت را برای پاراگراف تعریف کنیم . در داخل تگ آغازین پاراگراف اسم صفت را می نویسیم . سپس مساوی را می نویسیم . توجه داشته باشید که مقدار صفت را همیشه داخل علامتِ " قرار می دهیم . برای صفت align از مقادیر left , center , right می توانیم استفاده کنیم .

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>صفت تراز بندی پاراگراف</title> 
   </head>
	
   <body> 
      <p align = "left">تراز بندی چپ</p> 
      <p align = "center">تراز بندی وسط</p> 
      <p align = "right">تراز بندی راست</p> 
   </body>
	
</html>

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

صفت تراز بندی متن در html

صفت های اصلی

چهار صفت اصلی زیر صفاتی هستند که می‌توان روی اکثر عناصر HTML استفاده کرد:

Id
Title
Class
Style

صفت Id در HTML

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

اما چرا از id استفاده می کنیم و id در html چه کاربردی دارید ؟

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

حالا می خواهیم در مثال زیر از ویژگی id برای تمایز بین دو عنصر پاراگراف استفاده کنیم:

<p id = "html">این پاراگراف مربوط به اچ تی ام ال هست</p>
<p id = "css">این پاراگراف مربوط به صفحات سبک آبشاری یا همان سی اس اس</p>

صفت Title در HTML

صفت title یک عنوان به عنصر اختصاص می دهد . شیوه نگارش title مشابه همان چیزی هست که برای صفت id توضیح داده شد .

رفتار این صفت به عنصری که این صفت را حمل می کند بستگی دارد . اما اکثرا به عنوان یک راهنما نمایش داده می شود و وقتی نشانگر موس را روی عنصر مربوطه نگه داشتیم ، مقدار مربوط به صفت title نمایش داده می شود .

مثال

<!DOCTYPE html>
<html>

   <head>
      <title>عنوان دهی به عناصر</title>
   </head>
	
   <body>
      <h3 title = "First Heading">این یک تیتر است</h3>
   </body>
	
</html>

کد بالا به شکل زیر نمایش داده خواهد شد

تگ title در html

همانطور که مشاهده می کنید وقتی نشانگر موس بر روی عنصر مربوطه قرار می گیرد ، مقدار داده شده به تگ title نمایش داده می شود .

صفت Class در HTML

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

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

class = "className1 className2 className3"

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

صفت های زبان و الگوی نوشتاری صفحه HTML

همه صفحات وب به زبان انگلیسی و با الگوی نوشتاری چپ به راست ساخته نمی شوند . محتوای فارسی و عربی از راست به چپ نوشته می شوند . همچنین صفحات وب در زبان های مختلفی اعم از فارسی و ترکی تا فرانسوی و آلمانی طراحی و تولید می شوند . برای آن که در صفحه HTML خود مشخص کنیم که این صفحه از کدام زبان گفتاری استفاده می کند و همچنین الگوی نوشتاری در آن زبان چگونه است از صفت dir و lang استفاده می کنیم .

dir
lang

صفت dir

ویژگی dir در داخل تگ html نوشته می شود و به شما امکان می دهد الگوی نوشتاری یا همان جهتی که متن باید در آن جریان داشته باشد برای مرورگر مشخص کنید . همانطور که در جدول زیر مشاهده می کنید، ویژگی dir می تواند یکی از دو مقدار زیر را بگیرد

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

مثال

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>مثال نوشتار از راست به چپ</title>
   </head>
	
   <body>
     این یک متن فارسی هست که از راست به چپ نوشته شده است
   </body>
	
</html>

این نتیجه زیر را ایجاد می کند

راستچین کردن html با استفاده از rtl

اگر صفحه بالا را بدون کد rtl اجرا کنیم ، به این شکل نمایش داده می شود :

چپ چین کردن html با استفاده از ltr

هنگامی که ویژگی dir در تگ <html> استفاده می شود، نحوه نمایش متن در کل صفحه تغییر می کند .

صفت lang در HTML

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

مقادیر lang کدهای استاندارد ISO-639 هستند. لیست کاملی از این کد ها در لینک زیر وجود دارد . البته کد فارسی و انگلیسی و نحوه استفاده از این کد ها در پایین به همراه مثال آورده شده است .

مثال صفحه با زبان انگلیسی

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

   <head>
      <title>English Language Website</title>
   </head>

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

</html>

مثال صفحه با زبان فارسی

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

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

   <body>
      این صفحه از زبان فارسی استفاده می کند
   </body>

</html>

سایر صفت ها :

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

صفت	مقدار ها	عملکرد
bgcolor	کد رنگ	یک رنگ پس زمینه را پشت یک عنصر قرار می دهد
background	URL	یک تصویر پس زمینه را پشت یک عنصر قرار می دهد
width	مقدار عددی	عرض جداول، تصاویر یا سلول های جدول را مشخص می کند.
height	مقدار عددی	ارتفاع جداول، تصاویر یا سلول های جدول را مشخص می کند.

عناصر و تگ ها - درس قبلی

درس بعدی - قالب بندی متن