Posted in مجلة الامة العربية

 (2) خطوات التعامل مع خاصية الألوان BGCOLOR

(2) خطوات التعامل مع خاصية الألوان BGCOLOR

خطوات التعامل مع خاصية الألوان bgcolor
خطوات التعامل مع خاصية الألوان bgcolor

* الصفحة نفسها أي ضمن الرسمين <BODY> … <BODY/>

تأمل الشفرة التالية:

<BODY BGCOLOR=”FFFFFF”>

<BODY>

* لقد قمت بإضافة الخاصية BGCOLOR إلى الرسم <BODY>، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبة بين إشارتي.. )

ولو أردت تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز 6699 CC للين الأزرق الفاتح

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

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

ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.

(3) خطوات التعامل مع الخطوط

* الرسم الأول الخاص بالخطوط هو <FONT></FONT> وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم أما الخصائص التي نستخدمها مع هذا الرسم، والرسوم الأخرى للخطوط فهي كالتالي

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

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

…Text…

</FONT>

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

<FONT COLOR=”#FF0000”>

…Text …

</FONT>

 Color
ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط

مناك سبعة أحجام لأي خط تستطيع المتصفحات

التعرف عليها.

ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما

المباشر. حيث يتم كتابة يقم يروح ما بين 1-7.

أي أننا نختار الحجم الذي نريده مباشرة.

<FONT SIZE=”4”>

…Text…

</FONT>

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

خط بحجم 1

خط بحجم 2

خط بحجم 3 (الخط الافتراضي)

خط بحجم 4

خط بحجم 5

خط بحجم 6

خط بحجم 7

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

<FONT SIZE=”+”>

… Text …

</FONT>

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

ولتوضيح هذا الأسلوب، إليك هذه النماذج:

خط بحجم -3

خط بحجم -2

خط بحجم -1

خط بحجم +0 (أو -0 وهو الافتراضي)

خط بحجم +1

خط بحجم +2 خط بحجم +3

خط بحجم +4

خط بحجم +5

لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5

 Size

ملاحظات:

* لقد ثبت حجم الخط على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة +4 لكي نغطي جميع الاحتمالات الواردة.

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

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

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

</FONT>

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

<FONT FACE=”Arial” SIZE=”+3” COLOR=”#FF0000”>

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

</FONT>

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

<FONT FACE=”Tines New Roman” SIZE=”5”

COLOR=”#0000FF”>

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

<Font FACE=”courier” SIZE=”2” COLOR=”#800000”>

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

</FONT>

this font is Courier, Size is 2, and Color is Maroon

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

<Hun> … </Hun>

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

<H1> Heading1</H1>

<H2> Heading2</H2>

<H3> Heading3</H3>

<H4> Heading4</H4>

<H5> Heading5</H5>

<H6> Heading6</H6>

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

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

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

<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 </I> This is Italic Text
<EM> Emphasized Text </EM> This is Emphasized Text

الخط المسطر

<U>…</U>

<U> Underlined Text </U> This is Underlined Text

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

فالرسم <P> يقوم بإنهاء الفقرة. والرسم <BR> ينهي السطر الحالي وينقل النص إلى سطر جديد. والرسم &nbsp; يقوم بإضافة الفراغات، ويجب تكرار كتابته بنفس عدد الفرغات المطلوب.

* لقد قلت إن الوسم <P> هو رسم مفرد لكنه يستخدم أيضًا كرسم مزدوج <P> <P/>وفي هذه الحالة يمكننا من تحديد اتجاه الفقرة واتجاه النص فيها حيث يستخدم معه الخصائص ALIGN, DIR.

* فالخاصية ALIGN تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right وأوضحها بالأمثلة التالية:

<P Align=”left”> this is a left-aligned paragraph </P>

This is left-aligned paragraph

<P Align=”right”> this is right-aligned paragraph</p>

This is right-aligned paragraph

<P Align=”center”> this is a centered paragraph</p>

This is a centered paragraph

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

>CENTER>…</CENTER>

<CENTER> this is a centered text </CENTER>

this is a centered text

* أما الخاصية DIR والتي نستخدمها أيضًا مع <P> فتقوم بتحديد اتجاه قراءة النص وتأخذ القيم

اتجاه النص من اليسار إلى اليمين (Left To Right) LTR
اتجاه النص من اليمين إلى اليسار (Right To Left) RTL

 

 

m2pack.biz