الدرس الثالث

التنسيق الداخلى للصفحات

إعداد / ربيع أبوبكر عبد الباقى        

*إلفاتة : جمعت  بعض أجزاء الدرس من موقع المصمم وموقع اتش بى بالعربية لذا لزم التنويه

ما هى الخصائص التي يمكن إضافتها إلى الوسم <BODY> ؟

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

** إضافة لون خليفة إلى الصفحة نضيف الخاصية  bgcolor داخل الوسم كالتالى:

<BODY BGCOLOR="FFFFFF">

<‎/BODY>

لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهذه الخاصية  هي التى تقوم بتحديد لون الخلفية للصفحة. أماالرموز FFFFFF فهي القيمة التي تمثل اللون الذى اخترناه للصفحة وهو هنا اللون الأبيض وبدون كتابة هذه الجملة فإن المتصفح سوف يأخذها تلقائياً هذه القيمة  FFFFFFأما إذا أردت خلفية ذات لون آخر فعليك بتغيير هذه الرموز كما يمكنك الاستعاضة عن هذه الرموز بكتابة اسم اللون باللغة الانجليزية مكان هذه الرموز فلو أردت خلفية ذات لون أحمر  اكتب كلمةredمكان الموز بين إشارتي " " وإذا أردت خلفية ذات لون أزرق فاتح اكتب الرمز 6699CC للون الأزرق الفاتح أو بالطريقة التالية " lightblue" وإذا أردت لون خلفية أخضر اكتب Green وإذا أردت لون الخلفية أصفر اكتب Yellow وإذا  أردت خلفية اللون الأسود اكتب الرمز 000000أو اكتب اللفظ " Black" .

** مثال تطبيقى:

افتح المفكرة ثم اكتب بها الآتى:

<HTML>

<TITEL> صفحة ربيع

</TITEL>

<HEAD>

</HEAD>

<BODY BGCOLOR=”#green”>

</BODY>

</HTML>

احفظ الملف بامتدادHtm

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

تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:-

هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبرعن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.

* إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة

فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.

وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط  .

لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداسي عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداسي عشري.

إذن فالرقم السداسي عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.

وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداسي عشري: 6699CC أما اللون الأسود فرقمه هو 000000.

وإليك بعض الألوان ورموزها المكافئة بالنظام السداسي عشري.

 

FFFF00          ABCDE

336699        FEDCBA

112233        773466

666666        FF1122

663333        0033FF

00FF00        AABBAA

FF6600        800800

993366        008008

123456        020769

654321        111111

**لاحظ:

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

* بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.

* الالوان الاساسية والشائعة الاستخدام يمكن كتابتها باللفظ مباشرة بدلاً من الأرقام السداسي عشرية.

 بعض هذه الألوان ومسمياتها:

White – Black – Green – Red – Purple- Marron – Blue – Navy- Lime- Teal – Silver – Gray- Aqua- Olive- Yellow- Fuchsia

** خاصية إضافة صورة كخلفية :

لاضافة صورة كخلفية اضف الخاصية BACKGROUNDالى الوسم كالتالى:

<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">

<‎/BODY>

تقوم الخاصية BACKGROUND بتحديد صورة كخلفية للصفحةمع ملاحظه  أن المتصفح يقوم بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشةبديلا عن  اللون الأبيض الذي حددناه كلون الخلفية من خلال الخاصية BGCOLOR

وهنا ننوه إلى ضرورة اختيار لون للخلفية  أيضا حيث فى حالة عدم ظهور الصورة يظهر اللون كبديل عنهاوالحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده احتياطا خاصة وأن بعض المتصفحات القديمة هى  متصفحات نصية Text-BasedBrowsers لا تعرض الصور. كماأن بعض المستخدمين يقومون بإلغاء خيار عرض الصور تلقائياً من متصفحاتهم. وبالتالى سوف لاتظهر الصورة وانما تظهر لون الخلفية الذى تم اختياره.

** خصائص الوصلات التشعيبية:

هى خصائص تضاف للوسم <BODY>: ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية (Links) التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرقو هو اللون الافتراضى، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي وهو اللون الافتراضى. لكن هل يمكنك تغيير هذه الالوان الافتراضية الى الوان اخرى؟

الجواب نعم تابع معنا

** الخصائص التى تتحكم في ألوان النصوص:

** تحديد لون النص الاساسى للصفحة: اكتب هذا الوسم

<TEXT="#rrggbb">

