دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۰
  • مهر

جلسه ۰۵ : صفات در HTML

  • دسته‌بندی‌ها :
جلسه ۰۵ : صفات در HTML
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی استفاده از صفات در html یا کاربرد صفات در html ، بپردازیم. صفات ( Attributes ) ، در html برای توصیف یک عنصر html بکار می رود. مواردی از جمله رنگ، اندازه، فونت ، تصویر پس زمینه و… توسط صفات در html برای یک عنصر html استفاده می شود. در html ، صفات هر عنصر در  بخش شروع تعریف هر تگ قرار می گیرد.

      البته توصیف عناصر در html را با استفاده از ابزاری نظیر جاوااسکریپت و ابزار  css در html ، می توان انجام داد. استفاده از این ابزاری مزایایی نسبت به تریف صفات در داخل تگ ها دارد.

      در ادامه ی این مطلب به آموزش استفاده از صفات ( Attributes ) در html ، می پردازیم.

      Attributes

      Attributes

      استفاده از صفات در html

      در html صفات همیشه در قالب نام صفت و مقدار آن به صورت زیر تعریف می شود:

      “name=”value

      اکنون به بررسی برخی از صفات پرکاربرد html می پردازیم:

      صفت href

      لینک های html در داخل تگ <a> تعرف می شوند. و آدرس آنها در صفت href قرار می گیرد.

      مثال : صفت href
      خودتان امتحان کنید »

      صفت src

      تصاویر در html با استفاده از تگ <img> شناخته می شوند. و آدرس دهی تصاویر به سایت توسط صفت src در این تگ انجام می شود.

      مثال : صفت src
      خودتان امتحان کنید »

      صفات width و height

      این دو صفت در html ، اندازه یک عنصر را توصیف می کنند.

      مثال : اندازه عکس
      خودتان امتحان کنید »

      صفت alt

      این صفت در html در واقع یک متن جایگزین را برای تصاویر ، تعریف می کند، در صورتی تصویر به هر علتی نمایش داده نشود متن جایگزین به جای تصویر قرار می گیرد.

      مثال : صفت alt
      خودتان امتحان کنید »

      مثال : کاربرد صفت alt
      خودتان امتحان کنید »

      صفت style

      از این صفت در html در واقع برای استفاده از کدهای css به منظور تغییر دادن و ایجاد جلوه های خاص در ظاهر عناصر html به کار می رود.

      مثال: قرمز کردن رنگ یه عنصر:

      مثال : صفت style
      خودتان امتحان کنید »

      صفت lang

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

      مثال: تعریف زبان انگلیسی برای وب سایت:

      مثال : 

      صفت title

      از این صفت برای بیان عنوان در یک عنصر html استفاده می شود.

      مثال: تعریف عناون برای تگ <p>:

      مثال : صفت title
      خودتان امتحان کنید »

      توصیه ی ما : استفاده از حروف کوچک

      شما در کدنویسی html در استفاده از حروف کوچک یا بزرگ مختارید، اما ما توصیه می کنیم که برای راحتی کار از حروف کوچک بخصوص در XHTML استفاده کنید.

      نوشتن مقادیر صفات در دابل کوتیشن

      در استاندارد HTML5 نوشتن مقادیر صفات بدون استفاده از دابل کوتیشن (“”) نیز پشتیبانی می شود.

      اما بهتر است به دلایلی از جمله افزایش خوانایی  مقادیر صفات عناصر html را بین دابل کوتیشن (“”) قرار دهید.

      مثال : حالت غیر استاندارد
      خودتان امتحان کنید »

      مثال : حالت استاندارد
      خودتان امتحان کنید »

       تک کوتیشن و دابل کوتیشن

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

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

      مثال : 

      و یا :

      مثال : حالت صحیح
      خودتان امتحان کنید »

      خلاصه ی این بخش :

      تمام عناصر HTML می توانند دارای صفات باشند.
      ویژگی title دارای اطلاعات”tool-tip” اضافی است.
      ویژگی href اطلاعات آدرس را برای لینک ها فراهم می کند.
      ویژگی های width و height اطلاعات اندازه را برای تصاویر ارائه می کنند.
      ویژگی alt متن جایگزین را برای خوانندگان صفحه فراهم می کند.
      در آموزش های این دوره، ما همیشه از حروف کوچک استفاده می کنیم.
      در آموزش های این دوره، ما همیشه مقادیر ویژگی با نقل قول ها را نقل می کنیم.

      سخن پایانی

      صفات ( Attributes ) ، مهمترین و اصلی ترین بخش های هر عنصر html است. و تصور یک سایت  کارآمد بدون استفاده از صفات به هر شکلی، تقریبا غیر ممکن است. از این رو پی وی لرن ، اقدام به انتشار این مطلب مفید و کارآمد در خصوص آشنایی به طریقه استفاده از صفات در html کرده است.

      QR:  جلسه ۰۵ : صفات در HTML
      به اشتراک بگذارید