السلام عليكم ورحمة الله وبركاته اهلاً بكم في درس جديد نتعلم فيه كيف نخصص النصوص والخطوط في لغة HTML.
في الدرسين السابقين لم نتعامل مع الخطوط فلقد اهتممنا بالاساسيات وثم الالوان واليوم الخطوط ان شاءالله تعالى.
ونحن تركنا الخطوط على الاعدادات الافتراضية وكما تعلمون فهناك الكثير من الخطوط وقد تتسائلون ما الخطوط التي استخدامنها في الدروس السابقة؟
لقد استخدمنا خط نوعه Times New Roman وحجمه 3 (بمقیاس متصفحات الإنترنت).
اذا كما تعلمون فلكل جزء في لغة HTML وسم يتحكم فيه والوسم الخاص بالخط هو < FONT > ... < FONT/ >. وھو یقوم بالتحكم بالخطوط من حیث النوع اللون والحجم. أما الخصائص التي نستخدمھا مع ھذا الوسم والوسوم الأخرى للخطوط فھي كالتالي:
الان قد تقول اننا ثبتنا حجم الخط في الحد الاعلى عند الدرجة +4 وعلى +2 للحد الادنى فما فائدة وجود درجات اقل من الحد الادنى ودرجات اكبر من الحد الاعلى؟
ستحتاج الى هذه الدرجات في حال انك غيرت الحجم الافتراضي للخط لنقل على سبيل المثال الى 1 بدلاً من 3 ففي هذه الحالة ستحتاج الى تلك الدرجات لتمثيل الحجم الاكبر منه واذا غيرت الحجم الافتراضي الى 7 ستحتاج لتلك الدرجات لتمثيل الاحجام الاصغر منه.
بعض الأمثلة:
ـــــــــــ
طبعاً النتيجة مع كل مثال
الان سننتقل الى الوسم الاخر المتعلق بالخطوط وهو الوسم < BASEFONT >.
طبعاً ستتسائلون ما وظيفة هذا الوسم؟
وظيفته هي التحكم بكامل اعدادات الخط في كامل الصفحة من لون الخط الى حجمه الى نوعه.
طبعاً قد لاحظتم انه وسم مفرد فلا حاجة الى وسم البداية او النهاية طالما انه يتعامل مع الصفحة ككل او كامل الصفحة ان صح التعبير,طبعاً يفضل وضعه مباشرة بعد الوسم < BODY >.طبعاً سنستخدم معه نفس الخصائص التي استخدمناها مع الوسم السابق < FONT > (نستطیع استخدام الخاصیة Name معه بدلاً من Face)
وايضاً سنستخدمه بنفس الطريقة من دون اي اختلاف وسأوضح لكم بمثال بسيط:
< BASEFONT Name=" Arial " COLOR=" #FF0000 " SIZE=" 5 " >
وبدراسة ھذا المثال نستنتج أنه یقوم بتعدیل الخط الافتراضي للصفحة بحیث یصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سیطبق علیھا ھذا النمط من الخط. ما لم نقم طبعا باستخدام الوسوم < Font > ... < Font/ > لتعدیلھا والتحكم بمظھرھا كما فعلنا في الأمثلة السابقة، فھي أكثر تحدیداً وأكثر مرونة من الوسم < BASEFONT > .
طبعاً بالحديث عن الالوان فلقد ذكرت لكم في الدرس السابق بعض الخصائص التي تتعلق باللون الاساسي للنص في الصفحة وهي الخاصية TEXT التي تكتب مع الوسم < Body > والتي استخدمناھا لتحدید لون نص الصفحة.
لا یوجد تعارض بین ھذه الخاصیة وخاصیة Color في الوسم < BASEFONT > فأنت بكل بساطة تستطیع استخدام أي منھما في صفحتك. وإذا حدث واستخدمت كلاھما
فإن اللون المحدد مع الوسم < BASEFONT > ھو الذي سیطبقه المتصفح ویعتمده.
ھناك وسوم خاصة تستخدم لتمییز العناوین Headings في صفحات الإنترنت وھي:
< Hn > < Hn/ >
وحرف n ھو رقم بین 6-1 یمثل مستوى العنوان.
الان سننتقل الى التأثيرات التي يمكننا اضافتها الى الخطوط:
1-الخط الغامق والعريض الاسود
لتطبيق التأثير سنستعمل وسمين وهما :
< b >...< b/ >
ولجعل النص عريض وغامق عليك وضع النص او كتابته بين الوسمين بالضبط
وأيضاً سنستعمل وسم < STRONG > ... < STRONG/ >
وللتوضيح اكثر :
2-الخط المائل:
3-الخط المسطر(اسفله سطر):
4-الخط المرتفع:
5-الخط المنخفض:
6-الخط الكبير:
7-الخط الصغير:
8- نص يتوسطه خط:
< b>< strike >هنا النص< /strike >
وايضاً يمكنكم استخدام وسم < s/ >...< s >
الان ساقدم مثال ونتيجته وسأشرحه:
المثال:
النتيجة:
نستنتج من المثال انه يمكننا استخدام اكثر من وسم وخاصية وتنسيق في نفس الوقت ولنفس النص وذلك لجميع الوسوم ليس فقط للخطوط وايضاً نستنتج انه لا اهمية لترتيب الوسوم فالنتيجة نفسها.
وكما تلا حظون من المثال فقد كانت النتيجة نص مائل وعريض ومسطر وذلك لاننا استخدمنا الوسوم :
< /B >< i >< U >...< U/ > < I/ > < B >< b >
مثال اخر:
كما تلاحظون قد تحكمنا في اللون من خلال خاصية FONT COLOR ولكن قد تقولون انه مكتوب this color is red لا يهم المكتوب المهم هوالكود بعد خاصية FONT COLOR فهو الذي يحدد اللون كما شرحنا في الدرس السابق.
عند استخدام الوسوم المتعددة في مقطع واحد یجب مراعاة عدم التداخل بینھا.كيف ذلك؟
عليك ان تعتمد قاعدة بسيطة وهي ان الوسم الذي تبدأ به اولاً تنهيه اخيراً ولا يجب ان تكون الوسوم تبدأ وتنتهي بنفس الترتيب.
الى هنا وصلنا لنهاية الدرس وصدقوني لقد تعبت جداً في تقديم هذا الدرس لذلك ارجو ان تعجبوا بصفحتنا على الفيسبوك وان تشتركوا بقناتنا على اليوتيوب والسلام عليكم ورحمة الله وبركاته
حجم الملف : 773.052 KB
