دوره HTML و Custom Elements: گسترش قابلیت‌های HTML با عناصر سفارشی همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره HTML و Custom Elements: گسترش قابلیت‌های HTML با عناصر سفارشی

موضوع کلی: برنامه نویسی

موضوع میانی: HTML

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر وب و استانداردهای آن
• 2. تاریخچه و تکامل HTML
• 3. آشنایی با ساختار یک سند HTML
• 4. تگ‌های اصلی: html, head, body
• 5. مفهوم تگ‌ها، عناصر و ت‌ها
• 6. عنوان صفحه و متا تگ‌ها (Title & Meta Tags)
• 7. اتصال فایل‌های CSS و JavaScript
• 8. عناصر سرتیتر (Headings) از h1 تا h6
• 9. پاراگراف‌ها و قالب‌بندی متن
• 10. لیست‌های مرتب و نامرتب (Ordered & Unordered Lists)
• 11. لینک‌ها و انواع آن
• 12. کار با تصاویر و ت‌های ضروری
• 13. جداول: ساختار و کاربرد
• 14. مفهوم HTML معنایی (Semantic HTML)
• 15. عناصر ساختاری: header, footer, nav, main
• 16. عناصر محتوایی: section, article, aside
• 17. فرم‌ها و عناصر ورودی (Forms & Inputs)
• 18. انواع مختلف Input در فرم‌ها
• 19. برچسب‌ها، نواحی متنی و دکمه‌ها (Labels, Textareas, Buttons)
• 20. عناصر انتخاب (Select & Option)
• 21. اعتبارسنجی فرم‌ها در سمت کلاینت
• 22. عناصر چندرسانه‌ای: Audio و Video
• 23. جاسازی محتوا با Iframe
• 24. کامنت‌گذاری در HTML
• 25. موجودیت‌های کاراکتری (Character Entities)
• 26. ویژگی‌های سراسری (Global Attributes) مانند id و class
• 27. مفهوم عناصر Block و Inline
• 28. آشنایی با ویژگی‌های data-*
• 29. مقدمه‌ای بر دسترس‌پذیری وب (Accessibility)
• 30. اعتبارسنجی کد HTML با W3C Validator
• 31. چرا به جاوا اسکریپت در کنار HTML نیاز داریم؟
• 32. معرفی مدل شیءگرای سند (DOM)
• 33. انتخاب عناصر DOM با getElementById و getElementsByClassName
• 34. انتخاب عناصر با querySelector و querySelectorAll
• 35. دستکاری محتوای عناصر: innerHTML و textContent
• 36. تغییر ویژگی‌های (Attributes) عناصر
• 37. کار با کلاس‌های CSS از طریق classList
• 38. ایجاد، افزودن و حذف عناصر DOM
• 39. مقدمه‌ای بر رویدادها (Events) در جاوا اسکریپت
• 40. افزودن شنونده رویداد (Event Listener)
• 41. مقدمه‌ای بر کلاس‌ها در ES6 (Classes)
• 42. معرفی Web Components: یک نمای کلی
• 43. Custom Elements چیست؟ چرا به آنها نیاز داریم؟
• 44. تفاوت عناصر سفارشی خودگردان و سفارشی‌سازی شده
• 45. تعریف یک عنصر سفارشی با customElements.define()
• 46. چرخه حیات (Lifecycle) یک عنصر سفارشی
• 47. متد connectedCallback: اتصال به DOM
• 48. متد disconnectedCallback: جداسازی از DOM
• 49. متد adoptedCallback: جابجایی بین اسناد
• 50. متد attributeChangedCallback: واکنش به تغییر ویژگی‌ها
• 51. مشاهده ویژگی‌ها با static get observedAttributes()
• 52. مقدمه‌ای بر Shadow DOM: کپسوله‌سازی استایل و ساختار
• 53. ایجاد یک Shadow Root با attachShadow()
• 54. تفاوت Shadow DOM باز و بسته (Open vs. Closed)
• 55. کار با درخت Shadow DOM
• 56. استایل‌دهی ایزوله در Shadow DOM
• 57. شبه‌کلاس host: برای استایل‌دهی به خود عنصر
• 58. شبه‌کلاس host(): استایل‌دهی شرطی به عنصر میزبان
• 59. مقدمه‌ای بر اسلات‌ها (Slots)
• 60. استفاده از اسلات پیش‌فرض
• 61. استفاده از اسلات‌های نام‌گذاری شده (Named Slots)
• 62. استایل‌دهی به محتوای اسلات با slotted()
• 63. عنصر template: محتوای غیرفعال و قابل استفاده مجدد
• 64. کلون کردن محتوای template
• 65. ترکیب همه چیز: ساخت اولین کامپوننت کامل
• 66. ارث‌بری از عناصر داخلی HTML (Customized built-in elements)
• 67. ثبت یک عنصر سفارشی‌سازی شده داخلی
• 68. ارسال داده به کامپوننت‌ها از طریق Attributes
• 69. کار با داده‌های پیچیده (مانند JSON) در Attributes
• 70. تفاوت Properties و Attributes و نحوه همگام‌سازی آنها
• 71. ایجاد و ارسال رویدادهای سفارشی (Custom Events)
• 72. گوش دادن به رویدادهای سفارشی از خارج کامپوننت
• 73. ترکیب کامپوننت‌ها: عناصر سفارشی تودرتو
• 74. مدیریت وضعیت (State) داخلی در یک عنصر سفارشی
• 75. الگوهای ساده اتصال داده (Data Binding)
• 76. مبحث پیشرفته: دسترس‌پذیری در عناصر سفارشی
• 77. استفاده از نقش‌ها و ویژگی‌های ARIA
• 78. مدیریت فوکوس در Shadow DOM
• 79. ارتباط عناصر سفارشی با فرم‌ها (Form-associated custom elements)
• 80. استفاده از ElementInternals API
• 81. ساخت یک عنصر ورودی فرم سفارشی
• 82. بارگذاری تنبل (Lazy Loading) عناصر سفارشی
• 83. استراتژی‌های استایل‌دهی: استفاده از CSS Custom Properties برای تم‌بندی
• 84. عبور استایل از Light DOM به Shadow DOM
• 85. استایل‌دهی بخش‌های داخلی کامپوننت با CSS Parts (::part)
• 86. یکپارچه‌سازی با فریمورک‌ها: یک نمای کلی
• 87. استفاده از عناصر سفارشی در یک پروژه React
• 88. استفاده از عناصر سفارشی در یک پروژه Angular
• 89. استفاده از عناصر سفارشی در یک پروژه Vue.js
• 90. ساختار پروژه برای یک کتابخانه کامپوننت
• 91. معرفی ابزارهای ساخت (Build Tools) مانند Vite
• 92. بسته‌بندی (Bundling) کامپوننت‌ها برای توزیع
• 93. استفاده از Polyfill برای مرورگرهای قدیمی
• 94. نوشتن مستندات برای کامپوننت‌ها
• 95. استفاده از Storybook برای توسعه و نمایش کامپوننت‌ها
• 96. تست واحد (Unit Testing) عناصر سفارشی
• 97. بهترین شیوه‌ها در نام‌گذاری عناصر و ویژگی‌ها
• 98. انتشار کامپوننت‌ها در NPM
• 99. استراتژی‌های نسخه‌بندی و نگهداری
• 100. پروژه نهایی: ساخت یک کتابخانه کوچک از عناصر سفارشی