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

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

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

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

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

1 2 3

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

---

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

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

<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

وبدون الخوض في الأسباب التقنية التي أدت إلى إيجاد هذين النوعين من طرق الترميز أو في أمور برمجية بعيدة عن موضوعنا، فإن الدافع لإستخدام أي من القيمتين هو طبيعة عملية المعالجة التي ستجرى على البيانات أو طبيعة برنامج البريد الإلكتروني الذي ستستقبل هذه البيانات من خلاله (إذا كان يدعم 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 ACTION="mailto:email@domain.com" METHOD="post" ENCTYPE="text/plain">‎
...
<‎/FORM>

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

---

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

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

Please enter your address:

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

<FORM ...‎>
‎<INPUT TYPE="text">‎
<‎/‎FORM>

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

---

فقرة معترضة: إليك جميع الأشكال (القيم) المستخدمة مع الخاصية TYPE وسوف أتركها الآن بدون تعليق لحين مناقشها لاحقاً بشكل مفصل. مع ملاحظة أن هناك شكلين آخرين ندرجهما بالوسوم <SELECT>, <TEXTAREA>
‎<INPUT TYPE="text">‎
‎<INPUT TYPE="password">‎
‎<INPUT TYPE="hidden">‎
‎<INPUT TYPE="radio">‎
‎<INPUT TYPE="checkbox">‎
‎<INPUT TYPE="submit">‎
‎<INPUT TYPE="reset">‎
‎<INPUT TYPE="button">‎

---

أرجو أن أكون قد وضحت لك الآن وظيفة الخاصية TYPE وجميع القيم المستخدمة معها
ونعود الآن إلى مثالنا.. الخاصية الثانية المستخدمة مع <INPUT> هي NAME وتستخدم لتسمية حقل البيانات حيث قمت بإعطاء الإسم address لهذا الحقل في المثال. (لك كل الحرية في إعطاء الإسم الذي تريده للحقل). والحقيقة أن هذا الإسم يعرّف الحقل في داخل النموذج نفسه، بحيث يمكن استخدامه فيما بعد للحاجات البرمجية وضرورات المعالجة إن وجدت من قبل البرامج التي قد تضيفها كمصمم للموقع. وحتى عندما تريد أن يُرسل النموذج إليك بالبريد فإن حقوله تعرّف بالاسم الذي أدرجته لها من خلال هذه الخاصية. (لاحظ ما قلتُه سابقاً عن تعريف أسماء الحقول عندما تحدثنا عن الترميز والطرق التي تصل بها محتويات النموذج). وكما ترى لا يوجد (حتى الآن) ما يدل على أن هذا الحقل يختص بإدخال العنوان.

<FORM ...‎>
‎<INPUT TYPE="text" NAME="address">‎
<‎/‎FORM>

أما العبارة Please enter your address : فهي مجرد عبارة توضيحية أضفتها ليعرف الزائر ما الذي يجب عليه كتابته وتستطيع صياغة هذه العبارة كما تريد. ففي كل الأحوال ليس لها علاقة بجوهر النموذج نفسه بعكس الخاصية NAME.

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address">‎
<‎/‎FORM>

Please enter your address :

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

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine">‎
<‎/‎FORM>

Please enter your address :

قد نحتاج أحياناً إلى تحديد حجم الحقل ولذلك نستخدم الخاصية SIZE مع الرقم الذي نريده كحجم للحقل، لنجرب الرقم 40

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine" SIZE="40">‎
<‎/‎FORM>

Please enter your address :

أو لنجرب الرقم 10 أيضاً

Please enter your address :

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

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine"‎
SIZE="40" MAXLENGTH="30">‎
<‎/‎FORM>

Please enter your address :

حاول الكتابة في هذا الحقل لأكثر من 30 حرفاً وأنظر ماذا سيحدث?

إنتهينا الآن من خصائص الوسم INPUT فما رأيك بإجمالها مرة أخرى؟ حسناً، هذه هي:

• TYPE: لتحديد نوع (شكل) حقل البيانات.
• NAME: لتعيين اسم لحقل البيانات.
• VALUE: لتعيين قيمة إفتراضية (مبدئية) لحقل البيانات.
• SIZE: لتحديد حجم حقل البيانات.
• MAXLENGTH: لتعيين الحد الأقصى لعدد الحروف المدخلة في الحقل.

---

النوع الثاني من الحقول المستخدمة في النماذج هو حقل password وهو يشبه الحقل text من حيث الخصائص تماماً غير أن مدخلاته تظهر على شكل ****** مهما كانت، وهو الفرق الوحيد بينهما. وربما تكون قد استنتجت الآن أن هذا النوع من الحقول يستخدم عندما يوجد حاجة لإدخال كلمة سر من قبل الزائر في النموذج

‎<FORM ...>‎
Please enter your name :
‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎
Please enter your passwod :
‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎
<‎/‎FORM>

Please enter your name :
Please enter your password :

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

---

نأتي الآن إلى النوع الثالث من أنواع الحقول وهو hidden أي الحقل المخفي. وكما نستنتج من اسمه فهو لن يظهر ضمن النموذج. وهذا مثال:

‎<FORM ...>‎
Please enter your name :
‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎

‎<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">‎

Please enter your passwod :
‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎
<‎/‎FORM>

Please enter your name :
Please enter your passwod :

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

في النموذج الأول ...

‎<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">‎

في النموذج الثاني ...

‎<INPUT TYPE="hidden" NAME="my forms" VALUE=" form2">‎

في النموذج الثالث ...

‎<INPUT TYPE="hidden" NAME="my forms" VALUE=" form3">‎

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

my forms=form1 أو
my forms=form2 أو
my forms=form3

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

---

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

‎<FORM ...>‎
‎<TABLE BORDER="0">‎
<TR>
<TD>Please enter your name : <‎/TD>
<TD>
‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎
<‎/‎TD>
<‎/TR>

<TR>
<TD>Please enter your password :<‎/TD>
<TD>
‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎
<‎/TD>
<‎/‎TR>
<‎/TABLE>
<‎/‎FORM>

وكما ترى تحتاج إلى القليل من العمل الإضافي لكنك بالمقابل ستحصل على النتيجة التالية

Please enter your name :
Please enter your password :

هكذا أفضل... أليس كذلك؟

---

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

الدرس الخامس عشر النماذج (2)

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

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

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

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

Sindbad 3.0
Sindbad 4.0
Ms Explorer 3.0
Ms Explorer 4.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>

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

وهناك خاصية تتعلق بهذا النوع من الحقول، وهي أنك إذا أردت أن يظهر أحدها وقد تم اختياره بشكل تلقائي فعليك بإضافة الخاصية 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>

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

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

browser=Msie3

---

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

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

قبل أن نستمر قم بالنقر على أكثر من حقل في القائمة السابقة وأنظر ماذا سيحدث؟ إن باستطاعتك اختيار أكثر من حقل في نفس الوقت! وهذا هو الفرق الأول بين 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 فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل.

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

كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك النتيجة بالشكل التالي:

Sind4=Yes
Msie4=Yes

كما نستطيع أيضاً تعليم بعض الحقول بصورة تلقائية كما فعلنا مع RADIO باستخدام نفس الخاصية CHECKED

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

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

---

النوع الثالث من أشكال الإختيار من متعدد هو قوائم الاختيار، وهذا النوع سوف يقودنا إلى وسوم جديدة من وسوم التعريف والتي ستستخدم بدلاً من <INPUT> وهي

<SELECT>
    <OPTION>
    <OPTION>
    <OPTION>
    .....
    .....
<‎/SELECT>

بحيث أن <SELECT> ... </‎SELECT> تحددان بداية ونهاية القائمة، والوسم <OPTION> الذي يوضع دائما بينهما يستخدم لتحديد كل عنصر من عناصر القائمة. لنعد إلى مثالنا السابق لنرى كيف يمكن وضع الخيارات في قائمة

<FORM>
<SELECT>
    ‎<OPTION> Sindbad 3.0‎
    ‎<OPTION> Sindbad 4.0‎
    ‎<OPTION> MS Explorer 3.0‎
    ‎<OPTION> MS Explorer 4.0‎
<‎/SELECT>
<‎/FORM>

وبذلك تكون النتيجة هي:

    

وكالمعتاد لا يخلو الأمر من وجود خصائص تحدد طريقة عمل هذه الوسوم. وهناك خصائص مشتركة عرفناها في الأشكال السابقة سيتم استخدامها هنا أيضاً كما يوجد خصائص جديدة تتعلق فقط بهذا الشكل من حقول البيانات. فبالنسبة لـِ <SELECT> يوجد الخاصية NAME وهي كما تعلم تحدد اسم القائمة. كما توجد الخاصية SIZE التي تحدد حجم (أو بالأحرى) ارتفاع القائمة، وبالتالي عدد البيانات الظاهرة فيها. وهي تأخذ أي قيمة عددية صحيحة.

<FORM>
‎<SELECT NAME="browser" SIZE="2">‎
    ‎<OPTION> Sindbad 3.0‎
    ‎<OPTION> Sindbad 4.0‎
    ‎<OPTION> MS Explorer 3.0‎
    ‎<OPTION> MS Explorer 4.0‎
<‎/SELECT>
<‎/FORM>

    

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

<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
    ‎<OPTION> Sindbad 3.0‎
    ‎<OPTION> Sindbad 4.0‎
    ‎<OPTION> MS Explorer 3.0‎
    ‎<OPTION> MS Explorer 4.0‎
<‎/SELECT>
<‎/FORM>

    

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

أما الخصائص المستخدمة مع الوسم <OPTION> فهي VALUE والتي استخدمناها من قبل وسنستخدمها الآن لإعطاء قيمة لكل حقل بيانات في القائمة. وكذلك الخاصية SELECTED والتي نكتبها مع أي <OPTION> نريد أن يظهر وقد تم اختياره بصورة تلقائية.

<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
    ‎<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0‎
    ‎<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad 4.0‎
    ‎<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0‎
    ‎<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0‎
<‎/SELECT>
<‎/FORM>

    

---

الشكل التالي من أشكال حقول البيانات يدعى TEXTAREA

وهو المستخدم عادة لكتابة التعليقات الحرة في النموذج ويتم إدراجه بكتابة الوسوم

<TEXTAREA> ... <‎/TEXTAREA>

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

‎<TEXTAREA NAME="comments">‎
‎Hello, please write your comments here :-)‎
<‎/TEXTAREA>

