مرحبًا بك في قسم HTML!

💻 فهم أساسيات لغة HTML

إنّ HTML، والتي تعني **HyperText Markup Language** (لغة ترميز النص التشعبي)، هي اللبنة الأساسية للويب. إنها ليست لغة برمجة، بل هي **لغة ترميز** تُستخدم **لهيكلة** المحتوى الذي تراه على الإنترنت. فكر في HTML على أنها **هيكل عظمي** لصفحة الويب؛ إنها تحدد جميع الأجزاء المختلفة – مثل العناوين، والفقرات، والصور، والروابط – حتى يعرف متصفح الويب الخاص بك كيفية عرضها. كل صفحة ويب قمت بزيارتها على الإطلاق تستخدم HTML.

المفهوم الأساسي: العناصر والوسوم

في قلب HTML تقع **العناصر (Elements)**. عنصر HTML هو كل شيء بدءًا من وسم البداية إلى وسم النهاية، بما في ذلك المحتوى الذي بينهما.

يتم إنشاء العناصر باستخدام **الوسوم (Tags)**، وهي كلمات مفتاحية محاطة بأقواس زاوية، مثل <p>. تحتوي معظم العناصر على **وسم بداية** (أو **وسم فتح**) و**وسم نهاية** (أو **وسم إغلاق**). يشتمل وسم الإغلاق على شرطة مائلة للأمام: </p>.

مثال: <p>هذه فقرة.</p>

هنا، <p> هو وسم الفتح، و </p> هو وسم الإغلاق، و "هذه فقرة" هو المحتوى. يشكلون معًا **عنصر الفقرة**.

بعض العناصر **تُغلق ذاتيًا** (أو **عناصر فراغة**) ولا تتطلب وسم إغلاق لأنها لا تحيط بمحتوى. أحد الأمثلة الشائعة هو عنصر الصورة: <img src="image.jpg" alt="وصف">.

هيكلة مستند HTML

يتبع كل مستند HTML جيد التكوين هيكلاً أساسيًا. يبدأ دائمًا بـ **إعلان نوع المستند** ويتضمن أربعة عناصر أساسية:

<!DOCTYPE html>: يحدد هذا الإعلان أن المستند هو مستند HTML5. يجب أن يكون أول شيء في التعليمات البرمجية الخاصة بك.
<html>: هذا هو **العنصر الجذر** ويحتوي على كل المحتوى الآخر في الصفحة بأكملها. غالبًا ما يتضمن سمة للإعلان عن لغة المستند، مثل <html lang="en">.
<head>: يحتوي هذا القسم على **البيانات الوصفية (metadata)** حول مستند HTML. هذه معلومات لا تُعرض مباشرة على صفحة الويب ولكنها بالغة الأهمية للمتصفح ومحركات البحث. وهي تشمل أشياء مثل عنوان الصفحة، ومجموعة الأحرف، والروابط إلى الملفات الخارجية (مثل أوراق أنماط CSS).
- <title>: يحدد العنوان الذي يظهر في علامة تبويب المتصفح.
<body>: هذا هو المكان الذي يذهب إليه كل **المحتوى المرئي** لصفحتك. كل ما يراه المستخدم - نصوص، صور، روابط، مقاطع فيديو - يتم تضمينه داخل عنصر <body>.

عناصر HTML الرئيسية التي ستستخدمها

لإنشاء محتوى مقنع، ستحتاج إلى استخدام عناصر HTML مختلفة:

العناوين (Headings): تُستخدم لهيكلة النص الخاص بك، وتتراوح من <h1> (الأكثر أهمية/الأكبر) وصولاً إلى <h6> (الأقل أهمية/الأصغر).
```
<h1>مرحبًا بك في موقعي</h1>
```
الفقرات (Paragraphs): تُستخدم لكتل النص.
```
<p>إليك بعض المعلومات المهمة.</p>
```
الروابط (Anchors): تُستخدم للربط بصفحات أو موارد أخرى. تستخدم **السمة href** لتحديد عنوان URL للوجهة.
```
<a href="https://www.example.com">زيارة المثال</a>
```
الصور (Images): تُستخدم لتضمين الصور. تستخدم **السمة src** لمسار ملف الصورة و**السمة alt** لوصف نصي (مهم لإمكانية الوصول وتحسين محركات البحث).
```
<img src="photo.jpg" alt="صورة لمنظر طبيعي">
```
القوائم (Lists): تُستخدم لتنظيم العناصر، إما غير مرتبة (نقاط، <ul> و <li>) أو مرتبة (مرقمة، <ol> و <li>).

ماذا بعد؟

بينما توفر HTML الهيكل، فإنها لا تتعامل مع التصميم. هذا هو المكان الذي تظهر فيه **CSS (Cascading Style Sheets)** - لجعل HTML الخاص بك يبدو جميلاً. وللتفاعل والسلوك الديناميكي، ستحتاج إلى **JavaScript**. إن إتقان HTML هو الخطوة الأولى الأساسية في رحلة تطوير الويب الخاصة بك!