کتاب صوتی آشنایی با تصاویر و پیوندها در صفحات وب (HTML)

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

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

عنوان دوره: دوره آشنایی با تصاویر و پیوندها در صفحات وب (HTML)

موضوع کلی: فناوری اطلاعات و ارتباطات

موضوع میانی: طراحی و توسعه وب

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

• 1. مقدمه‌ای بر زبان نشانه‌گذاری ابرمتن (HTML)
• 2. ساختار اصلی یک سند HTML
• 3. اهمیت تصاویر در صفحات وب
• 4. انواع فرمت‌های تصویری رایج (JPEG, PNG, GIF)
• 5. نحوه درج تصاویر در HTML با تگ <img>
• 6. ویژگی `src` برای تعیین مسیر تصویر
• 7. ویژگی `alt` برای متن جایگزین تصویر
• 8. اهمیت متن جایگزین برای دسترسی‌پذیری
• 9. اندازه‌دهی تصاویر با ویژگی‌های `width` و `height`
• 10. نکات مهم در انتخاب و بهینه‌سازی تصاویر
• 11. مدیریت تصاویر در فولدرهای پروژه
• 12. استفاده از مسیرهای نسبی برای تصاویر
• 13. استفاده از مسیرهای مطلق برای تصاویر
• 14. قرار دادن تصاویر در پس‌زمینه صفحه
• 15. استفاده از تصاویر به عنوان لینک
• 16. مقدمه‌ای بر پیوندها در صفحات وب
• 17. تگ <a> برای ایجاد پیوندها
• 18. ویژگی `href` برای تعیین مقصد پیوند
• 19. پیوند به صفحات دیگر در همان وب‌سایت
• 20. پیوند به صفحات خارجی
• 21. پیوند به بخش‌های خاص در همان صفحه
• 22. پیوند به ایمیل (mailto:)
• 23. پیوند به شماره تلفن (tel:)
• 24. استفاده از تصاویر به عنوان متن پیوند
• 25. استایل‌دهی پیوندها با CSS
• 26. رنگ‌بندی پیوندها در حالت‌های مختلف (معمولی، هاور، فعال)
• 27. زیرخط پیوندها
• 28. هدف پیوند (`target` attribute)
• 29. باز کردن پیوند در پنجره جدید
• 30. پیوندهای دانلود فایل
• 31. پیوندهای ایمن (HTTPS)
• 32. مقدمه‌ای بر سازماندهی محتوا
• 33. استفاده از لیست‌های مرتب (ordered lists)
• 34. تگ <ol> و <li>
• 35. استفاده از لیست‌های نامرتب (unordered lists)
• 36. تگ <ul> و <li>
• 37. استفاده از لیست‌های توضیحات (description lists)
• 38. تگ <dl>, <dt>, <dd>
• 39. ساختاردهی محتوا با تگ‌های عنوان (h1 تا h6)
• 40. استفاده از پاراگراف‌ها (<p>)
• 41. خطوط افقی (<hr>)
• 42. شکست خطوط (<br>)
• 43. مقدمه‌ای بر جداول در HTML
• 44. ایجاد جدول با تگ <table>
• 45. تعریف سطر جدول با تگ <tr>
• 46. تعریف سلول سرتیتر با تگ <th>
• 47. تعریف سلول داده با تگ <td>
• 48. ترکیب سلول‌ها (colspan و rowspan)
• 49. اضافه کردن عنوان به جدول (<caption>)
• 50. گروه‌بندی سربرگ و بدنه جدول (<thead>, <tbody>, <tfoot>)
• 51. استایل‌دهی جداول با CSS
• 52. مقدمه‌ای بر فرم‌ها در HTML
• 53. تگ <form>
• 54. عناصر ورودی (input types)
• 55. فیلد متنی (<input type="text">)
• 56. فیلد رمز عبور (<input type="password">)
• 57. فیلد دکمه رادیویی (<input type="radio">)
• 58. فیلد چک‌باکس (<input type="checkbox">)
• 59. فیلد ارسال فرم (<input type="submit">)
• 60. فیلد بازنشانی فرم (<input type="reset">)
• 61. فیلد دکمه (<input type="button">)
• 62. فیلد تاریخ (<input type="date">)
• 63. فیلد ایمیل (<input type="email">)
• 64. فیلد URL (<input type="url">)
• 65. فیلد شماره تلفن (<input type="tel">)
• 66. فیلد عدد (<input type="number">)
• 67. فیلد جستجو (<input type="search">)
• 68. فیلد رنگ (<input type="color">)
• 69. فیلد محدوده (<input type="range">)
• 70. فیلد فایل (<input type="file">)
• 71. ناحیه متنی چندخطی (<textarea>)
• 72. لیست‌های کشویی (<select> و <option>)
• 73. برچسب‌ها برای عناصر فرم (<label>)
• 74. ویژگی `name` و `value` در عناصر فرم
• 75. اعتبارسنجی اولیه فرم‌ها (required, pattern)
• 76. مقدمه‌ای بر عناصر معنایی (Semantic Elements)
• 77. تگ <header>
• 78. تگ <nav>
• 79. تگ <main>
• 80. تگ <article>
• 81. تگ <section>
• 82. تگ <aside>
• 83. تگ <footer>
• 84. استفاده از `div` و `span` برای گروه‌بندی
• 85. مقدمه‌ای بر دسترسی‌پذیری وب (Accessibility)
• 86. اهمیت `alt` تگ برای تصاویر
• 87. استفاده صحیح از تگ‌های عنوان
• 88. ساختاردهی منطقی محتوا
• 89. امکان پیمایش با صفحه کلید
• 90. کنتراست رنگ مناسب
• 91. مقدمه‌ای بر بهینه‌سازی برای موتورهای جستجو (SEO)
• 92. اهمیت تگ‌های عنوان و توضیحات
• 93. استفاده از متن جایگزین برای تصاویر
• 94. ساختاردهی محتوا با تگ‌های معنایی
• 95. سرعت بارگذاری صفحه
• 96. نقش تصاویر و پیوندها در سئو
• 97. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 98. تنظیم اندازه تصاویر در دستگاه‌های مختلف
• 99. استفاده از واحدهای نسبی (%, em, rem)
• 100. ملاحظات نهایی در طراحی صفحات وب