کار صفت‌ها چیست؟
ما به وسیله صفت‌ها در HTML میتوانیم کنترل بیشتری بر تگ‌ها داشته باشیم. بسیاری از تگ‌ها صفت‌های منحصر به فردخود را دارند که به این صفت ها، صفت‌های اختصاصی میگویند. اما بعضی از صفات نیز بین تگ‌ها مشترک است و در همه آنها یک کار را انجام میدهند. به این صفت ها، صفت‌های عمومی گفته میشود. صفت‌ها همیشه در تگ آغازین به کار میروند و از دو قسمت اصلی تشکیل می‌شوند:
- Name : نام صفتی که میخواهید کنترل کنید. مثلا صفت align برای تگ p نحوه چینش متن پاراگراف را کنترل میکند.
- Value : مقداری است که برای صفت تعیین میشود. مثلا مقدار right برای صفت align در تگ p، باعث راست چین شدن متن پاراگراف میشود. Valueها همیشه باید در داخل کوتیشن‌ها (double یا single) قرار بگیرند و با علامت = به نام صفت منتسب شوند.
شکل کلی تعریف صفات برای عناصر به این صورت است:
<tagname attribute1='value' attribute2='value'> content </tagname>
مثال زیر پاراگراف را راست چین میکند:
<p align='right'>این یک پاراگراف راست چین است</p>
همانطور که در قبل اشاره شد بعضی از صفت‌ها که به عنوان صفت‌های عمومی شناخته می‌شوند در تمام تگ‌ها کار یکسانی را انجام میدهند. در ادامه مطلب با این صفت‌ها و کار هر کدام آشنا خواهید شد:
معرفی صفات عمومی
id: از این صفت برای تعیین یک شناسه برای یک عنصر استفاده میشود. این شناسه می‌بایست در صفحه یکتا باشد. یعنی نباید برای صفت id، دو عنصر مختلف،یک مقدار مساوی انتخاب کنیم. از این صفت برای نسبت دادن یک گزینشگر ID به یک عنصر نیز استفاده میشود. مثال:
<p id='p1'> این یک پاراگراف است </p>
class: از این صفت برای نسبت دادن کلاسی که به زبان CSS نوشته شده است به یک عنصر استفاده میشود.
مثال:
<p class='p-red'> این یک پاراگراف است </p>
dir: جهت گیری متن داخل یک عنصر را کنترل میکند. این صفت دارای دو مقدار است :
- rtl: برای جهت گیری عنصر از راست به چپ
- ltr: برای جهت گیری عنصر از چپ به راست
مثال:
<p dir='rtl'> این یک پاراگراف راست به چپ است </p>
مقدار پیش فرض این صفت ltr است. یعنی در صورت مقدار ندادن به این صفت، جهت گیری عنصر ما به صورت پیشفرض از چپ به راست خواهد بود.
lang: از این صفت معمولا برای تعیین زبان اصلی به کار رفته در صفحه و برای تگ <html> استفاده میشود. شما میتوانید این صفت را برای هر نوع عنصر دیگری که زبان آن غیر از آن چیزی است که در تگ <html> تعریف شده است نیز استفاده کنید. مقداری که این صفت میپذیرد، یکی از کدهای زبانی مانند .... , en , fa , fr , ar خواهد بود. مثال:
<html lang='fa'> <p lang='en'>This is a English Paragraph</p> </html>
style: از این صفت برای تعیین یکسری قواعد و مقادیرشان که در زبان CSS تعریف می‌شوند برای یک عنصر میتوان استفاده کرد. مثال:
<p style='background-color: #ff00ff;'>این یک پاراگراف است</p>
از زبان CSS برای استایل دهی به عناصر و تگ‌های زبان HTML استفاده میشود.
title: این صفت مقداری از نوع رشته ساده را دریافت کرده و آن را به صورت tooltip هنگامی که نشانگر موس بر روی عنصر قرار گیرد، نمایش میدهد. مثال:
<p title='سایت گوگل'>Google</p>
contenteditable: این صفت که یکی از مقادیر true و false را اختیار میکند، مشخص میکند که آیا عنصر موردنظر قابل ویرایش توسط کاریر باشد یا خیر؟ true به معنی قابل ویرایش بودن عنصر است. مثال:
<p contenteditable='true'>این یک پاراگراف قابل ویرایش است.</p>
hidden: این صفت برای مخفی کردن عناصر استفاده میشود. و یکی از دو مقدار true و false که true به معنی مخفی شدن عنصر است، را به عنوان مقدار میپذیرد. عناصر hidden در صفحه نمایش داده نمیشوند. از این صفت میتوان برای مخفی نگه داشتن یک عنصر از دید کاربر تا زمان برقراری یک شرط استفاده نمود. در این حالت جاوااسکریپت می‌تواند با حذف یا تغییر مقدار این صفت، عنصر را مجدداً نمایش دهد. مثال:
<p hidden='true'>این پاراگراف در صفحه مرورگر نمایش داده نمیشود.</p>
بسیار خب، تا اینجا با صفات مشترک که برای همه ی تگ‌های HTML میتوان از آنها استفاده کرد آشنا شدید، در مطلب بعدی با تگ‌های قالب بندی متن آشنا خواهید شد.
خیلی متشکرم.
سلام ببخشید در جاهایی شما فاصله قرار دادید ولی در جاهایی ندادید حتما باید به این صورت نوشته بشه؟
مثلا در عبارت rtl فاصله دادید:’rtl’> این یک پاراگراف راست به چپ است اما در عبارت contenteditable گفتید:’true’>این یک پاراگراف قابل ویرایش است.
پس این دو تا با هم فرق دارن یعنی در جایی فاصله داده شده ولی در عبارت دیگر نداده شده.
سلام.
نه فرق چندانی ندارن، بودن یا نبودن فاصله هم مهم نیست. فقط برای خوانایی کد، قبل و بعدش یه فاصله گذاشتم.
سلام ممنون از پاسختون.و ببخشید یک سوال دیگه الان من دارم HTML رو میخونم همزمان CSS هم بخونم چیزی از CSS دستگیرم میشه یا نه باید اول HTML رو تموم کنم؟
با تشکر
بستگی به حوصله و علاقه خودت داره،اما اول HTML رو تموم کن بعدش برو CSS.
با سلام و تشکر از آموزش های خوبتون
صفت Id و Class رو اصلا متوجه نمیشم که کاربردشون چیه؟
میشه ساده تر برام توضیح بدین؟
ممنون
سلام این تاپیک رو بخون کامل توضیح داده
سلام.
این نظرات رو بخونید
راستی ، کاش آخر آموزشهاتون ، تمرینی ، مثالی چیزی میذاشتین تا خودمونو تست کنیم ببینیم چقدر یاد گرفتیم!
اگه اینکارو کنین ممنون میشم
سلام….
آموزشتون بسیار بسیار بسیار عالیه…. خدا خیرتون بده…
یه سوال داشتم…صفت lang یعنی چی؟؟ یه مثال ازش میزنید؟
یعنی چی که “. شما میتوانید این صفت را برای هر نوع عنصر دیگری که زبان آن غیر از آن چیزی است که در تگ تعریف شده است “؟؟ این fa ,en ,… اینا چی هستن؟؟
خوب برای اینکه زبان محتوای تگ رو معین کنید این ویژگی استفاده میشه. مثلا یه پاراگراف مثل زیر که محتوای فرانسوی داره :
<p lang="fr">Ceci est un paragraphe.</p>یا این یکی که فارسیه :
<p lang="fa">این یک پاراگراف است</p>یک ویژگی منطقی هست و پیشنهاد میشه برای استفاده از زبان های دیگه در تگی خاص استفاده بشه .
خوب من دقیقا متوجه فایده این صفت نشدم….. اگر این صفت رو نذاریم ، باز هم میشه توی هر عنصر از هر زبانی که خواستیم استفاده کنیم دیگه؟ مگه اینطور نیس؟؟
در واقع این صفت اختیاری هست؟؟ کاربردش کجاهاست؟؟
بله . اختیاری هست . ولی در وب معنایی می گن بهتره که استفاده کنی . یعنی تو کدت هم راهنمایی کرده باشی بعضی چیزا رو که مثلا موتورهای جستجو راحتتر بفهمن کد رو .
سلام از آموزشتون ممنون اما یه مشکلی تو این آموزش هست که خواستم متذکر بشم در رابطه با کد پایین
این یک پاراگراف راست چین است
صفت align فقط چهار عمل right و Left و Center و justify را می پذیرد و امکان قرار دادن rtl و یا ltr نیست
بله درست می فرمایید . اشتباه تایپی بوده . rtl و ltr مقادیر صفت dir هستند . تصحیح شد .
از گزارش این اشتباه متشکرم .
موفق باشید
این کدا رو کجا تست کنمو ببینم گه چجوری شده؟
سلام.
کدهارو در یک ادیتور متن مانند notepad نوشته و با فرمت html ذخیره کرده سپس فایل را در مرورگر باز کنید
سلام
میشه در مورد صفت های زیر توضیح بیشتر و واضح تر دهید+ یک مثال برای هر کدام!
صفت id
صفت class
صفت lang
صفت title
صفت contenteditable
صفت hidden
###
با نهایت تشکر
ممنون از آموزش هاي قابل فهم مفيدتون.
من وقتي مقاله ها رو به صورت pdfدانلود مي كنم هر صفحه رو جدا دانلود مي كنه. چطور ميشه همه صفحه ها رو تو يه مقاله باهم دانلود كرد؟
بله . این مشکل هست .
سعی می کنیم رفعش کنیم …