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

رسالة مصرية ثقافية

ثقافية - علمية - دينية - تربوية
 
الرئيسيةرسالة مصريةالتسجيلدخول

شاطر | 
 

 مقدمة في HTML 4

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Eng. Ahmedzoubaa
Admin
avatar

عدد المساهمات : 1216
تاريخ التسجيل : 28/08/2010
العمر : 43

مُساهمةموضوع: مقدمة في HTML 4   الخميس 18 نوفمبر 2010 - 8:31

الدرس الثاني عشر
وسوم ... من هنا وهناك!!!

<BLOCKQUOTE>
أهلاً وسهلاً بك إلى الدرس الثاني عشر من دروس HTML. كما ترى من العنوان فقد اخترت أن يكون هذا الدرس خارجاً قليلاً عن نطاق الدروس السابقة من حيث المحتوى. فلن تجد هنا وسوماً محددة تستطيع حصرها تحت موضوع معين، بل وسوماً عامة وخصائص إضافية لوسوم ذكرت سابقاً. وإن كان الهدف من معظمها ترتيب الصفحة والتحكم بشكل محتوياتها. ولا أخفي عليك أني قصدت تأجيل بعضها حتى هذا الدرس مع أنه كان من الممكن إدراجها ضمن دروس سابقة، وخاصة الدرس الرابع (الفقرات). لكن حجّتي في عدم إدراجها في حينه أن هذه الوسوم لن يتم استخدامها ولن تُفهم طريقة عملها إلاّ عند استخدام وسوم أخرى تمّ شرحها في وقت لاحق بعد الفقرات مثل الصور والجداول. أما البعض الآخر ففضلت عدم حصرها ضمن أي درس على اعتبار أنها وسوم عامة لا تختص بأي موضوع. على أية حال يكفينا هذه المقدمة وأترك لك حرية تصنيفها كما يحلو لك. والآن لندخل مباشرة في الموضوع.


أترى هذا الخط الذي فصلت به هذه الفقرة عن الفقرة السابقة؟ إنه يسمى بلغة HTML بالمسطرة الأفقية Horizontal Rule وتستطيع إدراجه لتقسيم صفحتك بكتابة الوسم <HR> فقط لا غير. أكتب:
<HR>
ليظهر لديك هذا الخط:


لكن هذا ليس كل شيء. لأنك تستطيع تحديد سُمك هذا الخط إذا أضفت له الخاصية SIZE وأتبعتها برقم يمثل هذا السُمك مثلاً:


‎<HR SIZE="5">‎




‎<HR SIZE="1">‎




‎<HR SIZE="10">‎


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


‎<HR WIDTH="80%">‎




‎<HR WIDTH="400">‎




‎<HR SIZE="5" WIDTH="60%">‎


ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه ALIGN والتي تأخذ القيم center, left, right
‎<HR WIDTH="80%" ALIGN="center">‎


‎<HR WIDTH="400" ALIGN="left">‎


‎<HR SIZE="5" WIDTH="60%" ALIGN="right">‎


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


<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE>


أما إذا كان لون هذا الخط لا يعجبك، فما من مشكلة إذ أنك تستطيع اختيار اللون الذي يعحبك من خلال الخاصية COLOR (تعمل فقط مع MS Explorer)


<HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FF0000" NOSHADE>




الوسم التالي في هذه المجموعة هو وسم الملاحظات ‎<!-- ... -->‎ ونستخدمه عند الحاجة لكتابة بعض الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي يقصد أن لا تظهر عند استعراض هذا الملف في المتصفح.
‎This is line one<BR>‎
‎<!-- This is line two --><BR>‎
‎and, this is line three<BR>‎

وهذه هي النتيجة
This is line one

and, this is line three