Hello, please write your comments here :-)

كما توجد خصائص لتحديد مساحة هذا الحقل عرضاً وارتفاعاً، وهي COLS التي تحدد العرض و ROWS التي تحدد الإرتفاع

‎<TEXTAREA NAME="comments" COLS="30" ROWS="6">‎
<‎/TEXTAREA>

أما الخاصية الأخيرة هنا فهي WRAP التي تحدد طريقة إلتفاف النص المكتوب داخل الحقل (لا تعمل هذه الخاصية مع MS Explorer 3.0) وهناك ثلاثة قيم تأخذها وهي على النحو التالي:

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

‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="virtual">‎
<‎/TEXTAREA>

physical : تعني أن النص سيلتف على عدة أسطر وسيصلك أيضاً على هذا النحو عند إرساله

‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="physical">‎
<‎/TEXTAREA>

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

‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="off">‎
<‎/TEXTAREA>

---

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

‎<INPUT TYPE="submit">‎

لاحظ أن Submit أو ( Submit Query في Netscape) ظاهرة على الزر وهي العبارة الإفتراضية، فإذا أردت تغييرها فعليك باستخدام الخاصية VALUE لهذا الغرض

‎<INPUT TYPE="submit" VALUE="Press here to send the form">‎

---

في حالة كان زوار موقعك من النوعية المترددة من الناس والذين قد يغيرون آرائهم في آخر لحظة، يمكنك أن تتيح لهم إمكانية مسح ما كتبوه في النموذج وإلغاء الأمر، وذلك باستخدام reset كنوع TYPE للوسم <INPUT> بنفس طريقة التعريف والخصائص المستخدمة مع submit.

