مقدمة عن HTML (لغة ترميز النص التشعبي - HyperText Markup Language):

HTML هي البنية الأساسية لإنشاء صفحات الويب. أنا ليست لغة برمجة بالمعنى الكامل، بل هي لغة ترميزية لهيكل ومحتوى صفحة الويب. أهم النقاط حول HTML:

ما هو HTML؟

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

مكونات HTML الأساسية:

  • الوسوم (Tags): استخلاص مفاهيم HTML. تتكون من:
    • إشارة البداية (Start Tag): <tagname>(مثل <p>)
    • وصل النهاية (علامة النهاية): </tagname>(مثل </p>)
    • الموقد (العنصر): المحتوى بين البداية والنهاية، بالإضافة إلى الوسمين نفسهما. مثال:<p>هذه فقرة.</p>
  • العناصر الفارغة (Empty Elements): بعض العناصر لا تحتوي على محتوى ولا تحتاج إلى ربط النهاية، مثل <br>(فاصل سطر) و <img>(صورة).
  • السمات (السمات): الفائز بمعلومات إضافية إلى العناصر. تُكتب في البداية على شكل attribute_name="attribute_value". مثال:<img src="image.jpg" alt="وصف الصورة">

مثال بسيط لصفحة HTML:

لغة ترميز النص الفائق
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>صفحة بسيطة</title>
</head>
<body>
    <h1>هذا عنوان رئيسي</h1>
    <p>هذه فقرة من النص.</p>
    <img src="image.jpg" alt="صورة">
    <a href="https://www.example.com">رابط إلى مثال</a>
</body>
</html>

شرح المثال:

  • <!DOCTYPE html>: يُحدد نوع المستند، وهو HTML5 في هذه الحالة.
  • <html lang="ar" dir="rtl">: عذراً. يُحدد أن لغة الصفحة هي العربية وأن الكتابة بالانكليزية لليسار.
  • <head>: يحتوي على معلومات حول الصفحة، مثل العنوان والترميز.
    • <meta charset="UTF-8">: يُحدد تعريف المستخدم في الصفحة.
    • <title>صفحة بسيطة</title>: يتم تحديد عنوان الصفحة الذي يظهر في شريط إصدار المتصفح.
  • <body>: محتويات على صفحة الظاهر المستخدم.
    • <h1>هذا عنوان رئيسي</h1>:العنوان الرئيسي.
    • <p>هذه فقرة من النص.</p>:فقرة من النص.
    • <img src="image.jpg" alt="صورة">:صورة.
    • <a href="https://www.example.com">رابط إلى مثال</a>:رابط تشعبي.
    • جرب الان

أهمية HTML:

  • البناء الأساسي للويب: تُعتبر HTML حجر الزاوية في تطوير الويب، حيث يمكنك إنشاء جميع صفحات الويب.
  • سهولة التعلم: تُعتبر تعتبر HTML سهلة التعلم، مما يجعلها نقطة المستوى للمبتدئين في تطوير مجال الأعمال.
  • لتتكامل مع الآخر: تتكامل HTML بشكل جيد مع تقنيات أخرى مثل CSS (لتنسيق المظهر) و JavaScript (لإضافة التفاعلية).

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