🎓 دوره آموزشی جامع
📚 اطلاعات دوره
عنوان دوره: HTML5 In Action: ساخت وبسایتهای پویا و مدرن
موضوع کلی: توسعه وب با HTML5
موضوع میانی: عناصر و ساختار HTML5
📋 سرفصل‌های دوره (100 موضوع)
- 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 و استانداردهای وب
HTML5 In Action: دروازه‌ای به سوی ساخت وبسایتهای پویا و مدرن
آیا تا به حال به این فکر کرده‌اید که وبسایتهای شگفت‌انگیز و تعاملی که هر روز با آن‌ها کار می‌کنید، چگونه ساخته می‌شوند؟ اسکلت و شالوده تمام این تجربیات دیجیتال، یک زبان قدرتمند و بنیادی به نام HTML5 است. امروزه، تسلط بر HTML5 دیگر یک انتخاب نیست، بلکه یک ضرورت برای هر کسی است که می‌خواهد در دنیای دیجیتال قدمی بردارد، اثری خلق کند یا یک مسیر شغلی پایدار بسازد.
دوره آموزشی “HTML5 In Action: ساخت وبسایتهای پویا و مدرن” با الهام از کتاب معتبر و جهانی “HTML5 in Action” طراحی شده است تا شما را از سطح صفر مطلق به یک متخصص در ساختاردهی وبسایتهای مدرن تبدیل کند. این دوره فقط مجموعه‌ای از ویدیوهای تئوری نیست؛ بلکه یک کارگاه عملی و یک سفر هیجان‌انگیز است که در آن، خط به خط کد می‌زنیم، مفاهیم را در عمل می‌بینیم و وب را همان‌طور که باید باشد، یعنی “در عمل” یاد می‌گیریم. آماده شوید تا قدرت واقعی مرورگر خود را آزاد کنید و ایده‌هایتان را به صفحات وب زنده و پویا تبدیل کنید.
درباره دوره: فراتر از تئوری، ورود به دنیای عمل
این دوره یک راهنمای جامع و قدم به قدم برای تسلط کامل بر HTML5 است. ما با پیروی از فلسفه کتاب “In Action”، یادگیری را از حالت خارج کرده و آن را به یک فرآیند فعال تبدیل می‌کنیم. در طول این دوره، شما نه تنها با تگ‌ها و عناصر مختلف آشنا می‌شوید، بلکه یاد می‌گیرید که چگونه از آن‌ها به صورت معنایی و هوشمندانه برای ساخت ساختارهای بهینه، سئوفرندلی و قابل دسترس (Accessible) استفاده کنید. از ساخت یک صفحه ساده تا کار با APIهای پیشرفته مانند Geolocation و Web Storage، همه چیز را به صورت عملی و با پروژه‌های کوچک تجربه خواهید کرد.
موضوعات کلیدی دوره
در این دوره، شما بر مفاهیم کلیدی و ضروری توسعه وب مدرن مسلط خواهید شد:
- ساختار معنایی (Semantic) وبسایتهای مدرن: یاد بگیرید چگونه با استفاده از تگ‌های جدید HTML5، ساختاری بهینه و قابل فهم برای موتورهای جستجو و کاربران ایجاد کنید.
- فرم‌های هوشمند و اعتبارسنجی پیشرفته: فرم‌های تعاملی با انواع ورودی‌های جدید و اعتبارسنجی داخلی (Built-in Validation) بسازید.
- کار با صوت، ویدیو و محتوای چندرسانه‌ای: به سادگی فایل‌های صوتی و ویدیویی را بدون نیاز به پلاگین‌های خارجی در صفحات وب خود جای دهید.
- ترسیم گرافیک دو‌بعدی با Canvas و SVG: دنیای گرافیک تحت وب را با ابزارهای قدرتمند Canvas و SVG کشف کنید و نمودارها و انیمیشن‌های ساده بسازید.
- ذخیره‌سازی داده در مرورگر (Web Storage): با استفاده از Local Storage و Session Storage، اطلاعات را در مرورگر کاربر ذخیره کرده و تجربه‌های کاربری ماندگار خلق کنید.
- تعامل با موقعیت مکانی کاربر (Geolocation API): یاد بگیرید چگونه به موقعیت جغرافیایی کاربر دسترسی پیدا کرده و اپلیکیشن‌های مکان‌محور بسازید.
این دوره برای چه کسانی ایده‌آل است؟
- علاقه‌مندان به ورود به دنیای برنامه‌نویسی وب بدون هیچ دانش قبلی.
- دانشجویان رشته‌های کامپیوتر و فناوری اطلاعات که به دنبال یادگیری عملی و کاربردی هستند.
- طراحان گرافیک و UI/UX که می‌خواهند طرح‌های خود را به کد تبدیل کرده و درک عمیق‌تری از محدودیت‌ها و امکانات وب پیدا کنند.
- توسعه‌دهندگان وب که با نسخه‌های قدیمی HTML کار کرده‌اند و قصد به‌روزرسانی دانش خود به استانداردهای مدرن را دارند.
- برنامه‌نویسان Front-End که به دنبال تسلط عمیق بر سنگ بنای وب (HTML) برای استفاده بهتر از فریم‌ورک‌هایی مانند React، Vue و Angular هستند.
- هر فرد خلاقی که رویای ساخت وب‌سایت شخصی، وبلاگ، فروشگاه اینترنتی یا پورتفولیوی آنلاین خود را در سر دارد.
چرا باید در دوره “HTML5 In Action” شرکت کنید؟
- آموزش پروژه-محور و عملی: با الهام از نام دوره، شما دائماً در حال ساختن و تجربه کردن هستید. این روش یادگیری، ماندگاری مطالب در ذهن شما را تضمین می‌کند.
- جامع‌ترین سرفصل آموزشی: با بیش از ۱۰۰ سرفصل دقیق و طبقه‌بندی شده، هیچ نکته‌ای از قلم نیفتاده است. این دوره یک مرجع کامل برای شما خواهد بود.
- بنیان مستحکم برای آینده شغلی: HTML5 پیش‌نیاز اصلی برای یادگیری CSS، JavaScript و تمام کتابخانه‌ها و فریم‌ورک‌های مدرن است. با یک پایه قوی، مسیر یادگیری شما هموارتر خواهد بود.
- یادگیری مطابق با آخرین استانداردهای جهانی: محتوای دوره بر اساس آخرین استانداردهای کنسرسیوم جهانی وب (W3C) تدوین شده و شما را برای بازار کار جهانی آماده می‌کند.
- افزایش شانس استخدام و ارتقاء شغلی: تسلط بر HTML5 یک مهارت بنیادی و پرتقاضا در تمام آگهی‌های شغلی مرتبط با توسعه وب است و شما را از دیگران متمایز می‌کند.
- صرفه‌جویی در زمان و هزینه: به جای جستجو در منابع پراکنده و نامعتبر، یک مسیر یادگیری مستقیم، بهینه و کامل را در اختیار خواهید داشت.
سرفصل‌های جامع دوره (100 درس کاربردی)
ما معتقدیم که جزئیات اهمیت دارند. در زیر لیست کامل ۱۰۰ سرفصل این دوره را مشاهده می‌کنید تا با عمق و گستردگی مطالب آشنا شوید:
- ۱. مقدمه: وب چگونه کار می‌کند؟ (کلاینت، سرور، HTTP)
- ۲. HTML چیست و چرا به آن نیاز داریم؟
- ۳. تاریخچه HTML و تولد HTML5
- ۴. ابزارهای مورد نیاز: ویرایشگر کد و مرورگر
- ۵. ساختار اولیه یک سند HTML5 (Doctype, html, head, body)
- ۶. مفهوم تگ‌ها، عناصر و ویژگی‌ها (Attributes)
- ۷. اولین صفحه وب شما: Hello World!
- ۸. کار با تگ‌های هدینگ (h1 تا h6)
- ۹. پاراگراف‌ها و شکستن خطوط (p, br)
- ۱۰. افزودن کامنت در کد HTML
- ۱۱. قالب‌بندی متن: تگ‌های b, strong, i, em
- ۱۲. تگ‌های sub و sup برای زیرنویس و توان
- ۱۳. نقل قول‌ها: blockquote و q
- ۱۴. نمایش کد در صفحه با code و pre
- ۱۵. آشنایی با لیست‌های نامرتب (ul, li)
- ۱۶. آشنایی با لیست‌های مرتب (ol, li)
- ۱۷. لیست‌های تو در تو (Nested Lists)
- ۱۸. لیست‌های تعریفی (dl, dt, dd)
- ۱۹. کار با لینک‌ها: تگ a و ویژگی href
- ۲۰. باز کردن لینک در تب جدید (target=”_blank”)
- ۲۱. لینک به بخش‌های مختلف یک صفحه (Anchor Links)
- ۲۲. لینک برای ارسال ایمیل (mailto)
- ۲۳. افزودن تصویر به صفحه با تگ img
- ۲۴. ویژگی‌های src و alt و اهمیت آن‌ها برای سئو
- ۲۵. تنظیم عرض و ارتفاع تصاویر
- ۲۶. مفهوم مسیرهای نسبی و مطلق (Relative vs Absolute Paths)
- ۲۷. ساخت جداول با table, tr, th, td
- ۲۸. ادغام سلول‌های جدول (colspan, rowspan)
- ۲۹. گروه‌بندی محتوای جدول: thead, tbody, tfoot
- ۳۰. افزودن عنوان به جدول با caption
- ۳۱. آشنایی با فرم‌ها: تگ form و ویژگی‌های action و method
- ۳۲. ورودی متنی: input type=”text”
- ۳۳. ورودی رمز عبور: input type=”password”
- ۳۴. دکمه ارسال فرم: input type=”submit”
- ۳۵. دکمه‌های رادیویی: input type=”radio”
- ۳۶. چک‌باکس‌ها: input type=”checkbox”
- ۳۷. برچسب‌گذاری عناصر فرم با تگ label
- ۳۸. گروه‌بندی عناصر فرم با fieldset و legend
- ۳۹. منوی کشویی (Dropdown) با select و option
- ۴۰. ناحیه متنی چندخطی با textarea
- ۴۱. دکمه‌های عمومی با تگ button
- ۴۲. انواع ورودی جدید در HTML5: email, url, number
- ۴۳. ورودی تاریخ و زمان: date, time, datetime-local
- ۴۴. ورودی انتخاب رنگ: color
- ۴۵. ورودی محدوده (Slider): range
- ۴۶. اعتبارسنجی داخلی فرم‌ها: ویژگی required
- ۴۷. اعتبارسنجی با الگوها: ویژگی pattern
- ۴۸. ویژگی‌های min, max, step برای ورودی‌های عددی
- ۴۹. ویژگی placeholder برای راهنمایی کاربر
- ۵۰. غیرفعال کردن عناصر فرم با disabled
- ۵۱. آشنایی با HTML معنایی (Semantic HTML)
- ۵۲. تگ header برای سربرگ سایت
- ۵۳. تگ nav برای منوی ناوبری
- ۵۴. تگ main برای محتوای اصلی صفحه
- ۵۵. تگ section برای بخش‌های مستقل
- ۵۶. تگ article برای محتوای مقاله‌مانند
- ۵۷. تگ aside برای محتوای جانبی (سایدبار)
- ۵۸. تگ footer برای پاورقی سایت
- ۵۹. تفاوت div و span با تگ‌های معنایی
- ۶۰. تگ figure و figcaption برای تصاویر و توضیحات آن‌ها
- ۶۱. تگ time برای نمایش تاریخ و زمان
- ۶۲. تگ mark برای هایلایت کردن متن
- ۶۳. تگ progress برای نمایش نوار پیشرفت
- ۶۴. تگ meter برای نمایش مقادیر اندازه‌گیری
- ۶۵. نمایش ویدیو در صفحه با تگ video
- ۶۶. کنترل‌های پخش ویدیو (controls, autoplay, loop)
- ۶۷. افزودن چندین منبع ویدیو با تگ source
- ۶۸. افزودن زیرنویس به ویدیو با تگ track
- ۶۹. پخش فایل صوتی با تگ audio
- ۷۰. کنترل‌های پخش فایل صوتی
- ۷۱. آشنایی با مفهوم iframe برای نمایش محتوای خارجی
- ۷۲. مقدمه‌ای بر گرافیک در وب: Canvas و SVG
- ۷۳. آشنایی با تگ canvas
- ۷۴. ترسیم خطوط و اشکال ساده در Canvas با جاوااسکریپت (مقدماتی)
- ۷۵. آشنایی با گرافیک برداری مقیاس‌پذیر (SVG)
- ۷۶. نمایش یک فایل SVG ساده در HTML
- ۷۷. مفهوم متا تگ‌ها (Meta Tags)
- ۷۸. تنظیم رمزگذاری کاراکترها با meta charset=”UTF-8″
- ۷۹. متا تگ description و اهمیت آن برای سئو
- ۸۰. متا تگ keywords (و چرایی عدم اهمیت امروزی آن)
- ۸۱. متا تگ author و viewport
- ۸۲. افزودن آیکون سایت (Favicon)
- ۸۳. آشنایی با API های HTML5
- ۸۴. مقدمه‌ای بر Web Storage API
- ۸۵. ذخیره داده با localStorage
- ۸۶. ذخیره داده موقت با sessionStorage
- ۸۷. تفاوت localStorage و sessionStorage
- ۸۸. مقدمه‌ای بر Geolocation API
- ۸۹. دریافت موقعیت مکانی کاربر
- ۹۰. مدیریت خطاها در Geolocation API
- ۹۱. ویژگی contenteditable برای ویرایش محتوا در صفحه
- ۹۲. ویژگی draggable برای ساخت عناصر قابل کشیدن و رها کردن
- ۹۳. ویژگی data-* برای ذخیره داده‌های سفارشی
- ۹۴. مفهوم دسترسی‌پذیری (Accessibility) در وب
- ۹۵. نقش ویژگی‌های ARIA (مقدماتی)
- ۹۶. اعتبارسنجی کدهای HTML با W3C Validator
- ۹۷. بهترین شیوه‌ها (Best Practices) در کدنویسی HTML
- ۹۸. جمع‌بندی مفاهیم و ساختار یک صفحه کامل
- ۹۹. پروژه عملی ۱: ساخت یک صفحه وبلاگ شخصی
- ۱۰۰. پروژه عملی ۲: ساخت یک فرم تماس پیشرفته
📚 محتوای این محصول آموزشی (پکیج کامل)
💡 این محصول یک نسخهٔ کامل و جامع است
تمامی محتوای آموزشی این کتاب در قالب یک بسته‌ی کامل و یکپارچه ارائه می‌شود و شامل تمام نسخه‌ها و فایل‌های موردنیاز برای یادگیری است.
🎁 محتویات کامل بسته دانلودی
- ویدیوهای آموزشی فارسی — آموزش قدم‌به‌قدم، کاربردی و قابل فهم
- پادکست‌های صوتی فارسی — توضیح مفاهیم کلیدی و نکات تکمیلی
- کتاب PDF فارسی — شامل کلیهٔ سرفصل‌ها و محتوای آموزشی
- کتاب خلاصه نکات ویدیوها و پادکست‌ها – نسخه PDF — مناسب مرور سریع و جمع‌بندی مباحث
- کتاب صدها نکته فارسی (خودمونی) – نسخه PDF — زبان ساده و کاربردی
- کتاب صدها نکته رسمی فارسی – نسخه PDF — نگارش استاندارد، علمی و مناسب چاپ
-
کتاب صدها پرسش و پاسخ تشریحی – نسخه PDF
— هر سؤال بلافاصله همراه با پاسخ کامل و شفاف ارائه شده است؛ مناسب درک عمیق مفاهیم و رفع ابهام. -
کتاب صدها پرسش و پاسخ چهارگزینه‌ای – نسخه PDF (نسخه یادگیری سریع)
— پاسخ‌ها بلافاصله پس از سؤال قرار دارند؛ مناسب یادگیری سریع و تثبیت مطالب. -
کتاب صدها پرسش و پاسخ چهارگزینه‌ای – نسخه PDF (نسخه خودآزمایی پایان‌بخش)
— پاسخ‌ها در انتهای هر بخش آمده‌اند؛ مناسب آزمون واقعی و سنجش میزان یادگیری. -
کتاب تمرین‌های درست / نادرست (True / False) – نسخه PDF
— مناسب افزایش دقت مفهومی و تشخیص صحیح یا نادرست بودن گزاره‌ها. -
کتاب تمرین‌های جای خالی – نسخه PDF
— تقویت یادگیری فعال و تسلط بر مفاهیم و اصطلاحات کلیدی.
🎯 این بسته یک دورهٔ آموزشی کامل و چندلایه است؛ شامل آموزش تصویری، صوتی، کتاب‌ها، تمرین‌ها و خودآزمایی .
ℹ️ نکات مهم هنگام خرید
- این محصول به صورت فایل دانلودی کامل ارائه می‌شود و نسخهٔ چاپی ندارد.
- تمامی فایل‌ها و کتاب‌ها کاملاً فارسی هستند.
- توجه: لینک‌های اختصاصی دوره طی ۴۸ ساعت پس از ثبت سفارش ارسال می‌شوند.
- نیازی به درج شماره موبایل نیست؛ اما برای پشتیبانی سریع‌تر توصیه می‌شود.
- در صورت بروز مشکل در دانلود با شماره 09395106248 تماس بگیرید.
- اگر پرداخت انجام شده ولی لینک‌ها را دریافت نکرده‌اید، نام و نام خانوادگی و نام محصول را پیامک کنید تا لینک‌ها دوباره ارسال شوند.
💬 راه‌های ارتباطی پشتیبانی:
واتس‌اپ یا پیامک:
09395106248
تلگرام: @ma_limbs
نقد و بررسی‌ها
هنوز بررسی‌ای ثبت نشده است.