تعلم html خطوة بخطوة rushdy.net

الدرس الثالث - الخطوط

الأساسيات - الألوان - الخطوط - الفقرات والقوائم - الصور والرسومات - اللينكات - الجداول1 - الجداول2 - الإطارات1 - الإطارات2 - الإطارات3 - الإطارات4 - تاجات متنوعة - الخرائط الصورية - النماذج1 - النماذج2 - التاجات الخاصة - الويب واللغة العربية - الميتا تاج - المراجع

سوف تلاحظ في هذا الدرس والدروس اللاحقة أن هناك أكثر من طريقة لأداء نفس العمل، أو إعطاء نفس الخصائص لصفحات الإنترنت. وبالمقابل قد يبدو لك أن بعض التاجات والخصائص متشابهة في تأثيرها، لكن بالقليل من التدقيق والتجربة ستكتشف أن لكل تاج خصوصيته.

ولنبدأ

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

Times New Roman

وحجمه 3

بمقياس متصفحات الإنترنت.

التاج الأول الخاص بالخطوط هو ... 
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا التاج والتاجات الأخرى للخطوط فهي كالتالي:

Face

تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد نقوم بتحديد أكثر من نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص الذي يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا

‎‎
... Text ...
<‎/FONT>

طبعاً لا تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً.

Color

أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان التي تحدثنا في الدرس السابق

‎‎
... Text ...
<‎/FONT>

Size

ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.

‎‎
... Text ...
<‎/FONT>

وإليك نماذج بأحجام الخطوط

خط بحجم 1
خط بحجم 2
خط بحجم 3 (الخط الافتراضي)
خط بحجم 4
خط بحجم 5
خط بحجم 6
خط بحجم 7

أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -.

‎‎
... 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 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الإحتمالات الواردة.
أرجو أن يكون هذا الجواب قد أقنعك :-)

وهذه بعض الأمثلة لتوضح لك كيفية استخدام هذا التاج، وسوف أرفق نتيجة كل مثال بعده مباشرة.

‎‎‎
This font is Arial, Size is 6, Color is Red
<‎/FONT>

This font is Arial, Size is 6, Color is Red

‎‎
This font is Arial, Size is +3, Color is Red
<‎/FONT>

This font is Arial, Size is +3, Color is Red

‎‎‎
This font is Times New Roman, Size is 5, Color is Blue
<‎/FONT>

This font is Times New Roman, Size is 5, Color is Blue

‎‎
This font is Courier, Size is 2, Color is Maroon
<‎/FONT>

This font is Courier, Size is 2, Color is Maroon

This <‎/FONT>
 is <‎/FONT>
 multi <‎/FONT>
 colors, <‎/FONT>
 multi <‎/FONT>
 faces, <‎/FONT>
 and <‎/FONT>
 multi <‎/FONT>
 sizes <‎/FONT>
 text <‎/FONT>

This is multi colors, multi faces, and multi sizes text

C <‎/FONT>
O<‎/FONT>
L<‎/FONT>
O<‎/FONT>
R<‎/FONT>
S<‎/FONT>

C O L O R S

ننتقل الآن إلى التاج الثاني من التاجات الخاصة بالخطوط وهو <BASEFONT>.
وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف نوع الخط الأساسي الذي سيستخدم في الصفحة من بدايتها إلى نهايتها ويحدد لونه وحجمه.
هل لاحظت انه تاج مفرد ولا يحتوي على تاج للنهاية؟ بالطبع ما الحاجة إلى تاج النهاية طالما أنه يتعامل مع الصفحة ككل ومع الإعدادات الأساسية لها، وليس مع كلمة أو سطر أو فقرة بذاتها. لذلك فإن هذا التاج يكتب عادة في أول الملف، ويفضل مباشرة بعد تاج <BODY>. أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة الذكر مع ، (نستطيع استخدام الخاصية Name معه بدلاً من Face). وبنفس الطريقة وبدون أي اختلافات. وإليك هذه الشيفرة كمثال:

‎<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">‎

وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سيطبق عليها هذا النمط من الخط. ما لم نقم طبعا باستخدام التاجات ... </‎Font> لتعديلها والتحكم بمظهرها كما فعلنا في الأمثلة السابقة، فهي أكثر تحديداً وأكثر مرونة من التاج <BASEFONT>

وبمناسبة الحديث عن الألوان وتغيير اللون الأساسي لنص الصفحة. ألا تذكر أننا في الدرس السابق تكلمنا عن الخاصية Text التي تكتب مع التاج <Body> والتي استخدمناها لتحديد لون نص الصفحة... أنا لا زلت أذكر ذلك.
لا يوجد تعارض بين هذه الخاصية وخاصية Color في التاج <BASEFONT> فأنت بكل بساطة تستطيع استخدام أي منهما في صفحتك. وإذا حدث واستخدمت كلاهما فإن اللون المحدد مع التاج <BASEFONT> هو الذي سيطبقه المتصفح ويعتمده.
وهنا أريد أن أذكرك بما قلته في بداية هذا الدرس:

يوجد دائماً أكثر من طريقة لأداء نفس العمل

هناك تاجات خاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي:

<Hn> ... <‎/Hn>
وحرف n هو رقم بين 1-6 يمثل مستوى العنوان.

