أهلاً وسهلاً بك إلى الدرس الثالث من دروس HTML. لا زلنا نناقش معاً أساسيات تنسيق
صفحات الإنترنت والتحكم بخصائصها. وسوف نتابع ذلك في هذا الدرس من خلال التعرف
على الوسوم الخاصة بالخطوط.
سوف تلاحظ في هذا الدرس والدروس اللاحقة أن هناك
أكثر من طريقة لأداء نفس العمل ، أو إعطاء نفس الخصائص
لصفحات الإنترنت. وبالمقابل
قد يبدو لك أن بعض الوسوم والخصائص متشابهة في تأثيرها، لكن بالقليل من التدقيق
والتجربة ستكتشف أن لكل وسم خصوصيته.
ولنبدأ
راجع صفحتنا البسيطة التي عملنا فيها في الدرسين السابقين. إننا لم
نقم بالتعامل مع الخطوط فيها ولا بأي شكل من الأشكال. أي أننا تركناها على
إعداداتها الافتراضية.
وبالمناسبة فإن هذه الإعدادات هي خط عادي، نوعه Times New Roman وحجمه 3 (بمقياس متصفحات
الإنترنت).
الوسم الأول الخاص بالخطوط هو <FONT> ... </FONT>
وهو
يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع
هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي:
| Face |
تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد
نقوم بتحديد أكثر من نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد
أولاً على جهاز الشخص الذي يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا
<FONT
FACE="Traditional Arabic, Arabic Transparent, Simplified
Arabic">
... Text ...
</FONT>
طبعاً لا
تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً.
|
| Color |
أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ
تحديد الألوان التي تحدثنا في الدرس السابق
<FONT COLOR="#FF0000">
... Text
...
</FONT>
|
| Size |
ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط
هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
ونقوم بتحديد
الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين
1-7. أي أننا نختار الحجم الذي نريده مباشرة.
<FONT SIZE="4">
... Text
...
</FONT>
وإليك
نماذج بأحجام الخطوط
خط بحجم 1
خط بحجم 2
خط بحجم 3
(الخط الافتراضي)
خط بحجم
4
خط بحجم 5
خط بحجم
6
خط بحجم 7
أما
الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة
+ أو بإشارة -.
<FONT SIZE="+4">
... Text
...
</FONT>
وفي هذه
الطريقة فإن الأرقام 1 الى 6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك
نسبةً إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن
الحجم الافتراضي وهو 3، أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني
تصغير الخط درجة واحدة أي يصبح بالحجم 2.
ولتوضيح هذا الأسلوب،
إليك هذه النماذج:
خط بحجم -3
خط بحجم -2
خط بحجم -1
خط بحجم +0 (أو -0 وهو الافتراضي)
خط بحجم +1
خط بحجم +2
خط بحجم +3
خط بحجم +4
خط بحجم +5
لاحظ أنه حتى في الأسلوب النسبي لا
نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام
أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5.
|
والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط
على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من
وجود الدرجات الأخرى الأقل من -2 والأكبر من +4؟
حسنا وأنا أجيبك بسؤال آخر:
ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى 1 بدلاً من 3؟ (وسوف
نقوم بذلك فعلاً بعد قليل)، ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6
لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم إفتراضي ألا نحتاج إلى
الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه
الدرجات لكي نغطي جميع الإحتمالات الواردة.
وهذه بعض الأمثلة لتوضح لك كيفية استخدام هذا الوسم، وسوف أرفق
نتيجة كل مثال بعده مباشرة.
<FONT FACE="arial" SIZE="6" COLOR="#FF0000">
و حجمة 6, ولونة احمر Arial هذا الخط نوعة
</FONT>
و حجمة 6, ولونة احمر Arial هذا الخط نوعة
<FONT FACE="arial" SIZE="+3" COLOR="#FF0000">
و حجمة +3, ولونة احمر Arial هذا الخط نوعة
</FONT>
و حجمة +3, ولونة احمر Arial هذا الخط نوعة
<FONT FACE="Times New Roman" SIZE="5" COLOR="#0000FF">
حجمة 5 و لونة ازرق ,Times New Roman هذا الخط هو
</FONT>
حجمة 5 و لونة ازرق ,Times New Roman هذا الخط هو
<FONT FACE="Impact" SIZE="6" COLOR="#008080">ا</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF0000">ل</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#0000FF">و</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#800000">ا</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">ن</FONT>
ا
ل
و
ا
ن
هناك وسوم خاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي:
<Hn> ...
</Hn>
وقيمة n تتراوح بين 1-6 حيث كل رقم يمثل مستوى للعنوان.
<H1> عنوان في المستوى 1
</H1>
<H2> عنوان في المستوى 2 </H2>
<H3> عنوان في المستوى 3
</H3>
<H4> عنوان في المستوى 4 </H4>
<H5> عنوان في المستوى 5
</H5>
<H6> عنوان في المستوى 6 </H6>
عنوان في المستوى 1
عنوان في المستوى 2
عنوان في المستوى 3
عنوان في المستوى 4
عنوان في المستوى 5
عنوان في المستوى 6
ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها
إلى النصوص. وفيما يلي الوسوم الخاصة بها متبوعة بمثال ونتيجته:
* الخط الغامق (الأسود العريض)، ونستخدم له الوسوم
التالية:
<B> ...
</B>
<STRONG> ... </STRONG>
| <B> Bold Text </B> |
This is Bold Text |
| <STRONG> Strong Text </STRONG> |
This is Strong Text
|
* الخط المائل
<I> ...
</I>
<EM> ... </EM>
| <I> Italic Text </I> |
This is Italic Text |
| <EM> Emphasized Text </EM> |
This is Emphasized Text |
* الخط المسطر
<U> ...
</U>
| <U> Undelined Text </U> |
This is Undelined Text |
لاحظ هذه الشيفرة التي تجمع التنسيقات الثلاثة اعلاه معاً:
<B><I><U>هذا خط غامق ، مائل ، ومسطر</U> </I> </B>
هذا خط غامق ، مائل ، ومسطر