‎<INPUT TYPE="reset" VALUE="Forget about it">‎

---

الشكل الأخير من أشكال البيانات في النماذج والمدرج مع الوسم <INPUT> هو button والذي يقوم بإنشاء زر ضمن النموذج، وهو مرتبط بالنماذج التي تحتوي على نصوص برمجية (أو برامج مكتملة) من لغات متقدمة مثل JavaScript كونه يستخدم لتشغيل هذه البرامج وإطلاقها. وطبعاً هناك طرق معينة لربطها مع البرامج وليس هنا المجال لطرحها. لكن مبدئياً أقول إن طريقة الإدراج والتعريف هي ذاتها المستخدمة مع reset, submit.

‎<INPUT TYPE="button" VALUE="This is a sample button">‎

---

---

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

الدرس السادس عشر المتصفحات والوسوم الخاصة

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

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

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

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

فما الحل إذن؟

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

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

قبل أن نبدأ باستعراض الوسوم لا بد لي من التنويه بأني استخدم برنامجي Sindbad 3.x و Ms Internet Explorer 3.x وعندما أتحدث عن الوسوم والخصائص وتوافقها مع المتصفحات فأنا أعني هذين المتصفحين وأعني رقم الإصدار أيضاً (‎3.x). وذلك لأنهما لا زالا الأكثر رواجاً (حتى تاريخ كتابة هذا الدرس)، سواء بيننا كمستخدمين عرب أو بشكل عام بين مستخدمي الإنترنت عالمياً. ومن المحتمل إذا كنت تستخدم إصداراً أحدث لأحد هذه البرامج أن تلاحظ أنه قد أصبح يدعم الوسوم الخاصة بالبرنامج الآخر (وهذا بالطبع ليس ذنبي، بل ذنب أولئك الذين يطورون برامجهم بشكل دائم ومتسارع ولا يتركوننا نلتقط أنفاسنا بين كل إصدار وآخر). وعلى أية حال إذا كنت ممن يقبلون النصيحة المجانية، حاول دائماً تصميم صفحاتك مع افتراض أسوأ الإحتمالات أي واضعاً نصب عينيك أن زوار موقعك يستخدمون متصفحات قديمة. وبذلك تضمن أن معظمهم إن لم يكن جميعهم سيشاهدون موقعك بنفس الصورة وبدون أي مشاكل تتعلق بالتوافقية بين المتصفحات والوسوم.

