↑

ما هي لغة HTML؟

ما هي لغة HTML؟

يا هلا بالجميع! اليوم بنتكلم عن أساس كل موقع تشوفه على الإنترنت: لغة HTML. خلونا ندخل في الموضوع على طول.

وش سالفة HTML؟

HTML هي اختصار لـ HyperText Markup Language. بالعربي يعني "لغة ترميز النص التشعبي".

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

ليه نستخدم HTML؟

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

العناصر (Elements) والوسوم (Tags)

الـ HTML مبنية على حاجة نسميها "عناصر" (Elements). كل عنصر يتكون من "وسم بداية" (opening tag) و "وسم نهاية" (closing tag). مثلاً، عشان تسوي فقرة، تستخدم الوسم p:

هذي فقرة بسيطة.

بعض العناصر ما تحتاج وسم نهاية، نسميها عناصر "فارغة" (empty elements)، مثل وسم الصورة أو وسم كسر السطر br.

الخصائص (Attributes)

أحياناً تحتاج تعطي معلومات إضافية للعنصر. هنا يجي دور "الخصائص" (Attributes). تنحط الخصائص داخل وسم البداية.

مثلاً، لو بتضيف رابط، لازم تحدد وين يروح الرابط هذا:

زور موقعنا

هنا href هو خاصية، وقيمتها هي عنوان الموقع.

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

كل صفحة HTML لها هيكل معين لازم تلتزم فيه. هذا مثال بسيط:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>أول صفحة HTML لي</title>
</head>
<body>
    <h1>أهلاً وسهلاً في عالم الويب!</h1>
    <p>هذي صفحة HTML بسيطة جداً.</p>
    <a href="https://www.google.com">ابحث في جوجل</a>
</body>
</html>

خلنا نشرح اللي فوق بسرعة:

  • <!DOCTYPE html>: يقول للمتصفح إن هذي وثيقة HTML5.
  • <html lang="ar">: العنصر الأساسي للصفحة كلها. lang="ar" يحدد إن لغة المحتوى عربي.
  • <head>: هنا تحط معلومات عن الصفحة، مثل العنوان اللي يظهر في تبويبة المتصفح (<title>)، أو ربط ملفات الـ CSS.
  • <body>: هذا هو المكان اللي تحط فيه كل المحتوى المرئي لصفحتك. أي شيء تشوفه على الشاشة بيكون هنا.

خلاصة الكلام

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

أتمنى إن الشرح كان واضح ومفيد. بالتوفيق في رحلتكم البرمجية!