زاكي ابراهيم http://www.isnaha.com Tue, 17 Jul 2018 02:23:12 +0000 Joomla! - Open Source Content Management ar-aa الدرس 6: متغيرات الوسوم http://www.isnaha.com/isnaha_new/برمجها/item/828-الدرس-6-متغيرات-الوسوم http://www.isnaha.com/isnaha_new/برمجها/item/828-الدرس-6-متغيرات-الوسوم

css6
 
قد مر معنا أن هناك اختلافا بين أسماء المتغيرات في لغة CSS وأسماء المتغيرات في لغة HTML فإذا كان حجم الخط في وسوم HTML يرمز له بـ (size) فإننا نرمز له بـ (font-size) في لغة CSS، لهذا وكما وعدتك سنتعرف في هذه الفقرة على متغيرات أهم الوسوم التي رأيناها في دروس لغة HTML.

 (هذه الجداول ليست للحفظ ! احتفظ بها كمرجع فقط بعد أن تطلع عليها وتجرب بعضها بنفسك )

 


الوسم <body>

المتغير

الوصف

font-family

 يحدد هذا المتغير نوع الخط المستخدم.

font-size

يحدد هذا المتغير حجم الخط المستخدم.

color

يحدد هذا المتغير لون الخط المستخدم.

background-color

يحدد هذا المتغير لون الخلفية.

background-image

يحدد هذا المتغير إحدى الصور كخلفية للصفحة.

background-repeat

يحدد هذا المتغير كيفية تكرار الصورة الخلفية ويأخد إحدى القيم التالية:
(repeat, repeat-x, repeat-y, no-repeat)

scrollbar-base-color

يحدد هذا المتغير لون القاعدة لأشرطة التمرير الطولية والعرضية.

scrollbar-arrow-color

يحدد هذا المتغير لون السهم لأشرطة التمرير الطولية والعرضية.

scrollbar-track-color

يحدد هذا المتغير لون الخلفية لأشرطة التمرير الطولية والعرضية.

scrollbar-face-color

يحدد هذا المتغير لون الواجهة لأشرطة التمرير الطولية والعرضية.

scrollbar-highlight-color

يعطينا هذا المتغير بعض الإضاءة على أشرطة التمرير (بحسب اللون المستخدم).

scrollbar-3dlight-color

يعطينا هذا المتغير التأثير الثلاثي على أشرطة التمرير.

scrollbar-darkshadow-color

يحدد هذا المتغير لون الظل لأشرطة التمرير الطولية والعرضية.

scrollbar-shadow-color

يحدد هذا المتغير لون الظل لأشرطة التمرير الطولية والعرضية (يختلف قليلا عن المتغير السابق).

 


الوسم <table>

المتغير

الوصف

font-family

 يحدد هذا المتغير نوع الخط المستخدم داخل الجدول.

font-size

يحدد هذا المتغير حجم الخط المستخدم داخل الجدول.

color

يحدد هذا المتغير لون الخط المستخدم داخل الجدول.

background-color

يحدد هذا المتغير لون خلفية الجدول.

background-image

يحدد هذا المتغير إحدى الصور كخلفية للجدول.

border-color

يحدد هذا المتغير لون الإطار (الحدود الأربعة).

border-width

يحدد هذا المتغير سمك الإطار (الحدود الأربعة) ،قد يأخذ القيم التالية:

(thick, رقم, thin, medium)

border-style

 يحدد هذا المتغير شكل الإطار (الحدود الأربعة)، قد يأخذ القيم التالية:

(none, hidden, dotted, dashed, solid, double..)

border-left-color

يحدد هذا المتغير لون الحد الأيسر للإطار.

border-left-width

يحدد هذا المتغير سمك الحد الأيسر للإطار.

border-right-color

يحدد هذا المتغير لون الحد الأيمن للإطار.

border-right-width

يحدد هذا المتغير سمك الحد الأيمن للإطار.

border-top-color

يحدد هذا المتغير لون الحد العلوي للإطار.

border-top-width

يحدد هذا المتغير سمك الحد العلوي للإطار.

border-bottom-color

يحدد هذا المتغير لون الحد الأسفل للإطار.

border-bottom-width

يحدد هذا المتغير سمك الحد الأسفل للإطار.

 


الوسمين <ul> و <ol>

المتغير

الوصف

font-family

 يحدد هذا المتغير نوع الخط المستخدم في القوائم.

font-size