---

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

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

MS Explorer 1	Netscape Navigator
MS Explorer 2

الدرس السابع عشر الويب واللغة العربية

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

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

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

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

---

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

ولنبدأ الآن...

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

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

<BODY>
....
<‎/BODY>
<‎/HTML>

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

‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎

وذلك في القسم الأعلى أي ضمن الوسمين <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 وتطبيقاته (أي قبل أن يكون هناك برنامج ويندوز المعرّب) فلا بد أنك تعرف، وربما تعاملت مع برامج التعريب القديمة التي واكبت تلك الفترة كبرنامج النافذة وريم ونظم صخر ... إلخ. حيث أنه في تلك الفترة كانت هناك عدة جهات أخذت على عاتقها مهمة تعريب الحاسوب وأنظمة تشغيله. لكن المشكلة كانت في في غياب التنسيق بين هذه الجهات. وكانت النتيجة هي إصدار العشرات من برامج التعريب التي تختلف عن بعضها البعض في طريقة ترتيب قائمة الرموز والحروف وبالتالي اختلف أسلوب تشفير النصوص وعرضها. بمعنى أن النص المكتوب من خلال برنامج "النافذة" سوف يبدو كمجموعة من الحروف والكلمات المبهمة وكأنها مكتوبة بلغة أخرى باستخدام برنامج آخر مثل "ريم".

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

