🚀 درس یازدهم: پروژه نهایی HTML؛ ساخت یک وب‌سایت چندبخشی و استاندارد

👋

سلام مهمان عزیز!

برای دسترسی به تمام محتوا و امکانات، وارد شوید.

🎯 هدف این درس: ساخت یک وب‌سایت چندبخشی، استاندارد و معنایی با استفاده از HTML5 و تمام مفاهیمی که در این دوره یاد گرفته‌ای.

مهمان عزیز! 👋
به آخرین درس از دوره HTML سطح مقدماتی خوش آمدی.

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

در این پروژه یک وب‌سایت شخصی چندبخشی ایجاد می‌کنیم که شامل
Header، Navigation، Main، Section، Article، Aside، فرم تماس و Footer
خواهد بود.

💡 نکته مهم مهمان:

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

🧩 بخش ۱: ساختار پروژه

قبل از شروع کدنویسی بهتر است ساختار پروژه را مشخص کنیم.
برای پروژه نهایی، یک پوشه با نام my-website ایجاد کنید.

📁
ساختار پروژه

PROJECT
HTML5


my-website/
│
├── index.html
│
└── images/
    ├── profile.jpg
    ├── article-1.jpg
    └── article-2.jpg

فایل اصلی پروژه ما index.html خواهد بود.
این فایل نقطه شروع وب‌سایت محسوب می‌شود.

🏗️ بخش ۲: ساخت اسکلت اصلی HTML

ابتدا اسکلت استاندارد HTML5 را ایجاد می‌کنیم.
در این مرحله از DOCTYPE، تگ html، بخش head و body استفاده می‌کنیم.

🌐
index.html

HTML
HTML5


<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>
        وب‌سایت شخصی مهمان
    </title>

    <meta
        name="description"
        content="وب‌سایت شخصی و نمونه کارهای من"
    >

</head>

<body>

    محتوای سایت

</body>

</html>

🧭 بخش ۳: ساخت Header و Navigation

در بخش بالایی سایت، نام وب‌سایت و منوی اصلی را قرار می‌دهیم.
برای این کار از تگ‌های معنایی header و nav استفاده می‌کنیم.

🧭
Header و Navigation

HTML
HTML5


<header>

    <h1>
        وب‌سایت شخصی مهمان
    </h1>

    <p>
        توسعه‌دهنده و علاقه‌مند به فناوری
    </p>

    <nav aria-label="منوی اصلی">

        <ul>

            <li>
                <a href="#home">
                    خانه
                </a>
            </li>

            <li>
                <a href="#about">
                    درباره من
                </a>
            </li>

            <li>
                <a href="#articles">
                    مقالات
                </a>
            </li>

            <li>
                <a href="#contact">
                    تماس با من
                </a>
            </li>

        </ul>

    </nav>

</header>

🏠 بخش ۴: ساخت بخش معرفی

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

🏠
بخش معرفی

HTML
HTML5


<main>

    <section id="home">

        <h2>
            سلام، من مهمان هستم
        </h2>

        <p>
            به وب‌سایت شخصی من خوش آمدید.
            در این وب‌سایت می‌توانید با مهارت‌ها،
            پروژه‌ها و مقالات من آشنا شوید.
        </p>

        <a
            href="#contact"
        >
            ارتباط با من
        </a>

    </section>

</main>

👤 بخش ۵: درباره من

در این بخش از تصویر، متن، لیست و تگ‌های معنایی استفاده می‌کنیم.

👤
درباره من

HTML
HTML5


<section id="about">

    <h2>
        درباره من
    </h2>

    <figure>

        <img
            src="images/profile.jpg"
            alt="تصویر پروفایل مهمان"
            width="200"
        >

        <figcaption>
            تصویر پروفایل من
        </figcaption>

    </figure>

    <p>
        من به طراحی وب، برنامه‌نویسی و فناوری علاقه‌مند هستم.
    </p>

    <h3>
        مهارت‌های من
    </h3>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>WordPress</li>
    </ul>

</section>

📰 بخش ۶: ساخت مقالات

برای نمایش مطالب مستقل از تگ article استفاده می‌کنیم.
هر مقاله می‌تواند عنوان، تصویر، توضیح و لینک مطالعه داشته باشد.

📰
مقالات

HTML
HTML5


<section id="articles">

    <h2>
        آخرین مقالات
    </h2>

    <article>

        <h3>
            HTML چیست؟
        </h3>

        <p>
            HTML زبان نشانه‌گذاری استاندارد برای ساختار صفحات وب است.
        </p>

        <p>
            <time datetime="2026-08-16">
                ۱۶ مرداد ۱۴۰۵
            </time>
        </p>

        <a href="#">
            ادامه مطلب
        </a>

    </article>


    <article>

        <h3>
            چرا باید HTML معنایی بنویسیم؟
        </h3>

        <p>
            استفاده از عناصر معنایی باعث ساختار بهتر،
            دسترس‌پذیری بیشتر و درک بهتر محتوا می‌شود.
        </p>

        <a href="#">
            ادامه مطلب
        </a>

    </article>

</section>

