1.1 تعريف العنصر (Element) في HTML

العنصر في لغة ‎HTML يُعرَّف بأنه المجموعة التي تبدأ بعلامة افتتاح (start tag)، ثم محتوى (قد يكون نصاً أو عناصر أخرى)، ثم علامة إغلاق (end tag) — ما لم يكن العنصر “فارغًا” (empty). w3schools.com
مثال:

<p>هذا فقرة نصية.</p>

هنا <p> هي علامة الافتتاح، و</p> هي علامة الإغلاق، والمحتوى نص داخل العنصر.

1.2 فئات المحتوى (Content Categories)

تُصنّف العناصر في HTML ضمن فئات محتوى (content categories) تُحدد ما هو المسموح به كأب أو محتوى للعنصر. developer.mozilla.org
من بين هذه الفئات:

  • Metadata content (محتوى التعريف) مثل <meta> أو <title> داخل <head>

  • Flow content (محتوى التدفق) وهو غالبية العناصر داخل <body> مثل <div>, <p>, <img>

  • Phrasing content (محتوى الصياغة) وهو محتوى داخل الفقرة مثل نصوص وعناصر inline

  • وغيرها من الفئات كـ sectioning content, embedded content، الخ. developer.mozilla.org

باختصار: تنظيم العناصر وفهم الفئة التي ينتمي إليها يُساعد المطوّر على كتابة HTML صالحاً من حيث البُنية وال semantics.

1.3 بنية الصفحة وتكوين المحتوى

عند بناء صفحة ويب، فإنّه يُراعى أن تكون البنية الأساسية كالتالي:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>عنوان الصفحة</title>
</head>
<body>
<!-- هنا المحتوى -->
</body>
</html>

داخل <body> نضع عناصر من فئة flow content، ونراعي أن العناصر تتداخل بشكل منطقي (nesting) وليس بشكل عشوائي. w3schools.com
كما أنّ الفهم الجيد لتكوين المحتوى يسمح بكتابة صفحات قابلة للوصول (accessibility)، ومتوافقة مع المعايير (standards).

🎯 سجّل الآن لتتعلم كيفية إنشاء هيكل صفحات احترافي باستخدام الأدوات الصحيحة والمعايير الحديثة في HTML.

2. إظهار وإخفاء النص، تمييزه، تطبيق خط تحت النص أو خط يتوسطه، وتغيير حجم النص باستخدام HTML

2.1 إظهار / إخفاء النص

  • يمكن إخفاء عنصر بالكامل باستخدام السمة hidden بالعناصر في HTML:

    <p hidden>هذا النص مخفي في البداية.</p>

    حيث تُمثّل السمة hidden بأن العنصر “غير ذي صِلة” أو لا ينبغي عرضه. w3schools.com

  • كذلك، منذ HTML5 أصبح بإمكاننا استخدام عنصر <details> مع <summary> لإنشاء منطقة قابلة للطي (“show/hide toggle”):

    <details>
    <summary>انقر لعرض/إخفاء المزيد</summary>
    <p>هذا النص يُعرض عند التوسيع.</p>
    </details>

    يُعد هذا أسلوباً بسيطاً دون الحاجة إلى JavaScript. utah.screenstepslive.com

2.2 تمييز النص وتطبيق خطوط تحت أو وسط النص

  • لتمييز النص (highlight) يمكن استخدام <mark> في HTML:

    <p>لا تنسَ شراء <mark>الحليب</mark> اليوم.</p>

    وهذا عنصر حديث مخصص للتمييز. w3schools.com

  • لتطبيق خط يتوسط النص (strikethrough) يمكن استخدام عنصر <s> الذي يمثل نصاً “لم يعد صحيحاً أو لم يعد ذو صلة”. developer.mozilla.org
    السابق المستخدم <strike> أصبح مهجوراً (deprecated). developer.mozilla.org

  • لتطبيق خط تحت النص (underline)، لا يوجد عنصر مخصص في HTML5، بل يُستخدم CSS مثلاً:

    .underline { text-decoration: underline; }

    واستخدامه ضمن عنصر:

    <span class="underline">نص بخط تحت</span>

2.3 تغيير حجم النص

  • من حيث HTML بحت يمكن استخدام عناصر مثل <small> لجعل النص أصغر. w3schools.com

  • لكن الأفضل هو استخدام CSS لتحديد font-size وline-height لضبط الحجم، نظراً لأن HTML يجب أن تركز على البنية وليس العرض.
    مثال CSS:

