صفت ها در HTML

اعمال تنظیمات بیشتر و کاربردی روی تگ ها

طراحي سايت - صفت ها در HTML
آموزش طراحي سايت با اچ تي ام ال - صفت ها در HTML

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

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

صفت ها در HTML

به وسیله ی صفت ها یا Attribute ها در HTML می‌توانیم ویژگی ها و تنظیمات خاصی را به تگ های HTML اعمال نماییم و کنترل بیشتری بر روی تگ های HTML داشته باشیم از این رو صفت ها یکی از مهم ترین و اصلی ترین بخش ها در HTML هستند. به عنوان مثال با استفاده از صفت id می توانیم یک شناسه ی منحصر به فرد به تگ های HTML نسبت دهیم.

ما در میزفا علاوه بر کلمه صفت ها، گاها از کلمه خاصیت هم برای معرفی Attribute ها استفاده کرده‌ایم.

انواع صفت ها در اچ تی ام ال (HTML) :

صفت ها در اچ تی ام ال به دو دسته تقسیم می‌شوند: صفت های عمومی و صفت های اختصاصی

  • صفت های عمومی  :

    این صفات در بین تگ های اچ تی ام ال مشترک هستند و در تمام تگ ها کار یکسانی را انجام می‌دهند به عنوان مثال صفت align برای تگ p نحوه چینش متن پاراگراف را کنترل می‌کند.

  • صفت های اختصاصی :

    این صفات منحصر به تگ های خاصی هستند به عنوان مثال صفت type یک صفت اختصاصی برای تگ input محسوب می‌شود .

صفت ها در HTML از دو بخش Name و Value تشکیل می‌شوند و همیشه در تگ آغازین به کار می‌روند.

  • Name: این بخش معرف نام صفت است مثلا صفت class یک صفت عمومی است که همه تگ های اچ تی ام ال از این صفت استفاده می‌نمایند.
  • Value: این بخش مقداری را برای صفت تعیین می‌کند مثلا مقدار rtl برای صفت dir باعث راست چین شدن متن پاراگراف می‌شود.

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

<tagname attribute1='value' attribute2='value'> content </tagname>

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

<p dir="rtl"> معرفی صفات در اچ تی ام ال (HTML) </p>
[box type=”note” align=”alignright” class=”” width=”100%”]

نکته :

  • توجه داشته باشید که صفت ها همیشه باید داخل دابل کوتیشن (” “) و یا سینگل کوتیشن (‘ ‘) قرار بگیرند و با علامت = به نام صفت منتسب شوند.
  • صفات HTML نسبت به کوچکی و بزرگی حروف حساس نیستند اما W3C (کنسرسیوم شبکه جهانی وب) که وظیفه استانداردسازی HTML و CSS را برعهده دارد توصیه می‌کند که از حروف کوچک (LowerCase) برای نام گذاری صفات استفاده کنید.

[/box]

پایانترم

خب امیدوارم که به صورت خیلی خلاصه با خاصیت ها یا صفت ها آشنا شده باشید. بریم سراغ پایان ترم خودمون.

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

سوال:

یک تگ <a> بسازید و خاصیت href را برابر https://mizfa.com قرار دهید.

همچنین خاصیت‌های alt و title را نیز بسازید و مقدار آن را برابر Mizfa قرار دهید.

مقدار تگ a را برابر میزفا قرار دهید.

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

[/box]

نتیجه گیری

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

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

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

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

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

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

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

36 نظر

36 پاسخ

  1. سلام
    جواب رو به صورت عکس میزارم و امیدوارم جایزه هارو یکی یکی بگیرم که برنامه دارم برا استفاده 🙂
    یه سوال هم داشتم، بود یا نبود صفت title تو این کد چه کاربردی داره؟ ممنون می شم جواب بدین

    1. سلام امیر.
      جایزه داده شده.
      بودن title بیشتر به تجربه کاربری یا UX کمک میکنه. مثلا ما میتونیم در title بنویسیم “کلیک کن” تا وقتی کاربر ماوس رو روی لینک میبره اون دستور ما رو ببینه و احتمال کلیک بیشتر بشه.

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

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

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

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

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

    1. سلام علی، کاری نداره یه سری کلمات هستند که فقط کافیه به کد هات اضافه کنی.
      مثلا در کد زیر، عبارت class=”” یک صفت هست که ما معرفی کردیم و داخل دابل کوتیشن ها عنوان کلاس را می‌نویسیم که همون مقدار خاصیت یا صفتمون هستش.

      <p class=”” > mizfa.com </p class=”” >

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

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

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

  3. با سلام صفت آی دی رو در تگ پی در سایتتون توضیح دادین؟میشه لینک آموزش های اون قسمت رو برام بفرستید.
    ممنون.
    اسی

  4. با سلام و عرض خسته نباشید خدمت شما وسایر همکارانتان
    میشه صفت sizeرو در تگ پاراگراف برام لینکشو بفرستید چون تو سایت پیداش نمیکنم.
    ممنون.
    اسی.

    1. سلام اسی، برای تگ پاراگراف صفت سایز که نداریم، این صفت برای input و select هستش. اگر ویس رو گوش دادی، گفتم که صفت id رو مقدارش رو size میذاریم.

  5. واقعا دمتون گرم که این همه آموزش رو رایگان میزارید

    لطفا همینطور ادامه بدید.
    خدا قوت

    1. سلام مبین عزیز. ممنونم از حضورت. امیدوارم اموزش ها رو پیش ببری و نهایت استفاده رو بکنی.

  6. واقعا عالی !
    توضیحات واقعا کامل بود.
    خسته نباشی آرزو ابراهیمی

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

نشانی ایمیل شما منتشر نخواهد شد.

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

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

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

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