أساسيات HTML5

بناء موقع ويب كامل متعدد الصفحات

40 دقيقة الدرس 18 من 18

نظرة عامة على المشروع

في هذا الدرس الأخير، ستجمع كل ما تعلمته لبناء موقع ويب كامل متعدد الصفحات من الصفر. يتضمن المشروع ثلاث صفحات: صفحة رئيسية تحتوي على قسم البطل وقسم عني وقسم المهارات، وصفحة مخصصة عني تحكي قصتك المهنية، وصفحة اتصال تحتوي على نموذج فعال. هذا التمرين يعزز HTML الدلالي وبنية المستند الصحيحة والتنقل والروابط والصور والنماذج والعلامات الوصفية وإمكانية الوصول -- كل ذلك بدون أي CSS أو JavaScript.

التخطيط لبنية الموقع

قبل كتابة أي كود، خطط لبنية المجلدات وتخطيط الصفحات. المشروع المنظم جيدا أسهل في الصيانة والتوسع. إليك البنية الموصى بها لهذا المشروع:

مثال: بنية مجلدات المشروع

my-portfolio/
    index.html
    about.html
    contact.html
    images/
        profile.jpg
        project-1.jpg
        project-2.jpg

كل ملف HTML يمثل صفحة واحدة من موقعك. مجلد images/ يحافظ على تنظيم جميع الوسائط في مكان واحد. مع نمو مشاريعك، قد تضيف مجلدات لـ css/ وjs/، لكن الآن نركز فقط على HTML.

بناء الصفحة الرئيسية: index.html

الصفحة الرئيسية هي أول صفحة يراها الزوار. يجب أن تقدم من أنت وماذا تفعل. سننظمها بقسم بطل وقسم تعريفي وقسم مهارات، كلها باستخدام عناصر HTML الدلالية.

مثال: بنية الصفحة الرئيسية الكاملة

<!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="معرض أعمال سارة أحمد - مطورة ويب متخصصة في HTML و CSS و JavaScript.">
    <meta name="keywords" content="مطورة ويب, معرض أعمال, HTML, CSS, JavaScript">
    <meta name="author" content="سارة أحمد">
    <title>سارة أحمد - معرض أعمال مطورة ويب</title>
</head>
<body>
    <a href="#main-content" class="skip-link">تخطي إلى المحتوى الرئيسي</a>

    <header>
        <nav aria-label="التنقل الرئيسي">
            <ul>
                <li><a href="index.html" aria-current="page">الرئيسية</a></li>
                <li><a href="about.html">من أنا</a></li>
                <li><a href="contact.html">اتصل بي</a></li>
            </ul>
        </nav>
    </header>

    <main id="main-content">
        <section aria-labelledby="hero-heading">
            <h1 id="hero-heading">مرحبا، أنا سارة أحمد</h1>
            <p>مطورة ويب شغوفة ببناء مواقع نظيفة وسهلة الوصول.</p>
            <a href="contact.html">تواصل معي</a>
        </section>

        <section aria-labelledby="about-heading">
            <h2 id="about-heading">عني</h2>
            <img src="images/profile.jpg" alt="سارة أحمد تبتسم على مكتبها" width="300" height="300">
            <p>أنا مطورة تعلمت ذاتيا ولدي شغف بـ HTML الدلالي والتصميم سهل الوصول.</p>
            <a href="about.html">اقرأ قصتي الكاملة</a>
        </section>

        <section aria-labelledby="skills-heading">
            <h2 id="skills-heading">المهارات</h2>
            <ul>
                <li>HTML5 والتوصيف الدلالي</li>
                <li>إمكانية الوصول على الويب (WCAG 2.1)</li>
                <li>مبادئ التصميم المتجاوب</li>
                <li>أفضل ممارسات SEO</li>
                <li>التحكم في الإصدارات باستخدام Git</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>حقوق النشر 2025 سارة أحمد. جميع الحقوق محفوظة.</p>
    </footer>
