campaign-edianeh-98

آموزش HTML (قسمت 3) : صفت ها در HTML



visibility  
mode_comment   ۳۲

کار صفت ها چیست؟

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

  • Name : نام صفتی که میخواهید کنترل کنید. مثلا صفت align برای تگ p نحوه چینش متن پاراگراف را کنترل می کند.
  • Value : مقداری است که برای صفت تعیین می شود. مثلا مقدار right برای صفت align در تگ p، باعث راست چین شدن متن پاراگراف می شود. Valueها همیشه باید در داخل کوتیشن ها (double یا single) قرار بگیرند و با علامت = به نام صفت منتسب شوند.

شکل کلی تعریف صفات برای عناصر به این صورت است:

مثال زیر پاراگراف را راست چین می کند:

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

معرفی صفات عمومی

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

class: از این صفت برای نسبت دادن کلاسی که به زبان CSS نوشته شده است به یک عنصر استفاده میشود.

مثال:

dir: جهت گیری متن داخل یک عنصر را کنترل میکند. این صفت دارای دو مقدار است :

  • rtl: برای جهت گیری عنصر از راست به چپ
  • ltr: برای جهت گیری عنصر از چپ به راست

مثال:

info نکته :

مقدار پیش فرض این صفت ltr است. یعنی در صورت مقدار ندادن به این صفت، جهت گیری عنصر ما به صورت پیشفرض از چپ به راست خواهد بود.

comment دیدگاه کاربران
hajian1

سلام
درمورداین درس لطفاًکاربردهای تگ
content
راتوضیحات بیشتری لطف کنید
باتشکر

سجاد دریس

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

حالا این کد رو نوشته، و نتیجه رو توی مرورگر مشاهده کن.
میبینی که با کلیک کردن بر روی متن. میتونی متن “you can edit this paragraph ” رو ویرایش کنی و متن دیگه ای رو جایگزین اون کنی.

سجاد دریس

از کاربرد اون هم مثلا توی بخش نظرات. مثلا اگه بعد از فرستادن نظر فهمیدی اشتباه تایپی داری . میتونی یه گزینه “ویرایش” بذاری که با کلیک کردن روی اون این صفت رو به نظر بدی و نظرتو ویرایش کنی……

hamed

عالی بود 😳 😆

علی محمدی

سلام وبلاگ خوبی داری اگه حاظری تبادل لینک کنی وبلاگ منو با نام توفان دانلود لینک کن و بعد خبرم کن تا با هر اسمی که خواستی لینکت کنم
پیچ رنک ما :3

لقمان آوند

سلام
ممنون از لطف شما . لطفا لینک ما رو با نام آموزش طراحی وب قرار بدید و ما رو مطلع کنید .

فاطمه

سلام.
من بعد از کلی جستجو تونستم بک گراندم رو ثابت کنم.
اما بازم توی قالب مشکل دارم.
من توی بعضی از وبلاگ هایی که قالب بلاگفا میسازن رفتم و وقتی توی یکی از قالب هایی که ساخته بودن viwe background image رو زدم دیدم که منوی کنار وبلاگ منظورم همون درباره ی وبلاگ،لینک ها،امکانات وب و…هم جزو اونه.حالا مشکل من اینه که اگه بک گراند رو ثابت کنم منو هم ثابت میشه…نمیدونم که چجوری فقط عکس رو ثابت کنم…
یکی دیگه از مشکلاتم اینه که چه کدی و کجا باید وارد بشه که وقتی نشانگر موس روی لینک میره رنگش عوض شه…
واینکه چطوری لینک نظر بدهید رو بندازم وسط و کنار پایان نوشته…
اینم آدرس وبلاگی که قالبمو و تغییرات رو توش انجام میدم…نوشته هاشم الکی نوشتم که بتونم توش تغییراتم
رو انجام بدم…
www.abi-me.blogfa.com

لقمان آوند

وبلاگتون رو دیدم و با عرض معذرت باید بگم که خیلی غیر استاندارده قالبش . پیشنهاد میکنم از قالب های آماده استفاده کنید . این همه قالب رایگان و خوب وجود داره . ضمنا برای پرسیدن سوالات به انجمن سایت برید و برای هر کدوم از سوالاتتون یه تاپیک باز کنید .

golden-vpn

سلام عزیز
آقا من از ویژوال استودیو 2012 استفاده میکنم
و هر جاش که میگردم اثری از سند جدید برای html و css نیست
الان کلا لنگ همونم
ویندوزم هم سون هست
لطفا کمک کنید و بگین چطوری صفحه کد نویسی html وcss رو ادد کنم
ممنون

محمّد حسن مهرآذر

سلام آقای آوندی یک سوال داشتم میخواستم بپرسم که ساختن یک قالب خوب چقدر زمان میبرد؟

