پروژه نهایی HTML؛ ساخت صفحه معرفی خدمات | درس 20

درس 20 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

تا اینجا اجزای یک صفحه را جداگانه ساخته ایم؛ اکنون زمان کنار هم قرار دادن آنهاست. در پروژه نهایی HTML یک صفحه معرفی خدمات طراحی سایت می سازیم که منو، خدمات، نمونه کار، پرسش های رایج و فرم تمرینی دارد. هدف، ساخت سندی منظم و قابل استفاده است تا در ادامه دوره، ظاهر همین پایه را با CSS طراحی کنیم.

این درس جمع بندی بخش مقدماتی HTML است؛ دوره 60 جلسه ای ادامه دارد. قبل از شروع، ساختار معنایی در درس 15 و details و summary در درس 19 را مرور کنید. همه جلسات در فهرست آموزش HTML و CSS قرار دارند.

خروجی پروژه چه خواهد بود؟

صفحه ما برای یک «استودیو وب نمونه» فرضی است. نام برند، معرفی کوتاه و راهبری در ابتدای آن قرار می گیرد. بخش خدمات یک فهرست دارد، نمونه کارها دو معرفی مستقل دارند و پاسخ پرسش ها با انتخاب عنوان باز می شوند. فرم نیز ورودی های ضروری را بررسی می کند و به فایل دوم می رود. در این مرحله رنگ، ستون بندی و انیمیشن اضافه نمی کنیم؛ مرورگر ظاهر پایه را نمایش می دهد.

دو فایل پروژه را آماده کنید

پوشه ای به نام html-final-project بسازید و دو فایل index.html و thank-you.html در آن قرار دهید. هر دو فایل را با UTF-8 ذخیره کنید. به تصویر یا فیلم خارجی وابسته نیستیم، بنابراین همین دو فایل برای اجرای نسخه پایه کافی اند. پوشه بندی را در درس 3 درباره اولین پروژه وب و اسکلت سند را در درس 4 درباره head و body یاد گرفتیم.

کد کامل صفحه معرفی خدمات؛ index.html

کد زیر را کامل در index.html قرار دهید. مقدارهای بعد از # با id بخش مقصد برابر هستند. عنوان اصلی با h1، عنوان هر بخش با h2 و عنوان نمونه کارهای داخل آن با h3 نوشته شده است. منو را به صورت فهرست نگه داشته ایم؛ انتخاب عنصر بر اساس معنی است، نه اندازه ظاهری متن.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="معرفی خدمات و نمونه کارهای استودیو وب نمونه؛ پروژه آموزشی HTML.">
  <title>خدمات طراحی سایت | استودیو وب نمونه</title>
