THE Beautiful Programming IN THE Computer

المزيد

أهلاً وسهلاً بك إلى الدرس الثامن عشر من دروس HTML…

من المحتمل أن يكون عنوان هذا الدرس غريباً بعض الشيء بالنسبة لك. وأنه قد أثار لديك بعض التساؤلات عن فحوى هذه الوسوم وعن الهدف من هذا الدرس بشكل عام… ولكي لا تطول تساؤلاتك دعني أوضحها لك كما يلي:-

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

في بدايات الإنترنت، كانت هناك عبارة دارجة تقول

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

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

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

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

هنا لن أتكلم معك في أمور بديهية وأقول لك إن الفكرة الموجودة في موقعك والموضوع المطروح فيه لهما أثر واضح في جذب الزوار إليه. ولن أقول لك بأن طريقة تنظيمه وتنسيقه تسهل عليهم التجول فيه، وبالتالي لن يجدوا صعوبة في إيجاد ما يبحثون عنه. كذلك لن أذكّرك بأن التجديد المستمر لمحتوياته يجعل زوارك يحرصون على العودة مرة بعد مرة… طبعا لن أقول لك كل ذلك!!!!

لا أعرف مدى استخدامك لمحركات البحث للوصول إلى ما تريده في الإنترنت! ولا أعرف أيضاً إن كان استخدامها قد أثار

المزيد

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

فذلكة تاريخية

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

لكن دعنا لا نلم هؤلاء الرواد الذين اتبعوا هذه الطريقة. فكما يقال (مكره أخاك لا بطل) وعذرهم هو عدم وجود متصفحات تستطيع عرض النصوص العربية بطريقة صحيحة. إلى أن قامت شركة صخر بإطلاق متصفحها سندباد الذي جاء معرباً لـ Netscape وشركة مايكروسوفت التي أطلقت MS Internet Explorer ليكونا فاتحة خير بالنسبة لنا كمستخدمين عرب للإنترنت، ولا نستطيع إلا أن نكنّ لهما كل التقدير. فهانحن كما ترى نبحر في الإنترنت ولغتنا العربية تزداد انتشاراً فيها يوماً بعد يوم.

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

ولنبدأ الآن…

لنقم بداية بتعريف صفحة ويب عادية كما إعتدنا:

<HTML>
<HEAD>
<TITLE> … <‎/TITLE>
<‎/HEAD>
 
<BODY>
….
<‎/BODY>
<‎/HTML>

ومن ثم سنقوم بإضافة هذه الشيفرة لها

وذلك في القسم الأعلى أي ضمن الوسمين <HEAD> … <‎/HEAD> ويفضل أن تكتبها بعد وسوم العنوان <TITLE> … <‎/TITLE>

<HTML>
<HEAD>
<TITLE> … <‎/TITLE>
‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256 ">‎
<‎/HEAD>
 
<BODY>
….
<‎/BODY>
<‎/HTML>

قم بكتابة هذه الشيفرة كما هي نصاً وحرفاً. وما يعنينا فيها الآن هي العبارة

charset=windows-1256

فهي لب موضوعنا. أما باقي الشيفرة فسوف نقوم بمناقشتها إن شاء الله في درس لاحق عند الحديث عن الوسوم المتقدمة.

فما الذي تعنيه العبارة السابقة؟؟ بإختصار شديد، هي تحدد قائمة الترميز العربية Code Page التي سيتم عرض صفحتنا من خلالها. أو لنقل أنها تحدد أسلوب التشفير الذي سيستخدمه المتصفح لعرض الأحرف.

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

ولتوضيح الفكرة السابقة (على الأقل كما أفهمها أنا!!!) إليك هذا المثال.
لنفرض أن هناك قائمة ترميز رتّبت فيها الحروف بالشكل ال

المزيد

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

