معرفی صفت های عمومی در 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 نظر

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

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

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