</head>
<body>
  <a href="#main-content">رفتن به محتوای اصلی</a>
  <header>
    <p><strong>استودیو وب نمونه</strong></p>
    <nav aria-label="منوی اصلی">
      <ul>
        <li><a href="#services">خدمات</a></li>
        <li><a href="#portfolio">نمونه کارها</a></li>
        <li><a href="#faq">پرسش های رایج</a></li>
        <li><a href="#request">درخواست مشاوره</a></li>
      </ul>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>طراحی سایت برای کسب و کارهای محلی</h1>
    <p>ما ساختار یک سایت شرکتی یا فروشگاهی را بر اساس نیاز کسب و کار آماده می کنیم.</p>
    <p><a href="#request">رفتن به فرم درخواست مشاوره</a></p>
    <section id="services">
      <h2>خدمات ما</h2>
      <ul>
        <li>طراحی سایت شرکتی برای معرفی خدمات</li>
        <li>طراحی سایت فروشگاهی برای نمایش محصولات</li>
        <li>بازبینی ساختار و محتوای صفحات</li>
      </ul>
    </section>
    <section id="portfolio">
      <h2>نمونه کارها</h2>
      <article>
        <h3>معرفی فروشگاه نمونه</h3>
        <p>این پروژه شامل معرفی محصولات و راه های ارتباط با فروشگاه است.</p>
      </article>
      <article>
        <h3>معرفی شرکت نمونه</h3>
        <p>این پروژه خدمات، سابقه شرکت و اطلاعات تماس را در دسترس مخاطب می گذارد.</p>
      </article>
    </section>
    <section id="faq">
      <h2>پرسش های رایج</h2>
      <details>
        <summary>برای شروع پروژه چه اطلاعاتی آماده کنم؟</summary>
        <p>هدف سایت، مخاطبان، فهرست خدمات و چند نمونه مورد پسند خود را مشخص کنید.</p>
      </details>
      <details>
        <summary>آیا این نمونه فرم، درخواست را برای شرکت می فرستد؟</summary>
        <p>خیر؛ این نسخه تمرینی است و به یک صفحه ثابت می رود.</p>
      </details>
    </section>
    <section id="request">
      <h2>فرم تمرینی درخواست مشاوره</h2>
      <p id="form-help">فقط داده ساختگی وارد کنید. این فرم پیام را ذخیره یا برای شرکت ارسال نمی کند.</p>
      <p>نام، ایمیل و نوع سایت ضروری هستند؛ توضیح پروژه اختیاری است.</p>
      <form action="thank-you.html" method="get" aria-describedby="form-help">
        <p>
          <label for="full-name">نام و نام خانوادگی (ضروری)</label>
          <input id="full-name" name="full_name" type="text"
                 minlength="3" required>
        </p>
        <p>
          <label for="email">ایمیل (ضروری)</label>
          <input id="email" name="email" type="email" required>
        </p>
        <p>
          <label for="site-type">نوع سایت (ضروری)</label>
          <select id="site-type" name="site_type" required>
            <option value="">یک مورد انتخاب کنید</option>
            <option value="company">شرکتی</option>
            <option value="shop">فروشگاهی</option>
          </select>
        </p>
        <p>
          <label for="project">توضیح پروژه (اختیاری)</label>
          <textarea id="project" name="project" rows="5" maxlength="1000"></textarea>
        </p>
        <button type="submit">ادامه تمرین و مشاهده صفحه بعد</button>
      </form>
    </section>
  </main>
  <footer>
    <p>این صفحه، پروژه آموزشی استودیو وب نمونه است.</p>
    <p><a href="mailto:hello@example.com">ایمیل نمونه: hello@example.com</a></p>
    <p><a href="#main-content">بازگشت به محتوای اصلی</a></p>
  </footer>
</body>
</html>

فرم این پروژه دقیقا چه کاری می کند؟

فرم با required ورودی های ضروری و با type=”email” قالب اولیه ایمیل را بررسی می کند. نام حداقل 3 نویسه دارد و گزینه ابتدایی select مقدار خالی دارد، پس انتخاب نوع سایت لازم است. ارتباط for و id باعث می شود هر ورودی برچسب مشخص داشته باشد. توضیح های کامل را در درس 12 درباره form و label، درس 13 درباره انواع ورودی و درس 14 درباره اعتبارسنجی ببینید.

در این تمرین method=”get” انتخاب شده تا رفتن به مقصد و قرار گرفتن مقدارهای دارای name در نشانی را ببینید. فقط داده ساختگی مانند نام «کاربر نمونه» و ایمیل sample@example.com وارد کنید. فایل thank-you.html ثابت است: داده را پردازش، ذخیره یا برای شرکت ایمیل نمی کند. تغییر method به post نیز به تنهایی سیستم دریافت درخواست نمی سازد؛ نسخه واقعی به پردازش سمت سرور و اعتبارسنجی دوباره نیاز دارد.

کد صفحه مقصد؛ thank-you.html

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

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>پایان تمرین فرم | استودیو وب نمونه</title>
</head>
<body>
  <main>
    <h1>به صفحه بعد تمرین رسیدید</h1>
    <p>این یک صفحه ثابت است؛ درخواست شما ثبت یا برای شرکت ارسال نشده است.</p>
    <p>هدف تمرین، بررسی ورودی ها و رفتن به مقصد تعیین شده در action بود.</p>
    <p><a href="index.html#request">بازگشت به فرم تمرینی</a></p>
  </main>
</body>
</html>

ابتدا هر دو فایل را ذخیره کنید، سپس index.html را در مرورگر باز کنید. اگر مقصد فرم پیدا نمی شود، نام thank-you.html و محل آن را بررسی کنید. در اجرای فایل محلی ممکن است مرورگر یا محیط، ارسال GET را متفاوت مدیریت کند؛ برای مشاهده رفتار وب، دو فایل را از وب سرور محلی یا میزبانی آزمایشی اجرا کنید.

پروژه را مرحله به مرحله آزمایش کنید

