لغة ترميز النص التشعبي (HTML) هي لغة الترميز القياسية المستخدمة لإنشاء صفحات الويب. وهي المسؤولة عن هيكلة المحتوى على الويب، مما يسمح للمتصفحات بعرض النصوص والصور والروابط والعناصر الأخرى. لغة HTML ليست لغة برمجة؛ بل هي طريقة لوصف هيكل المستند. إنها الأساس لتطوير الويب، وغالباً ما يتم دمجها مع أوراق الأنماط المتتالية (CSS) للتنسيق و جافا سكريبت (JavaScript) للتفاعل.
لتعلم HTML، ابدأ بالأساسيات: فهم الوسوم (Tags)، والعناصر (Elements)، والسمات (Attributes). مستند HTML عبارة عن شجرة من العناصر، كل منها يتم تعريفه بواسطة وسوم. توضع الوسوم داخل أقواس زاوية، مثل <tag>، ومعظمها له إصدارات فتح وإغلاق (على سبيل المثال، <p> و </p>). الوسوم ذاتية الإغلاق، مثل <img>، لا تتطلب وسماً للإغلاق.
هيكل HTML الأساسي
يبدو ملف HTML الأساسي كما يلي:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
</body>
</html>
التفصيل:
<!DOCTYPE html>: يعلن أن المستند هو HTML5.
<html>: العنصر الجذري (Root Element).
<head>: يحتوي على معلومات وصفية (مثل العنوان ومجموعة الأحرف).
<body>: يحتوي على المحتوى المرئي.
مثال: احفظ الكود أعلاه باسم index.html وافتحه في متصفح.
النتيجة: سترى صفحة فارغة مع ظهور "Page Title" في علامة تبويب المتصفح. لا يوجد محتوى مرئي حتى الآن، لأن جسم الصفحة (body) فارغ.
وسوم HTML الرئيسية حسب الفئة
أدناه توجد وسوم HTML الأساسية. لكل منها، ستجد وصفاً، ومقتطفاً برمجياً كمثال، ووصفاً للنتيجة المعروضة.
1. الوسوم الهيكلية (Structural Tags)
تحدد هذه الوسوم التخطيط العام للمستند.
<html>
الوصف: العنصر الجذري لصفحة HTML. يغلف كل المحتوى ويحدد اللغة عبر السمة lang.
مثال: <html lang="en"> </html>
النتيجة: غير مرئي؛ إنه يغلف المستند بأكمله.
<head>
الوصف: يحتوي على بيانات وصفية مثل العنوان، وروابط لأوراق الأنماط (stylesheets)، والنصوص البرمجية. لا يتم عرض هذا المحتوى في جسم الصفحة.
مثال:
HTML
<head>
<title>My First Page</title>
<meta name="description" content="A simple HTML page">
</head>النتيجة: يحدد عنوان الصفحة في علامة تبويب المتصفح ويوفر بيانات وصفية صديقة لتحسين محركات البحث (SEO) وتكون غير مرئية للمستخدمين.
<body>
الوصف: يحتوي على جميع محتويات الصفحة المرئية، مثل النصوص والصور والروابط.
مثال:
HTML
<body>
<h1>Welcome!</h1>
<p>This is the main content.</p>
</body>النتيجة: يعرض عنواناً كبيراً "Welcome!" تليه فقرة "This is the main content."
2. وسوم تنسيق النصوص (Text Formatting Tags)
تتعامل هذه الوسوم مع العناوين، والفقرات، وأنماط النصوص المضمنة.
<h1> إلى <h6> (العناوين - Headings)
الوصف: تحدد العناوين من المستوى 1 (الأكبر والأكثر أهمية) إلى المستوى 6 (الأصغر والأقل أهمية). تُستخدم هذه لهيكلة الصفحة وتحسين محركات البحث.
مثال: <h1>Main Title</h1> <h2>Subsection</h2>
النتيجة: يظهر "Main Title" بخط عريض كبير، ويظهر "Subsection" أصغر قليلاً. تضيف المتصفحات مساحة تلقائياً حول العناوين.
<p> (الفقرة - Paragraph)
الوصف: يحدد كتلة من النص كفقرة. تضيف المتصفحات مساحة قبل وبعد الكتلة.
مثال: <p>This is a paragraph.</p>
النتيجة: كتلة منفصلة من النص مع وجود مسافات حولها.
<strong> أو <b> (عريض - Bold)
الوصف: <strong> يؤكد على النص بشكل دلالي (يشير إلى الأهمية)، بينما <b> مخصص للخط العريض بصرياً فقط.
مثال: <p>This is <strong>important</strong> text.</p>
النتيجة: "This is important text."
<em> أو <i> (مائل - Italic)
الوصف: <em>للتوكيد الدلالي، بينما <i> للخط المائل بصرياً.
مثال: <p>Emphasize <em>this</em> word.</p>
النتيجة: "Emphasize this word."
<br> (فاصل الأسطر - Line Break)
الوصف: يدرج فاصلاً لسطر واحد. هذا وسم ذاتي الإغلاق.
مثال: <p>Line one<br>Line two</p>
النتيجة: يظهر النص في سطرين داخل نفس الفقرة.
<hr> (قاعدة أفقية - Horizontal Rule)
الوصف: ينشئ فاصلاً موضوعياً، يُعرض عادةً كخط أفقي.
مثال: <p>Section one</p><hr><p>Section two</p>
النتيجة: فقرتان مفصولتان بخط أفقي.
3. الروابط ووسوم الوسائط (Links and Media Tags)
<a> (رابط أو مرساة - Anchor)
الوصف: ينشئ روابط تشعبية. استخدم السمة href لعنوان المورد الموحد (URL) و target="_blank" لفتح الرابط في علامة تبويب جديدة.
مثال: <a href="https://example.com" target="_blank">Visit Example</a>
النتيجة: نص أزرق قابل للنقر يقرأ "Visit Example" ويفتح الموقع في علامة تبويب جديدة.
<img> (صورة - Image)
الوصف: يضمن صورة. يتطلب src (عنوان المصدر) و alt (نص بديل لإمكانية الوصول).
مثال: <img src="image.jpg" alt="A description of the image" width="300" height="200">
النتيجة: يعرض الصورة بحجم 300 في 200 بكسل. إذا فشل تحميل الصورة، يظهر النص "A description of the image".
<video> و <audio>
الوصف: لتضمين الوسائط المتعددة. استخدم src للملف و controls لأزرار التشغيل.
مثال: <video src="video.mp4" controls width="400"></video>
النتيجة: مشغل وسائط مع أزرار التشغيل والإيقاف المؤقت.
4. وسوم القوائم (List Tags)
<ul> (قائمة غير مرتبة - Unordered List)
الوصف: ينشئ قائمة نقطية باستخدام وسوم <li> (عنصر القائمة).
مثال:
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>النتيجة: قائمة حيث يسبق كل عنصر نقطة.
<ol> (قائمة مرتبة - Ordered List)
الوصف: ينشئ قائمة مرقمة باستخدام وسوم <li>.
مثال:
HTML
<ol>
<li>First</li>
<li>Second</li>
</ol>النتيجة: قائمة حيث تكون العناصر مرقمة (1، 2، 3...).
<dl> (قائمة الوصف - Description List)
الوصف: تستخدم لأزواج "المفتاح-القيمة"، مثل المسارد، باستخدام <dt> (المصطلح) و <dd> (الوصف).
مثال:
HTML
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>النتيجة: المصطلح "HTML" يليه تعريفه بمسافة بادئة في السطر التالي.
5. وسوم الجداول (Table Tags)
<table>، <tr>، <th>، <td>
الوصف: لإنشاء بيانات جدولية. استخدم <tr> للصفوف، <th> للعناوين الرأسية، و <td> لخلايا البيانات.
مثال:
HTML
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>النتيجة:
| Name | Age || :--- | :--- || John | 30 |
6. وسوم النماذج (Form Tags)
النماذج تجمع مدخلات المستخدم.
<form>: يغلف عناصر الإدخال. يستخدم action لعنوان URL للإرسال و method (get أو post).
<input>: ينشئ حقولاً مثل النص، كلمة المرور، مربع الاختيار، أو أزرار الراديو.
مثال: <input type="text" name="username" placeholder="Enter username">
النتيجة: مربع نص مع نص عنصر نائب "Enter username".
<button>: ينشئ أزراراً قابلة للنقر.
مثال: <button type="submit">Submit</button>
<select> و <option>: ينشئ قائمة منسدلة.
7. الوسوم الدلالية (Semantic Tags - HTML5)
تعمل هذه الوسوم على تحسين إمكانية الوصول وتحسين محركات البحث من خلال تحديد معنى المحتوى.
<header>: محتوى تمهيدي، مثل الشعارات أو التنقل.
<nav>: يحدد قسماً لروابط التنقل.
<section>: تجميع موضوعي للمحتوى.
<article>: محتوى قائم بذاته، مثل منشور مدونة.
<footer>: محتوى التذييل، يحتوي عادةً على معلومات حقوق النشر.
السمات وأفضل الممارسات
السمات العامة (Global Attributes):
تدعم معظم الوسوم هذه السمات:
id: معرف فريد لعنصر ما.
class: تُستخدم لتجميع العناصر لأجل تنسيقات CSS.
style: تُستخدم للتنسيق المضمن (Inline styling).
مثال: <div id="main" class="container" style="color: blue;">Content</div>
النتيجة: قسم (div) بنص أزرق، يمكن تحديده عبر ID أو Class في CSS أو JavaScript.
أفضل الممارسات للتعلم:
استخدم محرراً للنصوص مثل Visual Studio Code.
تحقق من صحة كود HTML الخاص بك باستخدام أدوات مثل W3C Validator.
تعلم جنباً إلى جنب مع CSS للتنسيق (باستخدام وسم <style> أو ملفات خارجية).
تدرب عن طريق بناء صفحات بسيطة: سيرة ذاتية شخصية، وصفة طعام، أو نموذج.
الموارد: وثائق مطوري موزيلا (MDN Web Docs)، و W3Schools، و freeCodeCamp.
هذا يغطي الأساسيات. جرب إنشاء ملفات HTML وعرضها في متصفحك لترى النتائج بنفسك.
 |  |  |
 |  |  |