ما هي لغة HTML؟

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

وش هي HTML بالضبط؟

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

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

ليش نستخدم HTML؟

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

كيف شكل كود 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>أهلاً بكم في عالم HTML!</h1>
    <p>هذي فقرة بسيطة عشان تشوف كيف تشتغل HTML.</p>
</body>
</html>

شرح سريع للهيكل:

<!DOCTYPE html>: يقول للمتصفح إن هذي وثيقة HTML5.

<html lang="ar">: العنصر الأساسي اللي يحتوي كل شيء ثاني في الصفحة. lang="ar" يعني اللغة عربية.

<head>: هذا الجزء ما يظهر محتواه مباشرة للمستخدم، لكن فيه معلومات مهمة للصفحة زي عنوانها اللي يظهر في تبويبة المتصفح (<title>)، وصفحات الستايل (<link>)، وأكواد الجافاسكريبت (<script>).

<body>: هذا هو جسم الصفحة! كل المحتوى اللي تشوفه قدامك في المتصفح (نصوص، صور، فيديوهات، أزرار) يكون هنا.

أشهر العناصر (Tags) اللي بتستخدمها

HTML مبنية على "عناصر" (Elements) أو "وسوم" (Tags). كل وسم له وظيفة معينة. الأغلب يجي على شكل فتح (<tag>) وإغلاق (</tag>).

<h1> لـ <h6>: عناوين، <h1> هو الأكبر والأهم.

<p>: فقرة نصية.

<a>: رابط تشعبي (Hyperlink).

<img>: صورة.

<ul> و <ol>: قوائم غير مرتبة ومرتبة، مع عناصر القائمة <li>.

<div>: عنصر عام يستخدم لتقسيم الصفحة وتجميع المحتوى.

<span>: عنصر عام يستخدم لتحديد جزء صغير من النص داخل فقرة أو عنوان.

الـ Attributes (الخصائص)

الـ Attributes هي معلومات إضافية تعطيها للعنصر عشان تعدل سلوكه أو شكله. دايماً تجي داخل وسم البداية.

مثال: عشان تحط صورة، ما يكفي بس <img>. لازم تقول للمتصفح وش مصدر الصورة (وين مكانها) عن طريق الـ src attribute:

<img src="صورة.jpg" alt="وصف للصورة" width="300">

هنا:

src: مصدر الصورة.

alt: نص بديل يظهر لو الصورة ما تحملت، ومهم لمساعدة ضعاف البصر (Screen Readers).

width: عرض الصورة (في الغالب نتحكم فيها بالـ CSS أفضل).

تذكر: كل attribute يكون على شكل key="value" (اسم الخاصية="قيمتها").

HTML مو لحالها! (مع CSS و JavaScript)

HTML تبني الهيكل بس. عشان تخلي صفحتك شكلها حلو وتتفاعل مع المستخدم، تحتاج شريكين:

CSS (Cascading Style Sheets): هي اللي تعطي الألوان، الخطوط، التنسيقات، وتخلي الصفحة شكلها جذاب.

JavaScript: هي اللي تضيف التفاعل والحركة للصفحة، زي الأزرار اللي تسوي أكشن، أو الفورمات اللي تتحقق من البيانات.

يعني، HTML = الهيكل، CSS = الشكل، JavaScript = التفاعل.

الخلاصة

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

يلا بالتوفيق! ابدأ طبق اللي تعلمته الحين.

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