HTML زبان ساختار صفحه است، نه ظاهر آن. اگر تازه شروع کرده‌اید، اولین سؤال معمولاً «کدام فریم‌ورک؟» نیست؛ این است که «این کد را کجا بنویسم و چطور نتیجه‌اش را ببینم؟». این دوره دقیقاً از همان‌جا شروع می‌شود و تا ساختن یک صفحهٔ واقعی و انتشار آن روی هاست ادامه پیدا می‌کند.
در ۱۶ ویدیوی کوتاه، از ساخت اولین فایل index.html تا پروژهٔ کامل «صفحهٔ محصول یک فروشگاه» را گام‌به‌گام می‌سازید. هر خط کد را همان لحظه کنار خروجی واقعی مرورگر می‌بینید؛ نه اسلاید، نه تصویر ساختگی.
این دوره برای چه کسی است؟
- کسی که هیچ‌وقت کد ننوشته و نمی‌داند از کجا شروع کند.
- کسی که چند ویدیو و مقالهٔ پراکنده دیده، ولی هنوز نمی‌تواند یک صفحهٔ کامل و درست بسازد.
- طراح یا تولیدکنندهٔ محتوا که می‌خواهد ساختار صفحات را خودش بفهمد و دست‌به‌دست نشود.
- کسی که می‌خواهد قبل از CSS و جاوااسکریپت، پایه را محکم یاد بگیرد و بعد سراغ فریم‌ورک برود.
اگر از قبل HTML کار کرده‌اید، این دوره بیشتر برای مرتب‌کردن دانسته‌ها است: تگ‌های معنایی، دسترس‌پذیری، فرم و سئوی پایه چیزهایی هستند که در بیشتر آموزش‌های سریع جا می‌افتند.
بعد از این دوره چه کاری می‌توانید انجام دهید
- یک صفحهٔ کامل HTML از صفر بنویسید و بدانید هر تگ چرا آن‌جاست.
- سند را درست بسازید:
doctype،head، انکودینگ UTF-8، زبان فارسی و جهت راست‌به‌چپ. - متن، تیتر، لینک، تصویر، لیست و جدول را با تگ مناسب بنویسید، نه با تگ تصادفی.
- فرم کامل بسازید: برچسب، انواع ورودی، انتخاب، ارسال و اعتبارسنجی بومی مرورگر.
- صفحه را با تگ‌های معنایی بچینید تا هم برای مرورگر، هم برای موتور جستجو و هم برای اسکرین‌ریدر خوانا باشد.
- صفحه را قابل‌دسترس کنید: پیمایش با کیبورد، کنتراست،
altدرست،ariaپایه. - متادیتای صفحه را برای سئو و اشتراک‌گذاری تنظیم کنید:
title،description، Open Graph،canonical. - فایل‌ها را منظم بچینید، مسیرها را درست ببندید و صفحه را روی هاست منتشر کنید.
سرفصل‌های دوره
۱۶ ویدیو در پنج بخش، از راه‌اندازی تا پروژه و مسیر ادامه.
بخش ۱ — راه‌اندازی عملی
- پیش‌نیاز عملی: اولین فایل HTML، حلقهٔ ذخیره و رفرش — ساخت پوشه و فایل، پسوند، انکودینگ، باز کردن با مرورگر،
Ctrl+SوF5، و سه اشتباه رایج روزهای اول.
بخش پایه — سند، متن، لینک، رسانه
- HTML چیست و سند چطور ساخته می‌شود — نقش HTML در برابر CSS و JS، درخت DOM به زبان ساده،
doctype، ساختارhead/body،meta charsetوviewport،title، وlang/dirبرای فارسی. - متن و تایپوگرافی HTML — سلسله‌مراتب
h1تاh6و قاعدهٔ یکh1، پاراگراف،strong/emدر برابرb/i، نقل‌قول،brوhr،code/pre/kbd، وmark. - لینک‌ها و مسیرها — مسیر نسبی، مطلق و ریشه‌ای، پرش داخل صفحه،
mailto:وtel:،targetباrelدرست، وdownload. - تصویر و رسانه —
img، متن جانشینaltدرست و غلط، ابعاد و جلوگیری از پرش چیدمان، بارگذاری تنبل،figure،srcsetساده، ویدیو و صدا، وiframeبا نکتهٔ امنیتی.
بخش داده و ساختار — لیست و جدول
- لیست‌ها و ساختار فهرست —
ulوol، لیست تودرتو،dl/dt/ddبرای واژه‌نامه، لیست داخلnavبرای منو، و شمارش معکوس. - جدول داده — چه زمانی جدول و چه زمانی لیست،
caption،thead/tbody/tfoot،thوscope، ادغام خانه‌ها، و جدول واکنش‌گرا.
بخش فرم — ورودی و ارسال
- فرم ۱: ورودی‌ها —
formوaction/method،labelباfor، انواعinput(متن، ایمیل، رمز، عدد، تاریخ، تلفن، آدرس، جستجو)، تفاوتplaceholderباlabel،nameوvalue،textarea، وautocomplete. - فرم ۲: انتخاب و ارسال —
select/optionوoptgroup،radioوcheckbox،fieldset/legend، اعتبارسنجی بومی باrequiredوpattern،buttonارسال و بازنشانی، وdatalist.
بخش کیفیت — معنایی‌سازی، دسترس‌پذیری، سئو
- معنایی‌سازی صفحه — چرا
divکافی نیست،header/nav/main/section/article/aside/footer، و منطق تیترها داخل بخش‌ها؛ همراه با بازسازی یک صفحهٔ خبری با تگ معنایی. - دسترس‌پذیری — سلسله‌مراتب تیتر و پیمایش اسکرین‌ریدر، ترتیب
tabو حالتfocus، پیوند پرش به محتوای اصلی،aria-labelوroleپایه، متن لینک معنادار، و کنتراست و اندازهٔ متن. - سئوی پایه و متادیتا —
titleصفحه و طول درست،meta description، Open Graph و توییتر کارت،canonical، فاوآیکن، ساختار لینک داخلی، و اشاره بهrobots.txtو نقشهٔ سایت.
بخش حرفه‌ای و پروژه
- HTML کاربردی پیشرفته — آکاردئون بدون جاوااسکریپت با
details/summary، مودال بومی باdialog،template،data-*،progressوmeter، وiframeامن. - کار با فایل‌های واقعی و انتشار — ساختار پوشهٔ پروژه، مسیر تصاویر، چرا لینک یا تصویر ۴۰۴ می‌شود، اسم‌گذاری فایل‌ها،
index.htmlدر ریشه، و اولین انتشار روی هاست ساده. - پروژهٔ پایانی: صفحهٔ محصول یک فروشگاه — انتخاب تگ‌ها برای هر بخش، سرصفحه و منو، معرفی محصول و تصویر، جدول مشخصات، فرم سفارش، بخش‌های معنایی و پاورقی، و بازبینی نهایی دسترس‌پذیری و سئو.
- جمع‌بندی و مسیر ادامه — چرا ظاهر کار CSS است، ترتیب پیشنهادی یادگیری، چک‌لیست مهارت‌های HTML، و قدم بعدی.
پیش‌نیاز و ابزار
- هیچ پیش‌نیازی لازم نیست؛ اپیزود ۱ از نصب‌نکرده شروع می‌کند.
- یک کامپیوتر (ویندوز، مک یا لینوکس) و یک مرورگر به‌روز.
- یک ویرایشگر متن؛ در دوره با یک ویرایشگر کد ساده کار می‌کنیم، ولی حتی ویرایشگر پیش‌فرض سیستم هم کافی است.
- نیازی به نصب سرور، فریم‌ورک یا ابزار خط فرمان نیست.
دسترسی و شروع
پنج ویدیوی اول دوره — اپیزود ۱ تا ۵ — آزاد است و بدون ثبت‌نام می‌توانید ببینید. اگر تا آن‌جا با ما همراه باشید، ساختار سند، متن، لینک و رسانه را عملاً یاد گرفته‌اید و می‌توانید ادامهٔ راه را با اطمینان شروع کنید. بقیهٔ دوره پس از خرید، در همین صفحه باز می‌شود.
سؤالات پرتکرار
اگر کمی HTML بلد باشم، این دوره به کارم می‌آید؟
بله. بخش‌های معنایی‌سازی، دسترس‌پذیری، فرم و سئوی پایه همان چیزهایی هستند که در آموزش‌های سریع جا می‌افتند و کیفیت کار حرفه‌ای را می‌سازند.
برای این دوره باید CSS هم بلد باشم؟
نه. تمام دوره با HTML خالص است و عمداً وارد استایل‌دهی نمی‌شود؛ در اپیزود آخر توضیح داده می‌شود که از کجا و با چه ترتیبی سراغ CSS بروید.
صفحه‌ها فارسی و راست‌به‌چپ هستند؟
بله. از اپیزود اول با lang و dir و متن فارسی کار می‌کنیم و مسیرها، فایل‌ها و نمونه‌ها همه در همین بستر ساخته می‌شوند.
در پایان دوره چه چیزی ساخته‌ام؟
یک صفحهٔ محصول کامل: سرصفحه و منو، معرفی محصول با تصویر، جدول مشخصات، فرم سفارش، بخش‌های معنایی و پاورقی — صفحه‌ای که می‌توانید همان‌طور که هست منتشرش کنید.
بعد از HTML چه چیزی یاد بگیرم؟
به ترتیب: CSS برای ظاهر، بعد جاوااسکریپت برای رفتار. اپیزود آخر همین مسیر را با ترتیب و دلیل نشان می‌دهد.
قدم بعدی
با اپیزود ۱ شروع کنید: یک پوشه، یک فایل، یک صفحه. اگر آن‌جا جا افتادید، بقیهٔ دوره هم برایتان جا نخواهد افتاد؛ و اگر جا نیفتادید، ۱۵ اپیزود بعدی منتظرتان است.