مشروع HTML: صفحتك الشخصية خطوة بخطوة

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

خطة الصفحة

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

القسم	الوسم	المحتوى
الرأس	<header>	الاسم، وقائمة تنقل <nav>
نبذة	<section id="about">	صورة وفقرة تعريف
المهارات	<section id="skills">	قائمة <ul>
المشاريع	<section id="projects">	جدول <table>
التواصل	<section id="contact">	نموذج <form>
التذييل	<footer>	حقوق النشر

لاحظ أن لكل قسم id. ستحتاجه قائمة التنقل لتقفز إليه.

الخطوة 1: الهيكل و head

أنشئ مجلداً باسم my-page، وفيه ملف index.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>

</body>
</html>

كل ما في الخطوات التالية يُكتب داخل <body>، بالترتيب.

الخطوة 2: الرأس وقائمة التنقل

<header>
  <h1>سارة أحمد</h1>
  <p>طالبة ومطوّرة ويب مبتدئة</p>

  <nav>
    <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>

• في الصفحة <h1> واحد فقط، وهو اسمك.
• روابط التنقل قائمة <ul> داخل <nav>، وكل رابط يبدأ بـ # ليقفز إلى قسم في الصفحة نفسها.

الخطوة 3: النبذة والمهارات

المحتوى الرئيسي كله يوضع داخل <main>:

<main>
  <section id="about">
    <h2>نبذة عني</h2>
    <img src="me.jpg" alt="صورة سارة أحمد" width="120" height="120">
    <p>
      أنا سارة، عمري 16 سنة، وأحب <strong>بناء المواقع</strong>.
      بدأت تعلّم البرمجة هذا العام، وهذه أول صفحة أكتبها بنفسي.
    </p>
  </section>

  <section id="skills">
    <h2>مهاراتي</h2>
    <ul>
      <li>HTML: بناء صفحات كاملة بالوسوم الدلالية</li>
      <li>الكتابة السريعة على لوحة المفاتيح</li>
      <li>اللغة الإنجليزية: مستوى متوسط</li>
    </ul>
  </section>

ضع صورتك في مجلد المشروع نفسه باسم me.jpg. ولا تنسَ alt، ولا العرض والارتفاع.

الخطوة 4: جدول المشاريع

  <section id="projects">
    <h2>مشاريعي</h2>
    <table border="1">
      <thead>
        <tr>
          <th>المشروع</th>
          <th>الوصف</th>
          <th>السنة</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>صفحتي الشخصية</td>
          <td>الصفحة التي تقرؤها الآن</td>
          <td>2026</td>
        </tr>
        <tr>
          <td>قائمة وصفات</td>
          <td>صفحة فيها ثلاث وصفات بالصور</td>
          <td>2026</td>
        </tr>
      </tbody>
    </table>
  </section>

المشاريع بيانات لها أعمدة: اسم ووصف وسنة. ولهذا الجدول هو الاختيار الصحيح هنا.

الخطوة 5: نموذج التواصل والتذييل

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

<footer>
  <p>&copy; 2026 سارة أحمد &mdash; صُنعت هذه الصفحة بـ HTML فقط</p>
</footer>

النموذج لا يرسل بعد

هذا النموذج شكل فقط، لأن استقبال الرسائل يحتاج خادماً. ستتعلم ذلك في كورس PHP. وإلى ذلك الحين يمكنك أن تضع رابط بريد من نوع mailto: كما تعلمت في درس الروابط.

جرّب بنفسك

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

جرّب بنفسكHTML

