بناء صفحة ويب باستعمال HTML 🌐

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

1️⃣ تعريف HTML

HTML هي لغة تُستعمل لبناء صفحات الويب.
هي ليست لغة برمجة، بل لغة وصف وتنظيم المحتوى.

2️⃣ بنية ملف HTML

كل ملف HTML يحتوي على بنية أساسية ثابتة.
<!DOCTYPE html>
<html>
  <head>
    <title>صفحتي الأولى</title>
  </head>
  <body>
    محتوى الصفحة
  </body>
</html>
    

3️⃣ الوسوم (Tags)

الوسوم هي أوامر تُكتب بين < > لتنظيم المحتوى.
العناوين: <h1> إلى <h6>
الفقرات: <p>
التعداد النقطي: <ul> <li>
التعداد الرقمي: <ol> <li>
  <h1>مرحبا بكم</h1>
  <h2>درس HTML</h2>
  <h3>العناوين والفقرات</h3>

  <p>هذا نص فقرة بسيط يشرح محتوى الدرس.</p>

  <ul>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
  </ul>

  <ol>
    <li>الخطوة الأولى</li>
    <li>الخطوة الثانية</li>
    <li>الخطوة الثالثة</li>
  </ol>
      
🔍 كيف تظهر في المتصفح:

الخطوط والألوان:
يمكن تغييرها باستعمال خاصية style.
<p style="color:red">نص أحمر</p>
      
🔍 كيف تظهر في المتصفح:

نص أحمر

الصور:
<img src="naruto.jpg">
      
🔍 كيف تظهر في المتصفح:

صورة توضيحية
الارتباط التشعبي (Link):
<a href="https://www.google.com">Google</a>
      
الجداول:
  <table border="1">
    <tr>
      <th>الاسم </th>
      <th>اللقب </th>
    </tr>
    <tr>
      <td>عمر</td>
      <td>الحسن</td>
    </tr>
    <tr>
      <td>سارة</td>
      <td>بن زيان</td>
    </tr>
  </table>
      
🔍 كيف تظهر في المتصفح:

4️⃣ إنشاء صفحة ويب

لإنشاء صفحة ويب: وهكذا تصبح لديك صفحة ويب جاهزة 🎉
الخلاصة 👇

HTML = بناء صفحة ويب
الوسوم = تنظيم المحتوى
المتصفح = عرض الصفحة

أول صفحة ويب؟ بسيطة أكثر مما تتخيل 😄