حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

شرح درس النصوص HTML

النصوص (العناصر السطرية) HTML

في الدروس السابقة، ركزنا على العناصر التي تبني الهيكل العام للصفحة (Block-level elements)، وهي العناصر التي تبدأ سطراً جديداً افتراضياً (مثل <p> و <h1>).

هذا الدرس يُركز على النوع الثاني من العناصر: **العناصر السطرية (Inline-level elements)**. هذه العناصر لا تبدأ سطراً جديداً، وتُستخدم "لتغليف" أجزاء من النص (كلمة أو جملة) لإعطائها معنى دلالياً خاصاً (Semantics) أو لتطبيق تنسيق بصري عليها. سنتناول الفروقات الجوهرية بين وسوم مثل <strong> و <b>، وبين <em> و <i>، وسنستكشف مجموعة واسعة من الوسوم السطرية الأخرى واستخداماتها الدقيقة.

المفهوم الجوهري: (Block) مقابل (Inline)

لفهم هذه الوسوم، يجب أولاً استيعاب الفرق بين نوعي العناصر في HTML:

العناصر الكُتَلية (Block-level Elements)

هي العناصر التي تُشكل "الكتل" الرئيسية في الصفحة.

  • السلوك: تبدأ دائمًا على "سطر جديد".
  • العرض: تشغل "100%" من العرض المتاح للحاوية (Container) التي تقع بداخلها، بغض النظر عن محتواها.
  • أمثلة: <h1>...<h6>, <p>, <ul>, <ol>, <li>, <div>.

تُستخدم هذه العناصر لبناء "تخطيط" (Layout) الصفحة وتقسيمها إلى أقسام رئيسية.

العناصر السطرية (Inline-level Elements)

هي العناصر التي تُستخدم "داخل" العناصر الكُتَلية.

  • السلوك: "لا تبدأ" على سطر جديد؛ تتدفق مع النص المحيط بها.
  • العرض: تشغل "فقط" مقدار العرض الذي يحتاجه محتواها الداخلي.
  • أمثلة: <strong>, <em>, <a> (الروابط), <span>, <img> (الصور).

لا يمكنك وضع عنصر كُتَلي (مثل <p>) داخل عنصر سطري (مثل <span>). القاعدة هي: **العناصر السطرية تعيش داخل العناصر الكُتَلية**.

الفارق الدلالي (Semantic) مقابل البصري (Presentational)

هذا هو المفهوم الثاني الأكثر أهمية في هذا الدرس.

  • الوسوم الدلالية (Semantic): هي وسوم تخبر المتصفح (ومحركات البحث، وقارئات الشاشة) "بمعنى" أو "الغرض" من المحتوى. (مثال: <strong> يعني "هذا النص له أهمية قوية").
  • الوسوم البصرية (Presentational): هي وسوم تصف "الشكل" فقط، دون إعطاء معنى إضافي. (مثال: <b> يعني "اجعل هذا النص عريضاً - Bold").

في تطوير الويب الحديث، نفضل "دائمًا" استخدام الوسوم "الدلالية" كلما أمكن. نحن نستخدم HTML لوصف "المعنى"، ونترك لـ CSS مهمة "التصميم والشكل".

<strong> مقابل <b>: الأهمية مقابل التغليظ

كلا الوسمين <strong> و <b> يجعلان النص "عريضاً" (Bold) افتراضياً في المتصفح. ولكن، معناهما مختلف تماماً.

الوسم <strong> (دلالي)

الوسم <strong> يُستخدم للإشارة إلى أن المحتوى الذي بداخله له "أهمية قوية" (Strong Importance)، أو "جدية" (Seriousness)، أو "استعجال" (Urgency).

عندما تقرأ قارئات الشاشة (Screen Readers) نصاً داخل <strong>، قد تقوم بتغيير نبرة الصوت (Inflection) للإشارة إلى هذه الأهمية.

**الاستخدام:** يُستخدم للتحذيرات، أو للإشارة إلى أجزاء حاسمة من النص لا يمكن تجاهلها.

الوسم <b> (بصري)

الوسم <b> (اختصار Bold) هو وسم بصري. في الماضي، كان يُستخدم فقط لتغليظ النص.

في معيار HTML5، تم إعادة تحديد الغرض منه ليُستخدم "لجذب الانتباه" للنص بصرياً دون إضافة أي أهمية دلالية.

**الاستخدام:** يُستخدم لتمييز "الكلمات المفتاحية" (Keywords) في فقرة، أو "أسماء المنتجات" في مراجعة، أو أي نص تريده أن يبرز بصرياً دون أن يعني أنه "أهم" من النص المحيط.