هل سبق لك وأن صادفت عبارة Best Viewed with Netscape Navigator أو Best Viewed with MS Internet Explorer أو (أفضل مشاهدة بواسطة المتصفح نيتسكيب … أو إكسبلورر) عند زيارتك لبعض مواقع الإنترنت? حتماً لقد شاهدت مثل هذه العبارات تذيل الكثير من المواقع. والحقيقة أن مصممي هذه المواقع ليسوا بالضرورة من المعجبين بهذا المتصفح أو ذاك بحيث يعلنوا ولائهم له دون غيره من المتصفحات. لكن بكل بساطة ربما قاموا بتضمين بعض الوسوم أو الخصائص التي يدعمها ذلك المتصفح فقط في صفحاتهم…! بحيث إذا قام زائر ما بالدخول إلى ذلك الموقع مستخدماً متصفحاً آخر غير الموصى به فلن يشاهد نفس النتيجة التي يشاهدها زائر آخر يستخدم المتصفح المطلوب. (طبعاً لا أستطيع أن أعمم هذا لأن هناك العديد من المصممين الذين يفضلون فعلاً متصفحاً عن غيره سواءً قاموا بتضمين الوسوم الخاصة به أم لا)
 
نعم، يوجد هناك العديد من الوسوم في لغة HTML التي قامت الشركات المنتجة للمتصفحات كمايكروسوفت ونيتسكيب بتطويرها بحيث تعمل على متصفحها الخاص دون غيره من المتصفحات Browser Specific Tags (من قال لك أن الشركات الكبرى تتعامل مع بعضها البعض كالكبار). وقد يصل الأمر أحياناً إلى وجود وسوم موحدة تدعمها جميع المتصفحات لكن طريقة تنفيذ وعرض هذه الوسوم هي التي تختلف. وأذكرك بما قلناه في الدرس الرابع عند الحديث عن القوائم. فقد شاهدنا كيف أن كلا المتصفحين يدعمان الوسم <UL> والخاصية TYPE لكنهما يختلفان على القيم التي تدرج معهما. وهذا مثال واحد فقط على هذا الإختلاف.

و

المزيد

أهلاً وسهلاً بك إلى الدرس الخامس عشر من دروس HTML. وهو الثاني من درسين حول النماذج. لقد قمنا في الدرس السابق بمناقشة الوسوم الأساسية للنماذج وتعلمنا كيفية إدراج النماذج في صفحات الويب. كما قمنا بمناقشة بعض أشكال إدخال البيانات في النموذج وهي Text, Password, Hidden هل تذكر كيف نقوم بتعريفها؟ راجع الدرس السابق إن أردت المزيد من التوضيح، وإلا هيا بنا نكمل ولندخل في الموضوع مباشرة.

سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع: Radio, Checkbox وقائمة الإختيار

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

وكمثال، لنفرض أنني أريد أن أسأل الزائر عن المتصفح الذي يستخدمه (كما هو موجود في دفتر الزوار على شكل قائمة إختيار) لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكل RADIO وذلك بالشكل التالي:(أود أن أذكرك أن عناصر النموذج تظهر بشكل معكوس إذا كنت تستخدم Sindbad 3.0)

فكيف ننشيء مثل هذه القائمة؟ … حسناً، لنبدأ من الصفر ونعرّف نموذجاً

<FORM>
 
<‎/FORM>

ثم لنقم بتعريف هذا الشكل، هل تذكر الوسم الخاص بذلك؟ إنه <INPUT>

<FORM>
‎<INPUT TYPE="radio">‎
<‎/FORM>

لكن بما أن هناك أربعة مدخلات، إذن نحتاج إلى أربعة وسوم

<FORM>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<‎/FORM>

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

<FORM>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<‎/FORM>

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

الخطوة التالية هي إعطاء قيمة لكل مدخلة في هذه القائمة وذلك حسب ما نراه مناسباً، إذن حان الوقت لاستخدام الخاصية VALUE:

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <BR>
<‎/FORM>

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

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> Sindbad 4.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<‎/FORM>

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

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4" CHECKED>
Sindbad 4.0‎<BR>‎
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<‎/FORM>

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

browser=Msie3

نأتي الآن إلى الشكل الثاني من أشكال الإختيار من متعدد والذي يدعى CHECKBOX. ظاهرياً لا يختلف هذا الشكل عن الشكل الذي سبقه، لكن عملياً هناك اختلافات جذرية من حيث المفهوم والتعريف. وأنا أفضّل أن نبقى على استخدامنا للمثال السابق حتى يسهل علينا تمييز الفروق.

