صمم موقعك الإلكتروني سريعاً تنسيق الخطوط -الدرس الثالث

الخطوط

في الدرس السابق تحدثنا عن خصائص body Tag وكيف يمكنه من التعديل على لون الخط لكن مذا لو أردنا تصمم اكثر من لون للخط مثلا شعار Google بألوانة هل يمكننا ان نصممه في لغة HTML ؟ 
الجواب نعم بإستخدم وسم جديد هو وسم <font>  وهو وسم متخصص بتنسيق الخطوط

وسم الخط Font Tag:

هذا الوسم يدرج داخل body Tag ووله وسم بداية <font>  وسم نهاية <font/>  كما أن له عدة  خصائص أهمها:

 1- Color: وهي لتغير اللون ويمكننا إستخدام الألوان الأساسية (red, blue, green, yellow, black, white)  وكذلك يمكننا إستخدام الأرقام بنظام الهيكساديسميل Hexadecimal.

 2- ٍSize: وهي خاصية تحدد حجم الخط القيم التي تأخذها هذه الخاصية هي من 1الى 7 كلما زاد الرقم كلما زاد حجم الخط وهناك تفصيلات اخرى للقيم لكن الأرقام من 1 الى 7 هي الأساسية.

 3- Face: وهو نوع الخط والأنواع كثيرة يمكنك الرجوع الى برنامج محرر النصوص MS-Word وأهمها :

(Times New Roman, Comic Sans MS, Verdana,  WildWest)

لاحظ معي الشيفرة التالية:

إعطاء سطر جديد P Tag:

ستلاحظ هنا وسم جديد هو <p>  هذا الوسم يمكنك من النزول سطر جديد وهو اختصار لكلمة paragraph  :

وهذا الوسم له بداية وله نهاية ويمكن استخدام البداية فقط كما في الشيفرة السابقة

إعطاء سطر جديد br Tag:

اختصار لكلمة break وهذا ايضاً لإضافة سطر لكن لاحظ الفرق بين المسافات التي يعطيها كل من الأوسمة  <p> و <br>:

لاحظ أن وسم <p> يعطي سطر قبل وسطر بعد وهذه خصائص عامة لأنشاء الفقرات في النصوص لكن وسم <br> يعطي سطر بعد فقط فتكون المسافة صغيرة حتى عند اضافة <br> مرة أخرى أيضا كانت مسافة الأسطر صغيرة لاحظ:

أوسمة Font Style :

كما تعودنا في محرر النصوص فإن بأمكاننا ان نشئ نصوص بالخط الغامق bold والمائل Italic وادراج خط تحت النص  Underline وخط على النص نفسه Strikethrough وجميعها أوسمة مدرجة في شيفرة HTML وهي:

1- <b> : للخط الغامق.

2- <i>  : للخط المائل.

3- <u> : ادراج خط تحت النص.

4- <s> : لإدراج خط فوق النص.

وجميعها أوسمة لها بداية ونهاية لتحدد ما هي النصوص التي تتبع لها في التنسيق لاحظ الشيفرة التالية :

لاحظ أن جميعها أخذت لون الخاص بوسم جسم الصفحة لأنه اللون العام للصفحة إذا لم يتم تحديد لون خاص بإستخدام الوسم <font> واذا أردنا تغير أي من هذه الألوان يمكننا إضافة الوسم عند بداية النص الذي نريد تغير لونه و وضع وسم النهاية <font/> عند نهاية النص الذي نريد تغير لونه لاحظ التعديل الذي اجريناه على الشيفرة:

وسم العنوان header : 

هو وسم خاص لإدراج عناوين للفقرات داخل body Tag ويقوم بتنسيق حجم ونوع الخط للعنوان الفقرة بشكل تلقائي وله وسم بداية <h1> ونهاية <h1/> وله خاصية align التي تحدد محاذة النص وتاخذ القيم (left,center, right)

وهذا الوسم يندرج تحت عدة أنواع لكل منها حجم اكبرها <h1> وأصغرها <h6> والمثال التالي سيوضح ذلك:

كما ويمكننا أن نقوم بتغير اللون من خلال وضعها داخل حدود وسم البداية والنهاية لـ <font> .

الأن هل يمكنك من تصميم شعار Google بجميع ألوانة؟

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

الى لقاء قريب بإذن الله