بوتات تليجرام: ما هي؟ وكيف تصنع بوتك الأول عبر BotFather خطوة بخطوة

📚 سلسلة تعلّم البرمجة للمبتدئين — الدرس 9 من 10
إذا فاتك الدرس السابق: القوائم والقواميس في Python: تخزين البيانات وتنظيمها

تعلمنا في الدروس السابقة أساسيات البرمجة بلغة Python. والآن ننتقل إلى العالم الذي تراه كل يوم: صفحات الويب. في هذا الدرس سنبني صفحة تعريفية شخصية باستخدام لغتين: HTML لبناء هيكل الصفحة، وCSS لتجميلها.

كيف تتكوّن صفحة الويب؟

شبّه صفحة الويب بالبيت:

اللغة	دورها	في البيت
HTML	الهيكل والمحتوى	الجدران والغرف
CSS	الشكل والألوان والتنسيق	الدهان والأثاث
JavaScript	التفاعل والحركة	الكهرباء والأجهزة

وستكون JavaScript موضوع الدرس القادم بإذن الله.

ما هي HTML؟

HTML ليست لغة برمجة بالمعنى الدقيق، بل لغة ترميز تصف محتوى الصفحة باستخدام الوسوم (Tags). وأغلب الوسوم تأتي في أزواج: وسم فتح ووسم إغلاق يبدأ بشرطة مائلة.

<h1>هذا عنوان رئيسي</h1>
<p>هذه فقرة نصية.</p>

الهيكل الأساسي لأي صفحة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>صفحتي الأولى</title>
</head>
<body>
  <h1>مرحبًا بالعالم!</h1>
</body>
</html>

• lang="ar" dir="rtl": تجعل الصفحة عربية من اليمين إلى اليسار.
• <head>: معلومات عن الصفحة لا تظهر في محتواها، مثل العنوان والترميز.
• <body>: كل ما يراه الزائر.
• charset="UTF-8": ضرورية لظهور الحروف العربية بشكل صحيح.

أهم وسوم HTML

الوسم	الاستخدام
<h1> ... <h6>	العناوين من الأكبر إلى الأصغر
<p>	فقرة
<a href="">	رابط
<img src="" alt="">	صورة
<ul> و <li>	قائمة نقطية وعناصرها
<button>	زر
<div>	حاوية لتجميع العناصر

ما هي CSS؟

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

h1 {
  color: darkblue;
  font-size: 32px;
  text-align: center;
}

أهم خصائص CSS

• color: لون النص، وbackground-color: لون الخلفية.
• font-size وfont-family: حجم الخط ونوعه.
• padding: المسافة داخل العنصر، وmargin: المسافة حوله.
• border وborder-radius: الحدود وتدوير الزوايا.

ولتطبيق تنسيق على عناصر محددة فقط نعطيها class ونستدعيه في CSS بنقطة قبل اسمه، مثل .card.

مشروع الدرس: بطاقة تعريف شخصية

أنشئ ملفًا باسم 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>
  <style>
    body {
      background-color: #eef2f7;
      font-family: Tahoma, sans-serif;
    }
    .card {
      max-width: 360px;
      margin: 40px auto;
      padding: 24px;
      background: white;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .card h1 { color: #2c5aa0; }
    .card ul { text-align: right; line-height: 1.9; }
    .btn {
      background: #2c5aa0;
      color: white;
      border: none;
      padding: 10px 24px;
      border-radius: 8px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>خالد محمد</h1>
    <p>طالب في الصف التاسع، أتعلم البرمجة</p>
    <ul>
      <li>هواياتي: القراءة وكرة القدم</li>
      <li>أتعلم الآن: Python وHTML</li>
      <li>حلمي: صناعة لعبة تعليمية</li>
    </ul>
    <button class="btn">تواصل معي</button>
  </div>
</body>
</html>

كتبنا CSS هنا داخل وسم <style> في رأس الصفحة لتبقى في ملف واحد. وفي المشاريع الكبيرة نضعها عادةً في ملف مستقل بامتداد .css.

جرّب وغيّر

• غيّر الاسم والمعلومات إلى بياناتك.
• غيّر الألوان؛ يمكنك كتابة أسماء ألوان إنجليزية مثل teal أو رموز مثل #e67e22.
• أضف صورة بالوسم <img> أعلى الاسم.

أخطاء شائعة

• نسيان وسم الإغلاق، فيتأثر كل ما بعده.
• نسيان الفاصلة المنقوطة ; بعد كل خاصية في CSS.
• نسيان charset="UTF-8" فتظهر الحروف العربية رموزًا غريبة.

الخلاصة

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

شاركنا لقطة من بطاقتك بعد تعديلها، أو أخبرنا بالألوان التي اخترتها!

→ الدرس السابق: القوائم والقواميس في Python: تخزين البيانات وتنظيمها
الدرس التالي: مقدمة في JavaScript ومشروع ختامي: ماذا بعد تعلم الأساسيات؟ ←

📚 فهرس السلسلة كاملة:

1. ما هي البرمجة؟ ولماذا تتعلمها الآن؟
2. كيف تختار أول لغة برمجة؟ مقارنة بين Python وJavaScript وغيرهما
3. تجهيز بيئة البرمجة: من المتصفح إلى Python وVS Code
4. المتغيرات وأنواع البيانات في Python: أول برامجك الحقيقية
5. الجمل الشرطية في Python: اجعل برنامجك يتخذ القرارات
6. الحلقات التكرارية في Python: for وwhile بأمثلة عملية
7. الدوال في Python: نظّم برامجك وأعد استخدام الكود
8. القوائم والقواميس في Python: تخزين البيانات وتنظيمها
9. أساسيات HTML وCSS: ابنِ أول صفحة ويب بنفسك (أنت هنا)
10. مقدمة في JavaScript ومشروع ختامي: ماذا بعد تعلم الأساسيات؟