السبت، 18 يوليو 2020

الخطوط

الخطوط

في هذا الدرس سنتناول كيفية تنسيق الخطوط داخل صفحات الويب باستخدام لغة HTML

نستطيع إجراء العديد من التنسيقات على النص بأكثر من طريقة والتنسيق الأساسي للنص يشمل (حجم الخط font size- نوع الخط font type- لون الخط font color- حالة الخط مثل مائل - سميك - أسفله خط )
يوجود نوعين من الاوسمة داخل HTML لتنسيق الخطوط 

  1. وسم تنسيق خط الصفحه بالكامل <basefont>
  2. وسم تنسيق نص محدد داخل الصفحة <font>

أولاً: وسم <basefont> : هو وسم فردي اي لا يوجد له وسم نهايه ويستخدم لتنسيق نص الصفحة بالكامل أي يقوم بتغير نوع الخط الاساسي واللون والحجم للصفحة من بدايتها لنهايتها.ويفضل كتابته بعد وسم <body> مباشرة

ملحوظة: وسم <basefont> متوافق مع انترنت اكسبلورر, وتم ايقافه في لغة Html 5

الخاصية الاولي name : تستخدم لتغير نوع الخط المستخدم

الخاصية الثانية color : تستخدم لتغير لون نص الصفحة

الخاصية الثالثة size : تستخدم لتغير حجم الخط

مثال 1: 

<basefont name="Simple Outline Pat" color="red" size="5">

عند تطبيق هذا الوسم سيتم تغير نوع الخط المستخدم داخل الصفحة كاملة الي Simple Outline Pat وتغير لون الخط الافتراضي الي اللون الاحمر ويتم تغير حجم خط الكتابة الي الحجم 5.

ثانياً: وسم <font>: يستخدم للتحكم في الخطوط من حيث النوع واللون والحجم لنص محدد

الخاصية الاولي face: تستخدم لتحديد نوع الخط المستخدم

الخاصية الثانية color : تستخدم لتحديد لون الخط المستخدم

الخاصية الثالثة size : تستخدم لتغير حجم الخط ويوجد سبعة أحجام لأى خط والقيم تتراوح ما بين 1 الي 7 والحجم الافتراضي للخط هو 3

مثال 2:

<font face="impact" color="green" size="5">

this font is impact , color is green and size is 5

</font>

عند تطبيق هذا الوسم سيتم تغير نوع الخط المستخدم الي impact واللون الي الاخضر والحجم الي 5 للنص المحدد وهو

 "this font is impact , color is green and size is 5"

مثال 3:

<font face="Arial" color="red" size="3">

this font is Arial , color is red and size is 3

</font>

عند تطبيق هذا الوسم سيتم تغير نوع الخط المستخدم الي Arial واللون الي الاحمر والحجم الي 3 للنص المحدد وهو

 "this font is Arial , color is red and size is 3"


مثال 4: 
<font face="impact" color="red" size="5">
G
</font>
<font face="impact" color="green" size="5">
o
</font>
<font face="impact" color="pink" size="5">
o
</font>
<font face="impact" color="blue" size="5">
l
</font>
<font face="impact" color="red" size="5">
g
</font>
<font face="impact" color="gray" size="5">
e
</font>
عند تطبيق المثال السابق سيتم تطبيق كل وسم من الاوسمة علي النص المحدد داخل الوسم بنوع خط وحجم خط مشترك ولكن لون الخط هو المختلف لتظهر النتيجة كما في الصورة التالية

سيتم شرح بعض الاوسمة المستخدمة في تنسيق النصوص في درساً لاحق ان شاء الله