شرح تخطيط صفحة HTML بالعربي — بناء هيكل Layout كامل

السابق التالي

تعلمت في الدروس السابقة الوسوم الفردية — الفقرات، الصور، الجداول، النماذج، العناصر الدلالية. الآن حان الوقت لتجمعها معاً في هيكل صفحة ويب كاملة. هذا ما يُسمى بـ Layout — التخطيط العام للصفحة ومواضع أجزائها.

الهيكل الكلاسيكي لصفحة الويب

معظم مواقع الويب — بغض النظر عن تصميمها — تتبع هيكلاً أساسياً واحداً:

Header (الرأس): الشعار + قائمة التنقل + ربما شريط البحث
Navigation (التنقل): أحياناً داخل الرأس، أحياناً منفصلة
Main Content (المحتوى الرئيسي): قلب الصفحة — المقالة، المنتجات، الدروس
Sidebar / Aside (الشريط الجانبي): مقترحات، إعلانات، فلاتر — ليس دائماً
Footer (التذييل): حقوق النشر، روابط إضافية، خريطة الموقع

┌─────────────────────────────────────┐
│             <header>                │  ← الرأس
│  شعار الموقع │ قائمة التنقل <nav>  │
├─────────────────────────────────────┤
│                                     │
│           <main>                    │  ← المحتوى الرئيسي
│                                     │
│  ┌──────────────────┐ ┌──────────┐  │
│  │   <article>      │ │ <aside>  │  │
│  │   أو <section>   │ │ جانبي   │  │
│  └──────────────────┘ └──────────┘  │
│                                     │
├─────────────────────────────────────┤
│             <footer>                │  ← التذييل
└─────────────────────────────────────┘

الكود الكامل — صفحة ويب من الصفر

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="وصف الصفحة لمحركات البحث">
    <title>موقع DevArabi — تعلم البرمجة بالعربي</title>
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>

    <!-- ====== رأس الصفحة ====== -->
    <header>
        <a href="/">
            <img src="/assets/images/logo.png" alt="DevArabi" width="150" height="50">
        </a>
        <nav>
            <ul>
                <li><a href="/">الرئيسية</a></li>
                <li><a href="/courses">الدورات</a></li>
                <li><a href="/blog">المدونة</a></li>
                <li><a href="/contact">تواصل معنا</a></li>
            </ul>
        </nav>
    </header>

    <!-- ====== المحتوى الرئيسي ====== -->
    <main>

        <!-- أعلى الصفحة / Hero Section -->
        <section>
            <h1>تعلم البرمجة بالعربي من الصفر</h1>
            <p>دورات شاملة في HTML وCSS وJavaScript وأكثر.</p>
            <a href="/courses">ابدأ التعلم الآن</a>
        </section>

        <!-- قسم الدورات -->
        <section>
            <h2>أحدث الدورات</h2>

            <article>
                <h3>دورة HTML من الصفر</h3>
                <p>تعلم أساسيات لغة ترميز الويب في 20 درساً</p>
                <a href="/courses/html">ابدأ الدورة</a>
            </article>

            <article>
                <h3>دورة CSS الشاملة</h3>
                <p>تعلم تنسيق صفحات الويب واحترافي التصميم</p>
                <a href="/courses/css">ابدأ الدورة</a>
            </article>

        </section>

    </main>

    <!-- ====== الشريط الجانبي (اختياري) ====== -->
    <aside>
        <h3>أحدث المقالات</h3>
        <ul>
            <li><a href="#">ما هو HTML؟</a></li>
            <li><a href="#">أفضل أدوات المطور</a></li>
        </ul>
    </aside>

    <!-- ====== تذييل الصفحة ====== -->
    <footer>
        <nav>
            <ul>
                <li><a href="/about">من نحن</a></li>
                <li><a href="/privacy">سياسة الخصوصية</a></li>
                <li><a href="/terms">شروط الاستخدام</a></li>
            </ul>
        </nav>
        <p>جميع الحقوق محفوظة &copy; 2025 DevArabi</p>
    </footer>

</body>
</html>

أنواع Layout الشائعة في مواقع الويب

النوع	الوصف	أمثلة مواقع
Single Column	عمود واحد — كل المحتوى فوق بعضه	مدونات، صفحات تسجيل الدخول
Two Columns	عمودان — محتوى رئيسي + شريط جانبي	مدونات، أخبار، مواقع وثائق
Three Columns	ثلاثة أعمدة	مواقع إخبارية قديمة
Grid Layout	شبكة من البطاقات	متاجر إلكترونية، معارض صور
Full-Screen	صفحة كاملة، Hero section ضخم	مواقع تعريف، Portfolio

HTML يبني الهيكل — CSS يبني المظهر

تذكر دائماً: HTML مسؤول فقط عن الهيكل والترتيب الدلالي. جعل header يظهر في الأعلى بلون معين، وجعل aside يظهر بجانب main — هذه كلها مهام CSS (سنتعلمها في الدورة التالية).

بدون CSS، ستظهر كل العناصر (header, main, aside, footer) كتلاً عمودية فوق بعضها. هذا طبيعي — HTML يهتم بالمعنى والترتيب المنطقي، وCSS يطبق التخطيط البصري.

<!-- HTML يحدد الهيكل: ماذا يوجد في الصفحة -->
<header>...</header>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- CSS يحدد الموضع: أين كل جزء -->
<!-- مثال CSS (في ملف style.css) -->
<!--
body { display: grid; grid-template-columns: 1fr 300px; }
header, footer { grid-column: 1 / -1; }
-->

الأسئلة الشائعة — FAQ

هل ترتيب العناصر في HTML مهم لـ SEO؟

نعم. جوجل يقرأ الصفحة من الأعلى للأسفل. ضع <h1> والمحتوى الأهم في بداية <main>، وتأكد أن <nav> و<header> في مكانهما الصحيح. الترتيب المنطقي يُحسّن فهرسة الصفحة.

هل يجب أن يكون <aside> دائماً في اليمين أو اليسار؟

لا — هذا قرار CSS وليس HTML. <aside> يمكن أن يظهر في أي مكان بصرياً حسب تنسيق CSS. لكن في HTML يُوضع بعد <main> أو بداخله حسب بنية المحتوى.

هل أحتاج <aside> لكل صفحة؟

لا — <aside> اختياري. صفحات كثيرة (خاصة صفحات تسجيل الدخول، وصفحات "عن الموقع") لا تحتاجه. أضفه فقط إذا كان هناك محتوى جانبي حقيقي يستحق التمييز.

ممتاز! أتقنت الآن بناء هيكل صفحة ويب كاملة. في الدرس القادم سنتعلم السمات class وid — كيف تُعطي العناصر أسماءً وتُنسّقها بـ CSS.

السابق التالي

DevArabi

دورة تعلم HTML

شرح تخطيط صفحة HTML بالعربي — بناء هيكل Layout كامل

الهيكل الكلاسيكي لصفحة الويب

الكود الكامل — صفحة ويب من الصفر

أنواع Layout الشائعة في مواقع الويب

HTML يبني الهيكل — CSS يبني المظهر

الأسئلة الشائعة — FAQ

المحرر الذكي

قناة ديف عربي

تابعنا