</body>
</html>
ملاحظة: سمة aria-current="page" على رابط الرئيسية تخبر قارئات الشاشة بالصفحة التي يشاهدها المستخدم حاليا. قم بتحديث هذه السمة في كل صفحة لتتوافق مع عنصر التنقل النشط.

بناء صفحة عني: about.html

صفحة عني توسع قصتك المهنية. تستخدم نفس بنية التنقل لتحقيق التناسق، مما يضمن أن الزوار يمكنهم التنقل بين الصفحات بسهولة. لاحظ كيف أن وسوم التنقل متطابقة في جميع الصفحات -- فقط سمة aria-current تتغير.

مثال: بنية صفحة عني

<!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>عني - سارة أحمد</title>
</head>
<body>
    <a href="#main-content" class="skip-link">تخطي إلى المحتوى الرئيسي</a>

    <header>
        <nav aria-label="التنقل الرئيسي">
            <ul>
                <li><a href="index.html">الرئيسية</a></li>
                <li><a href="about.html" aria-current="page">من أنا</a></li>
                <li><a href="contact.html">اتصل بي</a></li>
            </ul>
        </nav>
    </header>

    <main id="main-content">
        <h1>عني</h1>

        <section>
            <h2>رحلتي</h2>
            <p>بدأت تعلم تطوير الويب في عام 2023 بدافع الفضول حول كيفية عمل المواقع. ما بدأ كهواية تحول سريعا إلى شغف ببناء تجارب ويب سهلة الوصول وجيدة البنية.</p>
        </section>

        <section>
            <h2>التعليم</h2>
            <ul>
                <li>تعلم ذاتي من خلال الدورات عبر الإنترنت والتوثيق</li>
                <li>أكملت شهادة تصميم الويب المتجاوب من freeCodeCamp</li>
                <li>درست إمكانية الوصول على الويب من خلال موارد W3C</li>
            </ul>
        </section>

        <section>
            <h2>ما يحفزني</h2>
            <p>أؤمن بأن كل موقع ويب يجب أن يكون قابلا للاستخدام من قبل الجميع بغض النظر عن القدرة. إمكانية الوصول ليست فكرة لاحقة -- بل هي جزء أساسي من تطوير الويب الجيد.</p>
            <a href="contact.html">لنعمل معا</a>
        </section>
    </main>

    <footer>
        <p>حقوق النشر 2025 سارة أحمد. جميع الحقوق محفوظة.</p>
    </footer>
</body>
</html>

بناء صفحة الاتصال: contact.html

صفحة الاتصال تتضمن نموذجا سهل الوصول مع تسميات صحيحة وأنواع إدخال ملائمة وسمات التحقق. كل حقل في النموذج له تسمية مرتبطة برمجيا، والحقول المطلوبة محددة، والنموذج يستخدم التحقق الأصلي في HTML.

مثال: صفحة الاتصال مع نموذج سهل الوصول

