انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 09
دورة لغة HTML

تنسيق النصوص بلغة HTMLHTML Text Formatting

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
13
الأمثلة
12
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
22,523
محتوى الدرس
في هذا الدرس 13تصفّح المواضيع

HTML Text Formatting تنسيق النصوص بلغة HTML

توضح العناصر التالية معاني أجزاء النص، ولها أشكال عرض افتراضية يمكن تغييرها باستخدام CSS:

  • ⁦<b>⁩ bold: لإنشاء خط عريض.

  • ⁦<strong>⁩ strong: لإنشاء خط هام.

  • ⁦<i>⁩ italic: لإنشاء خط مائل.

  • ⁦<em>⁩ emphasis: لإنشاء خط مؤكد.

  • ⁦<small>⁩ small: لإنشاء خط صغير.

  • ⁦<mark>⁩ mark: لإنشاء خط مظلل.

سنشرح كيفية استخدام هذه العناصر بالتفصيل لاحقًا.




  • ⁦<del>⁩ deleted: لإنشاء خط محذوف.

  • ⁦<ins>⁩ inserted: لإنشاء خط مضاف حديثًا.

  • ⁦<sub>⁩ subscript: لإنشاء نص أسفل السطر.

  • ⁦<sup>⁩ superscript: لإنشاء نص أعلى السطر.

  • ⁦<big>⁩ big (قديم): لإنشاء نص بحجم خط أكبر.

  • ⁦<u>⁩ annotation: لإنشاء خط تحت النص.

Effect of HTML Text Formatting Elements on Various Text Styles

شكل تأثير عناصر تنسيق النصوص في HTML على أنماط النصوص المختلفة مثل [bold, italic, mark] وغيرها لعرض شكلها المتنوع.

جرّب بنفسك

HTML Bold Element عنصر Bold في لغة HTML

  • يلفت عنصر <b> الانتباه إلى نص لغرض عملي دون إعطائه أهمية إضافية، ويظهر عادةً بخط عريض bold. للتنسيق البصري وحده استخدم CSS. وعنصر <b> هو اختصار للكلمة الإنجليزية [bold].

    • عنصر <b> من نوع العناصر المُتداخلة [nested elements]، له علامة فتح <b> وعلامة إغلاق ⁦</b>⁩.

    Effect of the b Element in HTML on Making Text Bold

    شكل تأثير عنصر <b> في HTML لجعل كلمة [programming] عريضة لتمييز النص.

    جرّب بنفسك

    Example of Using the b Element to Bold Text in an HTML Paragraph

    مثال يوضح كيفية استخدام عنصر <b> لجعل النص داخل فقرة HTML يظهر بخط عريض.

    HTML 
    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
   <h1> Make text bold </h1>
   <p> closetag is a platform to teach you <b>programming</b> language </p>
  </body>
</html>
    جرّب بنفسك

    HTML Strong Element عنصر Strong في لغة HTML

    • يُستخدم عنصر <strong> لإبراز أهمية النص، ويعبّر عن الأهمية أو الجدية أو الاستعجال. يظهر عادةً عريضًا مثل <b>، لكنه لا يضمن ترتيبًا أفضل في محركات البحث.

    • عنصر <strong> من نوع العناصر المُتداخلة [nested elements]، له علامة فتح <strong> وعلامة إغلاق ⁦</strong>⁩.

    Effect of the strong Element in HTML on Emphasizing Text

    شكل تأثير عنصر <strong> في HTML لإبراز كلمة [programming] لتأكيد أهمية النص.

    جرّب بنفسك

    Example of Using the strong Element in HTML to Emphasize Text

    مثال يوضح كيفية استخدام عنصر <strong> في HTML لتأكيد أهمية كلمة [programming] في صفحة ويب بسيطة.

    HTML 
    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
   <h1> Make text strong </h1>
   <p> closetag is a platform to teach you <strong> programming </strong> language </p>
  </body>