** لتحديد لون الوصلات التشعبية: اكتب الوسم

<LINK="#rrggbb">

 

**لتحديد لون الوصلات التشعبية التي تمت زيارتها visited links

<VLINK="#rrggbb”>

**لتحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links

<ALINK="#rrggbb">

 

مثال تطبيقى :

سنكتب الوسوم وخصائصها مثل اللون  والخلفية

<BODY BACKGROUND="backimag.jpg”

BGCOLOR="#yellow"

TEXT="#000066"

LINK="#00ff00"

VLINK="#ff0000"

ALINK="#999999">

لاحظ أننا قد حددنا الصورة backimag.jpg كخلفية للصفحة؟ واخترنا اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي في لحظة النقر عليها بالفأرة.

أساسيات تنسيق صفحات الإنترنت والتحكم بخصائصها

الوسوم الخاصة بالخطوط

** وسم الخطوط :

<Font>    </FONT>

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

Face **

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

مثال:

<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic”>

بسم الله الرحمن الرحيم

<‎/FONT>

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

** color

أما هذه الخاصية فتحدد لون الخط .

<FONT COLOR="#FF0000”>

بسم الله الرحمن الرحيم

<‎/FONT>

** Size

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

<FONT SIZE="4”>

بسم الله الرحمن الرحيم

<‎/FONT>

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

<FONT SIZE="+4">

بسم الله الرحمن الرحيم

<‎/FONT>

وفي هذه الطريقة فإن الأرقام 1-6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك نسبةً إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي وهو 3، أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي يصبح بالحجم 2.لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5.

والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة –2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من وجود الدرجات الأخرى الأقل من –2 والأكبر من +4؟

ولكن  ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى1 بدلاً من 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)، ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم افتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الاحتمالات الواردة.

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

<FONT FACE="Arial" SIZE="6" COLOR="#FF0000”>

نوع الخط اريل الجم 6 اللون احمر

<‎/FONT>

<FONT FACE="Arial" SIZE="+3" COLOR="#0000FF”>

نوع الخط اريل الجم 3 اللون  ازرق

<‎/FONT>

 

<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <‎/FONT>

<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT>

<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT>

<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <

<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <‎/FONT>

<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <

<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <‎/FONT>

<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <

<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <‎/FONT>

<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <

<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <‎/FONT>

 

<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <‎/FONT>

 

<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi <‎/FONT>

 

<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <‎/FONT>

 

<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text <‎/FONT>

 

** الوسم الثاني من الوسم الخاصة بالخطوط وهو <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 فالمقصود به هنا هو العدد أو حجمه والأعداد تكون من 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> خط اسود ثقيل <‎/B>

<STRONG> ... <‎/STRONG>

* الخط المائل

<I> الخط المائل <‎/I>

<EM> ... <‎/EM>

This is Emphasized Text

<EM> Emphasized Text <‎/EM>

* الخط المسطر

<U> الخط الذى أسفله خط <‎/U>

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

<SUP> الخط المرتفع <‎/SUP>

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

<SUB> الخط المنخفض <‎/SUB>

* خط كبير Big Text

<BIG> الخط المرتفع </BIG>

* خط صغير Small Text

<SMALL> الخط الصغير <‎/SMALL>

* نص يعترضه خط Strike Text

<STRIKE> ... <‎/STRIKE>

<S> Strike Text <‎/S>

* نص الآلة الطابعة Teletype

<TT> ... <‎/TT>

هذا النص يعرف أيضاً بالنص موحَد المسافات Monospaced Text.ولتوضيح هذا المفهوم إليك المثال التالي:

إذا أخذنا الحرفين m,i وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف W هي أضعاف المساحة التي شغلها الحرف I iiiiiiiiii

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

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

<B><I><U>

This is a Bold, Italic and Underlined Text

This is a Bold, Italic and Underlined Text

<‎/U> <‎/I> <‎/B>

This is a Bold, Italic and Underlined Text

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

 أنظر إلى الوسم التالي:

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

<B><I><U>

This is a Bold, Italic and Underlined Text

This is a Bold, Italic and Underlined Text

<‎/B> <‎/I> <‎/U>

<B><I><U>

<B><I><U>

This is a Bold, Italic and Underlined Text

This is a Bold, Italic and Underlined Text

<‎/B> <‎/U> <‎/I>

 

الصفحة الرئيسية            الدرس السابق       الدرس الرابع

Hosted by www.Geocities.ws

ما هى الخصائص التي يمكن إضافتها إلى الوسم <BODY> ؟