لقمان آوند

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

محمّد حسن مهرآذر

ممنون.

fahime68

ممنون از آموزش های قابل فهم مفیدتون.
من وقتی مقاله ها رو به صورت pdfدانلود می کنم هر صفحه رو جدا دانلود می کنه. چطور میشه همه صفحه ها رو تو یه مقاله باهم دانلود کرد؟

لقمان آوند

بله . این مشکل هست .
سعی می کنیم رفعش کنیم …

alireza0025

سلام
میشه در مورد صفت های زیر توضیح بیشتر و واضح تر دهید+ یک مثال برای هر کدام!
صفت id
صفت class
صفت lang
صفت title
صفت contenteditable
صفت hidden
###
با نهایت تشکر

SAEED.CR7

این کدا رو کجا تست کنمو ببینم گه چجوری شده؟

سجاد دریس

سلام.
کدهارو در یک ادیتور متن مانند notepad نوشته و با فرمت html ذخیره کرده سپس فایل را در مرورگر باز کنید

یه دوست

سلام از آموزشتون ممنون اما یه مشکلی تو این آموزش هست که خواستم متذکر بشم در رابطه با کد پایین

این یک پاراگراف راست چین است

صفت align فقط چهار عمل right و Left و Center و justify را می پذیرد و امکان قرار دادن rtl و یا ltr نیست

لقمان آوند

بله درست می فرمایید . اشتباه تایپی بوده . rtl و ltr مقادیر صفت dir هستند . تصحیح شد .
از گزارش این اشتباه متشکرم .
موفق باشید

elh@m

سلام….
آموزشتون بسیار بسیار بسیار عالیه…. خدا خیرتون بده…
یه سوال داشتم…صفت lang یعنی چی؟؟ یه مثال ازش میزنید؟
یعنی چی که “. شما میتوانید این صفت را برای هر نوع عنصر دیگری که زبان آن غیر از آن چیزی است که در تگ تعریف شده است “؟؟ این fa ,en ,… اینا چی هستن؟؟

لقمان آوند

خوب برای اینکه زبان محتوای تگ رو معین کنید این ویژگی استفاده میشه. مثلا یه پاراگراف مثل زیر که محتوای فرانسوی داره :
<p lang="fr">Ceci est un paragraphe.</p>
یا این یکی که فارسیه :
<p lang="fa">این یک پاراگراف است</p>
یک ویژگی منطقی هست و پیشنهاد میشه برای استفاده از زبان های دیگه در تگی خاص استفاده بشه .

elh@m

خوب من دقیقا متوجه فایده این صفت نشدم….. اگر این صفت رو نذاریم ، باز هم میشه توی هر عنصر از هر زبانی که خواستیم استفاده کنیم دیگه؟ مگه اینطور نیس؟؟
در واقع این صفت اختیاری هست؟؟ کاربردش کجاهاست؟؟

لقمان آوند

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

elh@m

راستی ، کاش آخر آموزشهاتون ، تمرینی ، مثالی چیزی میذاشتین تا خودمونو تست کنیم ببینیم چقدر یاد گرفتیم!
اگه اینکارو کنین ممنون میشم

Sahar66

با سلام و تشکر از آموزش های خوبتون
صفت Id و Class رو اصلا متوجه نمیشم که کاربردشون چیه؟
میشه ساده تر برام توضیح بدین؟
ممنون

سجاد دریس

سلام.
این نظرات رو بخونید

کیوان علی محمدی

سلام این تاپیک رو بخون کامل توضیح داده

محمّد حسن مهرآذر

سلام ببخشید در جاهایی شما فاصله قرار دادید ولی در جاهایی ندادید حتما باید به این صورت نوشته بشه؟
مثلا در عبارت rtl فاصله دادید:’rtl’> این یک پاراگراف راست به چپ است اما در عبارت contenteditable گفتید:’true’>این یک پاراگراف قابل ویرایش است.
پس این دو تا با هم فرق دارن یعنی در جایی فاصله داده شده ولی در عبارت دیگر نداده شده.

سجاد دریس

سلام.
نه فرق چندانی ندارن، بودن یا نبودن فاصله هم مهم نیست. فقط برای خوانایی کد، قبل و بعدش یه فاصله گذاشتم.

محمّد حسن مهرآذر

سلام ممنون از پاسختون.و ببخشید یک سوال دیگه الان من دارم HTML رو میخونم همزمان CSS هم بخونم چیزی از CSS دستگیرم میشه یا نه باید اول HTML رو تموم کنم؟

با تشکر

کیوان علی محمدی

بستگی به حوصله و علاقه خودت داره،اما اول HTML رو تموم کن بعدش برو CSS.

محمّد حسن مهرآذر

خیلی متشکرم.

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.