من المؤكد أنك تعرف الوسم <BR> والذي يقوم بالتحكم في نهايات الأسطر (أي أنه ينهي السطر الحالي بحيث يظهر النص الذي يليه في سطر جديد). فهل تعلم أنه يوجد خاصية لهذا الوسم وهي CLEAR؟
لكي تتوضح لك طبيعة عمل هذه الخاصية، قم بمراجعة ما ذكرناه في الدرس الخامس عن الصور والرسومات، واستخدام الخاصية ALIGN التي تحدد موقع هذه الصور على الصفحة. حسناً، لقد إتفقنا في حينه على أن القيمة right توجه الصورة إلى يمين الصفحة وأن النص الذي يليها يظهر ملتفاً بعدة أسطر على الجهة اليسرى. وكذلك الأمر (بصورة معكوسة) عند استخدام القيمة left. وحتى لو استخدمنا القيمة bottom أو لم نقم بإضافة الخاصية ALIGN أصلاً، فسوف نجد أن النص الذي يليها يظهر بمحاذاة الحافة السفلى للصورة.
يتلخص عمل الخاصية CLEAR في منع النص من الإلتفاف على أي من جانبي الصورة.
وهي تأخذ القيم right التي تمنع ظهور النص إلاّ عند بداية الهامش الأيمن الفارغ بعد الصورة (أي بمنتهى البساطة تمنع ظهور النص والتفافه على الجهة اليسرى للصورة... أليست هذه العبارة أسهل للفهم؟!!) وبالتالي فإن هذه القيمة تستخدم عندما تكون قيمة ALIGN للصورة هي right.
وبنفس المبدأ لكن بصورة معكوسة نستخدم القيمة left والتي في نتيجتها تمنع إلتفاف النص على الجهة اليمنى من الصورة. وذلك عندما تكون محاذاة الصورة هي left
منطق معكوس... أليس كذلك؟ على أية حال إذا كنت تكرة هذه التعقيدات وتحب الطرق المختصرة مثلي، فاستخدم القيمة all التي تمنع الإلتفاف من جميع الجوانب.
ما رأيك أن نقتبس بعض الأمثلة من الدرس الخامس لنشاهد كيف تعمل مع إضافة هذه الخاصية؟ وسوف أدرج هذه الأمثلة كما هي نصاً وحرفاً أما الإضافات فهي المميزة باللون الأحمر


RIGHT


أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.
‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎
‎<BR CLEAR="right">‎
فإذا أضفنا الوسم <BR> مع الخاصية ‎CLEAR="right"‎ لوجدنا أنها منعت النص من الإلتفاف

والآن لنجرب استخدام القيمة left مع هذا المثال نفسه


RIGHT


أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.
‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎
‎<BR CLEAR="left">‎
نلاحظ أن لا فائدة من استخدام الوسم <BR> مع الخاصية ‎CLEAR="left"‎ فكل ما فعلته هو إضافة سطر فارغ أعلى النص

حسناً لنستخدم القيمة left في مكانها الصحيح، أي مع المحاذاة left


LEFT


هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة.
‎<IMG SRC="image.jpg" ALIGN="LEFT">‎
‎<BR CLEAR="left">‎
الآن تعمل هذه القيمة كما يجب (لا شيء أفضل من وضع الوسم المناسب في المكان المناسب!)


وأترك لك المجال لكي تجرب القيمة all بنفسك


من القواعد الإفتراضية للمتصفحات أن الأسطر في كل فقرة تلتف وتنقسم بصورة تلقائية حسب إستبانة الشاشة وعرض نافذة المتصفح. (هذه نعرفها من الدرس الأول). لكن لنقل أننا نريد من أحد الأسطر أن لا ينقسم مهما كان مقدار الإستبانة وعرض النافذة.
حسناً، كل ما علينا فعله هو وضع هذا السطر ضمن الوسوم
<NOBR> ... <‎/NOBR>
وهي إختصار لـِ NO BReak أي (لا إنقسام). أنقر هنا لتشاهد مثالاً على ذلك


ها قد وصلنا إلى نهاية هذا الدرس والذي ناقشنا فيه وسوماً منوعة تتعلق في مجملها بتنسيق الصفحات. أراك على خير في الدرس التالي
</BLOCKQUOTE>

الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://resalahmasriyah.mam9.com
Eng. Ahmedzoubaa
Admin
avatar