📌 بخش ۷: استفاده از Aside

تگ aside برای محتوای جانبی مرتبط با محتوای اصلی استفاده می‌شود.
در پروژه خود می‌توانیم لینک‌های مفید و اطلاعات تکمیلی را در این بخش قرار دهیم.

📌
Aside

HTML
HTML5


<aside>

    <h2>
        لینک‌های مفید
    </h2>

    <ul>

        <li>
            <a href="https://developer.mozilla.org/"
                target="_blank"
                rel="noopener noreferrer"
            >
                MDN Web Docs
            </a>
        </li>

        <li>
            <a href="https://html.spec.whatwg.org/"
                target="_blank"
                rel="noopener noreferrer"
            >
                HTML Standard
            </a>
        </li>

    </ul>

</aside>

📨 بخش ۸: فرم تماس

در این بخش از مفاهیمی که در درس فرم‌ها یاد گرفتیم استفاده می‌کنیم.
هر ورودی باید یک label مناسب داشته باشد تا فرم برای کاربران و ابزارهای کمکی قابل دسترس باشد.

📨
فرم تماس

HTML
HTML5


<section id="contact">

    <h2>
        تماس با من
    </h2>

    <form action="#" method="post">

        <fieldset>

            <legend>
                اطلاعات تماس
            </legend>

            <label for="name">
                نام:
            </label>

            <input
                type="text"
                id="name"
                name="name"
                required
            >

            <br>

            <label for="email">
                ایمیل:
            </label>

            <input
                type="email"
                id="email"
                name="email"
                required
            >

            <br>

            <label for="message">
                پیام:
            </label>

            <textarea
                id="message"
                name="message"
                rows="6"
                required
            ></textarea>

            <br>

            <button type="submit">
                ارسال پیام
            </button>

        </fieldset>

    </form>

</section>

⚠️ توجه:

این فرم در حال حاضر فقط ظاهر و ساختار HTML را ایجاد می‌کند. برای پردازش واقعی اطلاعات فرم به JavaScript یا یک زبان سمت سرور مانند PHP نیاز خواهیم داشت.

🦶 بخش ۹: ساخت Footer

در انتهای صفحه اطلاعات مربوط به حق نشر و لینک‌های مهم را قرار می‌دهیم.
برای این قسمت از عنصر معنایی footer استفاده می‌کنیم.

🦶
Footer

HTML
HTML5


<footer>

    <p>
        &copy; ۱۴۰۵ - تمامی حقوق محفوظ است.
    </p>

    <p>
        ساخته شده با HTML5 توسط مهمان
    </p>

    <a href="#home">
        بازگشت به بالای صفحه
    </a>

</footer>

💻 بخش ۱۰: کد کامل پروژه

🚀 نسخه کامل پروژه:

در این قسمت تمام بخش‌هایی که در طول پروژه ساختیم در یک فایل کامل و قابل اجرا قرار گرفته‌اند.

🌐
index.html

HTML
HTML5


<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>
        وب‌سایت شخصی مهمان
    </title>

    <meta
        name="description"
        content="وب‌سایت شخصی و نمونه کارهای من"
    >

</head>


<body id="home">


    <!-- Header -->

    <header>

        <h1>
            وب‌سایت شخصی مهمان
        </h1>

        <p>
            توسعه‌دهنده و علاقه‌مند به فناوری
        </p>


        <!-- Navigation -->

        <nav aria-label="منوی اصلی">

            <ul>

                <li>
                    <a href="#home">
                        خانه
                    </a>
                </li>

                <li>
                    <a href="#about">
                        درباره من
                    </a>
                </li>

                <li>
                    <a href="#articles">
                        مقالات
                    </a>
                </li>

                <li>
                    <a href="#contact">
                        تماس با من
                    </a>
                </li>

            </ul>

        </nav>

    </header>


    <!-- Main Content -->

    <main>


        <!-- Home -->

        <section id="home">

            <h2>
                سلام، من مهمان هستم
            </h2>

            <p>
                به وب‌سایت شخصی من خوش آمدید.
            </p>

        </section>


        <!-- About -->

        <section id="about">

            <h2>
                درباره من
            </h2>

            <figure>

                <img
                    src="images/profile.jpg"
                    alt="تصویر پروفایل مهمان"
                    width="200"
                >

                <figcaption>
                    تصویر پروفایل
                </figcaption>

            </figure>

            <p>
                من به طراحی وب و فناوری علاقه‌مند هستم.
            </p>

            <h3>
                مهارت‌ها
            </h3>

            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>WordPress</li>
            </ul>

        </section>


        <!-- Articles -->

        <section id="articles">

            <h2>
                آخرین مقالات
            </h2>

            <article>

                <h3>
                    HTML چیست؟
                </h3>

                <p>
                    HTML زبان نشانه‌گذاری استاندارد صفحات وب است.
                </p>

                <time datetime="2026-08-16">
                    ۱۶ مرداد ۱۴۰۵
                </time>

            </article>


            <article>

                <h3>
                    HTML معنایی چیست؟
                </h3>

                <p>
                    HTML معنایی باعث ساختار بهتر صفحات وب می‌شود.
                </p>

            </article>

        </section>


        <!-- Aside -->

        <aside>

            <h2>
                لینک‌های مفید
            </h2>

            <ul>

                <li>
                    <a
                        href="https://developer.mozilla.org/"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        MDN
                    </a>
                </li>

                <li>
                    <a
                        href="https://html.spec.whatwg.org/"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        HTML Standard
                    </a>
                </li>

            </ul>

        </aside>


        <!-- Contact -->

        <section id="contact">

            <h2>
                تماس با من
            </h2>

            <form action="#" method="post">

                <label for="name">
                    نام:
                </label>

                <input
                    type="text"
                    id="name"
                    name="name"
                    required
                >

                <br>

                <label for="email">
                    ایمیل:
                </label>

                <input
                    type="email"
                    id="email"
                    name="email"
                    required
                >

                <br>

                <label for="message">
                    پیام:
                </label>

                <textarea
                    id="message"
                    name="message"
                    rows="5"
                    required
                ></textarea>

                <br>

                <button
                    type="submit"
                >
                    ارسال پیام
                </button>

            </form>

        </section>


    </main>


    <!-- Footer -->

    <footer>

        <p>
            &copy; ۱۴۰۵ - تمامی حقوق محفوظ است.
        </p>

        <p>
            ساخته شده با HTML5 توسط مهمان
        </p>

        <a href="#home">
            بازگشت به بالای صفحه
        </a>

    </footer>