محرر الكود (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> </head> <body> <header> <h1>سارة أحمد</h1> <p>طالبة ومطوّرة ويب مبتدئة</p> <nav> <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> <section id="about"> <h2>نبذة عني</h2> <img src="/favicon.svg" alt="صورة سارة أحمد" width="120" height="120"> <p> أنا سارة، عمري 16 سنة، وأحب <strong>بناء المواقع</strong>. بدأت تعلّم البرمجة هذا العام، وهذه أول صفحة أكتبها بنفسي. </p> </section> <section id="skills"> <h2>مهاراتي</h2> <ul> <li>HTML: بناء صفحات كاملة بالوسوم الدلالية</li> <li>الكتابة السريعة على لوحة المفاتيح</li> <li>اللغة الإنجليزية: مستوى متوسط</li> </ul> </section> <section id="projects"> <h2>مشاريعي</h2> <table border="1"> <thead> <tr><th>المشروع</th><th>الوصف</th><th>السنة</th></tr> </thead> <tbody> <tr><td>صفحتي الشخصية</td><td>الصفحة التي تقرؤها الآن</td><td>2026</td></tr> <tr><td>قائمة وصفات</td><td>صفحة فيها ثلاث وصفات بالصور</td><td>2026</td></tr> </tbody> </table> </section> <section id="contact"> <h2>تواصل معي</h2> <form action="#" method="post"> <p> <label for="name">اسمك</label><br> <input type="text" id="name" name="name" required> </p> <p> <label for="message">رسالتك</label><br> <textarea id="message" name="message" rows="4" required></textarea> </p> <button type="submit">أرسل</button> </form> </section> </main> <footer> <p>&copy; 2026 سارة أحمد &mdash; صُنعت هذه الصفحة بـ HTML فقط</p> </footer> </body> </html>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

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

وبعد أن تكتبها على جهازك، طوّرها:

1. أضف قسماً بعنوان «هواياتي» فيه قائمة مرقمة، وأضف رابطه إلى قائمة التنقل.
2. أضف عموداً رابعاً للجدول فيه رابط كل مشروع.
3. أضف في النموذج قائمة منسدلة لسبب التواصل: سؤال، أو اقتراح، أو عرض عمل.
4. أضف أيقونة للصفحة ووسوم Open Graph في <head>.

أخطاء شائعة

• القفز في مستويات العناوين: بعد <h1> يأتي <h2> لعناوين الأقسام، ثم <h3> لما بداخلها. لا تختر العنوان بحسب حجم خطه.
• رابط التنقل لا يعمل: القيمة بعد # يجب أن تطابق id القسم حرفاً بحرف.
• الصورة لا تظهر: تأكد أن اسم الملف في src يطابق اسم الملف الحقيقي بامتداده، وأن الصورة في المجلد نفسه.
• نسيان إغلاق <main> أو <section>: أقسام الصفحة تتداخل بشكل خاطئ. الإزاحة المنتظمة تكشف لك الوسم الناقص.

اختبر نفسك

سؤال

لماذا أعطينا كل قسم في الصفحة خاصية id؟

لتقفز إليه روابط قائمة التنقل التي تبدأ بـ #ليظهر عنوان القسم بخط أكبرلأن section لا يعمل بدونها

سؤال

لماذا اخترنا الجدول لعرض المشاريع، والقائمة لعرض المهارات؟

لأن المشاريع بيانات لها عدة أعمدة، والمهارات عناصر متتالية بسيطةلا يوجد سبب، ويمكن العكسلأن الجدول أجمل شكلاً

الخلاصة

• خطّط أقسام الصفحة أولاً، ثم اختر لكل قسم الوسم الذي يصف معناه.
• <header> و <nav> و <main> و <section> و <footer> تبني هيكلاً واضحاً.
• id لكل قسم يجعل قائمة التنقل تعمل.
• القائمة للعناصر المتتالية، والجدول للبيانات ذات الأعمدة، والنموذج لإدخال البيانات.
• HTML تبني الهيكل، والشكل مسؤولية CSS.

مبروك! ماذا بعد؟

أنهيت كورس HTML كاملاً، وتستطيع الآن أن تبني هيكل أي صفحة تراها على الإنترنت. خطوتك التالية هي كورس CSS، وفيه ستحوّل صفحتك الشخصية هذه إلى صفحة جميلة بألوانها وخطوطها وترتيبها. وبعده كورس JavaScript لتجعلها تتفاعل مع الزائر.