عدد المساهمات : 1216
تاريخ التسجيل : 28/08/2010
العمر : 43

مُساهمةموضوع: رد: مقدمة في HTML 4   الخميس 18 نوفمبر 2010 - 8:32

الدرس الثالث عشر
الخرائط الصورية

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



حاول النقر على هذه الصور وستلاحظ أنها لا تعمل، أي لا تقوم بنقلك إلى الصفحة المطلوبة لأنها في حالتها هذه مجرد صور عادية ولم نقم حتى الآن بإضافة تلك الوسوم السحرية التي تحولها إلى خرائط صورية نابضة بالحياة .. والتشعب.
إذن، إضافةً إلى الوسوم الجديدة الخاصة بالخرائط والتي سنتعرف عليها من خلال هذا الموضوع سوف نعود أيضاً للتعامل مع وسوم الصور (بما أننا نتحدث عن خرائط صورية) كذلك سنتعامل مع الوصلات التشعبية (كون الخرائط الصورية هي تطبيق آخر للوصلات).. وستحتاج أيضاً إلى القليل من الهندسة (نعم .. الهندسة. ذلك العلم الذي يجبرك المعلم فيه على حمل البيكار لترسم به دائرة.. فتكون النتيجة شكلاً عجائبياً قد يكون أي شيء .. إلا أن يكون دائرة). وأخيراً نحتاج إلى أحد برامج تحرير الصور مثل Paint Shop Pro لمساعدتنا في معرفة بعض التفاصيل الخاصة بالصور.
هل أنت مستعد؟ لننطلق إذن.
هذه هي خريطتنا أو بالأحرى ما سوف تصبح بعد قليل خريطتنا .. مجرد صورة عادية سنقوم بإدراجها في الصفحة.

وهذه هي الشيفرة الخاصة بإدراجها
‎‎
والآن سوف نضيف لهذه الشيفرة خاصية جديدة من خصائص الوسم هي ‎USEMAP="#map_name"‎ والتي تخبر المتصفح أن يستخدم هذه الصورة كخريطة وذلك حسب التحديدات الموجودة في تعريف هذه الخريطة (وسنتحدث عن هذه التحديدات لاحقاً إن شاء الله). أما القيمة map_name فهي تمثل الاسم الذي نريد أن نعيّنه للخريطة (أي اسم نريده). وكما ترى فإن هذا الاسم مسبوق بإشارة #.
ما رأيك أن نسمي الخريطة باسم ourmap. عندها سوف تصبح الشيفرة كما يلي:
‎‎
وكانت هذه هي الخطوة الأولى في تعريف الخريطة. والخطوة الثانية هي تحديد التفاصيل.


لنقم بإخبار المتصفح أننا نريد خريطة تحمل الإسم ourmap

...
<‎/MAP>

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



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







<‎/MAP>
ومع ذلك فهذا ليس كل شيء لأننا نحتاج أولاً لتحديد شكل كل منطقة ونستخدم لهذا الغرض الخاصية SHAPE ومن ثم نحتاج لتحديد موقع كل منطقة وهذا يتم بالخاصية COORDS وأخيراً بما أن كل منطقة تمثل وصلة تشعبية وتشير إلى عنوان موقع ما فمن البديهي أن نستخدم خاصية تحديد المواقع وهي HREF والتي مرت معنا في الدرس السادس
إلى التفاصيل...
تأخذ الخاصية SH‎APE ثلاثة قيم لتحديد شكل المنطقة الساخنة وهي:
RECT
للأشكال المربعة والمستطيلة المنتظمة
CIRCLE
للدوائر
POLY
للأشكال العشوائية والمضلعة
ولدينا دائرة ومستطيل وشكلين عشوائيين، إذن تصبح الشيفرة كما يلي (دون أهمية لترتيبها):







<‎/MAP>


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

في الشكل الرباعي المنتظم نحتاج لمعرفة إحداثيي الزاوية اليسرى العليا وإحداثيي الزاوية اليمنى السفلى. (أربعة أرقام)

