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



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