الدرس الثالث

التنسيق الداخلى للصفحات

إعداد / ربيع أبوبكر عبد الباقى        

*إلفاتة : جمعت  بعض أجزاء الدرس من موقع المصمم وموقع اتش بى بالعربية لذا لزم التنويه

ما هى الخصائص التي يمكن إضافتها إلى الوسم <BODY> ؟

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

** إضافة لون خليفة إلى الصفحة نضيف الخاصية  bgcolor داخل الوسم كالتالى:

<BODY BGCOLOR="FFFFFF">

<‎/BODY>

لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهذه الخاصية  هي التى تقوم بتحديد لون الخلفية للصفحة. أماالرموز FFFFFF فهي القيمة التي تمثل اللون الذى اخترناه للصفحة وهو هنا اللون الأبيض وبدون كتابة هذه الجملة فإن المتصفح سوف يأخذها تلقائياً هذه القيمة  FFFFFFأما إذا أردت خلفية ذات لون آخر فعليك بتغيير هذه الرموز كما يمكنك الاستعاضة عن هذه الرموز بكتابة اسم اللون باللغة الانجليزية مكان هذه الرموز فلو أردت خلفية ذات لون أحمر  اكتب كلمةredمكان الموز بين إشارتي " " وإذا أردت خلفية ذات لون أزرق فاتح اكتب الرمز 6699CC للون الأزرق الفاتح أو بالطريقة التالية " lightblue" وإذا أردت لون خلفية أخضر اكتب Green وإذا أردت لون الخلفية أصفر اكتب Yellow وإذا  أردت خلفية اللون الأسود اكتب الرمز 000000أو اكتب اللفظ " Black" .

** مثال تطبيقى:

افتح المفكرة ثم اكتب بها الآتى:

<HTML>

<TITEL> صفحة ربيع

</TITEL>

<HEAD>

</HEAD>

<BODY BGCOLOR=”#green”>

</BODY>

</HTML>

احفظ الملف بامتدادHtm

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

تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:-

هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبرعن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.

* إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة

فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.

وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط  .

لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداسي عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداسي عشري.

إذن فالرقم السداسي عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.

وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداسي عشري: 6699CC أما اللون الأسود فرقمه هو 000000.

وإليك بعض الألوان ورموزها المكافئة بالنظام السداسي عشري.

 

FFFF00          ABCDE

336699        FEDCBA

112233        773466

666666        FF1122

663333        0033FF

00FF00        AABBAA

FF6600        800800

993366        008008

123456        020769

654321        111111

**لاحظ:

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

* بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.

* الالوان الاساسية والشائعة الاستخدام يمكن كتابتها باللفظ مباشرة بدلاً من الأرقام السداسي عشرية.

 بعض هذه الألوان ومسمياتها:

White – Black – Green – Red – Purple- Marron – Blue – Navy- Lime- Teal – Silver – Gray- Aqua- Olive- Yellow- Fuchsia

** خاصية إضافة صورة كخلفية :

لاضافة صورة كخلفية اضف الخاصية BACKGROUNDالى الوسم كالتالى:

<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">

<‎/BODY>

تقوم الخاصية BACKGROUND بتحديد صورة كخلفية للصفحةمع ملاحظه  أن المتصفح يقوم بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشةبديلا عن  اللون الأبيض الذي حددناه كلون الخلفية من خلال الخاصية BGCOLOR

وهنا ننوه إلى ضرورة اختيار لون للخلفية  أيضا حيث فى حالة عدم ظهور الصورة يظهر اللون كبديل عنهاوالحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده احتياطا خاصة وأن بعض المتصفحات القديمة هى  متصفحات نصية Text-BasedBrowsers لا تعرض الصور. كماأن بعض المستخدمين يقومون بإلغاء خيار عرض الصور تلقائياً من متصفحاتهم. وبالتالى سوف لاتظهر الصورة وانما تظهر لون الخلفية الذى تم اختياره.

** خصائص الوصلات التشعيبية:

هى خصائص تضاف للوسم <BODY>: ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية (Links) التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرقو هو اللون الافتراضى، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي وهو اللون الافتراضى. لكن هل يمكنك تغيير هذه الالوان الافتراضية الى الوان اخرى؟

الجواب نعم تابع معنا

** الخصائص التى تتحكم في ألوان النصوص:

** تحديد لون النص الاساسى للصفحة: اكتب هذا الوسم