أما في الدائرة فكل ما نحتاجه هو إحداثيي نقطة المركز لهذه الدائرة بالإضافة إلى معرفة نصف قطرها. (ثلاثة أرقام فقط)

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


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

ولنعد الآن إلى خريطتنا:
بالنسبة للشكل المستطيل كانت إحداثيات النقطة العليا هي:(28,255) وإحداثيات النقطة السفلى هي (310,300).
أما الدائرة فكانت إحداثيات نقطة مركزها هي (140,160) ونصف قطرها 175 بيكسل.
أما الشكل المضلع الأيمن (المثلث) فأن إحداثيات زواياه هي (150,10), (300,20), (315,230) وتذكر هنا أن لا أهمية للترتيب في ذكر هذه النقاط. المهم فقط أن تكون الإحداثيات دقيقة إلى حد ما.
وأخيراً فإن إحداثيات النقاط في الشكل المضلع الأيسر (الرباعي) هي: (10,10), (130,10), (110,65), (10,140)
لنقم الآن بكتابة هذه البيانات ضمن الشيفرة السابقة والتي ستصبح كما يلي:







<‎/MAP>


ماذا بقي الآن؟ بقي تعيين العناوين التي ستشير إليها الوصلات التشعبية والتي سنستخدم لها الخاصية HREF. إليك عناوين أربعة من المواقع العربية الممتازة


HREF="http://www.sakhr.com">‎
HREF="http://www.ayna.com">‎
HREF="http://www.pcmag-arabic.com">‎
HREF="http://www.asp.com.lb">‎

<‎/MAP>


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


HREF="http://www.sakhr.com">‎
HREF="http://www.ayna.com">‎
HREF="http://www.pcmag-arabic.com">‎
HREF="http://www.asp.com.lb">‎

<‎/MAP>
سوف نحصل على النتيجة التالية وحاول أن تجربها:



والآن أريد أن أثير مسألتين مهمتين في هذا السياق:
الأولى: ماذا لو أردنا إدراج هذه الخريطة أكثر من مرة في الصفحة، فهل نحتاج إلى تكرار كتابة الشيفرة ... <‎/MAP> مع كل مرة ندرج فيها الصورة؟ الجواب قطعاً لا.!!
فطالما أننا نكتب الخاصية USEMAP فإن المتصفح يقوم بالبحث عن شيفرة الخريطة التي حددنا اسمها مع هذه الخاصية، ومن ثم يطبقها على الصورة المعطاة مهما كان عدد مرات إدراجها.
الثانية: ماذا لو قررنا إلغاء هذه الصورة ووضع صورة أخرى مكانها. هل من مشكلة؟ أيضاً لا يوجد هنا أي مشكلة. لأن تعريف الخريطة بطبيعته غير مرتبط بصورة محددة بعينها. هو فقط يعرف مناطق محددة بالشكل والموقع. ولو دققت النظر في هذا التعريف فلن تجد ما يشير إلى أنها مرتبطة بصورة بعينها، أليس كذلك؟ بل إنك لو أدرجت صورة أكبر مما يجب أو حتى صورة أصغر مما يجب واستخدمت خاصية USEMAP معهما لتشير إلى الخريطة، فلن تواجه أي مشكلة في ذلك. (وأعني هنا مشكلة للمتصفح) لكن بالطبع فالصورة الكبيرة ستحتوي على مناطق دون وصلات تشعبية، والصورة الصغيرة سوف لن تحتوي على بعض الوصلات المعرفة في الخريطة