قبل أن نستمر قم بالنقر على أكثر من حقل في القائمة السابقة وأنظر ماذا سيحدث؟ إن باستطاعتك اختيار أكثر من حقل في نفس الوقت! وهذا هو الفرق الأول بين CHECKBOX و RADIO ففي RADIO يمكن اختيار حقل واحد فقط ليس أكثر.
لنقم الآن بتعريف هذه الحقول، وتسميتها بشكل مباشر ومن ثم سنعلّق عليها:

<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"> Sindbad 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"> MS Explorer 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0 <BR>
<‎/FORM>

ماذا تلاحظ؟ أولاً لقد أسندنا القيمة checkbox للخاصية TYPE. ثم أعطينا لكل حقل في القائمة إسماً مميزاً في الخاصية NAME يختلف عن باقي الحقول. أما الخاصية VALUE فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل.

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

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

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

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

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

والآن إلى العمل

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

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

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

 

وبدون الخوض في الأسباب التقنية التي أدت إلى إيجاد هذين النوعين من طرق الترميز أو في أمور برمجية بعيدة عن موضوعنا، فإن الدافع لإستخدام أي من القيمتين هو طبيعة عملية المعالجة التي ستجرى على البيانات أو طبيعة برنامج البريد الإلكتروني الذي ستستقبل هذه البيانات من خلاله (إذا كان يدعم 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=

المزيد

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

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

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

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

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

هل أنت مستعد؟ لننطلق إذن.

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

وهذه هي الشيفرة الخاصة بإدراجها

‎‎<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"‎>‎

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

ما رأيك أن نسمي الخريطة باسم ourmap. عندها سوف تصبح الشيفرة كما يلي:

‎‎<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0" USEMAP="#ourmap"‎>‎

وكانت هذه هي الخطوة الأولى في تعريف الخريطة. والخطوة الثانية هي تحديد التفاصيل.

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

‎<MAP NAME="ourmap">‎
…
<‎/MAP>

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

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

والسؤال الآن هو، كيف نحدد هذه المناطق باستخدام HTML وكيف يمكن للمتصفح أن يميزها دون غيرها؟ والجواب هو استخدام الوسم <AREA> والذي يدرج ضمن الوسم السابق وبنفس عدد المناطق الساخنة التي نريدها.

‎<MAP NAME="ourmap">‎

<AREA>
<AREA>
<AREA>
<AREA>

<‎/

المزيد

أهلاً وسهلاً بك إلى الدرس الثاني عشر من دروس 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> والذي يقوم بالتحكم في نهايات الأسطر (أي أنه ينهي السطر الحال

المزيد

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

بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما <FRAMESET> والذي يوضع بدلاً من <BODY> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و <FRAME> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما.

وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة (والتي قمت بتوضيحها هنا). فمثلاً لدينا أربع خصائص للوسم <FRAMESET> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين Netscape, MS Explorer. وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت.

أولى هذه الخصائص هي FRAMEBORDER وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها:

‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎
    ‎<FRAME SRC="frame1.html">‎
    ‎<FRAME SRC="frame2.html">‎
    ‎<FRAME SRC="frame3.html">‎
    ‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>
  *  

أما الخصائص الثلاث الأخرى فهي:

• BORDER: تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. (‎BORDER="n"‎) وتعمل فقط مع Netscape

• BORDERCOLOR: لإضافة لون للحدود (‎BORDERCOLOR="rrggbb"‎) وتعمل مع Netscape أيضاً.

• FRAMESPACING: لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل (FRAMESPACING="n"‎) وهي تعمل مع MS Explorer.

أما الخصائص المستخدمة مع الوسم <FRAME> فهي كالتالي:

• MARGINHEIGHT: تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل).

  ‎MARGINHEIGHT="n"‎

• MARGINWIDTH: تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل).

  ‎MARGINWIDTH="n"‎

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

المزيد