1. الرئيسية |
  2. المدونة |
  3. تصميم وبرمجة المواقع |
  4. التنسيق (Formatting) في HTML

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

Nov. 4, 2021 | تيتو 4 تك

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

 

 

enlightened  النص العريض (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

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي النص المائل </title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i></p>
   </body>
	
</html>

 

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

 

The following word uses an italicized

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي النص المسطر </title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u></p>
   </body>
	
</html>

 

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

 

The following word uses an underlined

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي النص الذي يتوسطه خط </title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike></p>
   </body>
	
</html>

 

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

 

The following word uses a strikethrough

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي الخط الأحادي المسافة </title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt></p>
   </body>
	
</html>

 

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

 

The following word uses a monospaced

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي النص المرتفع </title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub></p>
   </body>
	
</html>

 

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

 

The following word uses a superscript

 

 

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

 

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

<!DOCTYPE html>
<html>
   <head>  
      <title> مثال علي النص المدرج </title>    
   </head>  
    
   <body>  
      <p>I want to drink <del>cola</del> <ins>fanta</ins></p>    
   </body>  
    
</html>

 

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

 

I want to drink cola fanta

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>  
      <title> مثال علي النص المحذوف </title>    
   </head>  
	
   <body>  
      <p>I want to drink <del>cola</del> <ins>fanta</ins></p>    
   </body>  
	
</html>

 

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

 

I want to drink cola fanta

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي النص الكبير </title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> font </p>
   </body>
	
</html>

 

The following word uses a big font

 

 

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

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

</html>

 

   The following word uses a small font

 

 

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

 

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

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> Div مثال علي علامة </title>
   </head>
	
   <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 = "right" >
         <h5> عنوان المقال </h5>
         <p> فقرات المقال المختلفة </p>
      </div>
   </body>
	
</html>

 

 

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

عنوان المقال

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

 

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

 

<!DOCTYPE html>
<html>

   <head>
      <title> Span مثال علي علامة </title>
   </head>
	
   <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>
	
</html>

 

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

 

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

 

 

 

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