فلش‌کارت‌های آموزشی HTML و Templates: استفاده از الگوها برای ایجاد صفحات وب پویا

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

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

عنوان دوره: دوره HTML و Templates: استفاده از الگوها برای ایجاد صفحات وب پویا

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

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

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

• 1. مقدمه ای بر HTML و وب
• 2. HTML چیست و چرا اهمیت دارد؟
• 3. آشنایی با ساختار یک صفحه وب
• 4. اولین سند HTML خود را ایجاد کنید
• 5. تگ های اصلی HTML: head, body, html
• 6. تگ عنوان: عنوان صفحه وب خود را تعیین کنید
• 7. تگ های پاراگراف: نوشتن متن در HTML
• 8. تگ های عنوان: ایجاد عناوین و زیرعنوان ها
• 9. تگ های لیست: لیست های مرتب و نامرتب
• 10. تگ های لینک: ایجاد پیوند به صفحات دیگر
• 11. تگ های تصویر: افزودن تصاویر به صفحه وب
• 12. آشنایی با صفات (Attributes) در HTML
• 13. صفات اصلی و کاربردی HTML
• 14. صفات id و class: شناسایی عناصر
• 15. صفات src و alt برای تصاویر
• 16. صفات href برای لینک ها
• 17. تگ های فرم: ایجاد فرم های تعاملی
• 18. عناصر input: انواع مختلف ورودی متن
• 19. دکمه ها: ایجاد دکمه های submit و reset
• 20. انتخاب ها: ایجاد لیست های کشویی و چک باکس ها
• 21. تگ textarea: ایجاد کادر متن چند خطی
• 22. تگ label: برچسب گذاری عناصر فرم
• 23. HTML5 Semantic Tags: معرفی تگ های معنایی
• 24. تگ های header و footer
• 25. تگ های nav و aside
• 26. تگ article و section
• 27. تگ های figure و figcaption
• 28. آشنایی با جداول در HTML
• 29. ایجاد جدول با تگ table
• 30. سطرها و سلول ها: تگ های tr و td
• 31. عنوان جدول: تگ caption
• 32. ادغام سلول ها: صفات colspan و rowspan
• 33. استایل دهی به جداول با CSS (مقدماتی)
• 34. آشنایی با تگ های inline و block
• 35. تفاوت بین عناصر inline و block
• 36. نحوه استفاده از تگ span
• 37. نحوه استفاده از تگ div
• 38. ایجاد ساختار صفحه با div ها
• 39. آشنایی با مفهوم Layout در طراحی وب
• 40. مقدمه ای بر CSS: استایل دهی به صفحات HTML
• 41. انتخابگرها: انتخاب عناصر برای استایل دهی
• 42. قوانین CSS: تعریف استایل ها
• 43. واحد های اندازه گیری در CSS
• 44. رنگ ها و پس زمینه ها در CSS
• 45. فونت ها و متن ها در CSS
• 46. Box Model: درک مدل جعبه ای CSS
• 47. حاشیه ها و فاصله ها در CSS
• 48. موقعیت دهی عناصر: position در CSS
• 49. آشنایی با Flexbox: طراحی Layout های انعطاف پذیر
• 50. مقدمه ای بر JavaScript: افزودن تعامل به صفحات وب
• 51. نحوه افزودن JavaScript به HTML
• 52. متغیرها و انواع داده ها در JavaScript
• 53. عملگرها در JavaScript
• 54. شرط ها و حلقه ها در JavaScript
• 55. توابع در JavaScript
• 56. DOM Manipulation: دستکاری عناصر HTML با JavaScript
• 57. رویدادها (Events) در JavaScript
• 58. فرم ها و اعتبارسنجی با JavaScript
• 59. مقدمه ای بر Templates: ایجاد صفحات وب پویا
• 60. Templates چیست و چرا از آنها استفاده می کنیم؟
• 61. آشنایی با موتورهای Template
• 62. Syntax های مختلف Template Engines
• 63. متغیرها در Templates
• 64. حلقه ها در Templates
• 65. شرط ها در Templates
• 66. استفاده از فیلترها در Templates
• 67. ارث بری Templates: ایجاد Layout های قابل استفاده مجدد
• 68. partials: ایجاد بخش های قابل استفاده مجدد در Templates
• 69. ایجاد Template برای یک وبلاگ
• 70. ایجاد Template برای یک فروشگاه آنلاین
• 71. ایجاد Template برای یک پورتفولیو
• 72. ادغام HTML با داده ها از Backend
• 73. ارتباط HTML با پایگاه داده (مقدماتی)
• 74. نمایش داده های پویا در HTML
• 75. استفاده از AJAX برای بارگیری داده ها
• 76. JSON چیست و چگونه از آن استفاده کنیم؟
• 77. مقدمه ای بر Framework های CSS (Bootstrap, Tailwind)
• 78. Bootstrap: نصب و استفاده از کامپوننت ها
• 79. Grid System در Bootstrap
• 80. Tailwind CSS: استفاده از کلاس های utility
• 81. طراحی ریسپانسیو: سازگاری با دستگاه های مختلف
• 82. Media Queries: تنظیم استایل ها بر اساس اندازه صفحه نمایش
• 83. Viewports: تنظیم مقیاس صفحه نمایش
• 84. تست و عیب یابی HTML
• 85. استفاده از Developer Tools مرورگر
• 86. اعتبارسنجی HTML: اطمینان از صحت کد
• 87. بهینه سازی HTML برای موتورهای جستجو (SEO)
• 88. مقدمه ای بر دسترس پذیری (Accessibility) در HTML
• 89. بهترین روش ها در برنامه نویسی HTML
• 90. امنیت در HTML: جلوگیری از حملات XSS
• 91. استفاده از meta tags برای بهبود SEO
• 92. آینده HTML: معرفی تکنولوژی های جدید
• 93. پروژه عملی: ایجاد یک صفحه وب کامل با HTML و Templates
• 94. استفاده از CSS برای استایل دهی به پروژه
• 95. استفاده از JavaScript برای افزودن تعامل به پروژه
• 96. بهینه سازی پروژه برای اجرا در دستگاه های مختلف
• 97. استقرار پروژه روی هاست
• 98. تگ های تصویر: افزودن تصاویر به صفحات وب
• 99. تگ های جدول: سازماندهی اطلاعات در قالب جدول
• 100. فرم ها در HTML: جمع آوری اطلاعات از کاربران