.large-text { font-size: 2em; }

وبالدمج في HTML:

<p class="large-text">هذا نص أكبر حجماً.</p>

🎓 في الدورة التدريبية ستتعلم استخدام CSS وHTML معًا لبناء واجهات جذابة ومتكاملة.

3. عرض الصورة أو النص في إطار وإضافة القياسات واستخدام القوائم للعرض أو التنقل في صفحات الويب HTML

3.1 عرض الصور في HTML مع القياسات

لإدراج صورة:

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

يمكن أيضاً الاستفادة من CSS لتحديد الأبعاد أو الاستجابة (responsive).

3.2 النص أو الصورة داخل إطار (frame) أو حاوية

يمكن استخدام عنصر مثل <figure> و<figcaption> لاحتواء صورة مع وصف:

<figure>
<img src="photo.jpg" alt="وصف">
<figcaption>وصف الصورة</figcaption>
</figure>

أو استخدام <div> مع CSS كإطار ثم تحديد الحدود (border) أو الحشو (padding) والقياسات.

3.3 استخدام القوائم للعرض أو التنقل

تُستخدم القوائم (Lists) في HTML لعرض عناصر متعددة، أو لإنشاء شريط تنقّل (navigation menu) عبر <ul> أو <ol>. w3schools.com+1
مثال تنقّل:

<nav>
<ul>
<li><a href="index.html">الرئيسية</a></li>
<li><a href="about.html">من نحن</a></li>
<li><a href="contact.html">اتصل بنا</a></li>
</ul>
</nav>

3.4 الربط بين “إطار + قائمة + تنقل”

من الممارسات الجيدة وضع قائمة التنقّل في شريط جانبي أو أعلى الصفحة داخل <nav>, وتوضيح الصور أو النصوص في إطار معين، مما يسهم في تصميم منظم وسهل الاستخدام.

4. كيفية إنشاء قوائم متداخلة وفهم تحميل وتنقّل الملفات والمجلدات الداخلية في HTML

4.1 إنشاء قوائم متداخلة – مثال برمجي

<ul>
<li>الفئة الأولى
<ol>
<li>البند 1</li>
<li>البند 2</li>
</ol>
</li>
<li>الفئة الثانية</li>
</ul>

هذا يبني قائمة رئيسية، وفي بند منها قائمة مرتّبة فرعية.

4.2 تحميل وتنقّل الملفات والمجلدات (File paths)

عند بناء مشروع ويب، قد يكون لديك هيكل مجلدات مثلا:

/project-web/
index.html
/images/
pic1.jpg
/css/
style.css
/pages/
about.html

  • داخل index.html للإشارة إلى صورة: <img src="images/pic1.jpg" alt="…">

  • داخل صفحة في “pages/about.html” للإشارة إلى style.css في المجلد الأعلى:

    <link rel="stylesheet" href="../css/style.css">

    النقطة المزدوجة .. تمثل الانتقال “خطوة للخلف” في هيكل المجلدات.

4.3 لماذا هذا مهم؟

لأن التنقّل الصحيح للملفات والمجلدات يضمن تحميل الموارد (صور، CSS، جافا سكريبت) بنجاح، ويُجنب أخطاء “404 Not Found”.

4.4 مراجعة أدوات النصوص (Text editors)

عند العمل على مشروع ويب، يُستحسن استخدام محرر نصوص يدعم التمييز اللوني (syntax highlighting)، ومعاينة مباشرة (live preview)، والتحكم في هيكل المشروع والمجلدات— مما يسهم في تنظيم الكود وفهم الروابط النسبية بين الملفات.

خاتمة

في هذا المقال تم تناول مجموعة محاور مترابطة في مجال بناء صفحات الويب باستخدام HTML: من فهم بنية العناصر وفئات المحتوى، إلى تنسيق النصوص وعرض الصور، وفهم مفهوم الوراثة في الأنماط، واستعمال القوائم والتنقّل ضمن الملفات والمجلدات. عند نشر هذا المحتوى على منصة مثل البورد الأوروبي، يُعد مرجعاً جيداً لطلاب ومطوري الويب، ويمكن إثراؤه بالأمثلة العملية والمشاريع الصغيرة.

للحصول على مزيد من الفائدة تواصل مع فريقنا الدعم بالعربية من خلال الدردشة المباشرة عبر واتساب بالضغط هنا