عالم HTML بداية رحلة تطوير الويب من الصفر الى الإحتراف

byمدونة العرائش التقنية -

مدخل إلى عالم HTML - بداية رحلة تطوير الويب

عالم HTML بداية رحلة تطوير الويب من الصفر الى الإحتراف

المفاهيم الأساسية لتعلم لغة HTML

في هذا الدرس، ستتعرف على المفاهيم الأساسية لتطوير الويب وفهم مكانة HTML في بناء المواقع. بنهاية الدرس ستكون قادراً على:

  • فهم ماهية HTML ودورها في الويب
  • التمييز بين HTML و CSS و JavaScript
  • إعداد بيئة العمل الأساسية للبدء في التطوير

ما هو HTML؟

HTML هي اختصار لـ HyperText Markup Language (لغة ترميز النص الفائق). ببساطة:

HTML هي الهيكل العظمي لأي صفحة ويب، فهي تحدد مكونات الصفحة وعناصرها الأساسية.

تشبيه بسيط:

إذا تخيلت أن صفحة الويب كمنزل:

  • HTML = الهيكل الأساسي (الجدران، الأبواب، النوافذ)
  • CSS = الديكور والتزيين (الألوان، الديكورات، الترتيب)
  • JavaScript = الكهرباء والخدمات (التفاعل، الحركة، الاستجابة)

الفرق بين لغات الويب الرئيسية

اللغة الدور مثال
HTML هيكل المحتوى العناوين، الفقرات، الصور، الروابط
CSS التنسيق والمظهر الألوان، الخطوط، المسافات، التخطيط
JavaScript التفاعل والسلوك القوائم المنسدلة، التحقق من النماذج، الحركات

المتطلبات الأساسية لتعلم لغة HTML

لتبدأ تعلم HTML، تحتاج فقط إلى:

1. متصفح ويب (مثلاً):

  • Google Chrome (موصى به)
  • Firefox
  • Edge

2. محرر نصوص (اختر واحداً):

  • VS Code (مجاني وممتاز - موصى به) تحميله من هنا
  • Sublime Text
  • Atom
  • حتى المفكرة العادية (Notepad) تكفي للبداية

3. الرغبة في التعلم ⚡

 

خطوات إنشاء أول ملف HTML

لنبدأ بأول تجربة عملية مباشرة:

الخطوة 1: إنشاء الملف

  1. افتح محرر النصوص (VS Code أو المفكرة)
  2. أنشئ ملف جديد
  3. احفظه باسم first-page.html
    • مهم جداً: التأكد من أن الامتداد هو .html وليس .txt

الخطوة 2: كتابة أبسط كود HTML

أهلاً بالعالم! أنا أتعلم HTML

الخطوة 3: فتح الملف في المتصفح

  1. اذهب للمجلد الذي حفظت فيه الملف
  2. انقر نقراً مزدوجاً على الملف first-page.html
  3. سيتم فتح صفحة ويب تعرض النص الذي كتبته!

هيكل ملف HTML الأساسي (لمعرفة مستقبلية)

في الدرس القادم سنتعلم الهيكل الكامل، لكن دعنا نلقي نظرة سريعة:

<!DOCTYPE html>
<html>
<head>
    <!-- معلومات عن الصفحة (غير ظاهرة للزوار) -->
    <title>عنوان صفحتي الأولى</title>
</head>
<body>
    <!-- المحتوى الظاهر للزوار -->
    <h1>مرحباً بالعالم!</h1>
    <p>هذه أول صفحة ويب أصممها باستخدام HTML</p>
</body>
</html>

تمرين عملي صغير في HTML

المهمة: أنشئ صفحتك الشخصية البسيطة

  1. افتح محرر النصوص
  2. أنشئ ملف جديد باسم my-page.html
  3. اكتب بداخله أي ترحيب تريده (مثال: "مرحباً، أنا [اسمك]، وهذه صفحتي الأولى!")
  4. احفظ الملف وافتحه في المتصفح

تحدي إضافي: جرب تغيير النص، حفظ الملف، وتحديث الصفحة في المتصفح لترى التغييرات مباشرة!

💡 نصائح مهمة للمبتدئين

  1. لا تحفظ الكود، افهمه - الفهم أهم من الحفظ
  2. جرب بنفسك - التطبيق العملي هو سر التعلم
  3. لا تخف من الأخطاء - كل المطورين مرّوا بها
  4. استخدم أدوات المطور - اضغط F12 في المتصفح لترى كود المواقع

📚 مصادر للإستزادة


كيفية إختبار وفهم لغة HTML

1. ما هو دور HTML في صفحات الويب؟





2. ما هي أسهل طريقة لرؤية نتيجة كود HTML؟





3. أي من هذه الأدوات ليس ضرورياً لبدء تعلم HTML؟





📝 ملخص الدرس

  • HTML هي لغة هيكلة محتوى الويب
  • تحتاج فقط لمتصفح ومحرر نصوص للبدء
  • حفظ الملف بامتداد .html ضروري
  • يمكن رؤية النتائج مباشرة بفتح الملف في المتصفح

🎉 خاتمة الدرس الأول لتعليم Html

لقد أتممت أول درس في HTML. في الدرس القادم سنتعلم الهيكل الكامل لملف HTML والعناصر الأساسية.

هل واجهتك أي صعوبة في التمرين؟ شاركنا تجربتك أو استفساراتك!

معلومة سريعة: أول إصدار من HTML ظهر عام 1991 بواسطة تيم بيرنرز لي، مبتكر شبكة الويب العالمية!

👉 الدرس التالي: هيكل مستند HTML والعناصر الأساسية

© 2026 دورة HTML للمبتدئين | الدرس 1

Tags

إرسال تعليق

أحدث أقدم

نموذج الاتصال