1 الفصل الأول: – ما هو HTML؟

Byahmed nabel Ahmed Nabel - Html

الفصل الأول: أساسيات HTML

ما هو HTML؟

HTML اختصار لـ HyperText Markup Language، وهي اللغة الأساسية التي تُستخدم لإنشاء صفحات الويب. من غير HTML، ما فيش أي صفحة ويب نقدر نعرضها أو نتفاعل معاها في المتصفح.

  • HTML مش لغة برمجة زي JavaScript أو Python، لكنها لغة ترميز، بمعنى إنها بتستخدم “وسوم” أو Tags لتحديد وتنسيق محتوى الصفحة.
  • باستخدام HTML، إحنا بنحدد النصوص، العناوين، الصور، الروابط، القوائم، الجداول، والعديد من العناصر الأخرى اللي بيحتاجها الموقع.

لماذا HTML مهم؟

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

أهمية HTML في بناء صفحات الويب

  • تعريف بنية الصفحة: HTML هو اللي بيحدد ترتيب العناصر في الصفحة، زي العناوين، النصوص، الصور، والأزرار.
  • تفاعل المستخدم مع الصفحة: HTML يحدد إزاي المستخدم هيتفاعل مع الصفحة من خلال الروابط (Links) والنماذج (Forms).
  • دعم محركات البحث (SEO): استخدام HTML بشكل صحيح يساعد محركات البحث زي Google على فهم محتوى الصفحة بشكل أفضل، وبالتالي تحسين ترتيب الموقع في نتائج البحث.

العلاقة بين HTML و CSS و JavaScript

  1. HTML و CSS:
    • HTML يحدد الهيكل الأساسي للصفحة (المحتوى)، بينما CSS (Cascading Style Sheets) هي المسؤولة عن تنسيق الصفحة وتحديد شكل العناصر.
    • مثال: HTML يحدد إذا كان النص هو عنوان أو فقرة، وCSS بيحدد لونه وحجمه ونوع الخط.
    • CSS يساهم في جعل الصفحة جميلة وأنيقة عن طريق تخصيص الألوان، الخلفيات، الهوامش، والمحاذاة.
  2. HTML و JavaScript:
    • HTML يحدد بنية الصفحة، وJavaScript هو اللي بيضيف الوظائف التفاعلية للصفحة.
    • باستخدام JavaScript، تقدر تضيف تفاعلات زي التمرير، عرض الإشعارات، التفاعل مع المستخدمين.
    • JavaScript يتفاعل مع العناصر الموجودة في HTML، زي الأزرار، القوائم، والنماذج، بحيث عندما يضغط المستخدم على زر أو يدخل بيانات في نموذج، يتم تنفيذ أكواد معينة.
  3. HTML + CSS + JavaScript = صفحة ويب ديناميكية وجميلة
    • HTML: هيكل الصفحة.
    • CSS: تصميم وتنسيق الصفحة.
    • JavaScript: التفاعلية والوظائف المتقدمة.

أمثلة بسيطة على HTML مع CSS و JavaScript

  1. HTML مع CSS:
    html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة HTML مع CSS</title>
    <style>
    body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    }
    h1 {
    color: blue;
    }
    </style>
    </head>
    <body>
    <h1>مرحبًا بك في تعلم HTML!</h1>
    <p>هنا يمكنك التعرف على الأساسيات.</p>
    </body>
    </html>
  2. HTML مع JavaScript:
    html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة HTML مع JavaScript</title>
    </head>
    <body>
    <h1>مرحبًا بك!</h1>
    <button onclick="displayMessage()">اضغط هنا</button>

    <script>
    function displayMessage() {
    alert('تم الضغط على الزر!');
    }
    </script>
    </body>
    </html>

ملخص الفصل الأول:

  • HTML هي لغة وصفية تُستخدم لإنشاء صفحات الويب.
  • بنية الصفحة يتم تحديدها باستخدام HTML، بينما CSS يتولى التنسيق وJavaScript يضيف التفاعلات.
  • تعلم HTML هو أول خطوة نحو بناء صفحات ويب جميلة وديناميكية.

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *