جلسه ۳۳ : آموزش کار با تگ details در HTML

• جزئیات
• نوع محتواآموزشی

مقدمه

سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته تگ del را شناختیم و آموختیم که تگ del متنی را که در یک صفحه وب حذف شده است تعریف می کند.
در این جلسه قصد داریم به آموزش کار با تگ details در HTML بپردازیم.

آموزش کار با تگ details در HTML

به مثال زیر توجه نمایید.
در این مثال ما از یک تگ details استفاده کرده ایم.

تعریف و کاربرد

تگ details تگی است که به کمک آن می توان جزئیات یک محتوا را از دید کاربر مخفی کرد و تنها در صورت درخواست او آن را نمایش داد.
از تگ details می توان برای ایجاد ویجت های تعاملی استفاده کرد که کاربر بتواند آن را باز و بسته کند.
هر نوع محتوایی را می توان درون تگ details قرار داد.
محتوای عنصر details نباید قابل مشاهده باشد مگر اینکه خصیصه attribute برای آن تعریف شده باشد.

پشتیبانی مرورگر ها

عنصر
<details>	۱۲٫۰	۴۹٫۰	۱۵٫۰	۶٫۰	پشتیبانی نمی شود

تفاوت بین HTML 4.01 و HTML5

تگ <details> در HTML5 تگ جدیدی محسوب  می شود.

نکات و توصیه ها

از تگ <summary> برای مشخص کردن عناوین قابل مشاهده برای جزئیات استفاده می شود.
با کلیک بر آن می توان محتوای پنهان شده را نمایش داده و با کلیک مجدد بر روی آن دوباره آن را مخفی نمود.

خصیصه ها

خصیصه های سراسری Global Attributes

تگ <details> از خصیصه های سراسری در HTML پشتیبانی می کند.

 خصیصه رویداد Event Attributes

تگ <details> از خصیصه رویداد در HTML پشتیبانی می کند.

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <details> را با مقادیر پیش فرض زیر نمایش می دهند:

کلام آخر

در این جلسه تگ details را شناختیم و آموختیم که details تگی است که به کمک آن می توان جزئیات یک محتوا را از دید کاربر مخفی کرد و در صورت در خواست کاربر آن را به نمایش گذاشت.
در جلسه آینده تگ dfn و کار با آن را می آموزیم.
با پی وی لرن همراه باشید.