يحدد هذا المتغير حجم الخط المستخدم في القوائم.

color

يحدد هذا المتغير لون الخط المستخدم في القوائم.

list-style-image

يحدد هذا المتغير صورة معينة كمحدد للقائمة (يأخذ مسار الصورة كقيمة له).

list-style-position

يحدد هذا المتغير مكانا محددا لقوائم، يأخذ القيمتين:

(Inside, Outside)

list-style-type

يحدد هذا المتغير شكل محدد القوائم، يأخذ هذه القيم:

(none, disc, circle, square, decimal, lower-alpha...)

 


الوسم <input>

المتغير

الوصف

font-family

 يحدد هذا المتغير نوع الخط المستخدم في عناصر النماذج (مربع النص، زر الخيار).

font-size

يحدد هذا المتغير حجم الخط المستخدم في  عناصر النماذج (مربع النص، زر الخيار).

color

يحدد هذا المتغير لون الخط المستخدم في  عناصر النماذج (مربع النص، زر الخيار).

border

يحدد هذا المتغير شكل الإطار.

background-color

يحدد هذا المتغير لون خلفية عنصر النموذج.

 

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) التنسيق CSSه Mon, 03 Jun 2013 17:06:41 +0000
الدرس 5: التوارث http://www.isnaha.com/isnaha_new/برمجها/item/827-الدرس-5-التوارث http://www.isnaha.com/isnaha_new/برمجها/item/827-الدرس-5-التوارث

css5
ذكرنا سابقا أن الصفحة الواحدة قد تحتوي على الطرق الثلاث المختلفة لإدراج الأنماط، وأن المتصفح سيستخدم التنسيق الأقرب إلى الوسم (مع الوسم، ثم في رأس الصفحة، ثم في الملف الخارجي).

فإذا كان الملف الخارجي يكتب الفقرة بالون الأحمر والنمط في رأس الصفحة يكتبها باللون الأصفر والنمط المرفق مع الوسم يكتبها باللون الأخضر فإن الغلبة ستكون للون الأخضر.لنفترض الآن أن الملف الخارجي يحدد اللون الأحمر والحجم "3" و أن النمط في رأس الصفحة يحدد اللون الأصفر والمحاذاة إلى الوسط و أن النمط المرفق مع الوسم يحدد اللون الأخضرلآن ؟ نعرف مسبقا أن اللون سيكون أخضر لكن ماذا عن المحاذاة و الحجم اللذان لم يتدخل النمط المرفق مع الوسم في تحديدهما ؟ الجواب هو التوارث يعني أن التنسيق النهائي سيكون لون أخضر و المحاذاة إلى اليمين و حجم "3" نقول إن التنسيقات هنا متوارثة من الأنماط البعيدة.

وإليك المثال :

ملف  monstyle.css

صفحة HTML

p   { color:  red; font-size :  20 pt }

 

<html dir="rtl">
<head>
<title>لغةCSS </title>
<style>
p {text-align : center; color : yellow}
</style>
<link rel="stylesheet" type="text/css" href="monstyle.css" /> </head>
<body>
<p style="color:green"> النتيجة :اللون الأخضر والمحاذاة على الوسط والحجم 20 . <p/>
<body/>
<html/>

 

صفحة ويب

النتيجة :اللون الأخضر والمحاذاة على الوسط والحجم 20 .

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

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) التنسيق CSSه Mon, 03 Jun 2013 17:00:18 +0000
الدرس 4: استخدام المعرف والفئات http://www.isnaha.com/isnaha_new/برمجها/item/826-الدرس-4-استخدام-المعرف-والفئات http://www.isnaha.com/isnaha_new/برمجها/item/826-الدرس-4-استخدام-المعرف-والفئات

css4
سنتطرق إلى استخدام المعرف والفئات في هذا الدرس.

استخدام المعرف :

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

ملف monstyle.css