(القاعدة الذهبية):
اسأل نفسك: "هل أريد هذا النص أن يكون عريضاً لأنه 'مهم' أم فقط لـ 'تمييزه'؟"
- إذا كان "مهم"، استخدم <strong>.
- إذا كان "للتمييز" فقط، استخدم <b>.

مثال (1): استخدام <strong> و <b>

يوضح هذا المثال الفرق الدلالي. التحذير يتطلب <strong>، بينما الكلمة المفتاحية في الشرح تستخدم <b>.

مثال (1): strong مقابل b 

<body>

    <h3>الاستخدام الدلالي (الأهمية)</h3>
    <p><strong>تحذير:</strong> لا تقم بإطفاء الجهاز أثناء عملية التحديث.</p>

    <h3>الاستخدام البصري (التمييز)</h3>
    <p>لغة <b>HTML</b> هي لغة توصيف هيكلية، وليست لغة برمجة.</p>
    <p>في هذا المقال، سنناقش <b>القوائم غير المرتبة</b> بالتفصيل.</p>

</body>

<em> مقابل <i>: النبرة مقابل الإزاحة

هذا الزوج مشابه للزوج السابق. كلاهما يجعل النص "مائلاً" (Italic) افتراضياً في المتصفح، ولكن معناهما الدلالي مختلف.

الوسم <em> (دلالي)

الوسم <em> (اختصار Emphasis) يُستخدم للإشارة إلى "التأكيد على النبرة" (Stress Emphasis).

إنه يغير "معنى" الجملة بناءً على الكلمة التي يتم التأكيد عليها. قارئات الشاشة قد تغير نبرة صوتها عند قراءة هذا الوسم.

**الاستخدام:** فكر في كيف ستقول الجملة بصوت عالٍ. (مثال: "يجب عليك 'أنت' أن تسلم التقرير" - <em>أنت</em>).

الوسم <i> (بصري/دلالي بديل)

الوسم <i> (اختصار Italic) كان بصرياً بحتاً.

في معيار HTML5، تم إعطاؤه غرضاً دلالياً بديلاً: يُستخدم للنص "المُزاح" (Offset) عن السرد العادي، والذي يُعرض عادةً بخط مائل لأسباب أسلوبية.

