معرفی صفت های عمومی در HTML بخش دوم

صفت هاي عمومي در HTML
صفت هاي عمومي در HTML

صفت style چیست ؟ چگونه از صفت style در html استفاده نماییم ؟ صفت عمومی title چیست ؟ صفت title در html چه کاربردی دارد ؟ از صفت hidden در html چه استفاده می شود ؟ اگر به دنبال یافتن پاسخ این سوالات هستید این مقاله آموزشی را به هیچ عنوان از دست ندهید.

پادکست های علی اسماعیلی در میزفا

آموزش صفات عمومی contenteditable ، title ، style و صفت hidden

در جلسه گذشته به معرفی تعدادی از صفت‌های عمومی در HTML پرداختیم در این جلسه قصد داریم به ادامه ی مبحث صفت‌های عمومی در HTML بپردازیم. در جلسه گذشته با صفت های عمومی dir ، class، id، و lang در HTML آشنا شدیم حال می خواهیم مابقی صفت‌های عمومی در HTML را به شما عزیزان آموزش دهیم.

صفت های عمومی در HTML

  • صفت title:

    زمانی که بخواهیم درباره ی یک المان یا عنصر توضیحاتی را ذکر کنیم تا هنگامی که کاربر اشاره گر موس خود را بر روی آن عنصر قرار داد این توضیحات به او نشان داده شود از صفت title درون تگ های HTML استفاده می‌کنیم به مثال زیر دقت کنید :

    <p title="آموزش طراحی سایت">Mizfa.com</p>
    صفت های عمومی - نتیجه کد 1
    نتیجه کد بالا
  • صفت style :

    با استفاده از صفت style می‌توانیم چندین ویژگی CSS را بر روی تگ های HTML اعمال نماییم این صفت ، ویژگی های CSS و مقدارشان را به عنوان مقدار می پذیرد در صورتی که بخواهیم از چندین ویژگی CSS در صفت style استفاده نماییم ویژگی های CSS باید با علامت سیمی کالن (;) از هم جدا شوند به مثال های زیر توجه کنید :

    در مثال ۲ دو ویژگی color و text-align با سیمی کالن از هم جدا شده‌اند.

    <p style="color:red"> این یک پاراگراف است </p>
    
    <h1 style="color:blue;text-align:center"> این یک پاراگراف است </h1>
صفت های عمومی - نتیجه کد
نتیجه کد بالا
  • صفت hidden:

    با استفاده از صفت hidden می‌توان عناصر را از دید کاربر مخفی کرد این صفت دو مقدار true و false را به عنوان مقدار می پذیرد زمانی که مقدار صفت hidden برابر با true باشد عنصر یا المان مخفی می شود و زمانی که مقدارش برابر false است المان به کاربر نشان داده می‌شود درصورتی که صفت hidden را همانند مثال ۲ بدون مقداردهی استفاده کنیم مقدار آن به صورت پیش فرض true در نظر گرفته می‌شود . به مثال های زیر توجه کنید :

    <p hidden='true'> این پاراگراف مخفی است </p>
    
    <p hidden> این پاراگراف مخفی است </p>
  • صفت contenteditable:

    با استفاده از صفت contenteditable می‌توانیم محتوای یک پاراگراف را برای کاربر قابل ویرایش نماییم این صفت دو مقدار true و false را به عنوان مقدار می‌پذیرد زمانی که مقدار contenteditable برابر true است متن پاراگراف برای کاربر قابل ویرایش می‌شود و وقتی که مقدارش برابر false باشد محتوای پاراگراف غیر قابل ویرایش است درصورتی که صفت contenteditable را همانند مثال ۲ بدون مقداردهی استفاده کنیم مقدار آن به صورت پیش فرض true در نظر گرفته می‌شود . به مثال زیر توجه کنید :

     <p contenteditable='true'> این پاراگراف قابل ویرایش است </p>
    
    <p contenteditable> این پاراگراف قابل ویرایش است </p>
    
    <p contenteditable='false'> این پاراگراف قابل ویرایش است </p>
    صفت های عمومی - نتیجه کد
    نتیجه کد بالا
[box type=”note” class=”” width=””]

توجه :

  • صفت hidden در مرورگر Internet Explorer ورژن 10 و پایین تر پشتیبانی نمی شود .
  • برای استایل دهی عناصر و تگ های HTML از زبان CSS استفاده می‌شود .

[/box]

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

خاصیت contenteditable چیکار میکنه ؟ یک نمونه مثال بزنید و تصویر آن را برایمان ارسال کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

خب به پایان این جلسه آموزشی رسیدیم در جلسه آینده به معرفی تگ های قالب بندی متن در HTML می‌پردازیم.

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

