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

چالش نهایی؛ صفحهٔ خانه را کامل و آمادهٔ انتشار کن

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

برای ذخیره پیشرفت و استفاده از دستیار وارد شوید.

همهٔ قطعه‌ها را کنار هم بگذار

اسکلت صفحهٔ خانه را از گام دوم بردار و محتوای کاملش را بساز. تصویر واقعی دوره در کد اولیه داده شده است؛ برای نسخهٔ محلی می‌توانی آن را با تصویر مجاز خودت جایگزین کنی.

تحویل در ویرایشگر

  1. عنوان اصلی h1 با متن «کارگاه HTML» و لینک ثبت‌نام در nav با href="register.html"
  2. figure با یک img دارای alt غیرخالی، width و height، و figcaption با متن «یادگیری با ساختن»
  3. جدول با caption «برنامهٔ جلسه‌ها»، دو سرستون با scope="col" و دقیقاً دو ردیف داده در tbody
  4. دو پرسش متداول با details و summary
  5. footer با لینک mailto:hello@example.com

برای هر بخش محتوایی h2 مناسب بگذار. alt باید واقعاً تصویر را توضیح بدهد؛ فقط غیرخالی‌بودن آن کافی نیست، هرچند بررسی خودکار همین حد ساختاری را می‌سنجد.

تحویل سایت چندصفحه‌ای

کد را در index.html ذخیره کن. about.html و register.html گام‌های قبل را هم کامل کن. هر سه صفحه باید منوی درست، زبان و جهت فارسی، title مخصوص و یک main داشته باشند. مسیرها، داده‌های ساختگی فرم، Tab، بزرگ‌نمایی و نمایش موبایل را بررسی کن. سندها را اعتبارسنجی کن و فایل‌های گمشده را اصلاح کن.

بررسی خودکارِ این گام فقط محتوای همین سند را بررسی می‌کند؛ وجود فایل‌های محلی، کیفیت محتوا، رفتار سرور و دسترس‌پذیری کامل نیازمند بازبینی دستی است. با تکمیل این پروژه، مسیر اصلی HTML را طی کرده‌ای؛ برای ظاهر حرفه‌ای سراغ CSS و برای رفتار پویا سراغ JavaScript برو.

اجرای کامل در رایانه

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

برای بخش پرسش‌های متداول، یک section با id="faq" و h2 با متن «پرسش‌های متداول» بساز و دو details را داخل آن قرار بده. بررسی خودکار عنوان این بخش را می‌سنجد؛ باز و بسته‌شدن دو details، caption و scope جدول، ابعاد و نمایش تصویر را در فایل محلی بازبینی کن.

فعالیت شما

صفحهٔ خانهٔ کامل را مطابق معیارهای بالا بساز و «اجرا و بررسی پاسخ» را بزن. پس از قبولی، سه فایل پروژه را به‌صورت دستی از نظر ناوبری، صفحه‌کلید و اعتبار HTML بازبینی کن.

بخش پرسش‌های متداول باید section با id="faq" و h2 «پرسش‌های متداول» داشته باشد. معیارهای خودکار: عنوان اصلی، لینک ثبت‌نام، alt غیرخالی و caption تصویر، دو سرستون و دو ردیف جدول، عنوان بخش پرسش‌ها و لینک ایمیل. موارد حذف‌شده توسط محیط امن را در فایل محلی بررسی کن.

حالا نوبت توئه

کد رو طبق خواستهٔ تمرین تغییر بده، بعد «اجرا و بررسی پاسخ» رو بزن تا نتیجه رو ببینی.