وسوم تنسيق النصوص
الوسوم التالية مسؤولة عن اضافة النصوص و تنسيقات عدة إليها ( الغامق –المائل – المسطر)
- وسم عنونة الفقرات <H1> <H2> ……. <H6> :
وظيفته: اظهار النص بأنماط عنونة مختلفة، ويستخدم لإبراز العناوين في الصفحة.
سماته: الوسم <H1> يعرض النص بحجم كبير، ويتسلسل تنازليا بالحجم وصولًا إلى وسم <H6>.
وسم البداية: <H1> ……….<H6>
وسم النهاية: <H1> ……….</H6/>
ملاحظة: وسم العنوان يبدأ بحرف H يتبعه رقم من 1 إلى 6 فقط لاغير، وإن استخدامها يفصل بين الفقرات 1ايضاً كوسم <p>.
- وسم التنسيق غامق <b>
وظيفته: يعمل على اظهار النص بتنسيق غامق
وسم البداية: <b>
وسم النهاية:<b/>
- وسم التنسيق مائل <i>
وظيفته: يعمل على اظهار النص بتنسيق مائل
وسم البداية: <i>
وسم النهاية:<i/>
- وسم التنسيق مسطر <u>
وظيفته: يعمل على اظهار النص بتنسيق تحته خط
وسم البداية:<u>
وسم النهاية:<u/>
- وسوم اخرى:
وظيفتها: تعمل على تطبيق تنسيقات مختلفة كما في الجدول التالي:
|
الوسم |
الوظيفة |
مثال |
|---|---|---|
|
<sub> |
جعل النص سفلياً، ويستخدم بكثرة بكتابة التفاعلات الكيميائية |
H <sub>2</sub> + O <sub>2</sub> = H <sub>2</sub> O |
|
<sup> |
جعل النص علويًا، ويستخدم بكثرة بكتابة المعادلات الرياضية |
س <SUP> 2</SUP> +2 س <SUP>3</SUP> = صفر |
|
<del> |
جعل النص يتوسطه خط ( مشطوب وعليه خط) |
<DEL> HELLO </DEL> |
|
<small> |
جعل النص ذو حجم صغير |
HELLO <SMALL> THERE </SMALL> |
|
<mark> |
وضع علامة (ملاحظة) على النص المهم، حيث يتغير اللون خلف النص فقط وليس السطر كاملاً كما في background-color |
<P> HELLO THERE AND <MARK> WELCOME </MARK></P> |
خصائص تنسيق النصوص
تعرفت مسبقًا على خاصية STYLE لتنسيق النص، وسنتعرف أكثر على لأانماط ( الخصائص الفرعية) التابعة لها:
|
النمط style |
الاستخدام / الوظيفة |
مثال |
|
Background-color |
لون الخلفية: تستخدم لتحديد لون الخلفية ( الصفحة، الفقرة، عنوان الفقرة، الجداول، وغيرها). فإذا تم استخدامها داخل وسم <BODY> فان لون الصفحة سيختلف، أما إذا استخدمت داخل وسم <P>، فان اللون خلف النص سيختلف عن اللون الافتراض لصفحة الويب (الابيض) القيمة التي يستخدمها BACKGROUND-COLOR قد تكون اسم اللون أو رمزه |
<p style="background-color:red"> ROBOT <p/> |
|
Color |
لون الخط (لون النص) القيمة التي يستخدمها COLOR قد تكون اسم اللون أو رمزه |
<p style="color:red"> ROBOT <p/> |
|
Font-family |
نوع الخط القيمة التي يستخدمها هي اسم الخط، مثل: arial, tahoma, courier, verdana |
<p style="font-family: tahoma"> ROBOT <p/> |
|
Font-size |
حجم الخط القيم التي يستخدمها قد تكون رقماً، أو حجم الخط (بالبكسلpx )، أو نسبة مئوية من حجم الخط المستخدم حاليًا. |
<p style="font-size:50"> ROBOT <p/> <p style="font-size:10"> ROBOT <p/> |
|
Text-align |
يستخدم لتحديد محاذاة النص القيم التي يستخدمها : right, left, center. وتختلف المحاذاة عن اتجاه النص dir |
<p style="text-align: center"> ROBOT < p/> |
الرموز:
بعض الرموز غير موجودة على لوحة المفاتح، ولتمكين المستخدم من ادخالها ضمن صفحة الويب باستخدام لغة HTML، فقد انفردت اللغة بطريقة خاصة لادراج هذه الرموز.
حيث نبدأ بإشارة & ونكتب اختصار الرمز بالأحرف وننتهي بالفاصلة المنقوطة ;
يجدر الاشارة إلى أهمية حالة الأحرف بالرموز، اذ أنك لو حاولت تغيير أحد الأحرف الصغيرة إلى كبيرة فإن الرمز لن يظهر وإنما الكلمة.