</html>
    جرّب بنفسك

    HTML Italic Element عنصر Italic في لغة HTML

    • يمثل عنصر <i> نصًا بصوت أو أسلوب مختلف، مثل مصطلح تقني أو عبارة من لغة أخرى، ويظهر عادةً بخط مائل، وهو اختصارًا لكلمة [italic] وتعني مائل.

    • عنصر <i> من نوع العناصر المُتداخلة [nested elements]، له علامة فتح <i> وعلامة إغلاق ⁦</i>⁩.

    Effect of the i Element in HTML on Italicizing Text

    شكل تأثير عنصر <i> في HTML لجعل كلمة [programming] مائلة لتحسين شكل النص.

    جرّب بنفسك

    Example of Using the i Element in HTML to Italicize Text

    مثال يوضح كيفية استخدام عنصر <i> في HTML لجعل كلمة [programming] مائلة في صفحة ويب بسيطة.

    HTML 
    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
   <h1> Make text italic </h1>
   <p> closetag is a platform to teach you <i> programming </i> language </p>
  </body>
</html>
    جرّب بنفسك

    HTML Em Element عنصر Em في لغة HTML

    • يُستخدم عنصر <em> لإضافة تأكيد في نبرة الكلام stress emphasis، ويمكن أن يغيّر موضعه المعنى المقصود. يعرض عادةً مائلًا، أما الأهمية أو الاستعجال فدلالة <strong>. ويتشابه مع العنصر <i> في طريقة العرض، وهو اختصارًا لكلمة [emphasized] وتعني مؤكَّد.

    • عنصر <em> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <em> وعلامة إغلاق ⁦</em>⁩.

    Effect of the em Element in HTML on Emphasizing Text

    شكل تأثير عنصر <em> في HTML لجعل النص مائلًا.

    جرّب بنفسك

    Example of Using the em Element in HTML to Emphasize and Italicize Text

    مثال يوضح كيفية استخدام عنصر <em> في HTML لعرض نص عادي وآخر مائل، حيث يُبرز النص المائل باستخدام هذا العنصر.

    HTML 
    <!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>
    جرّب بنفسك

    HTML Small Element عنصر Small في لغة HTML

    • يمثل عنصر <small> ملاحظات جانبية قصيرة، مثل حقوق النشر، ويظهر عادةً بحجم أصغر. لتصغير أي نص لأغراض شكلية فقط استخدم CSS font-size.

    • عنصر <small> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <small> وعلامة إغلاق ⁦</small>⁩.

    Effect of the Small Element in HTML on Text Size

    شكل تأثير عنصر <small> في HTML على تصغير حجم النص.

    جرّب بنفسك

    Using the small Element in HTML to Format Smaller Text

    مثال يوضح كيفية استخدام عنصر <small> في HTML لعرض نص عادي ونص بحجم أصغر.

    HTML 
    <!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
</head>
<body>

<p>نص عادي .</p>
<small>نص صغير </small> 