ي

و

هـ

ن

م

ل

ك

ق

ف

غ

ع

ظ

ط

ض

ص

ش

س

ز

ر

ذ

د

خ

ح

ج

ث

ت

ب

ا

وأننا أردنا كتابة كلمة "سندباد" من خلالها...

ثمّ لنفرض الآن أننا قمنا باستعراض الكلمة باستخدام برنامج يتعامل مع قائمة ترميز مختلفة وبالترتيب التالي:

ر

و

ز

ظ

ش

س

ي

ب

ل

ا

ت

ن

م

ك

ط

ذ

ض

ص

ث

ق

ف

غ

ع

هـ

خ

ح

ج

د

بالمقارنة بين النظامين سوف نشاهد أن كلمة "سندباد" في النطام الأول قد أصبحت "ضظفجدف"!!! في النظام الثاني

ي

و

هـ

ن

م

ل

ك

ق

ف

غ

ع

ظ

ط

ض

ص

ش

س

ز

ر

ذ

د

خ

ح

ج

ث

ت

ب

ا

ر

و

ز

ظ

ش

س

ي

ب

ل

ا

ت

ن

م

ك

ط

ذ

ض

ص

ث

ق

ف

غ

ع

هـ

خ

ح

ج

د

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

---

والآن عودة إلى الإنترنت... لقد ألقت المشكلة سالفة الذكر بظلالها على نظم إنترنت ومتصفحاتها المعرّبة (وإن كان ذلك بصورة أقل تأثيراً عمّا سبق). لذلك تجد أن من الميزات التي تحرص شركات صخر وميكروسوفت على إضافتها للمتصفحات هي ميزة تعدد قوائم الترميز التي يستطيع المتصفح دعمها. ومن الأمثلة على هذه القوائم: Windows-1256, DOS-720, ISO-8859-6 وأكثرها استخداماً وانتشاراً هي Windows-1256. وعادة تملك المتصفحات القدرة على اكتشاف قائمة الترميز المطبقة على الصفحة بصورة تلقائية. لكن من الحكمة أن نقوم نحن دائماً بتحديد هذه القائمة ليس بسبب قلة الثقة في المتصفحات وإنما من باب الإحتياط الواجب دائماً في عالم الإنترنت وتصميم الصفحات...
إذن، هل عرفت الآن السبب في إضافة الشيفرة charset=windows-1256 إلى بداية الصفحة؟

---

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

في المتصفح MS Explorer تجد أيقونة صغيرة في الزاوية اليمنى السفلى لنافذة المتصفح. فإذا قمت بالنقر عليها ستظهر قائمة بأسماء قوائم الترميز التي يدعمها.

وما عليك الآن إلا أن تختار القائمة التي تعتقد أنها المناسبة وإذا أخطأت قم باختيار قائمة أخرى وهكذا.

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

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

---

لا يخلو الموضوع هنا من الحديث عن الإختلافات بين المتصفحات في التعامل مع صفحات اللغة العربية. (عدنا ثانية للحديث عن الوسوم والخصائص الخاصة بكل متصفح). ولنبدأ بمناقشة تلك الخاصة بالمتصفح ميكروسوفت إكسبلورر:-

في الدرس الرابع تطرقنا إلى وسم الفقرات <P>. وقلنا أن إحدى خصائص هذا الوسم هي الخاصية DIR التي تحدد إتجاه النص من خلال القيم rtl و ltr. (وقد طلبت منك أن تبقى متذكراً لها لأننا سنتطرق إليها عند الحديث عن اللغة العربية.) إذن لقد حان الوقت!!. يدعم إكسبلورر هذه الخاصية بشكل كبير، ذلك لأن من ميزاته أنه لا يتعامل مع الصفحة والفقرات المكونة لها كوحدة واحدة بل أنه يتعامل مع كل فقرة على حدة. ويتطلب هذا أن تقوم بتكرار الإعدادات التي تريدها مع كل فقرة بحد ذاتها.

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

