درس التحكم فى حجم ولون ونوع النصوص – الخطوط فى لغة HTML – الدرس السادس
السلام عليكم ورحمة الله وبركاته
فى الدرس السابق قمنا بشرح كيفية اضافة عنوان للصفحة التى ننشأها وايضا كيفية الكتابة فى داخل الصفحة
وفى هذا الدرس ان شاء الله سوف نتعلم كيف نقوم بالتحكم فى الخطوط فى لغة HTML التحكم فى النصوص فى لغة HTML كيف نجعلها كبيره ونختار نوع الخط الذى نكتب به وايضا اللون والثمك
الوسم المتحكم فى النصوص – الخطوط فى لغة HTML
Font
فائدة الوسم Font للتحكم فى النصوص – الخطوط فى لغة HTML
باستخدام وسم Font يمكنك ان تحدد نوع الخط الذى سوف تقوم بالكتابه به وايضا يمكنك ان تقوم بتحديد حجم الخطوط ولون الخطوط
كيفية استخدام وسم Font Face فى تغيير نوع الخط
طريقة كتابة الكود
1 2 | <font face ="arial">بسم الله </font> <font face ="Andalus">بسم الله </font> |
Font لتعريف المتصفح ان هذه الاعدادات للخطوط
Face لتحديد نوع الخط
arial وهو احد انواع الخطوط المشهورة جدا والموجوده فى جميع اصدارات الويندوز
فلا يمكن ان تضيف نص لا وجد الا لديك على جهازك فبهذا الشكل سوف يظهر الخط كما تريد بالنص الذى قمت بكتابته ويظهر ايضا بنفس الشكل لدى اى شخص لديه نفس النص على جهازه لكن اذا كان لا يوجد النص على جهاز اى شخص آخر وراى هذا النص فسوف يراه بالنص الافتراضى للمتصفح لديه
وهذه نتيجة الكود السابق
بسم الله
بسم الله
يمكنك تحديد عدة انواع من الخطوط التى تناسب تصميمك بالترتيب كما تريد انت حتى اذا كان لا يوجد النوع الاول الذى اخترته انت ليس موجود على جهاز من دخل على التصميم فمن الممكن ان يكون النوع الثانى موجود
وهذا مثال على كتابة الكود
1 | <font face ="Arial, Helvetica, sans-serif">بسم الله </font> |
فى هذا المثال قمنا بتحديد ثلاث انواع من الخطوط
فالنص الذى سيظهر به الخط دائما هو arial
واذا كان هذا النوع ليس موجود على الجهاز سوف يقوم المتصفح تلقائى بتحديد النوع الثانى Helvetica الذى قمت انت بتحديده ايضا وهكذا
هذه اشهر واكثر الخطوط انتشارا
Andalus
Arial
Helvetica
sans-serif
Verdana
Geneva
Times New Roman
Times
serif
Garamond
Palatino
Courier New
Courier
monospace
كيفية استخدام وسم Font Size فى تغيير حجم الخط
يمكنك باستخدام وسم Font تصغير وتكبير حجم الخطوط كما تشاء ومثال على طريقة كتابة الكود لتعديل احجام الخطوط
1 | <font size="4">بسم الله</font> |
هنا الوسم Font لبداية تحديد خصائص الخطوط وبعد ذلك كتبنا Size لتحديد حجم الخط
و رقم 4 اى ان حجم الخط اكبر من الحجم الطبيعى للمتصفح بـ 4 والحجم الطبيعى للمتصفح هو 3 اى ان الخط حجمه سيكون 7
ويمكنك اضافة القيمة من 1 الى 7 لتكبير الخط
وهذه النتيحة
بسم الله
وهذا كود لجميع الاحجام
1 2 3 4 5 6 7 | <font size="1">بسم الله</font> <font size="2">بسم الله</font> <font size="3">بسم الله</font> <font size="4">بسم الله</font> <font size="5">بسم الله</font> <font size="6">بسم الله</font> <font size="7">بسم الله</font> |
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
ويوجد اسلوب اخر لكتابة قيم تكبير النص وهو النسى وتكتب فيه النسبة بالارقام من 1 الى 6 قبلها عامة + او -
مثال
1 | <font size="+4">بسم الله</font> |
النتيجة
بسم الله
كيفية استخدام وسم Font color فى تغيير لون الخط
طريقة كتابة الكود
1 | <font color="red">بسم الله </font> |
color هنا لتحديد لون الخط
و red هو لون الخط
والنتيجة
بسم الله
ويمكن تحديد قيمة لون الخطوط بطريقتين طريقة بكتابة اسم اللون مثل red و green و blue وهى التى ضربنا عليها مثال بالاعلى
والطريقة الاخرى هى السداسية وهى بكتابة 6 ارقام او حروف مكونين من الارقام والحروف التالية 0 1 2 3 4 5 6 7 8 9 a b c d e f ونبدا قبل كتابة القيمة بـالشبكة #
وهذا مثال عليها
1 | <font color="#ff0000">بسم الله </font> |
بسم الله
والان بعد ان قمنا بشرح كيكفية تحديد نوع الخط ولونه وحجمه سوف نقوم بانشاء كود كامل به نوع الخط وحجمه ولونه
1 | <font face="Arial" size="+4" color="#0000ff"> بسم الله </font> |
هنا قمنا بتحديد نوع الخط arial
وحجمه 4
ولون الخط ازرق 0000ff
والنتيجة
بسم الله
ويمكن تغيير لون وحجم ونوع الخط لكلمتين بجوار بعضهما او اكثر
مثال
1 | <font face="Arial" size="+4" color="#0000ff"> بسم </font><font face="Andalus" size="+3" color="#ff0000"> الله </font> |
وهنا قمنا بتغيير القيم فى كلا الكلمتين بسم الله
والنتيجة
بسم الله
وبهذا نكون قد انتهينا من هذا الدرس وفى الدرس القادم ان شاء الله سوف نقوم بشرح كيفية تنسيق النصوص
كيف نجعل النص ثميك ومائل وتحته خط ونص مشطوب