</body>
</html>
    جرّب بنفسك

    HTML Mark Element عنصر Mark في لغة HTML

    • يمثل عنصر <mark> نصًا محددًا لأهميته في سياق مرجعي، مثل كلمة مطابقة للبحث. خلفيته الافتراضية غالبًا صفراء، ويمكن تغييرها باستخدام CSS.

    • عنصر <mark> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <mark> وعلامة إغلاق ⁦</mark>⁩.

    Effect of the Mark Element in HTML on Highlighting the Word Milk

    شكل تأثير عنصر <mark> في HTML على تظليل كلمة [milk] بخلفية صفراء.

    جرّب بنفسك

    Using the Mark Element in HTML to Highlight Text

    مثال يوضح كيفية استخدام عنصر <mark> في HTML لتسليط الضوء على كلمة [milk].

    HTML 
    <!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>
    جرّب بنفسك

    HTML Del Element عنصر Del في لغة HTML

    • يُستخدم عنصر <del> في HTML لوضع علامة حذف أو شطب على النص، مما يشير إلى أن النص ملغى في صفحة الويب. عندما يقوم المتصفح بعرض هذا النوع من النص، فإن النص يظهر مع خط أفقي يمر من خلاله.

    • عنصر <del> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <del> وعلامة إغلاق ⁦</del>⁩.

    Effect of the del Element in HTML on Indicating Deleted Text

    تأثيرعنصر <del> لتمييز نص محذوف، حيث يظهر أن اللون المفضل كان أزرق وتم استبداله بالأحمر.

    جرّب بنفسك

    Using the del Tag in HTML to Indicate a Change in Color Preference

    مثال يوضح كيفية استخدام عنصر <del> لشطب كلمة [blue]، للإشارة إلى أن اللون المفضل قد تغير من الأزرق إلى الأحمر.

    HTML 
    <!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>
    جرّب بنفسك

    HTML Ins Element عنصر Ins في لغة HTML

    • يُستخدم عنصر <ins> في HTML لتحديد النص المضاف حديثًا في الفقرة، ويعرضه المتصفح بخط سفلي لإظهار أنه تم إدراجه في المحتوى مؤخرًا.

    • عنصر <ins> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <ins> وعلامة إغلاق ⁦</ins>⁩.

    Effect of the ins Element in HTML on Highlighting Added Text

    شكل تأثير عنصر <ins> في HTML على تمييز النص المضاف، حيث يظهر أن اللون المفضل أصبح [red] بإضافة خط تحته.

    جرّب بنفسك

    Using the ins Element in HTML to Indicate Edited Text

    مثال يوضح كيفية استخدام عنصر <ins> في HTML، لإظهار أن اللون المفضل قد تم تغييره من الأزرق إلى الأحمر.

    HTML 
    <!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>
    جرّب بنفسك

    HTML Sub Element عنصر Sub في لغة HTML

    • عنصر <sub> هو اختصارًا لـ Subscript.

    • يُستخدم عنصر <sub> في HTML لكتابة النصوص التي تظهر أسفل السطر الأساسي وفق الخط والتنسيق، ويظهر النص بحجم خط أصغر من المعتاد، وعادةً ما يستخدم هذا العنصر بشكل شائع في الرموز الكيميائية لتوضيح العناصر الكيميائية مثل H₂O.

    • عنصر <sub> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <sub> وعلامة إغلاق ⁦</sub>⁩.

    Effect of The sub Element in HTML on Subscript Text

    شكل تأثير عنصر <sub> في HTML على إنشاء النص السفلي، حيث يظهر النص [subscripted] بتنسيق منخفض.

    جرّب بنفسك

    Using The sub Element in HTML to Indicate Subscript Text

    مثال يوضح كيفية استخدام عنصر <sub> في HTML لإنشاء نص أصغر وأسفل من السطر الأساسي.

    HTML 
    <!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>
    جرّب بنفسك

    HTML Sup Element عنصر Sup في لغة HTML

    • يُستخدم عنصر <sup> في HTML لكتابة نصوص مرتفعة فوق السطر الأساسي وفق الخط والتنسيق، ويظهر النص بحجم خط أصغر من المعتاد. ويُستخدم هذا العنصر عادةً في الرياضيات لكتابة الأسس أو الأرقام الفوقية.

    • عنصر <sup> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <sup> وعلامة إغلاق ⁦</sup>⁩.

    Effect of The sup Element in HTML on Superscript Text

    شكل تأثير عنصر <sup> في HTML على إنشاء النص العلوي، حيث يظهر النص [superscripted] بتنسيق مرتفع.

    جرّب بنفسك

    Using The sup Element in HTML to Indicate Superscript Text

    مثال يوضح كيفية استخدام عنصر <sup> في HTML لإنشاء نص أصغر وأعلى من السطر الأساسي.

    HTML 
    <!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>
    جرّب بنفسك

    HTML Big Element عنصر Big في لغة HTML

    • يُستخدم عنصر <big> في HTML لزيادة حجم النص بالنسبة للنص المحيط به. إذا كنت تريد جعل حجم الخط أكبر من باقي النص، ضع المحتوى داخل عنصر <big>...⁦</big>⁩ ليعرضه المتصفح بحجم أكبر من الحجم الافتراضي.

    • عنصر <big> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <big> وعلامة إغلاق ⁦</big>⁩.

    عنصر ⁦<big>⁩ متقادم وغير مطابق لمعيار HTML الحالي. نحتفظ بالمثال لفهم الكود القديم؛ في كود جديد استخدم مثلًا ⁦<span style="font-size:larger">big text</span>⁩.

    Effect of the big Element in HTML on Enlarging Text

    شكل تأثير عنصر <big> في HTML على تكبير كلمة [big text] ليظهر بحجم أكبر.

    جرّب بنفسك

    Using the big Element in HTML to Enlarge Text

    مثال يوضح كيفية استخدام عنصر <big> في HTML لجعل النص أكبر من الحجم العادي.

    HTML 
    <p>Plain text</p>   
