فلش‌کارت‌های آموزشی HTML & XHTML: از مبتدی تا حرفه‌ای، راهنمای جامع ساخت صفحات وب

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

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

عنوان دوره: دوره HTML & XHTML: از مبتدی تا حرفه‌ای، راهنمای جامع ساخت صفحات وب

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

موضوع میانی: ایجاد و ساختاردهی محتوای وب

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

• 1. مقدمه‌ای بر وب، اینترنت و پروتکل HTTP
• 2. تاریخچه HTML و XHTML: سیر تکامل استانداردها
• 3. انتخاب و تنظیم ابزارهای توسعه: ویرایشگر کد و مرورگر وب
• 4. ساخت اولین صفحه HTML: Hello World و ذخیره‌سازی فایل
• 5. ساختار اصلی یک سند HTML: `<html>`, `<head>`, `<body>`
• 6. تگ `<head>` و محتوای آن: متادیتا و اطلاعات سند
• 7. تگ `<title>`: تعیین عنوان نمایش داده شده در مرورگر
• 8. متا تگ‌ها (`<meta>`): معرفی، کاربردها (charset, description, keywords, viewport)
• 9. اعلام نوع سند (DOCTYPE): اهمیت و نحوه استفاده
• 10. کامنت‌ها در HTML: نوشتن توضیحات در کد
• 11. مفهوم عناصر (Elements) و صفت‌ها (Attributes) در HTML
• 12. تگ‌های خودبسته (Self-closing tags) در HTML و XHTML
• 13. تفاوت تگ‌های بلاک (Block-level) و اینلاین (Inline)
• 14. استانداردهای وب و نقش کنسرسیوم W3C
• 15. نحوه اتصال فایل‌های CSS و JavaScript به سند HTML (مقدماتی)
• 16. ساختاردهی منطقی کد HTML و تورفتگی (Indentation)
• 17. استفاده از صفت `lang` برای مشخص کردن زبان سند
• 18. ایجاد عنوان‌ها: `<h1>` تا `<h6>` و سلسله مراتب آنها
• 19. پاراگراف‌ها: تگ `<p>` و کاربرد آن
• 20. شکستن خط (Line Break): تگ `<br>`
• 21. فرمت‌دهی پایه متن: پررنگ (`<b>`, `<strong>`) و کج (`<i>`, `<em>`)
• 22. زیرخط‌دار کردن (`<u>`), خط‌خورده (`<s>`, `<del>`) و برجسته‌سازی (`<mark>`)
• 23. بالانویس (`<sup>`) و پایین‌نویس (`<sub>`) برای کاربردهای خاص
• 24. نقل قول‌های طولانی: تگ `<blockquote>`
• 25. نقل قول‌های کوتاه و اختصارات: تگ‌های `<q>` و `<abbr>`
• 26. نمایش کد، متغیر و ورودی کاربر: تگ‌های `<code>`, `<var>`, ` <samp>`, `<kbd>`
• 27. نمایش متن پیش‌فرمت‌دهی شده: تگ `<pre>`
• 28. آدرس‌ها و اطلاعات تماس: تگ `<address>`
• 29. تگ `<cite>` برای ارجاع به منبع
• 30. تگ `<bdo>` برای تغییر جهت متن (Bidirectional Override)
• 31. کاراکترهای خاص و موجودیت‌های HTML (HTML Entities)
• 32. بخش‌بندی محتوای عمومی با `<div>` و `<span>`
• 33. ایجاد خط افقی جداکننده: تگ `<hr>`
• 34. اهمیت سمنتیک بودن در انتخاب تگ‌های متن
• 35. اصول خوانایی و نگارش متن در وب
• 36. مفهوم هایپرلینک (Hyperlink) و تگ `<a>`
• 37. صفت `href`: مسیردهی مطلق و نسبی
• 38. ایجاد لینک‌های داخلی در صفحه (Anchors/Bookmarks)
• 39. لینک به ایمیل، شماره تلفن و فایل‌ها
• 40. صفت `target`: باز کردن لینک در تب یا پنجره جدید
• 41. صفت `rel` برای ارتباط با منبع (nofollow, noreferrer)
• 42. اضافه کردن تصاویر به صفحه: تگ `<img>`
• 43. صفت‌های `src`, `alt`, `width`, `height` برای تصاویر
• 44. تصاویر و لینک‌ها: ایجاد یک لینک با استفاده از تصویر
• 45. فرمت‌های تصویر مناسب برای وب: JPEG, PNG, GIF, SVG, WebP
• 46. تگ `<figure>` و `<figcaption>` برای نمایش تصاویر با توضیحات
• 47. آشنایی با Favicon: نمایش آیکون وب‌سایت در مرورگر
• 48. اصول بهینه‌سازی تصاویر برای عملکرد بهتر وب
• 49. مقدمه‌ای بر `<video>`: افزودن ویدئو به صفحه (با ذکر پشتیبانی HTML5)
• 50. مقدمه‌ای بر `<audio>`: افزودن فایل صوتی به صفحه (با ذکر پشتیبانی HTML5)
• 51. استفاده از `<object>` و `<embed>` برای محتوای چندرسانه‌ای و پلاگین‌ها (روش سنتی)
• 52. صفت `controls`, `autoplay`, `loop`, `muted` در تگ‌های رسانه‌ای
• 53. ارائه متن جایگزین و زیرنویس برای محتوای چندرسانه‌ای: تگ `<track>`
• 54. نقشه تصاویر (Image Maps): ایجاد نواحی قابل کلیک در یک تصویر
• 55. رعایت دسترسی‌پذیری در استفاده از تصاویر و رسانه‌ها
• 56. لیست‌های نامرتب (Unordered Lists): `<ul>` و `<li>`
• 57. لیست‌های مرتب (Ordered Lists): `<ol>` و `<li>` با صفت‌های `type` و `start`
• 58. ایجاد لیست‌های تودرتو (Nested Lists) برای ساختارهای پیچیده
• 59. لیست‌های تعریفی (Description Lists): `<dl>`, `<dt>`, `<dd>`
• 60. کاربردهای پیشرفته لیست‌ها (مثلاً برای منوهای ناوبری)
• 61. معرفی جداول در HTML: تگ `<table>` و ساختار پایه
• 62. ردیف‌های جدول (`<tr>`) و سلول‌های سربرگ (`<th>`) و داده (`<td>`)
• 63. بخش‌های معنایی جدول: `<thead>`, `<tbody>`, `<tfoot>`
• 64. ادغام سلول‌ها: صفت‌های `colspan` و `rowspan`
• 65. عنوان جدول (`<caption>`) و گروه‌بندی ستون‌ها (`<colgroup>`, `<col>`)
• 66. معرفی فرم‌ها در HTML: تگ `<form>` و هدف آن
• 67. صفت‌های `action` و `method` (GET vs. POST)
• 68. عناصر ورودی متنی: `<input type="text">`, `password`, `email`, `url`, `tel`
• 69. عناصر ورودی عددی، تاریخ و زمان: `number`, `range`, `date`, `time`, `datetime-local`
• 70. چک‌باکس‌ها (`checkbox`) و رادیوباتن‌ها (`radio`)
• 71. دکمه‌ها: `submit`, `reset`, `button` و `image`
• 72. منوهای کشویی تک‌انتخابی و چندانتخابی: `<select>`, `<option>`, `<optgroup>`
• 73. فیلدهای متنی چندخطی: `<textarea>`
• 74. برچسب‌گذاری فیلدها: تگ `<label>` و اهمیت دسترسی‌پذیری آن
• 75. فیلدهای مخفی: `<input type="hidden">`
• 76. گروه‌بندی فیلدها: `<fieldset>` و `<legend>`
• 77. صفت‌های `placeholder`, `required`, `readonly`, `disabled`
• 78. آپلود فایل: `<input type="file">` با صفت `accept`
• 79. اعتبار سنجی فرم‌ها در سمت کاربر (Client-side validation)
• 80. عناصر خروجی: `<output>` و `<datalist>`
• 81. طراحی فرم‌های کاربرپسند و اصول UX/UI
• 82. رعایت دسترسی‌پذیری (Accessibility) در طراحی فرم‌ها
• 83. نقش جاوااسکریپت در تعامل با فرم‌ها (مقدماتی)
• 84. معرفی HTML5 و تفاوت‌های کلیدی با HTML4 و XHTML
• 85. عناصر سمنتیک جدید HTML5 برای ساختاردهی: `<header>`, `<footer>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`
• 86. ساختاردهی کامل یک صفحه وب با استفاده از عناصر سمنتیک
• 87. تفاوت‌های اساسی HTML و XHTML: قوانین سخت‌گیرانه XML
• 88. نحوه صحیح نوشتن کد XHTML: قواعد Small-eXtensible Markup Language
• 89. XML Declaration و DOCTYPEهای مختلف در XHTML (Strict, Transitional, Frameset)
• 90. تگ `<base>`: تعیین URL پایه برای لینک‌های نسبی
• 91. تگ `<link>` برای ارتباط با فایل‌های خارجی (CSS, Favicon)
• 92. کاربرد `id` و `class` برای شناسایی عناصر و استایل‌دهی
• 93. کاربرد تگ‌های `<frame>`, `<frameset>` و `<noframes>` (مقدماتی و نکات امنیتی)
• 94. اصول طراحی واکنش‌گرا (Responsive Design) با HTML و متاتگ Viewport
• 95. اصول دسترسی‌پذیری (Accessibility) پیشرفته: نقش ARIA attributes
• 96. بهترین روش‌ها (Best Practices) در کدنویسی HTML/XHTML تمیز و کارآمد
• 97. اعتبارسنجی کد HTML/XHTML (Validation) با ابزارهای W3C
• 98. بهینه‌سازی عملکرد وب (Web Performance) با ساختار HTML
• 99. استفاده از ابزارهای توسعه مرورگر (Browser Developer Tools) برای رفع اشکال
• 100. جمع‌بندی: گام‌های بعدی در مسیر توسعه وب (CSS، JavaScript، فریم‌ورک‌ها)