لغة HTML هي اللبنة الأساسية لبناء صفحات الويب. هي لغة ترميز تُستخدم لهيكلة محتوى صفحة الويب، مثل النصوص والصور والروابط. إليك أساسيات لغة HTML:

1. هيكل صفحة HTML:

كل صفحة HTML تتكون من هيكل أساسي يتضمن العناصر التالية:

  • <!DOCTYPE html>: يُعلن عن نوع المستند وإصداره (HTML5 في هذه الحالة). يجب أن يكون هذا الإعلان في بداية كل صفحة HTML.
  • <html>: العنصر الجذري الذي يحتوي على جميع عناصر الصفحة الأخرى.
  • <head>: يحتوي على معلومات حول الصفحة، مثل العنوان والترميز والروابط إلى ملفات CSS و JavaScript. هذه المعلومات لا تظهر مباشرة على صفحة الويب.
  • <title>: يُحدد عنوان الصفحة الذي يظهر في شريط عنوان المتصفح.
  • <body>: يحتوي على محتوى الصفحة الذي يظهر للمستخدم، مثل النصوص والصور والجداول والنماذج.

مثال لهيكل صفحة HTML:

HTML
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذه فقرة بسيطة.</p>
</body>
</html>

2. العناصر الأساسية:

تتكون لغة HTML من مجموعة من العناصر (Elements) التي تُستخدم لإنشاء هيكل ومحتوى الصفحة. تتكون العناصر عادةً من وسم بداية (Start Tag) ووسم نهاية (End Tag) ومحتوى بينهما. على سبيل المثال: <p>هذه فقرة.</p>

بعض العناصر الأساسية:

  • <h1> إلى <h6>: تُستخدم لإنشاء العناوين بمستويات مختلفة (من العنوان الرئيسي <h1> إلى العنوان الفرعي <h6>).
  • <p>: يُستخدم لإنشاء الفقرات.
  • <br>: يُستخدم لإضافة سطر جديد (فاصل أسطر).
  • <hr>: يُستخدم لإضافة خط أفقي.
  • <img>: يُستخدم لإضافة الصور. يتطلب سمة src لتحديد مسار الصورة. مثال: <img src="image.jpg" alt="وصف الصورة">
  • <a>: يُستخدم لإنشاء الروابط التشعبية. يتطلب سمة href لتحديد عنوان URL للرابط. مثال: <a href="https://www.example.com">رابط</a>
  • <ul>: يُستخدم لإنشاء قائمة غير مُرتبة (نقطية).
  • <ol>: يُستخدم لإنشاء قائمة مُرتبة (رقمية).
  • <li>: يُستخدم لإنشاء عناصر القائمة داخل <ul> أو <ol>.
  • <div>: يُستخدم لتقسيم محتوى الصفحة إلى أقسام.
  • <span>: يُستخدم لتطبيق تنسيقات على جزء صغير من النص.

3. السمات (Attributes):

تُستخدم السمات لإضافة معلومات إضافية إلى عناصر HTML. تُكتب السمات داخل وسم البداية على شكل اسم السمة="قيمة السمة".

بعض السمات الشائعة:

  • id: يُستخدم لتعريف مُعرّف فريد للعنصر.
  • class: يُستخدم لتحديد فئة أو مجموعة من العناصر.
  • style: يُستخدم لتطبيق أنماط CSS مباشرة على العنصر.
  • src: يُستخدم لتحديد مسار الصورة في العنصر <img>.
  • href: يُستخدم لتحديد عنوان URL في العنصر <a>.
  • alt: يُستخدم لتحديد نص بديل للصورة في العنصر <img>، يظهر في حالة عدم تحميل الصورة.
  • جرب الان

4. التعليقات:

تُستخدم التعليقات لإضافة ملاحظات إلى كود HTML دون أن تظهر على صفحة الويب. تُكتب التعليقات بين . مثال:

5. ترميز الأحرف:

يجب تحديد ترميز الأحرف في صفحة HTML باستخدام العنصر <meta charset="UTF-8"> داخل العنصر <head>. ترميز UTF-8 يدعم معظم اللغات والأحرف.

نصائح إضافية:

  • استخدم محرر نصوص مُناسب لكتابة كود HTML، مثل VS Code أو Sublime Text.
  • تحقق من صحة كود HTML باستخدام أدوات التحقق من صحة الكود على الإنترنت.
  • تعلم CSS لتنسيق مظهر صفحات الويب.
  • استخدم مصادر تعليمية موثوقة لتعلم المزيد عن HTML.

بفهمك لهذه الأساسيات، يمكنك البدء في إنشاء صفحات ويب بسيطة. مع الممارسة والتعلّم المستمر، ستتمكن من بناء صفحات ويب أكثر تعقيداً واحترافية.