HTML بالعربي: مشروع: صفحة سيرة ذاتية دلالية

أول مشروع عملي حقيقي في المسار — تطبيق مباشر لِـهيكل صفحة HTML، HTML الدلالي، الروابط والصور، والقوائم. لا حاجة لـ CSS أو جافاسكريبت — الهدف بنية سليمة فقط.

المتطلبات

ابنِ صفحة سيرة ذاتية (CV) لشخص خيالي (أو سيرتك أنت) تحتوي:

رأس (<header>) بالاسم الكامل والمسمّى الوظيفي.
قسم "نبذة" فقرة قصيرة تعريفية.
قسم "معلومات التواصل" باستخدام <address> (بريد، هاتف، رابط لينكدإن).
قسم "الخبرات العملية": كل خبرة بعنوان وظيفة، اسم شركة، وفترة زمنية بعنصر <time>.
قسم "المهارات" كقائمة <ul>.
تذييل (<footer>) بسنة آخر تحديث للسيرة.
صورة شخصية واحدة على الأقل (استخدم رابط placeholder مثل https://placehold.co/200x200) بـ alt وصفي.
رابط خارجي واحد على الأقل (لينكدإن أو GitHub) بخصائص أمان صحيحة.

نقطة البداية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>السيرة الذاتية — اسمك هنا</title>
</head>
<body>
  <header>
    <!-- الاسم والمسمّى الوظيفي هنا -->
  </header>

  <main>
    <!-- أقسامك هنا -->
  </main>

  <footer>
    <!-- سنة التحديث -->
  </footer>
</body>
</html>

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

html
├── head (title, meta charset, meta viewport)
└── body
    ├── header (h1 الاسم، p المسمّى الوظيفي)
    └── main
        ├── section "نبذة" (h2 + p)
        ├── section "التواصل" (h2 + address)
        ├── section "الخبرات" (h2 + مقالات/فقرات لكل خبرة، مع time)
        ├── section "المهارات" (h2 + ul)
        └── footer (p بسنة التحديث)

🔑 كل <section> يبدأ بعنوان (h2) يشرح محتواه — هذا ما يمنحه معنى دلاليًا حقيقيًا، لا مجرد صندوق فارغ من المعنى مثل <div>.

متطلبات الوصول

تسلسل عناوين صحيح: h1 واحد فقط (الاسم)، ثم h2 لكل قسم — بلا قفز من h1 إلى h3 مباشرة.
alt وصفي على الصورة الشخصية (مثلًا: "صورة شخصية لأحمد خالد، مطوّر واجهات أمامية") — لا alt="صورة" عام.
<address> فعليًا لمعلومات التواصل، لا <p> عادية — يمنح المعنى الدلالي الصحيح.
رابط لينكدإن/GitHub بنص وصفي («زر ملفي على لينكدإن») لا «اضغط هنا».

قائمة التحقق

معايير الإتمام

المشروع مكتمل حين: الصفحة تمرّ على المدقّق بصفر أخطاء، كل عنصر بقائمة التحقق أعلاه محقَّق، والبنية تعتمد فقط على عناصر تعلّمتها حتى هذا الدرس — بلا <div>/<span> إلا حين لا يوجد بديل دلالي مناسب فعلًا.

إرشادات للحل المقترح

الاسم والمسمّى داخل <header> بأعلى الصفحة، وليس داخل <main> — الرأس عنصر مستقل عن المحتوى الرئيسي.
كل قسم (section) يبدأ بـ <h2> واضح: "نبذة عني"، "معلومات التواصل"، "الخبرات العملية"، "المهارات".
داخل قسم الخبرات، كل خبرة عمل تُبنى كوحدة صغيرة: عنوان الوظيفة (يمكن h3 تحت h2 القسم)، اسم الشركة كنص عادي، وفترة العمل بـ <time datetime="2022-01">يناير 2022 – الآن</time>.
<address> تحتوي روابط mailto: للبريد وtel: للهاتف مباشرة، لا نصًا عاديًا فقط — استفد مما تعلّمته في الروابط والصور.
تذييل الصفحة بسيط: <footer><p>آخر تحديث: 2026</p></footer>.

خلاصة

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