التنسيق (Formatting) في HTML

Dec. 3, 2023 * تيتو 4 تك

إذا كنت تستخدم معالج كلمات، فيجب أن تكون على دراية بالقدرة على جعل النص غامقًا أو مائلًا أو تحته خط؛ هذه ليست سوى ثلاثة من الخيارات العشرة المتاحة للإشارة إلى كيفية ظهور النص في HTML و XHTML.

 

النص العريض (Bold)

يتم عرض أي شيء يظهر داخل عنصر <b> ... </b> بخط عريض كما هو موضح أدناه:

<!DOCTYPE html>
<html>
   <head>
      <title> مثال علي النص العريض </title>
 </head>  
   <body>
      <p>The following word uses a <b>bold</b></p>
  </body> 
</html>

سيؤدي هذا إلى النتيجة التالية:

The following word uses a bold 

 

النص المائل (Italic)

يتم عرض أي شيء يظهر داخل عنصر <i> ... </i> بخط مائل كما هو موضح أدناه:

<body>
    <p>The following word uses an <i>italicized</i></p> 
</body>

سيؤدي هذا إلى النتيجة التالية:

The following word uses an italicized 

 

 

النص المسطر (Underlined)

يتم عرض أي شيء يظهر داخل عنصر <u> ... </u> مع تسطير كما هو موضح أدناه :

<body>
    <p>The following word uses an <u>underlined</u></p> 
</body>

سيؤدي هذا إلى النتيجة التالية:

The following word uses an underlined 

 

النص الذي يتوسطه خط (strike)

يتم عرض أي شيء يظهر داخل عنصر <strike> ... </strike> يتوسطه خط ، وهو عبارة عن خط رفيع عبر النص كما هو موضح أدناه :

<body>
     <p>The following word uses a <strike>strikethrough</strike></p>
</body> 

سيؤدي هذا إلى النتيجة التالية :

The following word uses a strikethrough


الخط الأحادي المسافة (Monospaced)

محتوى عنصر <tt> ... </tt> مكتوب بخط أحادي المسافة. تُعرف معظم الخطوط بالخطوط متغيرة العرض؛ لأن الحروف المختلفة لها عروض مختلفة (على سبيل المثال، الحرف "m" أعرض من الحرف "i"). ومع ذلك، في الخط أحادي المسافة، يكون لكل حرف العرض نفسه.

<body>
    <p>The following word uses a <tt>monospaced</tt></p> 
</body>

سيؤدي هذا إلى النتيجة التالية:

The following word uses a monospaced 

 

النص المرتفع (Superscript)

محتوى عنصر <sup> ... </sup> مكتوب بخط مرتفع ؛ حجم الخط المستخدم هو نفس حجم الأحرف المحيطة به ولكن يتم عرضه بنصف ارتفاع الحرف فوق الأحرف الأخرى.

<body>
     <p>The following word uses a <sub>subscript</sub></p>
</body>

سيؤدي هذا إلى النتيجة التالية:

The following word uses a superscript 

 

النص المدرج (Inserted)

يتم عرض أي شيء يظهر داخل عنصر <ins> ... </ins> كنص مدرج.

   <body>  
      <p>I want to drink <ins>fanta</ins></p>    
   </body>  

سيؤدي هذا إلى النتيجة التالية:

I want to drink fanta


النص المحذوف (Deleted)

يتم عرض أي شيء يظهر داخل عنصر <del> ... </del> كنص محذوف.

<body> 
     <p>I want to drink <del>cola</del></p> 
</body> 

سيؤدي هذا إلى النتيجة التالية:

I want to drink cola 


 

النص الأكبر (Larger)

يتم عرض محتوى عنصر <big> ... </big> بحجم خط واحد أكبر من باقي النص المحيط به كما هو موضح أدناه :

<body>
     <p>The following word uses a <big>big</big> font </p>
</body>

سيؤدي هذا إلى النتيجة التالية:

The following word uses a big font
 

 

النص الأصغر (Smaller)

يتم عرض محتوى العنصر <small> ... </small> بحجم خط واحد أصغر من باقي النص المحيط به كما هو موضح أدناه :

<body>
     <p>The following word uses a <small>small</small> font</p> 
</body>
 

سيؤدي هذا إلى النتيجة التالية:

The following word uses a small font


تجميع المحتوى

يتيح لك العنصران <div> و <span> تجميع عدة عناصر معًا لإنشاء أقسام أو أقسام فرعية من الصفحة.

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

<body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">الرئيسية</a>  
         <a href = "/about/contact_us.htm">تواصل معنا</a>  
         <a href = "/about/index.htm">عن الموقع</a>
      </div>

      <div id = "content" align = "left" >
         <h1> عنوان المقال </h1>
         <p> فقرات المقال المختلفة </p>
      </div>
</body>

سيؤدي هذا إلى النتيجة التالية :

الرئيسية | تواصل معنا | عن الموقع

عنوان المقال

فقرات المقال المختلفة

من ناحية أخرى ، يمكن استخدام العنصر <span> لتجميع العناصر المضمنة فقط. لذلك ، إذا كان لديك جزء من جملة أو فقرة تريد تجميعها معًا ، فيمكنك استخدام عنصر <span> كما يلي.

<body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>

سيؤدي هذا إلى النتيجة التالية :

This is the example of span tag and the div tag alongwith CSS