</body>

</html>

💡 چطور پروژه را اجرا کنیم؟

یک پوشه با نام my-website ایجاد کنید.
یک فایل با نام index.html داخل آن بسازید.
کد کامل پروژه را داخل فایل قرار دهید.
پوشه images را ایجاد کنید.
تصویر خود را با نام profile.jpg داخل پوشه تصاویر قرار دهید.
فایل index.html را با مرورگر باز کنید.

🧠 نکات کلیدی پروژه نهایی

از DOCTYPE html برای مشخص کردن HTML5 استفاده کردیم.
با head اطلاعات و متادیتای صفحه را تعریف کردیم.
با header بخش بالایی سایت را ساختیم.
با nav منوی اصلی سایت را ایجاد کردیم.
با main محتوای اصلی صفحه را مشخص کردیم.
با section بخش‌های مختلف محتوا را جدا کردیم.
با article محتوای مستقل مانند مقاله را ساختیم.
با aside محتوای جانبی را مشخص کردیم.
با figure و figcaption تصویر و توضیح آن را قرار دادیم.
با form، label، input و textarea فرم تماس ساختیم.
با footer بخش پایانی سایت را ایجاد کردیم.
از لینک‌های Anchor برای جابه‌جایی بین بخش‌های صفحه استفاده کردیم.
برای تصاویر از ویژگی alt استفاده کردیم.
برای تاریخ انتشار مقاله از time استفاده کردیم.

🎯 تمرین‌های پروژه نهایی

🎯 تمرین شماره ۱: شخصی‌سازی سایت

نام، عنوان شغلی، متن معرفی و مهارت‌های پروژه را با اطلاعات دلخواه خودتان جایگزین کنید.

🎯 تمرین شماره ۲: اضافه کردن مقاله

یک article جدید به بخش مقالات اضافه کنید و برای آن عنوان، متن، تاریخ و لینک مطالعه قرار دهید.

🎯 تمرین شماره ۳: اضافه کردن لینک‌های جدید

چند لینک داخلی و خارجی به سایت اضافه کنید و برای لینک‌های خارجی از target="_blank" و rel="noopener noreferrer" استفاده کنید.

🎯 تمرین شماره ۴: توسعه فرم

به فرم تماس یک شماره تلفن، موضوع پیام و یک گزینه انتخابی برای نوع درخواست اضافه کنید.

🏆 جمع‌بندی دوره HTML سطح مقدماتی

مهمان عزیز، در این دوره از ساختار پایه یک سند HTML شروع کردیم و قدم‌به‌قدم به ساخت یک پروژه کامل رسیدیم.

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

🎓 مهارت‌هایی که در این دوره به دست آوردی

✅ ساختار استاندارد HTML5
✅ HTML معنایی
✅ مدیریت متن و محتوای صفحه
✅ تصاویر و محتوای چندرسانه‌ای
✅ ساخت فرم‌های HTML
✅ ساخت جدول‌های استاندارد
✅ لینک‌ها و Anchorها
✅ اصول دسترس‌پذیری
✅ اصول HTML مناسب SEO
✅ سازمان‌دهی پروژه‌های HTML
✅ ساخت یک وب‌سایت چندبخشی واقعی

🚀 قدم بعدی چیست؟

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

🔗 لینک‌های مرتبط

⬅️
درس قبل: ساختار حرفه‌ای پروژه HTML

🏠
صفحه دوره‌ها

👤

نویسنده یونس رجستری

📅

تاریخ انتشار 25 مرداد 1405

🔄

آخرین بروزرسانی 25 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

پروژه نهایی HTML؛ ساخت یک وب‌سایت چندبخشی و استاندارد