مشروع: صفحة شخصية كاملة — أساسيات HTML

مشروع: صفحة شخصية كاملة

حان وقت بناء صفحة حقيقية تضعها على الإنترنت لاحقاً (دورة نشر المواقع). ستضيف لها التنسيق في دورة CSS، فركّز الآن على هيكل صحيح ونظيف.

المطلوب

صفحة index.html واحدة فيها:

1. رأس الصفحة: اسمك ووصف قصير، وقائمة تنقل بروابط داخلية للأقسام.

2. من أنا: فقرة وصورة شخصية (alt وأبعاد).

3. المهارات: قائمة (أو قائمة وصفية: المهارة ← المستوى).

4. المشاريع: كل مشروع <article> فيه عنوان ووصف ورابط وصورة مع figure.

5. الخبرات/الدراسة: جدول بسيط (السنة، الجهة، الدور) مع caption و th.

6. تواصل معي: نموذج (الاسم، البريد، الرسالة) مع labels وتحقق.

7. التذييل: حقوق وروابط حساباتك.

خطوات العمل

1. ابدأ بالقالب: انسخ قالب درس "بنية المستند" (charset، viewport، lang، dir، title، description).

2. ارسم الهيكل أولاً بالعناصر الدلالية فارغة: header، nav، main وفيه sections، footer.

3. املأ قسماً قسماً وافتح الصفحة بعد كل قسم.

4. أعطِ كل section معرفاً (id="projects") واربطه من nav.

5. تحقق بالمدقق و Lighthouse.

الهيكل المقترح

<body>
    <a href="#main">تخطَّ إلى المحتوى</a>
    <header>
        <h1>الاسم</h1>
        <p>الوصف</p>
        <nav aria-label="أقسام الصفحة">
            <ul>
                <li><a href="#about">من أنا</a></li>
                <li><a href="#projects">مشاريعي</a></li>
                <li><a href="#contact">تواصل</a></li>
            </ul>
        </nav>
    </header>
    <main id="main">
        <section id="about"><h2>من أنا</h2></section>
        <section id="projects"><h2>مشاريعي</h2></section>
        <section id="contact"><h2>تواصل معي</h2></section>
    </main>
    <footer></footer>
</body>

قائمة التحقق قبل التسليم

- [ ] <!DOCTYPE html> و lang="ar" dir="rtl" و meta charset و viewport.

- [ ] <title> و description وصفيان.

- [ ] <h1> واحد، والعناوين متسلسلة (h2 للأقسام، h3 داخلها).

- [ ] <main> واحد، وكل قسم section له عنوان.

- [ ] كل صورة لها alt مناسب و width و height.

- [ ] كل حقل له label و name، والحقول الإلزامية required.

- [ ] الروابط الخارجية تعمل، ونصوصها وصفية.

- [ ] صفر أخطاء في validator.w3.org.

- [ ] التنقل بلوحة المفاتيح ممكن من أول الصفحة لآخرها.

تحديات إضافية

- أضف قسم "أسئلة شائعة" بـ details و summary.

- أضف فيديو تعريفياً قصيراً بـ controls.

- أنشئ صفحة ثانية project-1.html لتفاصيل مشروع واربطها بمسار نسبي، مع رابط عودة.

في دورة تصميم CSS ستحوّل هذه الصفحة إلى تصميم جذاب ومتجاوب دون تغيير الهيكل تقريباً — وهذه علامة أن HTML مكتوب جيداً.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>سارة أحمد | مطورة ويب</title>
    <meta name="description" content="الصفحة الشخصية لسارة أحمد: مشاريع ومهارات في تطوير الويب.">
</head>
<body>
    <a href="#main">تخطَّ إلى المحتوى</a>

    <header>
        <h1>سارة أحمد</h1>
        <p>مطورة واجهات ويب مبتدئة من بغداد</p>
        <nav aria-label="أقسام الصفحة">
            <ul>
                <li><a href="#about">من أنا</a></li>
                <li><a href="#skills">المهارات</a></li>
                <li><a href="#projects">مشاريعي</a></li>
                <li><a href="#contact">تواصل</a></li>
            </ul>
        </nav>
    </header>

    <main id="main">
        <section id="about">
            <h2>من أنا</h2>
            <img src="images/sara.jpg" alt="صورة سارة مبتسمة أمام حاسوبها" width="200" height="200">
            <p>أتعلم تطوير الويب منذ 2025، وأحب بناء صفحات <strong>سهلة الاستخدام</strong> للجميع.</p>
        </section>

        <section id="skills">
            <h2>المهارات</h2>
            <dl>
                <dt>HTML</dt>
                <dd>متقدم</dd>
                <dt>CSS</dt>
                <dd>متوسط</dd>
            </dl>
        </section>

        <section id="projects">
            <h2>مشاريعي</h2>
            <article>
                <h3>صفحة مطعم</h3>
                <figure>
                    <img src="images/restaurant.png" alt="لقطة من صفحة المطعم تعرض قائمة الطعام" width="600" height="400" loading="lazy">
                    <figcaption>الصفحة الرئيسية لمطعم تجريبي</figcaption>
                </figure>
                <p>صفحة بقائمة طعام وجدول مواعيد ونموذج حجز.</p>
                <p><a href="project-1.html">تفاصيل المشروع</a></p>
            </article>
        </section>

        <section id="experience">
            <h2>الدراسة</h2>
            <table>
                <caption>المسار التعليمي</caption>
                <thead>
                    <tr>
                        <th scope="col">السنة</th>
                        <th scope="col">الجهة</th>
                        <th scope="col">الدورة</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2025</td>
                        <td>Kodax</td>
                        <td>أساسيات HTML</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section id="contact">
            <h2>تواصل معي</h2>
            <form action="/contact" method="post">
                <p>
                    <label for="name">الاسم</label>
                    <input type="text" id="name" name="name" required autocomplete="name">
                </p>
                <p>
                    <label for="email">البريد الإلكتروني</label>
                    <input type="email" id="email" name="email" required autocomplete="email">
                </p>
                <p>
                    <label for="message">الرسالة</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </p>
                <button type="submit">إرسال</button>
            </form>
        </section>
    </main>

    <footer>
        <p><small>&copy; 2026 سارة أحمد</small></p>
    </footer>
</body>
</html>