الفصل الثاني
التنسيق
الأنماط
يحدد نمط النص أو الاستايل الخاص بالنص الشكل الذي يظهر عليه النص في صفحة الويب التي تقوم بتصميمها، ويوجد في لغة HTML العديد من الخواص التي تستخدم في تحديد نمط النص، حيث يمكنك كتابة نص عريض، أو نص رفيع، أو نص مائل، أو نص تحته خط، أو نص علوي كالمستخدم في المعادلات الرياضية، أو نص سفلي، وغيرها من الخواص التي يمكن صغ النص وفقا لها. وتستخدم لهذا الغرض مجموعة من العلامات لتحديد تلك الأنماط، فعلي سبيل المثال تستخدم العلامة <b/> <b> في كتابة النص الموجود بين هاتين العلامتين بالخط العريض، كما يلي:
<b نص مکتوب الخط العریض <</b>
والمثال التالي يوضح كيفية استخدام العلامة <b/> <b> في كتابة النص بخط عريض:
- قم بتشغيل برنامج Notepad واكتب به نص ملف HTML كما في الشكل التالي:
<html dir=rtl lang=ar >
<head>
<title/> نمط النص <title>
</head>
<body>
<b> نص مکتوب بالخط العادي<br>
<b> نص مکتوب بالخط العریض </b>
</body>
</html>
- قم بحفظ المستند بامتداد html. وقم بفتح المستند في متصفح الإنترنت فتظهر العبارة “نص مكتوب بالخط العريض” تظهر بالخط العريض؛ لوجود هذه العبارة بين علامتي <b> و<b/> كما في الشكل التالي:
وهناك علامتان شبيهتان بعلامة <b> تستخدم في أداء نفس وظيفتها، وهي كتابة النص بالخط العريض، وهما العلامة </big> <big>، والعلامة <Strong> <strong/>، ويكتب بينهما النص أيضا كما في حالة العلامة <b>.
أما العلامة <Small> فتستخدم في ظهور النص في صفحة الويب بخط صغير وتستخدم هذه العلامة أيضا بنفس الطريقة التي تستخدم بها علامة <b>.
والمثال التالي يوضح كيفية استخدام العلامة <Small> في كتابة نص بخط صغير.
- قم بتشغيل برنامج Notepad واكتب به نص ملف HTML كما في الشكل التالي:
< html dir=rtl lang=ar>
<head>
<title> نمط النص </title>
</head>
<body>
نص مکتوب بالخط العادي <br>
<Small> نص مکتوب صغیر <Small>
</body>
</html>
- قم بحفظ المستند بامتداد html. وقم بفتح المستند في متصفح الإنترنت، فتكون نتيجة الكود السابق أن تظهر العبارة المكتوبة بين حدي علامة <Small> بالخط الصغير، كما بالشكل التالي:
أما العلامة <i> فتستخدم في كتابة النص بالخط المائل، وبنفس الطريقة يتم وضع النص بين حدي العلامة لظهوره في صفحة الويب بالخط المائل، كما يوضح المثال التالي:
< html dir=rtl lang=ar>
<head>
<title> نمط النص </title>
<head>
<body
</i> نص مکتوب بخط مائل <i>
</body>
</html>
وتكون نتيجة الكود السابق أن يظهر النص بخط مائل، كما يوضح الشكل التالي:
أما العلامة <u/> <u> فتستخدم في وضع خط تحت النص، والعلامة <s> <s/> فتستخدم في وضع خطفي وسط النص، وتستخدم هاتان العلامتان أيضا بوضع النص بين حديهما، كما في باقي العلامات الخاصة بنمط الخط، والمثال التالي يوضح كيفية استخدام علامة <u> وعلامة <s>:
< html dir=rtl lang=ar>
<head>
<title> نمط النص </title>
<head>
<body>
<u> وضع خط تحت النص </u>
<br>
<s> وضع خط وسط النص </s>
</body>
</html>
ملحوظة: العلامة <br> تستخدم لجعل النص التالي لها يكتب في سطر جدید.
وتكون نتيجة ما سبق أن يتم وضع خط تحت النص باستخدام العلامة <u>، ووضع خط وسط النص باستخدام العلامة <s>، كما يوضح الشكل التالي:
والجدول التالي يوضح العلامات المستخدمة في لغة HTML في تحديد تنسيق النص، ووظيفة كل منها:
| العلامة | وظيفته |
| <b> | لكتابة خط عريض |
| <i> | لكتابة خط مائل |
| <u> | لوضع خط تحت النص |
| <s> | لوضع خط وسط النص |
| <tt> | لكتابة خط بنفس التنسيق المكتوب في الكود |
| <em> | لإبراز عبارة معينة وسط النص |
| <strong> | لكتابة خط عريض |
| <code> | للتعامل مع جزء من النص على أنه كود |
| <samp> | لتمييز جملة معينه من النص |
| <cite> | لكتابة خط مائل |