<!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>اتصل بي - سارة أحمد</title>
</head>
<body>
    <a href="#main-content" class="skip-link">تخطي إلى المحتوى الرئيسي</a>

    <header>
        <nav aria-label="التنقل الرئيسي">
            <ul>
                <li><a href="index.html">الرئيسية</a></li>
                <li><a href="about.html">من أنا</a></li>
                <li><a href="contact.html" aria-current="page">اتصل بي</a></li>
            </ul>
        </nav>
    </header>

    <main id="main-content">
        <h1>اتصل بي</h1>
        <p>هل لديك مشروع في ذهنك؟ املأ النموذج أدناه وسأرد عليك خلال 48 ساعة.</p>

        <form action="/submit" method="post">
            <fieldset>
                <legend>معلوماتك</legend>

                <label for="full-name">الاسم الكامل (مطلوب)</label>
                <input type="text" id="full-name" name="full-name" required
                       autocomplete="name">

                <label for="email">البريد الإلكتروني (مطلوب)</label>
                <input type="email" id="email" name="email" required
                       autocomplete="email">

                <label for="phone">رقم الهاتف (اختياري)</label>
                <input type="tel" id="phone" name="phone"
                       autocomplete="tel">
            </fieldset>

            <fieldset>
                <legend>رسالتك</legend>

                <label for="subject">الموضوع (مطلوب)</label>
                <select id="subject" name="subject" required>
                    <option value="">-- اختر موضوعا --</option>
                    <option value="project">مشروع جديد</option>
                    <option value="collaboration">تعاون</option>
                    <option value="question">سؤال عام</option>
                </select>

                <label for="message">الرسالة (مطلوب)</label>
                <textarea id="message" name="message" rows="6" required
                          minlength="20"></textarea>
            </fieldset>

            <button type="submit">إرسال الرسالة</button>
        </form>
    </main>

    <footer>
        <p>حقوق النشر 2025 سارة أحمد. جميع الحقوق محفوظة.</p>
    </footer>
</body>
</html>
نصيحة احترافية: استخدم دائما أنواع إدخال محددة مثل type="email" وtype="tel" بدلا من type="text" العام. هذا يفعل لوحات المفاتيح المناسبة على الأجهزة المحمولة ويمكن التحقق المدمج في المتصفح ويساعد مديري كلمات المرور وأدوات الملء التلقائي على العمل بشكل صحيح.

التنقل المتسق عبر الصفحات

بنية التنقل المتسقة ضرورية لسهولة الاستخدام. يتوقع المستخدمون أن يظهر التنقل في نفس الموقع في كل صفحة بنفس الروابط وبنفس الترتيب. يجب تحديث سمة aria-current="page" في كل صفحة للإشارة إلى الصفحة الحالية. هذا التناسق يساعد جميع المستخدمين وخاصة مستخدمي قارئات الشاشة الذين يعتمدون على بنية صفحة يمكن التنبؤ بها.

ربط الصفحات ببعضها

بما أن جميع ملفات HTML في نفس المجلد، يمكنك استخدام المسارات النسبية للربط بينها. استخدم href="about.html" بدلا من المسارات المطلقة. للربط بأقسام محددة داخل صفحة، استخدم معرفات الأجزاء مثل href="index.html#skills-heading". استخدم دائما نص رابط وصفي يكون منطقيا بمعزل عن السياق -- لأن قارئات الشاشة غالبا تتنقل بعرض جميع الروابط في الصفحة.

إضافة الصور وتحسينها

ضع جميع الصور في مجلد images/ وأشر إليها بمسارات نسبية. أضف دائما سمتي width وheight لمنع تحولات التخطيط أثناء تحميل الصفحة. اكتب نص alt وصفيا للصور المعلوماتية واستخدم alt="" للصور الزخرفية فقط. فكر في استخدام عنصري <figure> و<figcaption> لتوفير تعليقات مرئية للصور المهمة.

مثال: صورة مع عنصر figure وتعليق

<figure>
    <img src="images/project-1.jpg"
         alt="لقطة شاشة للوحة معلومات الطقس تعرض درجة الحرارة وبيانات التوقعات"
         width="600" height="400">
    <figcaption>لوحة معلومات الطقس -- أول مشروع تطوير ويب لي.</figcaption>
</figure>

العلامات الوصفية لتحسين محركات البحث

يجب أن تتضمن كل صفحة علامات وصفية أساسية في <head>. العلامتان charset وviewport ضروريتان للعرض الصحيح. علامة description الوصفية توفر ملخصا تعرضه محركات البحث في النتائج. عنصر title يجب أن يكون فريدا ووصفيا لكل صفحة مع تضمين اسمك أو علامتك التجارية للتعرف.

التحقق من النماذج باستخدام HTML