صفحة HTML

 body {border-style : solid }

 h2  { color : #5660000 }

 table { border-right-style : solid }

 a {color: #005000;font-size:1em }

 p { color : "red" ;  border-color : #F990FF }

 h1,h2,h3,h4,h5,h6{ color : #0560000 }

 #center {text-align : center }

<html dir="rtl"> <head> <title>لغةCSS </title> <link rel="stylesheet" type="text/css" href="monstyle.css" /> </head> <body> <p id="center"> السلام عليكم <p/> هذه هي صفحتي الثالثة باستخدام لغة CSS <body/> <html/>

 


استخدام الفئات (Classes)

ماذا لو كنت تريد استخدام أكثر من تنسيق للصفحة الواحدة ،بمعنى أن تنسق الفقرة الأولى في مستندك باستخدام اللون الأحمر و الفقرة الثانية باللون الأخضر و الثالثة باللون الأصفر كل ما عليك أن تتعرف على خاصية الفئات من خلال المثال التالي :

صفحة ويب

ملف HTML

الفقرة الحمراء

الفقرة الخضراء

الفقرة الزرقاء

<html dir="rtl">
<head>
<title>لغةCSS </title>
<style>
p.red {color : "red" }
p.green {color : "green" }
p.blue {color : "blue" }
</style>
</head>

<body>
<p class="red">الفقرةالحمراء</p> <p class="green">الفقرةالخضراء</p>
</p>الفقرةالزرقاء<p class="blue">
</body >
</html>

 


فائدة :

لتضيف فئة يمكن استخدامها مع جميع الوسوم في صفحتك استخدم الطريقة التالية :

   .red { color : "red" }

احذف إسم الوسم واكتفي بوضع نقطة مع الفئة.


استخدام أشباه الفئات (Pseudo-Classes)

تأخد أشباه الفئات الصيغة العامة التالية :

{ "القيمة":المتغير}شبهالفئة : وسم

أو في حالة وجود فئة أيضا :

{"القيمة: "المتغير}شبهالفئة : فئة. وسم

مثال :

ملف monstyle.css

a : link      {color : #000088; text-decoration: none }

a : visited  {color : red ; text-decoration: none }

a : hover    {color : pink; text-decoration: underline; font-size: 10pt}

a : active   {color : lightblue; text-decoration: none }

  

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) التنسيق CSSه Mon, 03 Jun 2013 16:55:20 +0000
الدرس 3: إدراج الأنماط في صفحات الويب http://www.isnaha.com/isnaha_new/برمجها/item/825-الدرس-3-إدراج-الأنماط-في-صفحات-الويب http://www.isnaha.com/isnaha_new/برمجها/item/825-الدرس-3-إدراج-الأنماط-في-صفحات-الويب

css3
 لقد تعلمنا في الدرس السابق كتابة الصيغة العامة لنمط CSS وبقي علينا أن نتطرق كما وعدناكم إلى كيفية إدراج هذه الأنماط في صفحات الويب.

هناك ثلاث طرق لإدراج الأنماط في صفحتك :

1.   الإدراج داخل الوسم.

2.   الإدراج في رأس الصفحة.

3.   الإدراج في ملف خارجي.


الإدراج داخل الوسم :

هذه الطريقة لا تختلف كثيرا عن استخدام وسوم HTML للتنسيق, لأنك تضع التنسيق مع وسم HTML الذي تريد تنسيقه. سنستخدم كلمة style كمتغير يرسل مع الوسم المراد تنسيقه, المثال التالي يوضح ذلك:

<html dir="rtl"> <head> <title>لغةCSS </title> </head> <body> <p style="color : red"> السلام عليكم <p/> هذه هي صفحتي الأولى باستخدام لغة CSS <body/> <html/>

 


الإدراج في رأس الصفحة :

تستخدم هذه الطريقة إذا كنت تريد تطبيق تنسيق معين على صفحة بكاملها سندرج الأنماط عن طريق الوسم <style> في رأس الصفحة <head>:

<html dir="rtl"> <head> <title>لغةCSS </title> <style> p {color : "red" } </style> </head> <body> <p> السلامعليكم <p/> هذه هي صفحتي الثانية باستخدام لغة CSS </body> <html/>

 


الإدراج في ملف خارجي :

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

هذا الملف يجب أن يحفظ بالإمتداد CSS. يمكنك كتابته عن طريق برنامج المفكرة و إليك المثال:

ملف monstyle.css

صفحة HTML

body     {border-style : solid }

h2         { color : #5660000 }

table     { border-right-style : solid }

a { color : #005000 ;font-size :1em }                  

p { color : "red" ;  border-color : #F990FF }

h1,h2,h3,h4,h5,h6{ color : #0560000 }

<html dir="rtl"> <head> <title>CSS لغة</title> <link rel="stylesheet" type="text/css" href="monstyle.css" /> </head> <body> <p> السلام عليكم <p/> هذه هي صفحتي الثالثة باستخدام لغة CSS <body/> <html/>

 


ملاحظة :

يمكن استخدام الطرق الثلاثة معا لإدراج الأنماط في ملف واحد بمعنى أن تستخدم ملفا خارجيا و تستخدم الأنماط في رأس الصفحة وكذلك مع الوسم , لكن أي التنسيقات سيطبقها المتصفح ؟لنفترض أنك حددت حجم خط كل فقرة بالحجم "4" في ملف خارجيثم حددت الحجم "2" لخط الفقرة كذلك في رأس الصفحة ثم حددت الحجم "1" مع وسم الفقرات ,بالنسبة للمتصفح الأنماط ستنساب على بعضها و تكون النتيجة ظهور الفقرة باستخدام الحجم "1" ,فالأفضلية إذن تكون باستخدام الإنسياب التالي (الأول هو الأعلى أفضلية) :

1.    التنسيق مع الوسم.

2.    التنسيق في رأس الصفحة.

3.    التنسيق في الملف الخارجي.

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) التنسيق CSSه Mon, 03 Jun 2013 16:45:52 +0000
الدرس 2: الصيغة العامة لنمط CSS http://www.isnaha.com/isnaha_new/برمجها/item/824-الدرس-2-الصيغة-العامة-لنمط-css http://www.isnaha.com/isnaha_new/برمجها/item/824-الدرس-2-الصيغة-العامة-لنمط-css

css2
ظهرت الحاجة لاستخدام تقنية
CSS بعد اهتمام المتصفحات الشهيرة مثل Internet Explorer و Netscape بإضافة وسوم HTML أخرى .قامت جمعية W3C باعتماد هذه التقنية لتساعد على نقل المواقع القديمة التي لا تحتوي على وسوم التنسيق إلى مواقع حديثة من صفحات إنترنت.

ملاحظة: W3Cهو اختصار لـ Word Wide WebConsortium وهي الجمعية المسؤولة عن إصدار نسخ قياسية من لغة HTML.

تحدد الأنماط التنسيق لأوسمة لغة HTMLبمعنى أننا نستطيع تحديد تنسيق معين لوسم الفقرة أو وسم الجداول أو غيرها من الوسوم HTML, إذا فالصيغة العامة لنمط CSSستتكون من وسم HTMLالذي سيطبق عليه النمط و التنسيق :

 الـوسم{ القيمة :المتغير}

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


أمثلة :

body  { border-style : solid }

h2    { color : #5660000 }

table { border-right-style : solid }

a { color : #005000;font-size :1em }                  

p { border-style : solid ; border-color : #F990FF }

h1,h2,h3,h4,h5,h6{ color : #0560000}

 


ملاحظات :

1- لا شك أنك لا زلت تذكر الوسم body الوسم الخاص بجسم الصفحة والوسم h2 الخاص بوسوم رأس الفقرة و table الخاص بالجداول إذا وجدت صعوبات أو مشاكل في تذكر ذلك فعد إلى الحصص الدراسية للغة HTML.

2- إن بعض أسماء المتغيرات في لغة CSS تختلف قليلا عن أسماء هذه المتغيرات في لغة HTML لهذا ستجد في دروس قادمة لوائح لأسماء المتغيرات الخاصة بلغة CSS لكل وسم مع الوظائف التي تمنحها لك.

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

4- لقد عرفت أنك تستطيع تخصيص أكثر من متغير لوسم واحد فنخبرك كذلك أن بإمكانك تخصيص متغير واحد بقيمة واحدة مكررة مع أكثر من وسم HTML مفصول بينها بفاصلة كما هو موضح في المثال الأخير.

5- ربما تريد تجربة ما تعلمناه إلى حد الآن! لكن هذا لن يتأتى لك إلا إذا تابعت معنا باقي الدروس حيث ستتعرف على طريقة إدراج الأنماط في ملف HTML. 

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) التنسيق CSSه Mon, 03 Jun 2013 16:37:51 +0000
الدرس 1: ما وراء HTML http://www.isnaha.com/isnaha_new/برمجها/item/823-الدرس-1-ما-وراء-html http://www.isnaha.com/isnaha_new/برمجها/item/823-الدرس-1-ما-وراء-html

css1
الآن وقد انتهيت من تعلم لغة HTML فلا يسعنا أن نقول أنك انتهيت من تعلم مهنة تطوير الويب Web Developing، فلا زال أمامك الكثير لتتعلمه حتى تصل إلى المستوى الإحترافي الذي نطالب به جميع العرب، فلغات و تقنيات الويب تتجدد باستمرار ويصبح اللحاق بها كلها أمرا مستحيلا على الضعفاء، أما الأقوياء فهم على الطريق بثبات وبعزمهم وإصرارهم أصبحوا روادا في عالم الحاسوب والإنترنت الرائع، بقي عليك أن تتعلم هذه اللغات و التقنيات وكيفية الحصول على المزيد من المعلومات عنها، ونعدك بأننا سنواكب جميع هذه التقنيات في دروس قادمة إن شاء الله تعالى.

 

أوراق الأنماط المتتالية

أوراق الأنماط المتتالية أو صفحات الأنماط الإنسيابية Casscading Style Sheet أو CSS هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الوسوم في صفحة ويب، فمثلا العنوان الرئيسي H1 يظهر باللون الأسود و بخط عادي وطريقة عادية، ولتغييره كان لا بد من وضع وسم Font داخل كل وسم H1، فماذا لو استطعنا أن نحدد نحن كيف نريد لعنوان الصفحة الرئيسي أن يظهر، وكيف يجب أن تظهر الجداول وكيف يجب أن تظهر جميع الوسوم الأخرى في لغة HTML، الآن يمكننا عمل ذلك باستخدام تقنية CSS، وقد تم تطوير هذه التقنية على المدى الأعوام السابقة حتى وصلنا إلى النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتية العالمية مع مجموعة كبيرة من الوصلات والكتب والدورات : http://www.w3.org/Style/CSS


إذا افترضنا مثلا أنك قمت بإنجاز مشروع ضخم _ باستخدام لغة HTML_ لإحـدى الشركات وقد تطلب منك هذا العمل جهدا كبيرا لتستجيب لمتطلبات زبونك، ثم فوجئت بأن حجم الخط أو لونه لا يروق للزبون، إذا لم تكن قد استخدمت لغة CSS فإن الحل الوحيد أمامك هو إجراء التعديلات المطلوبة على مستوى المشروع بكامله ولا شك أن هذا الأمر مرهق،أما باستخدام لغة CSS فإن التعديلات ستكون بسيطة جدا و في وقت قياسي. وهذا ما سنراه في هذه الدروس بحول الله.

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) التنسيق CSSه Mon, 03 Jun 2013 16:34:23 +0000
الدرس 16: خاتمة http://www.isnaha.com/isnaha_new/برمجها/item/822-الدرس-16-خاتمة http://www.isnaha.com/isnaha_new/برمجها/item/822-الدرس-16-خاتمة
html16
من المؤسف أو لربما من المفرح أن أخبرك أن هناك العديد من البرامج التي جعلت إنشاء صفحات الإنترنيت باستخدام لغة HTML عملية سهلة و بسيطة و لاتتطلب معرفة ولو مسطحة للغة HTML حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بإنشاء الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق html.
أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت.إلا أنه وكما سبق الذكر أن إتقان هذه اللغة يؤهلك إلى الولوج إلى لغات أكثر تقدما في تطوير صفحات الإنترنيت وبالنسبة لي هذه البرامج مفيدة من حيث استغلال الوقت و الحصول على المطلوب في وقت قصير وإليك لائحة بعض هذه البرامج :
  • MicroSoft Frontpage

  •  DreamWeaver

  • web2003

  • ......

أتمنى أن تكون قد استفدت من هذا الدرس و نلتقي في دروس أخرى. 

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) اللغة HTMLه Mon, 03 Jun 2013 09:46:04 +0000
الدرس 15: وسوم إضافية http://www.isnaha.com/isnaha_new/برمجها/item/821-الدرس-15-وسوم-إضافية http://www.isnaha.com/isnaha_new/برمجها/item/821-الدرس-15-وسوم-إضافية
html15
 إن الإحاطة بكل الوسوم التي تتوفر عليها لغة HTML مع الخصائص التي يتيحها كل وسم يعد أمرا صعبا بعض الشىء لهذا وضعت هذا الجدول وستجد فيه بعض الوسوم التي لم يتم التطرق إليها خلال الحصص السابقة


الخاصية

 تعليق

 ‎nbsp &    تعتبرالفراغات رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام هذا الوسم

 nbsp &

<BR>    تستخدم بصورة مفردة للرجوع للسطر.            

      <BR>

center    يمكنك توسيط أي شيء بوضعه بين هذين الوسمين .

  <center> و <center/>

Preformated

   يحتفظ هذا الوسم بالتنسيق المسبق الذي تم إعداده به.ويتم تحويل الخط إلى خط موحد المسافات.

 <PRE> ... </PRE>

Bold

STRONG

   يستخدم لكتابة الكلمات بخط أسود عريض .   

 < <STRONG> Strong Text <‎/STRONG

     <B> Bold Text <‎/B>

Italic

Emphasized

   يستخدم لكتابة الكلمات بخط مائل .      

  <EM> Emphasized Text <‎/EM>

  <I> Italic Text <‎/I> 

Undelined

   يستخدم لكتابة الكلماتمسطرة بخط .     

<U>Undelined Text <‎/U>

Superscript

   يستخدم لكتابة الكلمات بخطمرتفع.                   

This is<SUP> Superscript Text <‎/SUP>

Subscript

   يستخدم لكتابة الكلمات بخط منخفض.              

This is<SUB> Subscript Text <‎/SUB>

Big

   يستخدم لكتابة الكلمات بخط كبير.           

<BIG> Big Text </BIG>

SMALL

   يستخدم لكتابة الكلمات بخط صغير.                  

This is<SMALL> Small Text <‎/SMALL>

STRIKE

S

   يستخدم لكتابة  نص يعترضه خطر.          

<STRIKE> Striked Text <‎/SRTIKE>

<S> Striked Text <‎/S>

TeleType

   يستخدم لكتابة نص الآلة الطابعة.                      

<TT> TeleType Text <‎/TT>

 

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) اللغة HTMLه Mon, 03 Jun 2013 09:42:01 +0000
الدرس 14: النماذج http://www.isnaha.com/isnaha_new/برمجها/item/820-الدرس-14-النماذج http://www.isnaha.com/isnaha_new/برمجها/item/820-الدرس-14-النماذج
html14
بعد ما رأيناه في الحصة السابقة نواصل حديثنا عن النماذج وبعض الخصائص المتعلقة بكل نموذج على حدة .

مربع النص

نقوم بوضع مربع النص كما ذكرنا سابقا، باستخدام الوسم input مع تغيير الخاصية type له إلى القيمة text، ويمكننا وضع أي محتويات ابتدائية نريدها فيه عن طريق الخاصية value له، ويمكن أيضا التحكم بحجمه عن طريق الخاصية size، لتحديد طول المربع الذي نريده.

 

Name :   Email :    URL :

<form ACTION="mailto:email@domain.com" METHOD="get" ENCTYPE="text/plain">

Name:<input type="text" size="10" name="Name">

Email : <input type="text" size="10" name="email">
URL :<input type="text" size="10" name="url" value="http://">

<input type="submit" value="Send">

</form>

 


مربع الإختيار

وهو يوضع بالوسم input أيضا بتحديد الخاصية type لها عند القيمة checkbox، ويمكن بالمعلومات التي سيتم إرسالها عن طريق الإسم بالخاصية name والقيمة بالخاصية value فيمكننا مثلا أن نجعل النموذج يرسل المعلومة do=subscribe إذا قام المستخم باختيار أحد مربعات الخيار، وذلك بضبط الخاصية name له عند القيمة do والخاصية value له عن القيمة subscribe، وعند عدم اختيار مربع الخيار فلن يتم إرسال أي شيء يتعلق به. أي أنه مثل النوع hidden إلا المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو لا.

Subscribe.

 

<"form action="echo.pl" method="get>

 

<input type="checkbox" name="do" value="subscribe"> Subscribe.<br>

 

<input type="submit" value="Send">

 

</form>

 


الإختيار من متعدد

يمكنك عمل دوائر الإختيار من متعدد بواسطة وسوم input بحيث تضبط خاصيتها type عند القيمة radio، ولعمل مجموعة من الوسوم التي يجب على المستخدم اختيار أحدها قم بعمل وسم input لكل واحد منها واجعل قيمة الخاصية name متساوية فيها جميعا مع تغيير قيمة الخاصية value في كل منها، فيكون عندنا نيابة عن جميع هذه الأزرار معلومة واحدة اسمها يحدد بالقيمة name وقيمتها حسب قيمة الخاصية value للزر الذي تم اختياره.

Age :

10-17

18-50

51-100

<form action="echo.pl" action="get">

 

 <Age : <br 

 

<input type="radio" name="age" value="17"> 10 - 17<br>

 

<input type="radio" name="age" value="50"> 18 - 50<br>

 

<input type="radio" name="age" value="100"> 51 - 100<br>

 

 <input type="submit" value="Send">

 

</form>

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

 


 القائمة

عند تكوين القائمة نقوم أولا بوضع وسم القائمة select ونعين له خاصية name التي ستظهر في النموذج، وبعد ذلك نقوم بوضع عدة وسوم option لكل منها خاصية value وعند إرسال البيانات سيتم إرسال المعلومة التي إسمها موجود في الخاصية name من الوسم select وقيمتها موجودة في الخاصية value من الوسم option الذي تم اختياره.

<form action="echo.pl" method="get">

 

<select name="ville">

 

    <option value="kw">CASABLANCA

 

    <option value="sa">RABAT

 

    <option value="ua">FES

 

    <option value="qt">AGADIR

 

    <option value="bh">MARRAKECH

 

    <option value="om">TANGER

 

</select>

 

<input type="submit" value="Send">

 

</form>

 


مربع النص متعدد الأسطر


ويمسى أيضا بالمساحة النصية Textarea، وهو عبارة عن وسم textarea مزدوج (فتح وإغلاق) وبينهما تضع المحتويات التي تريدها أن تظهر داخل المربع، وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة post لأنه يستخدم لإرسال كمية كبيرة من البيانات. 
يمكنك التحكم في عدد الأسطر بالخاصية rows وعدد الأحرف في كل سطر بالخاصية cols (عدد الأعمدة).

<form action="echo.pl" method="get">

<textarea name="message" rows="2" cols="20">

             أتمنى لك أن تستفيد

من هذه الدروس  

  <input type="submit" value="Send">

 </form>

 


تمرين تطبيقي :

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

]]>
zaki.brahim@gmail.com (زاكي ابراهيم) اللغة HTMLه Mon, 03 Jun 2013 09:39:22 +0000
الدرس 13: النماذج http://www.isnaha.com/isnaha_new/برمجها/item/819-الدرس-13-النماذج http://www.isnaha.com/isnaha_new/برمجها/item/819-الدرس-13-النماذج
html13
مع أن النماذج تعتبر من المواضيع المتقدمة (وغير السهلة) نوعاً ما في لغة HTML إلا أن معظم مواقع الأنترنيت تكاد لا تخلو من وجودها، وذلك لعدة أسباب لعل من أهمها إيجاد إمكانية للتفاعل بين الموقع وصاحبه من جهة والزوار من جهة أخرى...
أحيانا قد تحتاج كمصمم لموقع أن تعرف آراء زوار موقعك في مسائل معينة وقد تكتفي برسائل البريد الإلكتروني التي يرسلوها لك، لكن عندما تريد معرفة أشياء محددة بذاتها فإن النماذج هي الخيار الأفضل لك. بالإضافة إلى إمكانية تنظيم البيانات المدخلة من خلالها وسهولة وسرعة استخدامها من قبل زوار الموقع. ومن أبرز الأمثلة على النماذج في مواقع الويب هي دفاتر الزوار وصفحات البحث عن الكلمات أو العبارات داخل المواقع.
 
لا تكمن صعوبة التعامل مع النماذج في كونها معقدة بحد ذاتها، كلا ... فهي إحدى العناصر التي تدعمها لغة HTML وهي مجرد وسوم عادية مثلها مثل الوسوم التي تعاملنا معها في جميع الدروس السابقة. وبإمكانك إنشاء النماذج في موقعك بنفس السهولة التي تدرج فيها جدولاً أو إطاراً (هذا بالطبع إذا كنت تعتقد أن الجداول والإطارات سهلة) لكن التداخل بينها (وأعني النماذج) وبين لغات البرمجة المتقدمة في الويب مثل JavaScript, CGI هي ما يجعلها تختلف عن سابقيها من الوسوم أو العناصر الأخرى. خاصة إذا احتجت إلى بعض المقاطع البرمجية من هذه اللغات ضمن نماذجك. أما إذا اكتفيت بالإمكانات المتواضعة التي توفرها HTML بالنسبة للنماذج. فما من مشكلة... لأنه سيكون بإمكانك التعامل معها بكل بساطة. وفي هذا الدرس لن نتطرق بالطبع إلى أي من اللغات سوى HTML.

إليك بعض الأشكال (القيم) مع الخاصية  TYPE المستخدمة على صفحات الإنترنيت :

<INPUT TYPE="text">

<INPUT TYPE="password">

<INPUT TYPE="hidden">

 

<INPUT TYPE="radio">

<INPUT TYPE="checkbox">

<INPUT TYPE="submit" value="Send">

<INPUT TYPE="reset" value="Reset">

<INPUT TYPE="button" value="Normal">

 

مع أن الأشكال السابقة تختلف عن بعضها البعض من حيث المبدأ والمظهر (وطريقة التعريف أيضاً) إلا أنها يجب أن تدرج جميعاً ضمن وسمين أساسيين للنماذج هما:  <FORM> ... </FORM>

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

ACTION

 تحدد العنوان الذي سيتم إرسال بيانات النموذج إليه لتتم معالجتها بالصورة  المطلوبة. وعادة يكون هذا عنواناً لبريد إلكتروني Email سوف يتم إرسال  بيانات النموذج إليه. أو قد يكون عنواناً لبرنامج CGI موجود على الكمبيوتر الخادم Server الذي تتواجد عليه صفحة الإنترنيت، حيث يستقبل هذه البيانات ويعالجها حسب التعليمات الموجودة فيه كأن يضيفها مثلاً إلى إحدى الصفحات (كما يحدث عادة في دفاتر الزوار) أو يتحقق من صحة بعض الحقول المدخلة ومطابقتها لمعايير معينة، أو أن يقوم بالبحث عن كلمة أو عبارة ضمن صفحات الموقع كما في نماذج البحث الموجودة في مواقع الإنترنيت.

<FORM ACTION="mailto:someone@domain.com">

...

</FORM>
<"FORM ACTION="name_and_address_of_CGI_script>

 ...

 </FORM>

METHOD

تحدد الطريقة التي سيتم بها التعامل مع العنوان المحدد في الخاصية السابقة ACTION. وهناك قيمتين لهذه الخاصية هما: GET التي تستخدم في حالة كون عملية المعالجة داخلية أي تتم داخل الخادم Server نفسه. ففي مثالنا السابق عندما نستخدم نموذج البحث عن كلمة في الموقع، فإن عملية المعالجة (أي البحث) تجري مباشرة في الموقع. والقيمة الثانية هي Post وتستخدم عندما تكون عملية المعالجة خارجية كأن يتم إرسال البيانات إلى عنوان بريد إلكتروني.

<FORM ACTION="mailto:someone@domain.com" METHOD="post">

 ...

</FORM>

<"FORM ACTION="name_and_address_of_CGI_script" METHOD="get>

 ...

</FORM>

ENCTYPE

هذه الخاصية تحدد طريقة الترميز التي سيتم إرسال البيانات وفقاً لها. وهي تأخذ القيمتين التاليتين (يجب أن تكتب هذه القيم كما هي نصاً وحرفاً) :

  • application/x-www-form-urlencoded
  • text/plain

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

<FORM ACTION="mailto:email@domain.com" METHOD="post" ENCTYPE="text/plain">
... .......

<FORM/>

 


تعريف النماذج :

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

  •  Text

: لعمل زر، ويستفاد من الزر في عمل أي شيء.  Button
  • : لعمل مربع اختيار، إذا تم اختياره فإنه يرسل القيمة on وإذا لم يتم اختياره فإنه لا يرسل أي معلومة.

 Checkbox
  • : يرسل المعلومة التي تريدها بالقيمة التي تريدها، ولا يظهر أي شيء في صفحة HTML، تستطيع عن طريقه دمج معلومة ما داخل ملف HTML   بحيث لا يعلم عنها المستخدم ولا يحتاج إلى تغييرها.

 Hidden
  • : تستخدم في الكثير من الأمور مثل الزر.

 Image
  • : يستخدم لإرسال كلمة المرور، وهو يرسل كلمة المرور بصورة واضحة دون أية تشفير وإنما يختلف عن مربع النص العادي في أنالحروف  تظهر في صورة نجوم ( * ).

 Password
  • : يستخدم لعمل الدوائر لكي يختار المستخدم قيمة ما من عدة خيارات.

 Radio
  • : يستخدم لمحو محتويات النموذج وإعادته إلى الحالة الأصلية.

Reset
  • : يظهر في صورة زر يستخدم لإرسال المعلومات الموجودة في النموذج.

Submit

سنواصل
حديثنا عن النماذج و بعض الخصائص المتعلقة بكل نموذج في الحصة القادمة.
]]>
zaki.brahim@gmail.com (زاكي ابراهيم) اللغة HTMLه Mon, 03 Jun 2013 09:29:01 +0000