<P DIR="rtl" ALIGN="right"> ... <‎/P>

وأن كل فقرة إنجليزية محاطة بالوسوم

<P DIR="ltr" ALIGN="left"> ... <‎/P>

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

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

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

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

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

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

---

خلاصة القول أضعها في النقاط التالية، وكما يقال: في الإعادة إفادة!

في بداية الصفحة ضع الشيفرة التالية كما هي نصاً وحرفاً ‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎ قم بإحاطة كل فقرة عربية من فقرات صفحتك بالوسوم التالية: <P DIR="rtl" ALIGN="right"> ... <‎/P> إذا أردت إدراج فقرات إنجليزية فقم بإحاطة كل منها بالوسوم <P DIR="ltr" ALIGN="left"> ... <‎/P> تستطيع استخدام الوسوم السابقة مع الجداول أيضاً

---

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

وبصراحة مطلقة فقد سببت لي هذه المشكلة كابوساً على مدى عدة أيام متلاحقة، حاولت خلالها تجربة العديد من الحلول. كان من ضمنها أن أقوم بكتابة هذه الرموز بصورة معاكسة علّها تعود إلى رشدها. لكن للسخرية كانت في الحالة المعكوسة تبقى كما هي في مكانها. وأخيراً جاء الحل السحري بعد أن أرسلت إلى شركة صخر أستفسر عن هذه المشكلة. وكان هذا الحل بكتابة رمز يسمى OXFD وهو رمز الفراغ باللاتيني، وتتم كتابته بالضغط على المفتاح ALT في لوحة المفاتيح مع الأرقام (من اليسار إلى اليمين) 0253 وذلك قبل أي رمز "مشاغب" لا يظهر في مكانه الصحيح. وبذلك تم حل كل الإشكالات التي واجهتها مع هذه الرموز.

إذن أستطيع الآن أن أضيف نقطة خامسة إلى النقاط السابقة:

استخدم ALT+0253 قبل الرموز أو الحروف الإنجليزية التي لا تظهر في مكانها الصحيح عند عرضها من خلال المتصفحات

---

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

الدرس الثامن عشر وسوم META ومحركات البحث

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

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

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

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

Build it, and they will come

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

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

إذن فمحركات البحث هي الخطوة الأولى

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

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

كيف لك أن تجعل الناس يأتون إلى موقعك، وأن يجدوا طريقهم إليه بسهولة ويسر؟ وبشكل أعمّ ... كيف تستطيع أن تسوّق موقعك؟؟؟ هذا هو السؤال

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

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

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

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

محركات البحث Search Engines

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

الفهارس أو أدلة البحث Directories

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

ولكي أوضح لك الفرق بين كلا الموقعين إليك المثال العملي التالي:

عندما قمت بالبحث عن المواقع الخاصة بمدينتي نابلس باستخدام Yahoo كانت نتيجة البحث ثلاثة مواقع فقط، وكانت إحدى النتائج كما يلي:

Regional: Regions: Middle East: Countries and Regions: Palestinian Authority: Cities and Regions: Nablus

وكما ترى فإن تسلسل البحث انتقل من Regional إلى Region إلى Middle East وهكذا نزولاً إلى أن وصل إلى نابلس

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

---