1. روی خدمات، نمونه کارها و فرم در منو بزنید؛ هر لینک باید بخش درست را نشان دهد.
2. پرسش های رایج را باز و بسته کنید؛ چند پاسخ مستقل می توانند همزمان باز بمانند.
3. دکمه ادامه را با فرم خالی بزنید؛ مرورگر باید تکمیل ورودی ضروری را درخواست کند.
4. نام دو نویسه ای وارد کنید و بررسی کنید محدودیت minlength اعمال می شود.
5. ایمیل نامعتبر و سپس sample@example.com را آزمایش کنید.
6. یک نوع سایت انتخاب کنید، فرم را با اطلاعات ساختگی کامل کنید و به صفحه دوم بروید.
7. لینک بازگشت صفحه دوم را بزنید؛ باید به فرم اصلی برسید.

با Tab و Shift + Tab بین لینک ها و کنترل ها حرکت کنید. محل تمرکز باید دیده شود و summary با صفحه کلید قابل فعال کردن باشد. روی گوشی هم ترتیب خواندن صفحه را بررسی کنید. این مراحل به درس 16 درباره دسترس پذیری مربوط هستند. ایمیل footer نیز فقط نمونه است؛ قبل از استفاده تجاری آن را با نشانی واقعی جایگزین کنید.

بررسی کد با اعتبارسنج HTML

برای بررسی ساختار، از Nu HTML Checker استفاده کنید و کد هر فایل را جداگانه وارد کنید یا فایل را بارگذاری کنید. خطاهای ساختاری را از اولین مورد اصلاح کنید و دوباره نتیجه را ببینید. اعتبارسنج می تواند مشکلات نشانه گذاری را پیدا کند، اما درست بودن متن، مقصد لینک ها، دریافت واقعی فرم یا کامل بودن دسترس پذیری را به تنهایی تضمین نمی کند.

اگر یک id را تکرار کرده اید، برای هر بخش شناسه یکتا انتخاب کنید. اگر منو به #request می رود ولی بخش فرم id دیگری دارد، نام ها را یکسان کنید. اگر مرورگر صفحه را به رغم تگ پایانی ناقص نمایش می دهد، این را دلیل درست بودن کد ندانید. در پروژه نهایی، نتیجه قابل مشاهده و ساختار کد را با هم بررسی می کنیم.

چرا همه تگ های قبلی را در پروژه نیاوردیم؟

پروژه باید نیاز مشخصی را پاسخ دهد. این صفحه به جدول داده، پخش کننده رسانه یا قاب صفحه دیگر نیاز ندارد، پس آنها را صرفا برای زیاد شدن تگ ها اضافه نکردیم. اگر برای معرفی نمونه کار فیلم واقعی دارید، مثال درس 17 درباره صوت و ویدیو را اضافه کنید؛ برای صفحه پیش نمایش مستقل نیز درس 18 درباره iframe مناسب است. هر قابلیت باید محتوای واقعی و هدف روشن داشته باشد.

تمرین درس 20؛ افزودن بخش درباره استودیو

یک بخش «درباره استودیو» با id=”about” و عنوان h2 بسازید. یک پاراگراف درباره روش کار تیم بنویسید و در منو به آن لینک بدهید. سپس یک گزینه سوم به select فرم با مقدار portfolio و متن «سایت نمونه کار» اضافه کنید. ترتیب عنوان ها و یکتا بودن شناسه ها را حفظ کنید.

<!-- این بخش را داخل main قرار دهید -->
<section id="about">
  <h2>درباره استودیو</h2>
  <p>ما ابتدا نیاز پروژه را بررسی می کنیم و سپس ساختار صفحات را می سازیم.</p>
</section>

<!-- این مورد را داخل ul منوی اصلی اضافه کنید -->
<li><a href="#about">درباره استودیو</a></li>

<!-- این گزینه را داخل select نوع سایت اضافه کنید -->
<option value="portfolio">سایت نمونه کار</option>

معیار پایان پروژه و ادامه دوره

وقتی صفحه به بخش درست می رود، عنوان ها ترتیب روشن دارند، هر ورودی برچسب دارد، پرسش ها کار می کنند و مقصد فرم موجود است، پایه HTML پروژه آماده است. ظاهر فعلی ساده است و این انتظار طبیعی مرحله ساختار است. در ادامه، بخش CSS را آغاز می کنیم تا رنگ، تایپوگرافی، فاصله ها و چیدمان را به همین پایه اضافه کنیم.

منابع مرور: ساختار سند در MDN و ساختار فرم در MDN.

درس قبلی: details و summary در HTML | درس 19