والخلاصة أن تعريف الخريطة هو تعريف مشاع يوضع مرة واحدة فقط وفي أي مكان داخل الصفحة، وبشرط أن يكون ضمن ... <‎/BODY> وبالمقابل نستطيع إدراج عشرات الصور مهما كانت طبيعتها داخل الصفحة لتكون خرائط صورية تستخدم نفس تعريف هذه الخريطة طالما أننا وضعنا الخاصية ‎USEMAP="#map_name"‎ مع هذه الصور.
ومسك الختام: تحفل الإنترنت بالكثير من البرامج التي تقوم بتصميم الخرائط الصورية بسرعة وسهولة متناهيتين.. فقط تقوم بتحميل الصورة المطلوبة، ثم ترسم الأشكال التي تريدها عليها كما لو كنت تستخدم برنامج الرسام، ومن ثم تكتب عناوين الوصلات التشعبية المطلوبة لكل من هذه الأشكال. وهكذا ببساطة يقوم البرنامج بإيجاد الإحداثيات الخاصة بكل شكل وإنشاء شيفرة الخريطة المطلوبة!! أي أنك خلال دقائق معدودة تستطيع إنشاء أعقد الخرائط الصورية.. لكن بما أنك تهوى الصعب وتتحدى المستحيل فلا اعتقد أنك ستفضل هذا النوع من البرامج. (بالمناسبة، لقد فضلت تأخير كتابة هذه الملاحظة حتى نهاية هذا الدرس، لأني لو وضعتها في البداية لما أكملت هذا الدرس أصلاً ولهرعت للإنترنت للبحث عن مثل هذه البرامج) وعلى أية إليك هذا العنوان لبرنامج رائع يدعى Live Image من شركة Mediatec
أتمنى لك خرائطاً سعيدة دائماً.. وألقاك في الدرس التالي
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://resalahmasriyah.mam9.com
Eng. Ahmedzoubaa
Admin
avatar

عدد المساهمات : 1216
تاريخ التسجيل : 28/08/2010
العمر : 43

مُساهمةموضوع: رد: مقدمة في HTML 4   الخميس 18 نوفمبر 2010 - 8:33

الدرس الرابع عشر
النماذج (1)

أهلاً وسهلاً بك إلى الدرس الرابع عشر من دروس HTML. والذي سيكون الأول من درسين سنتحدث فيهما عن النماذج وكيفية تضمينها في صفحات الويب.
مع أن النماذج تعتبر من المواضيع المتقدمة (وغير السهلة) نوعاً ما في لغة HTML إلا أن معظم مواقع الويب تكاد لا تخلو من وجودها، وذلك لعدة أسباب لعل من أهمها إيجاد إمكانية للتفاعل بين الموقع وصاحبه من جهة والزوار من جهة أخرى...أحيانا قد تحتاج كمصمم لموقع ويب أن تعرف آراء زوار موقعك في مسائل معينة وقد تكتفي برسائل البريد الإلكتروني التي يرسلوها لك، لكن عندما تريد معرفة أشياء محددة بذاتها فإن النماذج هي الخيار الأفضل لك. بالإضافة إلى إمكانية تنظيم البيانات المدخلة من خلالها وسهولة وسرعة استخدامها من قبل زوار الموقع. ومن أبرز الأمثلة على النماذج في مواقع الويب هي دفاتر الزوار وصفحات البحث عن الكلمات أو العبارات داخل المواقع.
لا تكمن صعوبة التعامل مع النماذج في كونها معقدة بحد ذاتها، كلا ... فهي إحدى العناصر التي تدعمها لغة HTML وهي مجرد وسوم عادية مثلها مثل الوسوم التي تعاملنا معها في جميع الدروس السابقة. وبإمكانك إنشاء النماذج في موقعك بنفس السهولة التي تدرج فيها جدولاً أو إطاراً (هذا بالطبع إذا كنت تعتقد أن الجداول والإطارات سهلة) لكن التداخل بينها (وأعني النماذج) وبين لغات البرمجة المتقدمة في الويب مثل JavaScript, CGI هي ما يجعلها تختلف عن سابقيها من الوسوم أو العناصر الأخرى. خاصة إذا احتجت إلى بعض المقاطع البرمجية من هذه اللغات ضمن نماذجك. أما إذا اكتفيت بالإمكانات المتواضعة التي توفرها HTML بالنسبة للنماذج. فما من مشكلة... لأنه سيكون بإمكانك التعامل معها بكل بساطة. وفي هذا الدرس لن نتطرق بالطبع إلى أي من اللغات سوى HTML.
قبل أن نبدأ، ما رأيك بزيارة صفحة (دفتر الزوار) في هذا الموقع للإطلاع على مثال للنماذج، (وربما تود أيضاً التوقيع فيه).
كم شكلاً من أشكال إدخال البيانات يوجد في هذا الدفتر؟ الحقيقة أنه يوجد ستة أشكال هي كالتالي:


