فلش‌کارت‌های آموزشی HTML5 In Action: ساخت وب‌سایت‌های پویا و مدرن

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

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

عنوان دوره: دوره HTML5 In Action: ساخت وب‌سایت‌های پویا و مدرن

موضوع کلی: توسعه وب با HTML5

موضوع میانی: عناصر و ساختار HTML5

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

• 1. معرفی HTML5: چرا و چگونه
• 2. نصب و راه‌اندازی محیط توسعه (IDE, Editor, Browser)
• 3. مرورگرهای مدرن و پشتیبانی از HTML5
• 4. بررسی تفاوت‌های HTML5 با نسخه‌های قبلی
• 5. "Hello World" در HTML5: اولین سند وب شما
• 6. DOCTYPE جدید و ساده در HTML5
• 7. عنصر `<html>`: ریشه سند وب شما
• 8. عنصر `<head>`: متا اطلاعات و تنظیمات سند
• 9. تگ‌های `<meta>` ضروری برای Charset و Viewport
• 10. لینک‌دهی به CSS با عنصر `<link>`
• 11. درج اسکریپت‌های جاوااسکریپت با عنصر `<script>`
• 12. عنصر `<title>`: عنوان صفحه وب شما
• 13. عنصر `<body>`: محتوای قابل مشاهده صفحه
• 14. بخش‌بندی معنایی سند با HTML5
• 15. عنصر `<header>`: سربرگ صفحه یا بخش
• 16. عنصر `<nav>`: ناوبری اصلی سایت
• 17. عنصر `<main>`: محتوای اصلی و یکتای صفحه
• 18. عنصر `<article>`: محتوای مستقل و قابل توزیع
• 19. عنصر `<section>`: گروه‌بندی محتوای مرتبط
• 20. عنصر `<aside>`: محتوای جانبی و مرتبط
• 21. عنصر `<footer>`: پاورقی صفحه یا بخش
• 22. استفاده از `<div>` و `<span>` در HTML5 (کجا و چرا)
• 23. ساختار معنایی: بهترین تمرین‌ها
• 24. تگ‌های عنوان: `<h1>` تا `<h6>`
• 25. پاراگراف‌ها با عنصر `<p>`
• 26. لیست‌های نامرتب (`<ul>` و `<li>`)
• 27. لیست‌های مرتب (`<ol>` و `<li>`)
• 28. لیست‌های توضیحات (`<dl>`, `<dt>`, `<dd>`)
• 29. لینک‌ها و هایپرلینک‌ها با عنصر `<a>`
• 30. فرمت‌دهی متن: `<strong>`, `<em>`, `<b>`, `<i>`
• 31. شکست خط `<br>` و خط افقی `<hr>`
• 32. نقل قول‌ها: `<blockquote>` و `<q>`
• 33. کد، متغیر و نمونه خروجی: `<code>`, `<var>`, `<samp>`
• 34. زمان و تاریخ: عنصر `<time>`
• 35. تصاویر با عنصر `<img>`: ویژگی‌های `src`, `alt`, `width`, `height`
• 36. تصاویر ریسپانسیو با `<picture>` و `srcset`
• 37. افزودن فایل‌های صوتی با عنصر `<audio>`
• 38. کنترل‌های پخش صوتی و ویژگی‌های آن
• 39. افزودن فایل‌های ویدئویی با عنصر `<video>`
• 40. کنترل‌های پخش ویدئو و ویژگی‌های آن
• 41. زیرنویس و کپشن برای ویدئو با عنصر `<track>`
• 42. گنجاندن محتوای خارجی با `<iframe>`
• 43. شیء‌های تعبیه‌شده با `<embed>` و `<object>`
• 44. بهترین تمرین‌ها برای رسانه در وب
• 45. ساختار کلی فرم با عنصر `<form>`
• 46. عنصر `<input>`: انواع پایه (text, password, hidden)
• 47. عنصر `<label>`: ارتباط با فیلدها
• 48. دکمه‌ها با عنصر `<button>`
• 49. فیلد متنی چند خطی با `<textarea>`
• 50. لیست‌های کشویی با `<select>` و `<option>`
• 51. گروه‌بندی فیلدها با `<fieldset>` و `<legend>`
• 52. انواع ورودی جدید HTML5: `email` و `url`
• 53. انواع ورودی عددی: `number` و `range`
• 54. ورودی‌های تاریخ و زمان: `date`, `time`, `datetime-local`, `week`, `month`
• 55. ورودی `color` برای انتخاب رنگ
• 56. ورودی `search` برای فیلدهای جستجو
• 57. ورودی `tel` برای شماره تلفن
• 58. ویژگی `placeholder` برای راهنمای ورودی
• 59. ویژگی `required` برای فیلدهای اجباری
• 60. ویژگی `autofocus` و `autocomplete`
• 61. اعتبارسنجی سمت کاربر با ویژگی `pattern`
• 62. ویژگی `min`, `max`, `step` برای ورودی‌های عددی
• 63. لیست پیشنهادی با `<datalist>`
• 64. نمایش خروجی با عنصر `<output>`
• 65. اعتبار سنجی فرم بدون جاوااسکریپت: A Deep Dive
• 66. معرفی APIهای HTML5: نگاهی عملی
• 67. Canvas 2D: شروع کار با رسم اشکال پایه
• 68. Canvas 2D: رسم خطوط، منحنی‌ها و متن
• 69. Canvas 2D: کار با تصاویر و انیمیشن‌ها
• 70. معرفی SVG: گرافیک وکتور در مرورگر
• 71. API موقعیت جغرافیایی (Geolocation API)
• 72. API کشیدن و رها کردن (Drag and Drop API)
• 73. Web Storage API: ذخیره‌سازی محلی (localStorage)
• 74. Web Storage API: ذخیره‌سازی نشست (sessionStorage)
• 75. Web Workers API: اجرای اسکریپت در پس‌زمینه
• 76. Server-Sent Events (SSE): ارتباط یک‌طرفه با سرور
• 77. Web Sockets: ارتباط دوطرفه بلادرنگ (مقدمه)
• 78. Offline Web Applications: معرفی Application Cache (با هشدار)
• 79. معرفی Service Workers: آینده برنامه‌های PWA
• 80. File API: خواندن فایل‌های محلی توسط کاربر
• 81. History API: مدیریت تاریخچه مرورگر
• 82. Microdata و Schema.org: معنابخشی به محتوا
• 83. Fullscreen API: نمایش تمام صفحه
• 84. Page Visibility API: تشخیص فعال بودن تب
• 85. Notifications API: ارسال اعلان‌های دسکتاپ
• 86. Battery Status API: اطلاعات وضعیت باتری
• 87. Custom Elements: ساخت تگ‌های HTML سفارشی (مقدمه)
• 88. Shadow DOM: کپسوله‌سازی استایل و ساختار
• 89. HTML Templates: عناصر `<template>` و `<slot>`
• 90. Web Components: جمع‌بندی (Custom Elements, Shadow DOM, Templates)
• 91. Responsive Images با Client Hints
• 92. مقدمه‌ای بر دسترسی‌پذیری (Accessibility) در وب
• 93. نقش HTML معنایی در بهبود دسترسی‌پذیری
• 94. ARIA Roles و Attributes: افزایش دسترسی‌پذیری
• 95. اصول طراحی ریسپانسیو با HTML5 و CSS3
• 96. بهینه‌سازی عملکرد (Performance) با HTML5
• 97. تعامل HTML5 با CSS3: زیبایی و استایل
• 98. تعامل HTML5 با JavaScript: پویایی و عملکرد
• 99. تست و دیباگ کردن برنامه‌های HTML5
• 100. آینده HTML و استانداردهای وب