والآن لنبدأ حديثناً عن وسوم META فما هي هذه الوسوم ؟؟؟
باختصار شديد، هي وسوم تدرج ضمن صفحات الويب، وبالتحديد في أعلاها وضمن المقطع <HEAD> ... <‎/HEAD> وتستخدم لوصف الصفحة أو الموقع بشكل عام، من حيث المحتويات والكلمات الرئيسية أو المفتاحية والمؤلف وغيرها من المعلومات التي قد نعتبرها توثيقية. كما أنها تفيد في عملية التصنيف التي تجرى من قبل محركات البحث. (ولاحظ أنّي قلت محركات البحث ولم أقل أدلة البحث) فالحقيقة أن محركات البحث مثل Altavista, Hotbot, Infoseek هي التي تستفيد فقط من هذه الوسوم وتلجأ إليها في عملية تصنيف الموقع ولا تستفيد منها الأدلة. أي أن Yahoo لا يتعامل معها أبداً. ومع ذلك فإن نشرك لصفحاتك على الإنترنت دون وضع هذه الوسوم ضمنها يعتبر إغفالاً لجانب مهم من جوانب إنشاء المواقع على الويب. ولكن ... (عادة عندما تظهر "لكن" في منتصف الحديث، فإن هناك أخباراً غير سارة في الطريق) لا تعتبر هذه الوسوم حلاً سحرياً لمسألة محركات البحث، صحيح أنها تزيد من إحتمالات إدراج موقعك في هذه المحركات، وأنها تساعد المحركات على تصنيف صفحاتك بالطريقة التي تراها أنت مناسبة. لكن سيبقى أمامك خطوات أخرى لإكمال هذه المهمة.

---

لقد حان الوقت للتّكلم بلغة HTML... وأبدأ بالقول إن الوسم <META> هو وسم مفرد. وهو يأخذ الخصائص التالية:

HTTP-EQUIV

تعتبر هذه الخاصية مكافئةً للوسم <HEAD> الذي يعرف الصفحة ككل. (والحقيقة أن اسمها يدل على ذلك) وبدون الدخول في تفاصيل جانبية، نستطيع أن نقول أنها تحدد خصائص الصفحة ككل.

وإذا كانت لديك ذاكرة قوية فسوف تدرك أننا قمنا بالفعل باستخدام هذه الوسوم مسبقاً!! وكان ذلك في الدرس السابق عندما حددنا صفحة الترميز العربية التي سيتم عرض الصفحة من خلالها وكان ذلك بالشكل التالي:

‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎

NAME

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

CONTENT

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

في واقع الأمر فإن لهذه الخصائص الكثير من القيم. لكنها بكل بساطة لا تعنينا في شيء، فمعظم هذه القيم توصف بأنها Server Side أي يتم التعامل معها على مستوى المزود وليس على مستوى جهاز المستخدم Client Side ولا تهم مصممي صفحات بسطاء مثلنا. وما يعنينا بالدرجة الأولى هي القيم التالية:

• مع الخاصية HTTP-EQUIV...
  القيمة Content-Type والتي تعني نوعية المحتويات. وأذكرك مرة أخرى أننا تعاملنا معها مسبقاً ... ثم باستخدام الخاصية Content قمنا بتحديد طبيعة هذه المحتويات على أنها text/html أي نصوص لغة HTML وأن صفحة ترميزها هي Windows-1256 ...ولن نحتاج أكثر من ذلك مع هذه الخاصية.
• مع الخاصية NAME... نستخدم
  • القيمة keywords لتحديد الكلمات المفتاحية للصفحة.
    ‎<META NAME="keywords" ... >‎
    ثم نستخدم الخاصية Content لتحديد هذه الكلمات. وعلى سبيل المثال إليك الشيفرة التالية التي أستخدمها في صفحات هذا الموقع
    ‎<META NAME="keywords"CONTENT="html,webpage design,psp,paint shop pro,arabic site">‎
    ولا ضرر في تكرار بعض أو كل الكلمات المفتاحية لثلاث أو أربع مرات للتأكيد عليها
    ‎<META NAME="keywords"CONTENT="html,html,html,html,webpage design,psp,paint shop pro,arabic site">‎
  • القيمة description لتوصيف الصفحة، وذلك بعبارات قصيرة تلخص محتويات الصفحة والهدف منها.
    ‎<META NAME="description" CONTENT="Html and Paint Shop Pro tutorials in Arabic,learning web page design in Arabic">‎
  • القيمة author لتوثيق اسم المؤلف أو صاحب الموقع
    ‎<META NAME="author" CONTENT="Abu Al-Abed">‎
  • القيمة copyright لسرد حقوق النشر الخاصة بالصفحة
    ‎<META NAME="copyright" CONTENT="....">‎