سمات التحقق الأصلية في HTML توفر ملاحظات فورية بدون JavaScript. سمة required تمنع الإرسال الفارغ. سمة type="email" تتحقق من تنسيق البريد الإلكتروني. سمة minlength تفرض حدا أدنى لعدد الأحرف. سمة pattern تقبل تعبيرات منتظمة لقواعد تحقق مخصصة. تعرض المتصفحات رسائل خطأ مدمجة يمكن لقارئات الشاشة الوصول إليها بالفعل.

إجراء تدقيق إمكانية الوصول

قبل اعتبار موقعك مكتملا، تحقق من القائمة التالية:

  • كل صفحة تحتوي على عنصر <h1> واحد فقط وتسلسل عناوين منطقي.
  • جميع الصور لديها سمات alt مناسبة.
  • جميع عناصر التحكم في النماذج لديها عناصر <label> مرتبطة.
  • الموقع بأكمله قابل للتنقل باستخدام لوحة المفاتيح فقط.
  • روابط تخطي التنقل موجودة في كل صفحة.
  • سمة lang محددة على عنصر <html>.
  • الروابط لديها نص وصفي (بدون روابط "انقر هنا").
  • المستند لديه <title> ذو معنى في كل صفحة.
خطأ شائع: نسخ التنقل إلى كل صفحة مع نسيان تحديث سمة aria-current="page". هذا التفصيل الصغير يحدث فرقا كبيرا لمستخدمي قارئات الشاشة. أيضا تجنب استخدام نفس <title> في كل صفحة -- يجب أن يكون عنوان كل صفحة فريدا ووصفيا حتى يتمكن المستخدمون من تمييز الصفحات في علامات التبويب وسجل المتصفح.

ما يجب تعلمه بعد ذلك

تهانينا على إكمال دورة HTML هذه. لديك الآن أساس متين في HTML الدلالي سهل الوصول. إليك أين تتجه بعد ذلك:

  • CSS -- تعلم تنسيق صفحاتك بالألوان والخطوط والتخطيطات والتصميم المتجاوب باستخدام استعلامات الوسائط و Flexbox و Grid.
  • JavaScript -- أضف التفاعل مثل التحقق من النماذج والمحتوى الديناميكي والرسوم المتحركة وتكامل API.
  • التحكم في الإصدارات -- تعلم Git لتتبع التغييرات والتعاون مع مطورين آخرين.
  • النشر -- انشر موقعك على الويب باستخدام خدمات مثل GitHub Pages أو Netlify.

تمرين عملي

ابنِ موقع المعرض الشخصي الكامل المكون من ثلاث صفحات الموصوف في هذا الدرس من الصفر. ابدأ بإنشاء بنية المجلدات مع index.html وabout.html وcontact.html ومجلد images/. خصص المحتوى ليعكس معلوماتك الشخصية -- استخدم اسمك الحقيقي ومهاراتك الفعلية وقصتك المهنية. تأكد من أن التنقل متسق عبر جميع الصفحات الثلاث وحدث سمة aria-current في كل صفحة. أضف صورتين على الأقل مع نص بديل مناسب. تأكد من أن نموذج الاتصال يتضمن ثلاثة أنواع إدخال مختلفة ويستخدم سمة required على الحقول الأساسية. شغل تدقيق Lighthouse لإمكانية الوصول على الصفحات الثلاث وأصلح أي مشاكل حتى تحصل كل صفحة على درجة أعلى من 90. أخيرا، تحقق من صحة الملفات الثلاثة باستخدام خدمة التحقق من W3C على validator.w3.org للتأكد من أن HTML خالٍ من الأخطاء.

اكتمل الدرس!

تهانينا! لقد أكملت جميع الدروس في هذا البرنامج التعليمي.

الدرس السابق إمكانية الوصول: ARIA وقارئات الشاشة وأفضل الممارسات
العودة للدورة تطوير الويب الشامل
العودة للدورة