<big> big text </big>
    جرّب بنفسك

    HTML underline Element عنصر u في لغة HTML

    • يُستخدم عنصر <u> في HTML، لتعليم نص بملاحظة غير لفظية، مثل كلمة مكتوبة خطأ. يظهر عادةً مسطرًا؛ للتسطير الزخرفي استخدم CSS text-decoration، وتجنب إرباك القارئ بينه وبين الرابط، وهو اختصارًا لكلمة [underline] وتعني تسطير.

    • عنصر <u> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <u> وعلامة إغلاق ⁦</u>⁩.

    Effect of the u Element in HTML on Underlining Text

    شكل تأثير عنصر <u> في HTML على وضع خط تحت النص لإبراز كلمة [underlined text].


    جرب الكود

    Using the u Element in HTML to Underline Text

    مثال يوضح كيفية استخدام عنصر <u> في HTML لوضع خط سفلي تحت كلمة [underlined text].

    HTML 
    <!DOCTYPE html>
<html>
<body>

<p>Make sure to review the <u>underlined text</u> carefully.</p>

</body>
</html>
    جرّب بنفسك

    مشاركة

    هل كان هذا الدرس مفيدًا؟

    جارٍ تحميل الآراء…

    ابنِ لغتك البرمجية

    المصطلحات7

    راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

    0 / 7 مفهومةأول بطاقة، أول خطوة
    01 HTML Formatting تنسيقات HTML
    للمراجعة
    02 Formatting تنسيق
    للمراجعة
    03 Style نمط أو شكل
    للمراجعة
    04 Open Tag علامة الفتح
    للمراجعة
    05 CLose Tag علامة الإغلاق
    للمراجعة
    06 Italic مائل
    للمراجعة
    07 Nested متداخلة
    للمراجعة

    اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

    حروف قليلة. معنى كامل.

    الاختصارات2

    راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

    0 / 2 مفهومةأول بطاقة، أول خطوة
    01 HTML HTML
    Hypertext Markup Language
    لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
    للمراجعة
    02 Insert Insert
    Insert
    إدراج
    للمراجعة

    اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

    مساحة التحدي

    اختبر فهمك.
    ووصلها للإتقان.

    كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

    5أسئلة 2أنواع تحديات 100%هدف الإتقان
    تصحيح تلقائي. فرص بلا حدود.

    أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

    الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

    لمحة عن التحدي5 أسئلة تنتظرك
    01

    العنصر ............ يجعل النصوص بالخط العريض

    02

    ما هو العنصر الذي يجعل النص قوي وهام ؟

    03

    العنصر <i> يستخدم في جعل النص قوي وعريض ؟

    04

    العنصر <i> مشابه في التنفيذ للعنصر <em> ؟

    05

    ماهو العنصر الذي يستخدم لجعل النصوص مرتفعة عن المستوي العادي ؟