---

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

<HEAD>
<TITLE> ... <‎/TITLE>
‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎
‎<META NAME="keywords" CONTENT=" ... ">‎
‎<META NAME="description" CONTENT=" ... ">‎
‎<META NAME="author" CONTENT=" ... ">‎
‎<META NAME="copyright" CONTENT=" ... ">‎
<‎/HEAD>

---

هل هذا يكفي؟ وأعني هل تكفي هذه الوسوم لتكون من الأوائل دائماً على صفحات محركات البحث؟ كما أسلفت هناك دائماً جهود إضافية يجب عليك بذلها. وهذه المرة عليك التوجه إلى هذه المحركات والبحث عن الوصلات التشعبية الخاصة بإضافة المواقع الجديدة. في Altavista ستجد أنها تسمى Add Page. وفي Infoseek  و  Excite و  HotBot ستجدها Add URL أما في Yahoo فهي How To Suggest a Site? كذلك ستجد مثل هذه الوصلات في المواقع العربية وعادة تعرف بـِ أضف موقعك.
على أية حال قم بالنقر عليها لكي تقودك إلى نموذج بسيط عليك ملؤه ببعض المعلومات عن موقعك (لا تخف فإن طريقة التعامل مع هذه النماذج هي أبسط مما تتصور). لكن لا تتوقع أن ترى موقعك وقد تمت إضافته في الدقائق التالية لهذه العملية، فهذا يحتاج في معظم الأحوال إلى عدة أيام.

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

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

وفاة عمر سليمان بأمريكا

وفاة عمر سليمان بأمريكا

عمر سليمان

منذ 10 دقيقة 5 ثانية

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

اقرأ المقال الأصلي علي بوابة الوفد الاليكترونية الوفد - وفاة عمر سليمان بأمريكا

دراسة تحذر من ارتفاع مستوى مياه البحار والمحيطات

تعليقات: 0 شارك بتعليقك

نشر فى : الثلاثاء 17 يوليو 2012 - 2:30 م
آخر تحديث : الثلاثاء 17 يوليو 2012 - 2:30 م

ارشيفيه

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

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

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

الولايات المتحدة تشهد أسوأ موجة جفاف منذ عام 1956

نشر فى : الثلاثاء 17 يوليو 2012 - 1:30 م
آخر تحديث : الثلاثاء 17 يوليو 2012 - 1:30 م

رويترز قالت الإدارة الوطنية الأميركية للمحيطات والغلاف الجوي، في تقرير نشر في موقعها على الإنترنت، أمس الاثنين، أن موجة الجفاف الحالية في الغرب الأوسط الأميركي تشمل 55 % من الكتلة القارية للولايات المتحدة وهي الأسوأ منذ 1956.

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

نموذج تجريبي روسي لمحرك نووي فضائي يصل للكواكب البعيدة

نشر فى : الأربعاء 18 يوليو 2012 - 9:10 ص
آخر تحديث : الأربعاء 18 يوليو 2012 - 9:10 ص

موسكو - أ ش أ

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

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

ويتوقع أن تنتهي روسيا من صنع نموذج تجريبي في عام 2017، ثم تقرر ما إذا كانت ستصنع مركبة فضاء متميزة تعمل بالمحرك النووي.

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

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

وذكر أن الطائرات حلقت فوق المياه المحايدة بمحاذاة حدود روسيا خلال 4 ساعات تقريبا فوق بحر البلطيق وخلال 6 ساعات فوق البحر الأسود، ورافقتها مقاتلات (سو-27).

وأكد أن الطائرات الروسية التي تقوم بالدوريات المنتظمة بالخارج لا تخترق حدود الدول الأخرى، وأصبحت الطلعات الجوية لطائرات القوات الجوية الروسية التي خصصت لحمل القنابل النووية والصواريخ التي تستطيع أن تحمل رؤوسا نووية، في مناطق بحرية خارج روسيا، روتينية في الفترة الأخيرة.

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