**الاستخدام:**

  • المصطلحات أو الكلمات بلغة أجنبية (مثال: <i>C'est la vie</i>).
  • الأسماء العلمية (مثل: <i>Homo sapiens</i>).
  • أفكار الشخصيات في الروايات (مثال: <i>أتساءل ماذا سأفعل الآن</i>).
  • أسماء السفن أو المركبات.

(القاعدة الذهبية):
اسأل نفسك: "هل أريد تغيير 'نبرة' قراءة الجملة، أم أن هذا النص مجرد 'مصطلح' (مثل اسم علمي أو كلمة أجنبية)؟"
- إذا كان "لتغيير النبرة"، استخدم <em>.
- إذا كان "مصطلحاً"، استخدم <i>.

مثال (2): استخدام <em> و <i>

يوضح هذا المثال الفرق في الاستخدام. <em> يُستخدم للتأكيد على وجوب الفعل، بينما <i> يُستخدم للمصطلح العلمي.

مثال (2): em مقابل i 

<body>

    <h3>الاستخدام الدلالي (تغيير النبرة)</h3>
    <p>لا يجب عليك <em>أبدًا</em> لمس السلك العاري.</p>
    <p>لقد أخبرته أن يفعل ذلك <em>أمس</em>، وليس اليوم.</p>

    <h3>الاستخدام الدلالي البديل (الإزاحة)</h3>
    <p>الاسم العلمي للذئب هو <i>Canis lupus</i>.</p>
    <p>تعبير <i>E pluribus unum</i> يعني "من الكثير، واحد".</p>

</body>

الوسم <span>: الحاوية السطرية المحايدة

الآن، ماذا لو أردت تلوين كلمة واحدة باللون الأحمر، ولكن هذه الكلمة ليست "مهمة" (<strong>) وليست "مؤكدة بالنبرة" (<em>) وليست "مصطلحاً" (<i>)؟

هنا يأتي دور الوسم <span>.

الوسم <span> هو حاوية سطرية (Inline) "محايدة تماماً".

  • ليس له أي معنى دلالي.
  • ليس له أي تنسيق بصري افتراضي. (لا يضيف تغليظاً، ولا إمالة، ولا أي شيء).

**إذن ما فائدته؟**
فائدته الوحيدة هي العمل كـ "خطاف" (Hook) لـ CSS أو JavaScript. إنه يسمح لك بـ "تحديد" جزء من النص لتطبيق تنسيقات (Styles) أو وظائف (Scripts) عليه، دون إضافة أي معنى دلالي غير مرغوب فيه.

مثال (3): استخدام <span> للتنسيق المخصص

سنستخدم هنا خاصية style (وهي طريقة لكتابة CSS مباشرة في الوسم، سنتعلمها لاحقاً بالتفصيل) لإثبات كيف يعمل <span> كخطاف.

مثال (3): استخدام <span> مع CSS 

<body>

    <p>
        في متجرنا، لدينا تفاح باللون 
        <span style="color: red; font-weight: bold;">الأحمر</span>، 
        وكمثرى باللون 
        <span style="color: green;">الأخضر</span>، 
        وموز باللون 
        <span style="color: #E6B900;">الأصفر</span>.
    </p>
    
    <p>
        كلمة <span>عادية</span> داخل سبان (لن تلاحظ أي فرق).
    </p>

</body>

في المثال أعلاه، <span> هو الوسم الوحيد الذي يسمح لنا بتلوين كلمة واحدة دون التأثير على بقية الفقرة ودون إضافة معنى دلالي خاطئ.

وسوم التحرير: <ins> و <del> و <s>

هذه المجموعة من الوسوم تُستخدم دلالياً للإشارة إلى "التعديلات" التي تمت على المستند.

الوسم <del> (Deleted Text)

يُستخدم للإشارة إلى نص تم "حذفه" من المستند.

الشكل الافتراضي: يُعرض النص وبداخله خط يمر في منتصفه (Strikethrough).

**الاستخدام:** مثالي لعرض الأسعار القديمة، أو تعديلات المستندات.

الوسم <ins> (Inserted Text)

يُستخدم للإشارة إلى نص تم "إضافته" إلى المستند (وعادة ما يكون بديلاً لـ <del>).

الشكل الافتراضي: يُعرض النص وتحته خط (Underline).

الوسم <s> (Strikethrough)

يشبه <del> في الشكل (خط في المنتصف)، لكن معناه الدلالي مختلف.

الوسم <s> يُستخدم للإشارة إلى نص "لم يعد صحيحاً" أو "لم يعد ذا صلة"، ولكنه لم يُحذف (مثل عرض مهمة تم إنجازها).

مثال (4): عرض تعديلات الأسعار (ins, del)

هذا هو الاستخدام الأكثر شيوعاً لـ <ins> و <del>، وهو شائع جداً في مواقع التجارة الإلكترونية.

مثال (4): وسوم التحرير 

<body>

    <h3>عرض الأسعار</h3>
    <p>سعر المنتج: <del>100.00$</del> <ins><strong>75.00$</strong></ins> فقط!</p>
    
    <h3>قائمة المهام</h3>
    <ul>
        <li><s>إنهاء الدرس الأول</s> (مكتمل)</li>
        <li>بدء الدرس الثاني</li>
    </ul>

</body>

لاحظ في المثال كيف قمنا بتداخل <strong> داخل <ins> لجعل السعر الجديد عريضاً (Bold) ومهماً ومضافاً في نفس الوقت.

وسوم التنسيق الإضافية: <mark>, <u>, <small>

مجموعة أخرى من الوسوم السطرية الدلالية.

الوسم <mark> (Highlight)

يُستخدم هذا الوسم "لتحديد" أو "إبراز" (Highlight) نص له صلة بسياق معين (مثل قلم التحديد الأصفر).

**الشكل الافتراضي:** خلفية صفراء للنص (background-color: yellow).

**الاستخدام:** مثالي لإظهار "الكلمة المفتاحية" التي بحث عنها المستخدم في صفحة النتائج.

الوسم <u> (Underline)

هذا الوسم (اختصار Underline) كان بصرياً بحتاً وتم إهماله، ولكنه عاد في HTML5 بمعنى دلالي جديد (وإن كان نادراً).

يُستخدم الآن للإشارة إلى "تعليق توضيحي غير نصي" (Non-textual annotation).

**الاستخدام:** المثال الأكثر شيوعاً هو الإشارة إلى "خطأ إملائي" (Spelling Error) في محرر نصوص.

**تحذير شديد:** يجب "تجنب" استخدامه في 99% من الحالات، لأن المستخدمين سيربطون تلقائياً بين النص الذي تحته خط (Underlined) و "الروابط التشعبية" (Hyperlinks)، وسيصابون بالإحباط عند النقر عليه دون نتيجة. استخدم CSS إذا كنت تريد خطاً تحت النص.

الوسم <small> (Small Print)

هذا الوسم ليس فقط لتصغير حجم الخط (رغم أنه يفعل ذلك افتراضياً).

معناه الدلالي هو "الطباعة الصغيرة" أو "التعليقات الجانبية" (Side comments).

**الاستخدام:** مثالي لكتابة إشعارات حقوق النشر (Copyrights)، أو الشروط والأحكام، أو الملاحظات القانونية في أسفل الصفحة.

مثال (5): استخدام (mark, small)

يوضح هذا المثال الاستخدام الدلالي لـ <mark> و <small>. (سنتجنب <u> لكونه ممارسة سيئة).

مثال (5): mark و small 

<body>

    <h3>نتائج البحث عن "HTML"</h3>
    <p>
        تُعد <mark>HTML</mark> لغة أساسية لبناء الويب. 
        بدون <mark>HTML</mark>، لا يوجد هيكل للصفحة.
    </p>

    <hr> <!-- الوسم <hr> ينشئ فاصلاً أفقياً -->
    
    <p><small>جميع الحقوق محفوظة © 2025 لشركة الويب.</small></p>
    <p><small>تُطبق الشروط والأحكام.</small></p>

</body>

وسوم المصطلحات التقنية: <sup>, <sub>, <code>

تُستخدم هذه الوسوم لعرض النصوص التي تتطلب تنسيقاً طباعياً (Typographical) خاصاً.

الوسم <sub> (Subscript)

يُستخدم لجعل النص "منخفضاً" (Subscript) عن السطر العادي.

**الاستخدام:** الصيغ الكيميائية (مثل H2O)، أو المتغيرات الرياضية.

الوسم <sup> (Superscript)

يُستخدم لجعل النص "مرتفعاً" (Superscript) عن السطر العادي.

**الاستخدام:** الأسس الرياضية (مثل X2)، أو الحواشي السفلية (Footnotes)، أو الرموز الترتيبية (مثل 1st).

الوسم <code> (Code)

يُستخدم للإشارة إلى أن النص هو "جزء من كود برمجي" (Code Snippet).

**الشكل الافتراضي:** يقوم المتصفح بعرضه بخط "أحادي المسافة" (Monospace) (مثل خط Courier New) لتمييزه عن النص العادي.

**الاستخدام:** عند كتابة دروس تقنية (كهذا الدرس) للإشارة إلى أسماء الوسوم أو الدوال.

مثال (6): عرض المعادلات والأكواد

مثال (6): sup, sub, code 

<body>

    <h3>الصيغ الكيميائية والرياضية</h3>
    <p>الصيغة الكيميائية للماء هي H<sub>2</sub>O.</p>
    <p>معادلة فيثاغورس هي a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.</p>
    <p>هذا هو المرجع الأول<sup>[1]</sup>.</p>
    
    <h3>الإشارة إلى الأكواد</h3>
    <p>
        لكتابة فقرة نصية، استخدم الوسم <code><p></code>. 
        ولطباعة نص على الشاشة في بايثون، نستخدم الدالة <code>print()</code>.
    </p>

</body>

قواعد التداخل (Nesting) والخلاصة

جميع هذه الوسوم السطرية يمكن تداخلها مع بعضها البعض، بشرط الحفاظ على قاعدة "LIFO" (Last In, First Out) - "الأخير دخو لاً، هو الأول خروجاً".

  • تداخل صحيح: <p><strong><em>نص مهم ومؤكد</em></strong></p> (تم إغلاق <em> قبل <strong>).
  • تداخل خاطئ: <p><strong><em>نص خاطئ</strong></em></p> (تم كسر الترتيب).

(ملخص الدرس):
1. العناصر نوعان: **Block** (تبدأ سطراً جديداً) و **Inline** (تتدفق مع النص).
2. الوسوم نوعان: **Semantic** (تصف المعنى) و **Presentational** (تصف الشكل).
3. استخدم <strong> للأهمية، و <b> للتمييز البصري.
4. استخدم <em> لتغيير نبرة الصوت، و <i> للمصطلحات (كلمات أجنبية، علمية).
5. استخدم <span> كـ "خطاف" محايد لتطبيق CSS عندما لا يوجد وسم دلالي مناسب.
6. استخدم <del> و <ins> لتتبع التعديلات (مثل الأسعار).
7. استخدم <mark> لإبراز نص، و <small> للطباعة الصغيرة، و <sub>/<sup> للمعادلات.
8. جميع هذه الوسوم السطرية يجب أن توضع "داخل" عناصر كُتَلية (مثل <p> أو <li>).