<TEXT="#rrggbb">

** لتحديد لون الوصلات التشعبية: اكتب الوسم

<LINK="#rrggbb">

 

**لتحديد لون الوصلات التشعبية التي تمت زيارتها visited links

<VLINK="#rrggbb”>

**لتحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links

<ALINK="#rrggbb">

 

مثال تطبيقى :

سنكتب الوسوم وخصائصها مثل اللون  والخلفية

<BODY BACKGROUND="backimag.jpg”

BGCOLOR="#yellow"

TEXT="#000066"

LINK="#00ff00"

VLINK="#ff0000"

ALINK="#999999">

لاحظ أننا قد حددنا الصورة backimag.jpg كخلفية للصفحة؟ واخترنا اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي في لحظة النقر عليها بالفأرة.

أساسيات تنسيق صفحات الإنترنت والتحكم بخصائصها

الوسوم الخاصة بالخطوط

** وسم الخطوط :

<Font>    </FONT>

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

Face **

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

مثال:

<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic”>

بسم الله الرحمن الرحيم

<‎/FONT>

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

** color

أما هذه الخاصية فتحدد لون الخط .

<FONT COLOR="#FF0000”>

بسم الله الرحمن الرحيم

<‎/FONT>

** Size

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

<FONT SIZE="4”>

بسم الله الرحمن الرحيم

<‎/FONT>

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

<FONT SIZE="+4">

بسم الله الرحمن الرحيم

<‎/FONT>

وفي هذه الطريقة فإن الأرقام 1-6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك نسبةً إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي وهو 3، أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي يصبح بالحجم 2.لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5.

والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة –2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من وجود الدرجات الأخرى الأقل من –2 والأكبر من +4؟

ولكن  ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى1 بدلاً من 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)، ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم افتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الاحتمالات الواردة.

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

<FONT FACE="Arial" SIZE="6" COLOR="#FF0000”>

نوع الخط اريل الجم 6 اللون احمر

<‎/FONT>

<FONT FACE="Arial" SIZE="+3" COLOR="#0000FF”>

نوع الخط اريل الجم 3 اللون  ازرق

<‎/FONT>

 

<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <‎/FONT>

<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT>

<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT>

<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <

<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <‎/FONT>

<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <

<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <‎/FONT>

<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <

<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <‎/FONT>

<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <

<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <‎/FONT>

 

<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <‎/FONT>

 

<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi <‎/FONT>

 

<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <‎/FONT>

 

<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text <‎/FONT>

 

** الوسم الثاني من الوسم الخاصة بالخطوط وهو <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 فالمقصود به هنا هو العدد أو حجمه والأعداد تكون من 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> خط اسود ثقيل <‎/B>

<STRONG> ... <‎/STRONG>

* الخط المائل

<I> الخط المائل <‎/I>

<EM> ... <‎/EM>

This is Emphasized Text

<EM> Emphasized Text <‎/EM>

* الخط المسطر

<U> الخط الذى أسفله خط <‎/U>

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

<SUP> الخط المرتفع <‎/SUP>

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

<SUB> الخط المنخفض <‎/SUB>

* خط كبير Big Text

<BIG> الخط المرتفع </BIG>

* خط صغير Small Text

<SMALL> الخط الصغير <‎/SMALL>

* نص يعترضه خط Strike Text

<STRIKE> ... <‎/STRIKE>

<S> Strike Text <‎/S>

* نص الآلة الطابعة Teletype

<TT> ... <‎/TT>

هذا النص يعرف أيضاً بالنص موحَد المسافات Monospaced Text.ولتوضيح هذا المفهوم إليك المثال التالي:

إذا أخذنا الحرفين m,i وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف W هي أضعاف المساحة التي شغلها الحرف I iiiiiiiiii

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

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

<B><I><U>

This is a Bold, Italic and Underlined Text

This is a Bold, Italic and Underlined Text

<‎/U> <‎/I> <‎/B>

This is a Bold, Italic and Underlined Text

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

 أنظر إلى الوسم التالي:

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

<B><I><U>

This is a Bold, Italic and Underlined Text

This is a Bold, Italic and Underlined Text

<‎/B> <‎/I> <‎/U>

<B><I><U>

<B><I><U>

This is a Bold, Italic and Underlined Text

This is a Bold, Italic and Underlined Text

<‎/B> <‎/U> <‎/I>

 

الصفحة الرئيسية            الدرس السابق       الدرس الرابع

Hosted by www.Geocities.ws

1