14 نظر

14 پاسخ

  1. خاصیت contenteditable به طور دیفالت false هست و کاربر اجازه ویرایش در سایت را ندارد اما اگر برای پاراگرافی مقدار این خاصیت را برابر true قرار دهیم کاربر می تواند پاراگراف را ویرایش کند.

    1. سلام محمد، ممنون درست گرفتی، جایزت به زودی شارژ میشه.

  2. contenteditable همونطور که از اسمش پیداست content edit able یعنی به کاربر این امکان رو میده که اون کانتنت یا محتوای مورد نظر که این صفت براش بکار گرفته شده رو اگر مقدار صفت true باشد قابل ویرایش باشه و اگه false باشه غیر قابل ویرایش !

    1. سلام فرهان، درست نوشتی. این تمرین کمی بروزرسانی شده، لطفا تمرین جدید رو هم برامون بفرست.

  3. با سلام و عرض ادب
    سوال پایان ترم رو دوستان جواب دادن و فقط برای جایزه‌ش میخوام منم جواب بدم چون در آینده به کارم میاد🙃
    Contentditable به پاراگراف این امکان رو میده که قابل ویرایش باشه یا خیر
    اما یه سوال برام پیش اومده که پاراگراف ها به طور معمول غیر قابل ویرایش هستند و اگر این صفتو اضافه نکنیم نمیشه ویرایششون کرد. اینکه گزینه‌ی false داره علتش چیه؟!

    1. سلام علی، این امکان در زمان هایی به کارت میاد که بخوای با وقوع یافتن یه پیش‌آمدی ‌این صفت از حالت True به false تغییر بکنه. مثلا داری یک آزمون ایجاد میکنی و وقتش به پایان رسیده. اون موقع با استفاده از Javascript میای این صفت رو غیر فعال می‌کنی.
      حالا میتونی کلا صفت رو هم پاک بکنی ولی خب این حرکت به نظرم کارت رو راحت تر می‌کنه.
      یا مثلا در حالت عادی این رو تعریف می‌کنی که false باشه و وقتی کاربر روی یک دکمه ای کلیک کرد ویرایش فعال بشه و اینکه از قبل صفت تعریف شده و فقط مقدارش تغییر میکنه کار رو ساده تر میکنه.

      راستی بابت پاسخ درستت جایزه‌ات را دریافت می‌کنی.

  4. می‌توانیم محتوای یک پاراگراف را برای کاربر قابل ویرایش نماییم این صفت دو مقدار true و false است

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

  5. سلام شما دقیقا دارید بر اساس سرفصلهای w3school پیش میرید خوشم اومد چون تنها سایتی هستید که مطالب رو تیکه پاره بیان نکردید فقط ای کاش تمرین یا مثال بیشتر میگذاشتید
    و یک مطلب من اصلا رشتم کامپیوتر نیست ولی خوب بخاطر علاقه معتاد گونم اومدم توی این فیلد فقط یکسری چیزها رو چون پایه تجربی دارم باید با پیگیری متوجه بشم و واقعا متعجم چطور در مورد contenteditable نمیدونستید چون فکر کنم داخل ویکی پیدیا بکار رفته و یا در هر سایتی که میخواهند مشارکتی اطلاعات رو بروز کنند مثل مترجم ها
    و مطلب آخر وجدانا عالی بود فقط لازمه دوستان یکسری به سایتهای ایرانی بزنند تا بفهمند چی میگم کمتر سایت فارسی پیدا میکنید که به اصل مطلب بپردازند و اصولا یکجوری میپیچونند

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

  6. پاسخ سوال :
    متن را برای کاربر قابل ویراش یا غیر قابل ویرایش میکند با مقدار true و false

    1. سلام محمد، درسته و به زودی هدیه‌ات را در میزفا آکادمی دریافت می‌کنی.

  7. با سلام
    صفت contenteditable ،صفتی که به متن خاصیت ویرایش شدن میده و کاربر یا کسی که متن و مشاهده میکنه میتونه متن رو ویرایش کنه این صفت دارای دو مقدار trueو false می باشد که مقدار trueقابلیت ادیت متن رو میده و مقدار falseمانع از ادیت متن میشه و contenteditabeبدون مقدار هم قابلیت ادیت رو فعال میکنه
    چون برای اولین بار است که پاسخ ارسال میکنم اینجا جواب دادم نمیدونم حالا جای درستی جواب دادم یا نه .
    ممنون از سایت خوبتون

    1. سلام ابوالفضل، جوابت درسته و به زودی هدیه‌ات را در میزفا آکادمی دریافت می‌کنی.

دیدگاهتان را بنویسید

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر