مدونة جوارا: ما هي لغة HTML؟

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

وش سالفة HTML؟

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

كيف تشتغل HTML؟

HTML تستخدم شي اسمه "عناصر" (elements) أو "وسوم" (tags). كل وسم يمثل جزء معين من المحتوى. مثلاً، عندك وسم للفقرات <p>، ووسم للعناوين <h1>، وهكذا. أغلب الوسوم تجي على شكل زوج: وسم فتح ووسم إغلاق، زي <h1>مرحباً</h1>. بس فيه وسوم ما تحتاج إغلاق، زي وسم الصورة <img>.

ملاحظة سريعة: الـ "HyperText" في اسم HTML يعني إنك تقدر تربط صفحات ببعضها عن طريق الروابط (links). وهذا هو أساس الشبكة العنكبوتية!

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

كل صفحة HTML لها هيكل أساسي لازم يكون موجود. هذا الهيكل يضمن إن المتصفح يقدر يفهم صفحتك ويعرضها صح:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان صفحتي</title>
</head>
<body>
    <h1>أهلاً وسهلاً في صفحتي الأولى!</h1>
    <p>هذي فقرة بسيطة عشان تشوف كيف تشتغل HTML.</p>
</body>
</html>

خلنا نفصل الكود اللي فوق:

<!DOCTYPE html>: يقول للمتصفح إن هذي صفحة HTML5. لازم تكون أول سطر.
<html lang="ar">: العنصر الأب لكل المحتوى. الـ lang="ar" يحدد إن لغة الصفحة عربية.
<head>: هذا الجزء يحوي معلومات عن الصفحة ما تنعرض للمستخدم مباشرة، زي عنوان الصفحة في تبويبة المتصفح (<title>)، وربط ملفات الـ CSS والـ JavaScript.
<meta charset="UTF-8">: يحدد ترميز الأحرف عشان تتأكد إن الحروف العربية تظهر صح.
<meta name="viewport" ...>: مهم جداً عشان صفحتك تظهر بشكل كويس على الجوالات والشاشات المختلفة.
<title>: العنوان اللي يظهر في تبويبة المتصفح.
<body>: هذا هو الجزء اللي فيه كل المحتوى اللي يشوفه المستخدم في الصفحة (نصوص، صور، أزرار، إلخ).

أشهر الوسوم اللي بتحتاجها

فيه وسوم كثيرة، بس هذي بعض الأساسيات اللي بتستخدمها كثير:

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

الخصائص (Attributes)

الوسوم ممكن يكون لها "خصائص" (attributes) تعطي معلومات إضافية عن العنصر أو تغير طريقة عمله. دايماً تجي داخل وسم الفتح، زي ما شفنا في lang، href، src، و alt.

مثال:

<a href="https://www.example.com" target="_blank">افتح في نافذة جديدة</a>

هنا href يحدد الوجهة، وtarget="_blank" يقول للمتصفح افتح الرابط في تبويبة جديدة.

ختاماً

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

نصيحة أخيرة: فيه مواقع كثيرة ممتازة لتعلم HTML، مثل W3Schools أو MDN Web Docs. استغلها!

الفهرس التالي →