Option 1Option 2option 3Option 4Option 5
1 2 3
وهي الأشكال الموجودة في الدفتر فقط. وأود أن ألفت نظرك إلى وجود أشكال أخرى سوف يتم التعامل معها من خلال هذا الدرس.


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

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


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





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





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




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



وبدون الخوض في الأسباب التقنية التي أدت إلى إيجاد هذين النوعين من طرق الترميز أو في أمور برمجية بعيدة عن موضوعنا، فإن الدافع لإستخدام أي من القيمتين هو طبيعة عملية المعالجة التي ستجرى على البيانات أو طبيعة برنامج البريد الإلكتروني الذي ستستقبل هذه البيانات من خلاله (إذا كان يدعم MIME أم لا، وهي إختصار للعبارة Multi-purpose Internet Mail Extentions وهي من المعايير السائدة في الإنترنت والتي تتعلق بنقل جميع أنواع البيانات من صوت وصورة وليس فقط النصوص من خلال البريد الإلكتروني). وما يعنينا هنا هو الفرق بين الطريقتين من حيث طريقة إرسال واستقبال البيانات. فعند استخدام text/plain ستصل البيانات بالشكل التالي:
NAME=Yahya Al-Sharif
Address=Nablus , Palestine
Email=yahya@palnet.com

(الكلمات Name, Address, Email هي أسماء الحقول في النموذج ونقوم نحن بتعريفها أثناء عملية تصميم النموذج أما النصوص الظاهرة بعد إشارة المساواة فهي البيانات المدخلة، وسوف نتحدث عن تعريف أسماء الحقول بعد قليل)
أما عند استخدام application/x-www-form-urlencoded فستصل البيانات بالشكل:
NAME=Yahya+Al-Sharif&Address=Nablus+,+Palestine&Email=yahya@palnet.com
ولك أن تخيل مبلغ الصعوبة في تحليلها إذا احتوت على عشرات الحقول. لذلك تتوفر برامج خاصة تعرف بـِ Formaters تقوم بإعادة ترتيب البيانات المرسلة من خلال النماذج بشكل مفهوم بحيث تصبح كما لو كانت مرسلة بترميز text/plain وإليك أحدها وهو برنامج مجاني يدعى UrlCook. لكن لا تعتقد أن الطريقة الأولى هي الأفضل دائماً فذلك يعتمد كما قلنا على طريقة المعالجة والنقل بالبريد. لذلك لا ضير من أن تجرب الطريقتين لتعرف أيهما أنسب لك.
إذن خلاصة القول: قد تكون أفضل صيغة لتعريف النموذج في حالة أردت استقبال البيانات من موقعك إلى عنوان بريدك الإلكتروني هي:
‎‎
...
<‎/FORM>

وبهذا نكون قد إنتهينا من عملية تعريف النموذج وخصائصه، لكن انتظر فما زلنا في بداية الطريق.


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


ملاحظة: إذا كنت تستخدم Sindbad 3.x فسيبدو الحقل والنص المجاور له بصورة معكوسة، وهي مشكلة ناتجة عن برنامج Netscape الذي يعمل من خلاله





Please enter your address:
حسناً، لقد استخدمت الوسم لتعريف هذا الشكل (هذه إتفقنا عليها مسبقاً) ومن ثم قمت بإضافة الخاصية TYPE لهذا الوسم لتحديد نوع الشكل الذي أريده وأعطيتها القيمة TEXT أي


<‎/‎FORM>

لينتج لدينا هذا الشكل:






فقرة معترضة:
إليك جميع الأشكال (القيم) المستخدمة مع الخاصية TYPE وسوف أتركها الآن بدون تعليق لحين مناقشها لاحقاً بشكل مفصل. مع ملاحظة أن هناك شكلين آخرين ندرجهما بالوسوم