حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
← بازگشت به دوره‌ها
HTML از صفر؛ ساخت وب‌سایت
دوره رایگان 51 گام یادگیری آموزش تعاملی

HTML از صفر؛ ساخت وب‌سایت

یک مسیر تقریباً کامل HTML در ۵۱ گام: از اولین فایل تا متن، لینک، رسانه، تصاویر واکنش‌گرا، جدول، فرم، ساختار معنایی، دسترس‌پذیری، فراداده و پروژهٔ وب‌سایت سه‌صفحه‌ای؛ رایگان و بدون پیش‌نیاز.

مشاهده مسیر یادگیری

HTML از صفر تا ساخت یک وب‌سایت

این دورهٔ یکپارچه و رایگان، مباحث مهم و کاربردی HTML را از صفر تا موضوع‌های تکمیلی پوشش می‌دهد. هیچ تجربهٔ برنامه‌نویسی لازم نیست؛ همهٔ مسیر در همین یک دوره است.

مسیر دوره؛ ۸ بخش و ۵۱ گام

  1. اولین صفحه: وب، فایل HTML، ساختار سند، تگ و ویژگی
  2. متن و محتوا: تیتر، پاراگراف، فهرست، تأکید، نقل‌قول و کاراکترهای ویژه
  3. لینک و رسانه: مسیر فایل، ناوبری، alt، figure، تصاویر واکنش‌گرا، audio، video و زیرنویس
  4. HTML معنایی: ناحیه‌های صفحه، article و section، جدول و سرستون‌های دسترس‌پذیر
  5. فرم‌ها: label و name، انواع input، انتخاب‌ها، textarea و select، datalist، فایل، اعتبارسنجی و ارسال داده
  6. دسترس‌پذیری: صفحه‌کلید، نام کنترل، ARIA، ویژگی‌های عمومی و متن فارسی و دوجهته
  7. امکانات تکمیلی: فراداده، details و dialog، popover، iframe، progress و meter، SVG و canvas و MathML، template، اتصال CSS و JavaScript، خطایابی و انتشار
  8. پروژهٔ پایانی: سایت سه‌صفحه‌ای معرفی و ثبت‌نام کارگاه

چطور یاد می‌گیریم؟

۳۲ گام آموزشی و ۱۹ فعالیت شامل پیش‌بینی، تغییر و تکمیل کد، رفع اشکال و نوشتن HTML داریم. تمرین‌های کدنویسی در مرورگر پیش‌نمایش و بررسی خودکار دارند. راهنماهای تدریجی برای فعالیت‌ها در دسترس‌اند. نمونه‌ها را تغییر بده، نتیجه را ببین و علت آن را توضیح بده.

برای ساخت سایت چندصفحه‌ای، فایل‌ها را در رایانه هم ذخیره می‌کنی؛ یک ویرایشگر متن ساده و مرورگر کافی است. بررسی خودکار ساختارهای مشخص را می‌سنجد؛ کیفیت محتوا، دسترس‌پذیری کامل و رفتار سایت را با چک‌لیست‌های دستی هم بازبینی می‌کنی.

در پایان چه می‌سازی؟

یک سایت سه‌صفحه‌ای با ناوبری، تصویر، جدول، پرسش‌های متداول و فرم دسترس‌پذیر. فرم پروژه نمایشی است و ذخیرهٔ داده به سرور نیاز دارد. نقش و شیوهٔ اتصال CSS و JavaScript معرفی می‌شود؛ یادگیری این دو پیش‌نیاز دوره نیست. موضوع‌های وابسته به برنامه‌نویسی مانند رسم پویا و Web Components در حد شناخت کاربرد و مرز با HTML معرفی می‌شوند.

برای هر گام آموزشی حدود ۵ تا ۱۵ دقیقه و برای تمرین‌ها و پروژه زمان بیشتری در نظر بگیر. با تکمیل گام‌های الزامی، نشان «سازندهٔ صفحات HTML» را دریافت می‌کنی.

دربارهٔ محیط تمرین

پیش‌نمایش امن سایت، مجموعهٔ محدودی از تگ‌ها و ویژگی‌های HTML را نگه می‌دارد. برای مباحثی مثل اطلاعات head، برخی ویژگی‌های فرم، details، رسانه‌های بیرونی و بعضی جزئیات جدول، روش اجرای کامل در فایل محلی توضیح داده شده است. بررسی خودکارِ هر فعالیت فقط معیارهای اعلام‌شدهٔ همان فعالیت را می‌سنجد. یادگیری تمام مباحث دوره با یک مرورگر و ویرایشگر متن ساده ممکن است.

پیش‌نیازها

هیچ پیش‌نیاز آموزشی، برنامه‌نویسی، HTML، CSS یا JavaScript لازم نیست. از صفر شروع می‌کنیم. فقط کار معمولی با رایانه، ساخت پوشه و ذخیرهٔ فایل را قدم‌به‌قدم انجام می‌دهیم. هیچ دورهٔ دیگری پیش‌نیاز اجباری نیست.

