إذا كنت تستخدم معالج كلمات، فيجب أن تكون على دراية بالقدرة على جعل النص غامقًا أو مائلًا أو تحته خط؛ هذه ليست سوى ثلاثة من الخيارات العشرة المتاحة للإشارة إلى كيفية ظهور النص في 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