<H1> Heading 1 <‎/H1>
<H2> Heading 2 <‎/H2>
<H3> Heading 3 <‎/H3>
<H4> Heading 4 <‎/H4>
<H5> Heading 5 <‎/H5>
<H6> Heading 6 <‎/H6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي التاجات الخاصة بها متبوعة بمثال ونتيجته:

* الخط الغامق (الأسود العريض)، ونستخدم له التاجات التالية:

 ... <‎/B>
 ... <‎/STRONG>

 Bold Text <‎/B> This is Bold Text

 Strong Text <‎/STRONG> This is Strong Text

* الخط المائل

 ... <‎/I>
 ... <‎/EM>

 Italic Text <‎/I> This is Italic Text

 Emphasized Text <‎/EM> This is Emphasized Text

* الخط المسطر

 ... <‎/U>

 Undelined Text <‎/U> This is Undelined Text

* الخط المرتفع

 ... <‎/SUP>

 Superscript Text <‎/SUP> This is ^{Superscript Text}

* الخط المنخفض

 ... <‎/SUB>

 Subscript Text <‎/SUB> This is _{Subscript Text}

* خط كبير

<BIG> ... <‎/BIG>

<BIG> Big Text </BIG> This is Big Text

* خط صغير

 ... <‎/SMALL>

 Small Text <‎/SMALL> This is Small Text

* نص يعترضه خط

<STRIKE> ... <‎/STRIKE>
<S> ... <‎/S>

<STRIKE> Striked Text <‎/SRTIKE> This is ~~Striked Text~~

<S> Striked Text <‎/S> This is ~~Striked Text~~ too

نص الآلة الطابعة TeleType

<TT> ... <‎/TT>

<TT> TeleType Text <‎/TT> This is TeleType Text

وهذا النص يعرف أيضاً بالنص موحَد المسافات Monospaced Text. ولتوضيح هذا المفهوم إليك المثال التالي:
إذا أخذنا الحرفين m,i وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف m هي أضعاف المساحة التي شغلها الحرف i

iiiiiiiiii
mmmmmmmmmm

أما عند استخدام التاج <TT> ... <‎/TT> فإن المساحة التي يشغلها كلا الحرفين تصبح موحدة

iiiiiiiiii
mmmmmmmmmm

وهذه أمثلة تجمع بين عدة تنسيقات معاً:

This is a Bold, Italic and Underlined Text
<‎/U> <‎/I> <‎/B>

This is a Bold, Italic and Underlined Text

This text is red, size +3, Italic, and Underlined
<‎/I> <‎/U> <‎/FONT>

This text is red, size +3, Italic, and Underlined

وقد أردت من هذه الأمثلة توضيح مسائل معينة أولها: أن بإمكاننا استخدام عدة تاجات وتنسيقات معاً في نفس الوقت ولنفس المقطع من النص. (وذلك لجميع التاجات وليس فقط لتاجات الخطوط). وكما ذكرت سابقاً، لا أهمية لترتيب هذه التاجات ولا أيها ورد أولاً... لكن
عند استخدام التاجات المتعددة في مقطع واحد يجب مراعاة عدم التداخل بينها!... كيف؟

كتابة التاجات السابقة بالطرق التالية هو خطأ:

This is a Bold, Italic and Underlined Text
<‎/B> <‎/I> <‎/U>


This is a Bold, Italic and Underlined Text
<‎/B> <‎/U> <‎/I>

والطريقة الصحيحة لعدم تداخل التاجات هي :

This is a Bold, Italic and Underlined Text
<‎/U>
<‎/I>
<‎/B>

أو

This is a Bold, Italic and Underlined Text
<‎/U><‎/I><‎/B>

أعرف أنك لم تصدقني وأنك قمت بتجربة هذه التاجات وربما حصلت على نتيجة صحيحة. حسناً العبرة ليست في عبارة واحدة مكونة من تاجين أو ثلاثة تكتبها في ملف صغير بل في صفحة إنترنت كاملة قد تتألف من مئات أو حتى آلاف التاجات مكتوبة في ملف خالٍ من الأخطاء المنطقية والتداخلات التي قد تسبب الإرباك للمتصفحات، وتؤدي إلى عدم عرض هذه الصفحة بالشكل المناسب والمطلوب.
لذلك فأهمية أن تتجنب وجود التاجات المتداخلة في صفحتك هو بنفس الأهمية التي يجب أن توليها لكتابة هذه التاجات بالصورة الصحيحة إملائياً. وإلا فالمتصفحات لا ترحم. وكثيرة هي المرات التي حصل فيها المصممون على صفحات منهارة بسبب نسيان حرف واحد أو إشارة مثل < أو > أو "
بإختصار شديد... وكقاعدة أساسية، الصفحة المصممة جيداً هي الصفحة ذات التاجات الصحيحة وغير المتداخلة.

وصلنا الآن إلى نهاية هذا الدرس. أتمنى أن تكون قد قضيت وقتاً ممتعاً معه. وأن لا يكون قد أحدث تداخلاً في تاجات أفكارك.

أخي الكريم أرجوك لا تتردد في التواصل معي إذا كان هناك أي أسئلة
سواء عن طريق البريد الإلكتروني
mohamed@rushdy.net

أو بزيارة صفحتي علي الفيس بوك .. ولا تنساني من الليك
rushdy.net on facebook

Content on this page requires a newer version of Adobe Flash Player.

Content on this page requires a newer version of Adobe Flash Player.

Content on this page requires a newer version of Adobe Flash Player.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Content on this page requires a newer version of Adobe Flash Player.