دستاورد پایان دوره

سازندهٔ صفحات HTML

بج پایان دوره: سازندهٔ صفحات HTML

با تکمیل گام‌های الزامی دوره

آماده یادگیری هستید؟

برای ثبت پیشرفت وارد شوید

مسیر یادگیری

51 گام

۱. اولین صفحه؛ وب و ساختار سند HTML رایگان

  1. وب چیست؟ اولین فایل HTML را بساز
  2. تگ، عنصر و ویژگی؛ ساختار را بشناس
  3. head یا body؟ جای هر محتوا را پیدا کن
  4. اولین تغییر؛ تیتر و پاراگراف خودت را بساز
  5. کدام سند فارسی استاندارد است؟

۲. متن، فهرست و نشانه‌گذاری محتوا رایگان

  1. تیترها و پاراگراف‌ها؛ سلسله‌مراتب محتوا
  2. فهرست مرتب، نامرتب و توضیحی
  3. تمرین؛ برنامهٔ کارگاه را ساختار بده
  4. معنای متن؛ تأکید، نقل‌قول و اطلاعات دقیق
  5. نمایش کد، کاراکتر ویژه و فاصله‌ها

۳. لینک، تصویر و رسانه رایگان

  1. لینک و مسیر؛ بین صفحه‌ها حرکت کن
  2. تمرین؛ لینک داخلی و منوی صفحه
  3. تصویر، alt و توضیح figure
  4. تمرین؛ یک تصویر با توضیح درست
  5. تصاویر واکنش‌گرا؛ srcset، sizes و picture
  6. صدا، ویدئو و زیرنویس
  7. مرور رسانه؛ تصویر تزئینی چه alt دارد؟

۴. HTML معنایی و جدول‌های داده رایگان

  1. نقشهٔ صفحه؛ header، nav، main و footer
  2. article، section، aside؛ چه زمانی div بنویسیم؟
  3. تمرین؛ صفحهٔ کارگاه را معنایی کن
  4. جدول داده؛ caption، سرستون و بدنه
  5. تمرین؛ جدول دسترس‌پذیر جلسه‌ها

۵. فرم‌ها؛ دریافت اطلاعات از کاربر رایگان

  1. فرم چگونه کار می‌کند؟ label، name و ارسال
  2. انواع input؛ انتخاب مناسب برای هر داده
  3. اعتبارسنجی بومی؛ required، pattern و محدودیت‌ها
  4. انتخاب‌ها؛ radio، checkbox و fieldset
  5. textarea، select و پیشنهادهای datalist
  6. فایل، hidden و تفاوت disabled با readonly
  7. تمرین؛ فرم ایمیل با برچسب و اعتبارسنجی
  8. تمرین؛ انتخاب شیوهٔ حضور در کارگاه
  9. پیش‌بینی؛ کدام دادهٔ فرم ارسال می‌شود؟

۶. دسترس‌پذیری و صفحهٔ فارسی رایگان

  1. صفحه‌کلید و دسترس‌پذیری؛ مسیر قابل‌استفاده بساز
  2. نام دسترس‌پذیر و ARIA؛ اول HTML بومی
  3. فارسی و متن دوجهته؛ lang، dir و bdi
  4. ویژگی‌های عمومی؛ id، class، data و حالت‌های پنهان
  5. رفع اشکال؛ برچسب، توضیح و نام دکمه
  6. آزمون دستی دسترس‌پذیری؛ فقط ظاهر را نبین

۷. امکانات تکمیلی، فراداده و انتشار رایگان

  1. head حرفه‌ای؛ عنوان، توضیح، آیکون و فراداده
  2. عناصر تعاملی بومی؛ details، dialog و popover
  3. کدام ساختار پرسش‌وپاسخ درست است؟
  4. iframe و محتوای جاسازی‌شده؛ مرز یک سند دیگر
  5. نشان‌دادن مقدار؛ progress، meter و output
  6. گرافیک و فرمول؛ SVG، canvas و MathML
  7. اتصال CSS و JavaScript؛ template و مرز رفتار پویا
  8. خطایابی و اعتبارسنجی؛ مرورگر همهٔ خطاها را نشان نمی‌دهد
  9. انتشار، سازگاری و نقشهٔ ادامهٔ HTML

۸. پروژهٔ پایانی؛ وب‌سایت کارگاه رایگان

  1. طرح پروژه؛ یک سایت سه‌صفحه‌ای برای کارگاه
  2. پروژه؛ اسکلت معنایی و ناوبری صفحهٔ خانه
  3. پروژه؛ صفحهٔ درباره و اتصال سه فایل
  4. پروژه؛ فرم ثبت‌نام کارگاه
  5. چالش نهایی؛ صفحهٔ خانه را کامل و آمادهٔ انتشار کن