مقدمة في HTML 4

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

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

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

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

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

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

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

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

‎‎‎

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

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

‎‎‎

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

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

‎

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

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

والسؤال الآن هو، كيف نحدد هذه المناطق باستخدام 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>

سوف نحصل على النتيجة التالية وحاول أن تجربها:

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

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

والخلاصة أن تعريف الخريطة هو تعريف مشاع يوضع مرة واحدة فقط وفي أي مكان داخل الصفحة، وبشرط أن يكون ضمن ... <‎/BODY> وبالمقابل نستطيع إدراج عشرات الصور مهما كانت طبيعتها داخل الصفحة لتكون خرائط صورية تستخدم نفس تعريف هذه الخريطة طالما أننا وضعنا الخاصية ‎USEMAP="#map_name"‎ مع هذه الصور.

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

أتمنى لك خرائطاً سعيدة دائماً.. وألقاك في الدرس التالي

أهلاً وسهلاً بك إلى الدرس الرابع عشر من دروس 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 وسوف أتركها الآن بدون تعليق لحين مناقشها لاحقاً بشكل مفصل. مع ملاحظة أن هناك شكلين آخرين ندرجهما بالوسوم , </span></font> </div></td></tr><tr><td height=30>‎<INPUT TYPE="text">‎ </td><td> </td></tr><tr><td height=30>‎<INPUT TYPE="password">‎ </td><td> </td></tr><tr><td height=30>‎<INPUT TYPE="hidden">‎ </td><td> </td></tr><tr><td height=30>‎<INPUT TYPE="radio">‎ </td><td> </td></tr><tr><td height=30>‎<INPUT TYPE="checkbox">‎ </td><td> </td></tr><tr><td height=30>‎<INPUT TYPE="submit">‎ </td><td> </td></tr><tr><td height=30>‎<INPUT TYPE="reset">‎ </td><td> </td></tr><tr><td height=30>‎<INPUT TYPE="button">‎ </td><td> </td></tr></table><br /><br /><div align="right">أرجو أن أكون قد وضحت لك الآن وظيفة الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TYPE</span></font> وجميع القيم المستخدمة معها<br />ونعود الآن إلى مثالنا.. الخاصية الثانية المستخدمة مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><INPUT></span></font> هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> وتستخدم لتسمية حقل البيانات حيث قمت بإعطاء الإسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">address</span></font> لهذا الحقل في المثال. (لك كل الحرية في إعطاء الإسم الذي تريده للحقل). والحقيقة أن هذا الإسم يعرّف الحقل في داخل النموذج نفسه، بحيث يمكن استخدامه فيما بعد للحاجات البرمجية وضرورات المعالجة إن وجدت من قبل البرامج التي قد تضيفها كمصمم للموقع. وحتى عندما تريد أن يُرسل النموذج إليك بالبريد فإن حقوله تعرّف بالاسم الذي أدرجته لها من خلال هذه الخاصية. (لاحظ ما قلتُه سابقاً عن تعريف أسماء الحقول عندما تحدثنا عن الترميز والطرق التي تصل بها محتويات النموذج). وكما ترى لا يوجد (حتى الآن) ما يدل على أن هذا الحقل يختص بإدخال العنوان.</div><font face="arial"><span style="font-size: 9px; line-height: normal"><FORM ...‎><br />‎<INPUT TYPE="text" NAME="address">‎<br /><‎/‎FORM> </span></font><br /><br /> <div align="right">أما العبارة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Please enter your address : </span></font>فهي مجرد عبارة توضيحية أضفتها ليعرف الزائر ما الذي يجب عليه كتابته وتستطيع صياغة هذه العبارة كما تريد. ففي كل الأحوال ليس لها علاقة بجوهر النموذج نفسه بعكس الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME.</span></font> </div><font face="arial"><span style="font-size: 9px; line-height: normal">‎<FORM ...>‎<br />Please enter your address : ‎<INPUT TYPE="text" NAME="address">‎<br /><‎/‎FORM> </span></font><br /><br /><font face="arial"><span style="font-size: 9px; line-height: normal">Please enter your address : </span></font> <div align="right">أما بالنسبة للعبارة الظاهرة داخل الحقل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Nablus, Palestine</span></font> (أو أي عبارة أخرى تريدها) وهي بمثابة القيمة الإفتراضية التي تريدها للحقل، فبالإمكان إظهارها من خلال الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUE.</span></font> وهذه الخاصية تستخدم في الحالات التي نتوقع فيها كتابة قيمة دارجة أو متكررة من قبل معظم الزوار وللتسهيل عليهم يتم تعيينها كقيمة إفتراضية وبالطبع مع توفر إمكانية حذفها وكتابة ما يريدنه بدلاً منها. </div><font face="arial"><span style="font-size: 9px; line-height: normal">‎<FORM ...>‎<br />Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine">‎<br /><‎/‎FORM> </span></font><br /><br /><font face="arial"><span style="font-size: 9px; line-height: normal">Please enter your address : </span></font><div align="right">قد نحتاج أحياناً إلى تحديد حجم الحقل ولذلك نستخدم الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SIZE</span></font> مع الرقم الذي نريده كحجم للحقل، لنجرب الرقم 40 </div><font face="arial"><span style="font-size: 9px; line-height: normal">‎<FORM ...>‎<br />Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine" SIZE="40">‎<br /><‎/‎FORM> </span></font><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal">Please enter your address : </span></font><div align="right">أو لنجرب الرقم 10 أيضاً</div><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal">Please enter your address : </span></font> <div align="right">لا يوجد للخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SIZE</span></font> أي صفة تحكمية بالنسبة لحجم المدخلات التي يمكن للزائر أن يكتبها داخل الحقل. وبعبارة أخرى: صحيح أننا حددنا حجم الحقل لكن ذلك يسري فقط على مظهره على الشاشة. ولا يوجد ما يمنع الزائر من الكتابة بحيث يتجاوز النص حجم الحقل المحدد. وهنا يأتي دور الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MAXLENGTH</span></font> لتتحكم بالحد الأقصى للنص المدخل. </div><font face="arial"><span style="font-size: 9px; line-height: normal">‎<FORM ...>‎<br />Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine"‎ <br />SIZE="40" MAXLENGTH="30">‎<br /><‎/‎FORM> </span></font><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal">Please enter your address : </span></font><div align="right">حاول الكتابة في هذا الحقل لأكثر من 30 حرفاً وأنظر ماذا سيحدث? </div><br /><br />إنتهينا الآن من خصائص الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">INPUT</span></font> فما رأيك بإجمالها مرة أخرى؟ حسناً، هذه هي: <br /><ul><br /><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TYPE: </span></font>لتحديد نوع (شكل) حقل البيانات. </div></li><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME: </span></font>لتعيين اسم لحقل البيانات. </div></li><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUE: </span></font>لتعيين قيمة إفتراضية (مبدئية) لحقل البيانات. </div></li><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SIZE: </span></font>لتحديد حجم حقل البيانات. </div></li><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MAXLENGTH: </span></font>لتعيين الحد الأقصى لعدد الحروف المدخلة في الحقل. </div></li></ul><br /><br /><br /><div align="right">النوع الثاني من الحقول المستخدمة في النماذج هو حقل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">password</span></font> وهو يشبه الحقل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">text</span></font> من حيث الخصائص تماماً غير أن مدخلاته تظهر على شكل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">******</span></font> مهما كانت، وهو الفرق الوحيد بينهما. وربما تكون قد استنتجت الآن أن هذا النوع من الحقول يستخدم عندما يوجد حاجة لإدخال كلمة سر من قبل الزائر في النموذج </div><font face="arial"><span style="font-size: 9px; line-height: normal">‎<FORM ...>‎<br />Please enter your name :<br />‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎<br />Please enter your passwod :<br />‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎<br /><‎/‎FORM> </span></font><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal">Please enter your name : <br />Please enter your password : </span></font><div align="right">لاحظ أنني لم أرغب في كتابة قيم إفتراضية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUES</span></font> للحقول، ولذلك تركتها فارغة وأستطيع أيضاً أن ألغيها نهائياً من الشيفرة. وأنا في هذا المثال أردت أن أوضح لك عدم أهمية كتابة قيمة إفتراضية للحقول في بعض الحالات. </div><br /><br /><div align="right">نأتي الآن إلى النوع الثالث من أنواع الحقول وهو <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">hidden</span></font> أي الحقل المخفي. وكما نستنتج من اسمه فهو لن يظهر ضمن النموذج. وهذا مثال: </div><font face="arial"><span style="font-size: 9px; line-height: normal">‎<FORM ...>‎<br />Please enter your name :<br />‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎<br /> <br />‎<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">‎<br /> <br />Please enter your passwod :<br />‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎<br /><‎/‎FORM> </span></font><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal">Please enter your name : <br /> Please enter your passwod : </span></font><div align="right">لاحظ هنا أن وجود هذا الحقل مثل عدمه بالنسبة لمظهر النموذج، وأن الزائر لن يتعامل معه بل وربما لن يعرف أن هناك حقلاً مخفياً. والسؤال هنا: ما الفائدة من وجود شيء مخفى لا إمكانية لاستخدامه؟ ولكي أجيب على هذا السؤال دعني أطرح لك مثالاً أو حالة قد تواجهك كمصمم صفحات ويب...<br />لنفرض أن لديك ثلاث صفحات تتضمن كل منها نموذجاً ما وأن هذه النماذج متشابهة. وتحتوي على نفس الحقول. وعندما تصلك البيانات كيف ستستطيع تمييز أي من هذه النماذج استخدم لإرسال البيانات؟ بإمكانك إضافة هذا الحقل (الوهمي) وإسناد أي اسم وأي قيمة له في كل نموذج. </div><div align="right">في النموذج الأول ...</div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<INPUT TYPE="hidden" NAME="my forms" VALUE="<font color="#ff0000">form1</font>">‎<br /> <br /></span></font><br /><div align="right">في النموذج الثاني ...</div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<INPUT TYPE="hidden" NAME="my forms" VALUE=" <font color="#ff0000">form2</font>">‎<br /> <br /></span></font><br /><div align="right">في النموذج الثالث ...</div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<INPUT TYPE="hidden" NAME="my forms" VALUE=" <font color="#ff0000">form3</font>">‎<br /> <br /></span></font><br /><div align="right">وبذلك عندما تصلك البيانات المرسلة من قبل أي زائر استخدم أي من النماذج الثلاثة سيصلك أيضا حقل إضافي قمت أنت نفسك بتعبئته سلفاً عندما صممت النموذج وذلك بأحد الأشكال التالية: </div><div align="right"><font face="ARIAL"><span style="font-size: 9px; line-height: normal">my forms=form1 </span></font>أو <br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal">my forms=form2</span></font> أو<br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal">my forms=form3</span></font> </div><div align="right">إذن نستطيع القول أن الحقل المخفي هو لاستخدام المصمم وليس الزائر، وأن قيمته تدخل مباشرة عند التصميم. ويستخدم بهدف تعريف قيم ما سيتم إرسالها جنباً إلى جنب ضمن بيانات النموذج التي قام الزائر بتعبئتها </div><br /><br /><div align="right"><strong><i>ملاحظة مهمة</i></strong> بالنسبة للنماذج بشكل عام. من أجل إظهار النموذج بصورة مرتبة ومنسقة والتحكم بموقع الحقول فيه فمن الأفضل دائماً وضعه داخل جدول مع جعل الجدول بلا حدود. </div><font face="arial"><span style="font-size: 9px; line-height: normal">‎<FORM ...>‎<br />‎<TABLE BORDER="0">‎<br /><TR><br /><TD>Please enter your name : <‎/TD><br /><TD><br />‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎<br /><‎/‎TD><br /><‎/TR><br /> <br /><TR><br /><TD>Please enter your password :<‎/TD><br /><TD><br />‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎<br /><‎/TD><br /><‎/‎TR><br /><‎/TABLE><br /><‎/‎FORM> </span></font><br /><div align="right">وكما ترى تحتاج إلى القليل من العمل الإضافي لكنك بالمقابل ستحصل على النتيجة التالية </div><br /><br /><table border=0><tr><td>Please enter your name : </td><td> </td></tr><tr><td>Please enter your password :</td><td> </td></tr></table><div align="right">هكذا أفضل... أليس كذلك؟</div><br /><br /><div align="right">نكون الآن قد وصلنا إلى نهاية هذا الدرس. وأتمنى أن أكون قد نجحت في تيسير عملية فهمها والتعامل معها بالنسبة لك. ومع ذلك فنحن لم ننته بعد... فسوف نناقش ما تبقى في <a href="http://www.khayma.com/hpinarabic/htutor15.html" class="postlink" target="_blank" rel="nofollow">الدرس القادم</a> ، ألقاك هناك </div></BLOCKQUOTE></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--264" style=""><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr class="post post--265" id="p265" style=""><td class="row2" valign="top" width="150"><span class="name"><a name="265" style="position: relative; top: -30px; width: 1px;" id="265"></a><strong>Eng. Ahmedzoubaa</strong></span><br /><span class="postdetails poster-profile">Admin<br /><img loading="lazy" src="https://2img.net/u/3115/12/13/38/avatars/1-47.jpg" alt="Eng. Ahmedzoubaa" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#06067a;">عدد المساهمات</span> : </span> 1216<br /><span class="label"><span style="color:#06067a;">تاريخ التسجيل</span> : </span> 28/08/2010<br /><span class="label"><span style="color:#06067a;">العمر</span> : </span> 50<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="مقدمة في HTML 4 Empty" style="width:150px;height:1px" /></td><td class="row2" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: مقدمة في HTML 4   <img src="https://2img.net/i/fa/empty.gif" alt="مقدمة في HTML 4 Empty" border="0" />الخميس 18 نوفمبر 2010 - 8:34</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr height="100%" valign="top"><td colspan="2"><div class="postbody"><div><strong><span style="font-size: 25px; line-height: normal"><font color="#ff0000">الدرس الخامس عشر<br />النماذج (2)</font></span></strong><br /><BLOCKQUOTE><div align="right">أهلاً وسهلاً بك إلى الدرس الخامس عشر من دروس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML.</span></font> وهو الثاني من درسين حول النماذج. لقد قمنا في الدرس السابق بمناقشة الوسوم الأساسية للنماذج وتعلمنا كيفية إدراج النماذج في صفحات الويب. كما قمنا بمناقشة بعض أشكال إدخال البيانات في النموذج وهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Text, Password, Hidden</span></font> هل تذكر كيف نقوم بتعريفها؟ راجع <a href="http://www.khayma.com/hpinarabic/htutor14.html" class="postlink" target="_blank" rel="nofollow">الدرس السابق</a> إن أردت المزيد من التوضيح، وإلا هيا بنا نكمل ولندخل في الموضوع مباشرة. </div><div align="right">سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع: <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Radio, Checkbox</span></font> وقائمة الإختيار</div><div align="right">نبدأ مع الشكل المسمى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">RADIO.</span></font> ومن مسوغات استخدام هذا الشكل أن السؤال المطروح ينبغى أن يكون له <u>إجابة واحدة </u>فقط، أو بعبارة أخرى على الزائر أن يختار إجابة واحدة فقط. </div><div align="right">وكمثال، لنفرض أنني أريد أن أسأل الزائر عن المتصفح الذي يستخدمه (كما هو موجود في دفتر الزوار على شكل قائمة إختيار) لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">RADIO</span></font> وذلك بالشكل التالي<img src="https://2img.net/i/fa/i/smiles/icon_sad.gif" alt="Sad" longdesc="3" />أود أن أذكرك أن عناصر النموذج تظهر بشكل معكوس إذا كنت تستخدم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Sindbad 3.0)</span></font> </div><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><br /> Sindbad 3.0<br /> Sindbad 4.0<br /> Ms Explorer 3.0<br /> Ms Explorer 4.0<br /></span></font><div align="right">فكيف ننشيء مثل هذه القائمة؟ ... حسناً، لنبدأ من الصفر ونعرّف نموذجاً </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /> <br /><‎/FORM><br /></span></font><br /><div align="right">ثم لنقم بتعريف هذا الشكل، هل تذكر الوسم الخاص بذلك؟ إنه <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><INPUT></span></font> </div><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br />‎<INPUT TYPE="radio">‎<br /><‎/FORM><br /></span></font><br /><div align="right">لكن بما أن هناك أربعة مدخلات، إذن نحتاج إلى أربعة وسوم </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><INPUT TYPE="radio"> <BR><br /><INPUT TYPE="radio"> <BR><br /><INPUT TYPE="radio"> <BR><br /><INPUT TYPE="radio"> <BR><br /><‎/FORM><br /></span></font><br /><br /><br /> <br /> <br /> <br /> <br /><div align="right">نحتاج الآن إلى تسمية هذه المدخلات، أي أننا سنستخدم الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> معها. أما الاسم المعطى بحد ذاته فمن الأفضل أن يكون مرتبطاً نوعاً ما بموضوع السؤال، ليس لأن هذا ضروري للنموذج بل هو ضروري لك كشخص سيقوم باستقبال البيانات المرسلة من خلال النموذج، وبالتالي من الأفضل أن يوجد عنوان معبّر للبيانات بغرض التمييز. وبما أننا هنا نتحدث عن المتصفحات فليكن هذا الاسم هو <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">browser</span></font> </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><INPUT TYPE="radio" NAME="browser"> <BR><br /><INPUT TYPE="radio" NAME="browser"> <BR><br /><INPUT TYPE="radio" NAME="browser"> <BR><br /><INPUT TYPE="radio" NAME="browser"> <BR><br /><‎/FORM><br /></span></font><br /><br /><br /> <br /> <br /> <br /> <br /><div align="right">وكما تلاحظ من النتيجة أن هذه التسمية هي ضمنية فقط ولا تؤثر على شكل النموذج (راجع <a href="http://www.khayma.com/hpinarabic/htutor14.html" class="postlink" target="_blank" rel="nofollow">الدرس السابق</a>) لكن أي إختيار سيقوم به الزائر من هذه الأربعة خيارات سوف يصلك تحت الاسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">browser.</span></font> </div><div align="right">الخطوة التالية هي إعطاء قيمة لكل مدخلة في هذه القائمة وذلك حسب ما نراه مناسباً، إذن حان الوقت لاستخدام الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUE</span></font>: </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> <BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <BR><br /><‎/FORM><br /></span></font><br /><br /><br /><br /><br /> <br /> <br /> <br /> <br /><div align="right">وهنا أيضا نلاحظ أن لا تغيّر في شكل النموذج ظاهرياً مع إضافة هذه الخاصية. لكن مع ذلك فقد قمنا حتى الآن بتسمية الحقول وإعطاء كل حقل قيمة محددة. وفعلياً لقد إنتهينا من هذا النموذج. لكن بالطبع نحن لا نتوقع أن يكون الزائر عالماً بالغيب لكي يخمن أي من هذه الحقول تختص بكل قيمة. لذلك بقى علينا تعريف كل حقل باسم صريح يوضح محتواه. </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <font color="#ff0000">Sindbad 3.0</font> <BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> <font color="#ff0000">Sindbad 4.0</font><BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <font color="#ff0000">MS Explorer 3.0</font><BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <font color="#ff0000">MS Explorer 4.0</font><BR><br /><‎/FORM><br /></span></font><br /><br /><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><br /> Sindbad 3.0 <br /> Sindbad 4.0<br /> MS Explorer 3.0<br /> MS Explorer 4.0<br /></span></font><div align="right">وهناك خاصية تتعلق بهذا النوع من الحقول، وهي أنك إذا أردت أن يظهر أحدها وقد تم اختياره بشكل تلقائي فعليك بإضافة الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">CHECKED</span></font> إليه، مع ترك كل الحرية للزائر في اختيار ما يريده فيما بعد. </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <font color="#ff0000">Sindbad 3.0</font> <BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Sind4" CHECKED> <br /><font color="#ff0000">Sindbad 4.0</font>‎<BR>‎<br /><INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <font color="#ff0000">MS Explorer 3.0</font><BR><br /><INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <font color="#ff0000">MS Explorer 4.0</font><BR><br /><‎/FORM><br /></span></font><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><br /><br /><br /> Sindbad 3.0 <br /> Sindbad 4.0<br /> MS Explorer 3.0<br /> MS Explorer 4.0<br /></span></font><div align="right">وأخيراً... أود أن أوضح لك الصورة التي يصلك بها النموذج عند اختيار أحد حقوله (ولنفترض أنه الخيار الثالث). وهي بالشكل التالي: </div><div align="center"><font face="ARIAL"><span style="font-size: 16px; line-height: normal">browser=Msie3</span></font></div><br /><br /><div align="right">نأتي الآن إلى الشكل الثاني من أشكال الإختيار من متعدد والذي يدعى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">CHECKBOX.</span></font> ظاهرياً لا يختلف هذا الشكل عن الشكل الذي سبقه، لكن عملياً هناك اختلافات جذرية من حيث المفهوم والتعريف. وأنا أفضّل أن نبقى على استخدامنا للمثال السابق حتى يسهل علينا تمييز الفروق. </div><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><br />Sindbad 3.0<br />Sindbad 4.0<br />MS Explorer 3.0<br />MS Explorer 4.0 <br /></span></font><div align="right">قبل أن نستمر قم بالنقر على أكثر من حقل في القائمة السابقة وأنظر ماذا سيحدث؟ إن باستطاعتك اختيار أكثر من حقل في نفس الوقت! وهذا هو الفرق الأول بين <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">CHECKBOX</span></font> و <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">RADIO</span></font> ففي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">RADIO</span></font> يمكن اختيار حقل واحد فقط ليس أكثر. <br />لنقم الآن بتعريف هذه الحقول، وتسميتها بشكل مباشر ومن ثم سنعلّق عليها: </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"> Sindbad 3.0 <BR><br /><INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR><br /><INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"> MS Explorer 3.0 <BR><br /><INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0 <BR><br /><‎/FORM><br /></span></font><br /><br /><div align="right">ماذا تلاحظ؟ أولاً لقد أسندنا القيمة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">checkbox</span></font> للخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TYPE.</span></font> ثم أعطينا لكل حقل في القائمة إسماً مميزاً في الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> يختلف عن باقي الحقول. أما الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUE</span></font> فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل. </div><br /><br /><table cellPadding=5 width="70%" align=center bgColor=#ffffff border=5><tr><td><div align="right">في <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">RADIO</span></font> نستطيع اختيار حقل واحد فقط أما في <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">CHECKBOX</span></font> فنختار أكثر من حقل، لذلك يستخدم عادة في الحالات التي يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال. </div><div align="right">في <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">RADIO</span></font> تكون أسماء الحقول موحدة والقيم مختلفة، أما في <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">CHECKBOX</span></font> فتكون الأسماء مختلفة والقيم موحدة </div></td></tr></table><div align="right">كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك النتيجة بالشكل التالي: </div><div align="center"><font face="ARIAL"><span style="font-size: 16px; line-height: normal">Sind4=Yes<br />Msie4=Yes </span></font></div><div align="right">كما نستطيع أيضاً تعليم بعض الحقول بصورة تلقائية كما فعلنا مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">RADIO</span></font> باستخدام نفس الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">CHECKED</span></font> </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes" CHECKED><br />Sindbad 3.0 ‎<BR>‎<br /><INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR><br /><INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes" CHECKED><br />MS Explorer 3.0 ‎<BR>‎<br /><INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0 <BR><br /><‎/FORM><br /></span></font><br /><br /><br /><br /><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><br /> Sindbad 3.0 <br /> Sindbad 4.0 <br /> MS Explorer 3.0 <br /> MS Explorer 4.0 <br /></span></font><br /><br /><div align="right">النوع الثالث من أشكال الإختيار من متعدد هو قوائم الاختيار، وهذا النوع سوف يقودنا إلى وسوم جديدة من وسوم التعريف والتي ستستخدم بدلاً من <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><INPUT></span></font> وهي </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><SELECT><br /> <OPTION><br /> <OPTION><br /> <OPTION><br /> .....<br /> .....<br /><‎/SELECT></span></font> <br /><div align="right">بحيث أن <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><SELECT> ... </‎SELECT></span></font> تحددان بداية ونهاية القائمة، والوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><OPTION></span></font> الذي يوضع دائما بينهما يستخدم لتحديد كل عنصر من عناصر القائمة. لنعد إلى مثالنا السابق لنرى كيف يمكن وضع الخيارات في قائمة </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><SELECT><br /> ‎<OPTION> Sindbad 3.0‎<br /> ‎<OPTION> Sindbad 4.0‎<br /> ‎<OPTION> MS Explorer 3.0‎<br /> ‎<OPTION> MS Explorer 4.0‎<br /><‎/SELECT><br /><‎/FORM><br /></span></font><br /><div align="right">وبذلك تكون النتيجة هي: </div><br /> Sindbad 3.0 Sindbad 4.0 MS Explorer 3.0 MS Explorer 4.0 <div align="right">وكالمعتاد لا يخلو الأمر من وجود خصائص تحدد طريقة عمل هذه الوسوم. وهناك خصائص مشتركة عرفناها في الأشكال السابقة سيتم استخدامها هنا أيضاً كما يوجد خصائص جديدة تتعلق فقط بهذا الشكل من حقول البيانات. فبالنسبة لـِ <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><SELECT></span></font> يوجد الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> وهي كما تعلم تحدد اسم القائمة. كما توجد الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SIZE</span></font> التي تحدد حجم (أو بالأحرى) ارتفاع القائمة، وبالتالي عدد البيانات الظاهرة فيها. وهي تأخذ أي قيمة عددية صحيحة. </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br />‎<SELECT NAME="browser" SIZE="2">‎<br /> ‎<OPTION> Sindbad 3.0‎<br /> ‎<OPTION> Sindbad 4.0‎<br /> ‎<OPTION> MS Explorer 3.0‎<br /> ‎<OPTION> MS Explorer 4.0‎<br /><‎/SELECT><br /><‎/FORM><br /></span></font><br /><br /> Sindbad 3.0 Sindbad 4.0 MS Explorer 3.0 MS Explorer 4.0 <div align="right">وطالما بالإمكان عرض القائمة بأي ارتفاع نريد، وقد يصل إلى حد عرض جميع بيانات القائمة معاً، فإن هناك إمكانية أيضاً لجعل اختيار البيانات من هذه القائمة متعدداً وليس فقط قيمة واحدة، كيف؟؟ بإضافة الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MULTIPLE.</span></font> لنقم الآن بعرض جميع القيم (لدينا أربعة قيم، إذن القيمة المكتوبة مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SIZE</span></font> يجب أن تكون 4)، ومن ثم لنتح المجال أمام الزائر لاختيار أكثر من قيمة واحدة في القائمة. </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><SELECT NAME="browser" SIZE="4" MULTIPLE><br /> ‎<OPTION> Sindbad 3.0‎<br /> ‎<OPTION> Sindbad 4.0‎<br /> ‎<OPTION> MS Explorer 3.0‎<br /> ‎<OPTION> MS Explorer 4.0‎<br /><‎/SELECT><br /><‎/FORM><br /></span></font><br /><br /> Sindbad 3.0 Sindbad 4.0 MS Explorer 3.0 MS Explorer 4.0 <div align="right">لاحظ أنه لأداء عدة اختيارات يجب أن تقوم بالضغط على المفتاح <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ctrl</span></font> بصورة متواصلة أثناء عملية الإختيار. <br /> <br />أما الخصائص المستخدمة مع الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><OPTION></span></font> فهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUE</span></font> والتي استخدمناها من قبل وسنستخدمها الآن لإعطاء قيمة لكل حقل بيانات في القائمة. وكذلك الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SELECTED</span></font> والتي نكتبها مع أي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><OPTION></span></font> نريد أن يظهر وقد تم اختياره بصورة تلقائية. </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal"><FORM><br /><SELECT NAME="browser" SIZE="4" MULTIPLE><br /> ‎<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0‎<br /> ‎<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad 4.0‎<br /> ‎<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0‎<br /> ‎<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0‎<br /><‎/SELECT><br /><‎/FORM><br /></span></font><br /><br /> Sindbad 3.0 Sindbad 4.0 MS Explorer 3.0 MS Explorer 4.0 <br /><br /><div align="right">الشكل التالي من أشكال حقول البيانات يدعى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TEXTAREA</span></font> </div><br /><br /><div align="right">وهو المستخدم عادة لكتابة التعليقات الحرة في النموذج ويتم إدراجه بكتابة الوسوم </div><div align="center"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><TEXTAREA> ... <‎/TEXTAREA> </span></font></div><div align="right">هل تستطيع تخمين الخصائص المستخدمة معه؟ بالطبع لا بد من وجود الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> لإعطاءه اسم التعريف. لكن لا وجود للخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUE</span></font> ، وبالمقابل فإن أي نص يكتب بين الوسمين سيتم عرضه داخل الحقل بصورة تلقائية </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<TEXTAREA NAME="comments">‎<br />‎Hello, please write your comments here :-)‎<br /><‎/TEXTAREA> </span></font><br /><br />Hello, please write your comments here :-)<br /> <div align="right">كما توجد خصائص لتحديد مساحة هذا الحقل عرضاً وارتفاعاً، وهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">COLS</span></font> التي تحدد العرض و <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ROWS</span></font> التي تحدد الإرتفاع </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<TEXTAREA NAME="comments" COLS="30" ROWS="6">‎<br /><‎/TEXTAREA> </span></font><br /><br /> <div align="right">أما الخاصية الأخيرة هنا فهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">WRAP</span></font> التي تحدد طريقة إلتفاف النص المكتوب داخل الحقل (لا تعمل هذه الخاصية مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MS Explorer 3.0)</span></font> وهناك ثلاثة قيم تأخذها وهي على النحو التالي: </div><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">virtual</span></font> : التي تعني أن النص سيلتف على عدة أسطر عند كتابته ولكنه سيصلك عند إرساله على شكل سطر واحد متتابع (حاول الكتابة داخل الحقول وأنظر كيفية تأثير هذه الخاصية على كل منها) </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="virtual">‎<br /><‎/TEXTAREA> </span></font><br /><br /> <div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">physical</span></font> : تعني أن النص سيلتف على عدة أسطر وسيصلك أيضاً على هذا النحو عند إرساله </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="physical">‎<br /><‎/TEXTAREA> </span></font><br /><br /> <div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">off</span></font> : تعني أن النص لن يلتف بصورة تلقائية على عدة أسطر لكنه على أية حال سيصلك بنفس الشكل الذي تم إدخاله به </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="off">‎<br /><‎/TEXTAREA> </span></font><br /><br /> <br /><br /><div align="right">حسناً، بافتراض أننا إنتهينا من كتابة الشيفرة الخاصة بالنموذج وننتظر من أي زائر للموقع أن يملأه، والسؤال هو كيف يمكن له أن يرسله فعلياً؟ نعود الآن إلى الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><INPUT></span></font> وهذه المرة مع النوع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">submit</span></font> والتي ستقوم تلقائياً بإنشاء زر سيقوم عند النقر عليه بإرسال البيانات التي تم ملؤها في النموذج. </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<INPUT TYPE="submit">‎ </span></font><br /><br /> <div align="right">لاحظ أن <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Submit</span></font> أو ( <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Submit Query</span></font> في <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape)</span></font> ظاهرة على الزر وهي العبارة الإفتراضية، فإذا أردت تغييرها فعليك باستخدام الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">VALUE</span></font> لهذا الغرض </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<INPUT TYPE="submit" VALUE="Press here to send the form">‎ </span></font><br /><br /><br /><br /><div align="right">في حالة كان زوار موقعك من النوعية المترددة من الناس والذين قد يغيرون آرائهم في آخر لحظة، يمكنك أن تتيح لهم إمكانية مسح ما كتبوه في النموذج وإلغاء الأمر، وذلك باستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">reset</span></font> كنوع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TYPE</span></font> للوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><INPUT></span></font> بنفس طريقة التعريف والخصائص المستخدمة مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">submit.</span></font> </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<INPUT TYPE="reset" VALUE="Forget about it">‎ </span></font><br /><br /><br /><br /><div align="right">الشكل الأخير من أشكال البيانات في النماذج والمدرج مع الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><INPUT></span></font> هو <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">button</span></font> والذي يقوم بإنشاء زر ضمن النموذج، وهو مرتبط بالنماذج التي تحتوي على نصوص برمجية (أو برامج مكتملة) من لغات متقدمة مثل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">JavaScript</span></font> كونه يستخدم لتشغيل هذه البرامج وإطلاقها. وطبعاً هناك طرق معينة لربطها مع البرامج وليس هنا المجال لطرحها. لكن مبدئياً أقول إن طريقة الإدراج والتعريف هي ذاتها المستخدمة مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">reset, submit.</span></font> </div><font face="ARIAL"><span style="font-size: 9px; line-height: normal">‎<INPUT TYPE="button" VALUE="This is a sample button">‎ </span></font><br /><br /><br /><br /><br /><br /><div align="right">وأخيراً ... وصلنا الآن إلى نهاية حديثنا عن النماذج. فما رأيك؟ هل هو من المواضيع السهلة أم الصعبة؟ لا شيء سهل في بدايته. لذلك من الأفضل لك أن تحاول دائماً التدرب أولاً بأول على الوسوم المشروحة، بل والعودة إلى الدروس السابقة إذا اقتضى الأمر وخاصة إذا تداخلت بعضها مع الدروس الأحدث.<br />إلى اللقاء ... ومع تمنياتي لك بنماذج موفقة تخلو من التعقيد. </div></BLOCKQUOTE></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--265" style=""><td class="row2 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row2 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr class="post post--266" id="p266" style=""><td class="row1" valign="top" width="150"><span class="name"><a name="266" style="position: relative; top: -30px; width: 1px;" id="266"></a><strong>Eng. Ahmedzoubaa</strong></span><br /><span class="postdetails poster-profile">Admin<br /><img loading="lazy" src="https://2img.net/u/3115/12/13/38/avatars/1-47.jpg" alt="Eng. Ahmedzoubaa" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#06067a;">عدد المساهمات</span> : </span> 1216<br /><span class="label"><span style="color:#06067a;">تاريخ التسجيل</span> : </span> 28/08/2010<br /><span class="label"><span style="color:#06067a;">العمر</span> : </span> 50<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="مقدمة في HTML 4 Empty" style="width:150px;height:1px" /></td><td class="row1" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: مقدمة في HTML 4   <img src="https://2img.net/i/fa/empty.gif" alt="مقدمة في HTML 4 Empty" border="0" />الخميس 18 نوفمبر 2010 - 8:35</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr height="100%" valign="top"><td colspan="2"><div class="postbody"><div><strong><span style="font-size: 25px; line-height: normal"><font color="#ff0000">الدرس السادس عشر<br />المتصفحات والوسوم الخاصة</font></span></strong><div align="right">أهلاً وسهلاً بك إلى الدرس السادس عشر من دروس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML.</span></font> والذي سنناقش فيه واحداً من المواضيع المهمة.. والشائكة.. والمزعجة نوعاً ما في هذه اللغة، وفي مجال تصميم صفحات الويب عموماً. وهو موضوع الوسوم الخاصة... فما هي هذه الوسوم؟ ... حسناً، إليك القصة:- </div><div align="right">هل سبق لك وأن صادفت عبارة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><i>Best Viewed with Netscape Navigator</i></span></font> أو <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><i>Best Viewed with MS Internet Explorer</i></span></font> أو (أفضل مشاهدة بواسطة المتصفح نيتسكيب … أو إكسبلورر) عند زيارتك لبعض مواقع الإنترنت? حتماً لقد شاهدت مثل هذه العبارات تذيل الكثير من المواقع. والحقيقة أن مصممي هذه المواقع ليسوا بالضرورة من المعجبين بهذا المتصفح أو ذاك بحيث يعلنوا ولائهم له دون غيره من المتصفحات. لكن بكل بساطة ربما قاموا بتضمين بعض الوسوم أو الخصائص التي يدعمها ذلك المتصفح فقط في صفحاتهم…! بحيث إذا قام زائر ما بالدخول إلى ذلك الموقع مستخدماً متصفحاً آخر غير الموصى به فلن يشاهد نفس النتيجة التي يشاهدها زائر آخر يستخدم المتصفح المطلوب. (طبعاً لا أستطيع أن أعمم هذا لأن هناك العديد من المصممين الذين يفضلون فعلاً متصفحاً عن غيره سواءً قاموا بتضمين الوسوم الخاصة به أم لا) <br /> <br />نعم، يوجد هناك العديد من الوسوم في لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> التي قامت الشركات المنتجة للمتصفحات كمايكروسوفت ونيتسكيب بتطويرها بحيث تعمل على متصفحها الخاص دون غيره من المتصفحات <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Browser Specific Tags </span></font>(من قال لك أن الشركات الكبرى تتعامل مع بعضها البعض كالكبار). وقد يصل الأمر أحياناً إلى وجود وسوم موحدة تدعمها جميع المتصفحات لكن طريقة تنفيذ وعرض هذه الوسوم هي التي تختلف. وأذكرك بما قلناه في <a href="http://www.khayma.com/hpinarabic/htutor04.html" class="postlink" target="_blank" rel="nofollow">الدرس الرابع</a> عند الحديث عن القوائم. فقد شاهدنا كيف أن كلا المتصفحين يدعمان الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><UL></span></font> والخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TYPE</span></font> لكنهما يختلفان على القيم التي تدرج معهما. وهذا مثال واحد فقط على هذا الإختلاف. </div><div align="right">وأكثر من ذلك، لا ننسى أن شركات البرامج تقوم بشكل مستمر بعمليات التحديث والتحسين لبرامجها وإطلاق إصدارات جديدة لها بين الحين والآخر، لذلك من غير المستبعد أن يختلف الدعم للوسوم والخصائص من قبل نفس المتصفح بإصداراته المختلفة، وبالتالي اختلاف مظهر الصفحات. وهذه المسألة بالذات (وأعني اختلاف مظهر الصفحات) هي ما تسبب أرقاً لمصممي صفحات الويب. والسؤال الملّح دوماً لديهم هو: كيف أحصل على صفحة ويب لا تختلف في عرضها من متصفح لآخر؟ وقد يكون جوابه أكثر إلحاحاً، إذ يكون من الصعب أحياناً تحقيق هذا الهدف. وتزداد صعوبته كلما ازدادت العناصر والتنسيقات المختلفة التي تحتويها الصفحة. بينما يسهل التحكم في صفحة تقتصر محتوياتها على النصوص فقط ويكون من الممكن إخراجها بنفس الطريقة في جميع المتصفحات. </div><div align="right"><span style="font-size: 21px; line-height: normal">فما الحل إذن؟</span></div><div align="right">مع أن بعض هذه الوسوم الخاصة تعطي تأثيرات رائعة للصفحة، وتضفي عليها مظهراً جميلاً. لكنك بالمقابل لا تضمن أن جميع زوار موقعك يستخدمون نفس المتصفح، فهذا مستحيل بالطبع. لذلك لا أقول لك لا تستخدم هذه الوسوم لكن حاول قدر الإمكان تجنبها إذا أردت أن تظهر صفحتك بنفس الطريقة التي تريدها لجميع الزوار. كذلك حاول دائماً استعراض صفحاتك باستخدام المتصفحين وباستبانات مختلفة للشاشة فهذا يعطيك فكرة مبدئية عن الطريقة التي سيشاهدها بها زوارك على مختلف المتصفحات. </div><br /><br /><table width="80%" bgColor=#ffffff border=5><tr><td><div align="right"><span style="font-size: 16px; line-height: normal">أنا هنا أتحدث عن الصفحات الإنجليزية القياسية عموماً، أما الصفحات العربية فهي حكاية أخرى لأن الدعم الموجود للغة العربية في المتصفحات ليس قياسياً نتيجةً لعدة أسباب لا مجال لذكرها في هذا المقام. فمثلاً متصفح نيتسكيب لا يدعمها أصلاً ويحتاج إلى برنامج إضافي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Plugin</span></font> من <a href="http://www.sakhr.com/" class="postlink" target="_blank" rel="nofollow">شركة صخر</a> وهو سندباد. وهناك متصفح آخر يدعم العديد من اللغات العالمية بما فيها العربية، وهو تانجو من <a href="http://www.alis.com/" class="postlink" target="_blank" rel="nofollow">شركة أليس.</a> لكن أنا شخصياً أفضل <a href="http://www.microsoft.com/ie" class="postlink" target="_blank" rel="nofollow">مايكروسوفت إكسبلورر </a>ليس من ناحية استخدامي لأية وسوم خاصة به بل لأنه الأفضل في عرض النصوص العربية والصفحات ثنائية اللغة أكثر من غيره من المتصفحات. </span></div></td></tr></table><div align="right">قبل أن نبدأ باستعراض الوسوم لا بد لي من التنويه بأني استخدم برنامجي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Sindbad 3.x</span></font> و <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Ms Internet Explorer 3.x</span></font> وعندما أتحدث عن الوسوم والخصائص وتوافقها مع المتصفحات فأنا أعني هذين المتصفحين وأعني رقم الإصدار أيضاً <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">(‎3.x).</span></font> وذلك لأنهما لا زالا الأكثر رواجاً (حتى تاريخ كتابة هذا الدرس)، سواء بيننا كمستخدمين عرب أو بشكل عام بين مستخدمي الإنترنت عالمياً. ومن المحتمل إذا كنت تستخدم إصداراً أحدث لأحد هذه البرامج أن تلاحظ أنه قد أصبح يدعم الوسوم الخاصة بالبرنامج الآخر (وهذا بالطبع ليس ذنبي، بل ذنب أولئك الذين يطورون برامجهم بشكل دائم ومتسارع ولا يتركوننا نلتقط أنفاسنا بين كل إصدار وآخر). وعلى أية حال إذا كنت ممن يقبلون النصيحة المجانية، حاول دائماً تصميم صفحاتك مع افتراض أسوأ الإحتمالات أي واضعاً نصب عينيك أن زوار موقعك يستخدمون متصفحات قديمة. وبذلك تضمن أن معظمهم إن لم يكن جميعهم سيشاهدون موقعك بنفس الصورة وبدون أي مشاكل تتعلق بالتوافقية بين المتصفحات والوسوم. </div><br /><br /><div align="right">وبالنسبة لطريقة عرض الوسوم لهذا الدرس، فنظراً لخصوصيتها سوف أتبع هنا منهجاً مختلفاً عن الدروس السابقة يقوم على عرض الوسوم الخاصة بكل متصفح في صفحة منفصلة. وذلك بهدف حصر الوسوم المخصصة لكل متصفح وعدم تداخلها مع الوسوم الأخرى. وبالتالي تجنب احتمال حدوث خلل في بنية الصفحات عند عرضها من خلال متصفح لا يدعم بعضاً من هذه الوسوم والشيفرات الخاصة بها. <br />لكن هذا لا يعني عدم قدرتك على مشاهدة الصفحة الخاصة بوسوم أحد المتصفحات إذا كنت تستخدم الآخر. بالطبع سوف يكون بإمكانك مشاهدة النص المكتوب والشيفرات المستخدمة كالمعتاد (فنحن في النهاية لا زلنا نستخدم لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML)</span></font> لكن كل ما هنالك أنه لن يكون بإمكانك مشاهدة تأثيرها إلا إذا استخدمت المتصفح المناسب. </div><div align="center"><span style="font-size: 21px; line-height: normal">إذن لكي تبدأ اختر المتصفح الذي تريده<br />لتنتقل مباشرة إلى وسومه المخصصة. </span></div><br /><br /><table cellPadding=10 border=0><tr align=middle><td><a href="http://www.khayma.com/hpinarabic/tags_ie1.html" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MS Explorer 1</span></font></a></td><td><a href="http://www.khayma.com/hpinarabic/tags_nc1.html" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape Navigator </span></font></a></td></tr><tr align=middle><td><a href="http://www.khayma.com/hpinarabic/tags_ie2.html" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MS Explorer 2</span></font></a></td></tr></table></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--266" style=""><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr class="post post--267" id="p267" style=""><td class="row2" valign="top" width="150"><span class="name"><a name="267" style="position: relative; top: -30px; width: 1px;" id="267"></a><strong>Eng. Ahmedzoubaa</strong></span><br /><span class="postdetails poster-profile">Admin<br /><img loading="lazy" src="https://2img.net/u/3115/12/13/38/avatars/1-47.jpg" alt="Eng. Ahmedzoubaa" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#06067a;">عدد المساهمات</span> : </span> 1216<br /><span class="label"><span style="color:#06067a;">تاريخ التسجيل</span> : </span> 28/08/2010<br /><span class="label"><span style="color:#06067a;">العمر</span> : </span> 50<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="مقدمة في HTML 4 Empty" style="width:150px;height:1px" /></td><td class="row2" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: مقدمة في HTML 4   <img src="https://2img.net/i/fa/empty.gif" alt="مقدمة في HTML 4 Empty" border="0" />الخميس 18 نوفمبر 2010 - 8:35</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr height="100%" valign="top"><td colspan="2"><div class="postbody"><div><strong><span style="font-size: 25px; line-height: normal"><font color="#ff0000">الدرس السابع عشر<br />الويب واللغة العربية</font></span></strong><br /><BLOCKQUOTE><div align="right">أهلاً وسهلاً بك إلى الدرس السابع عشر من دروس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML.</span></font> والذي سندخل من خلاله إلى أحد المواضيع الهامة التي يُعنى بها كل من يريد أن يكون للغة العربية وجود على الإنترنت. سوف نقوم بمناقشة الكيفية التي يمكن لنا كمستخدمين عرب إنشاء صفحات ويب بلغتنا الأم على هذه الشبكة العالمية. </div><div align="right"><strong><span style="font-size: 21px; line-height: normal">فذلكة تاريخية</span> </strong></div><div align="right">نحن نعرف أن بدايات اللغة العربية على الإنترنت اقتصرت على أسلوب قد نعتبره الآن بدائياً، لكن لا نستطيع إنكار فعاليته في ذلك الوقت. (لا تعتمد كثيراً على عبارة <i>"في ذلك الوقت"</i> فمن المحتمل أن يكون هناك مواقع لا زالت تعتمد هذا الأسلوب لعرض محتوياتها حتى هذه اللحظة)، وهو أسلوب النص المصور. أي النص المسحوب على جهاز <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Scanner</span></font> والمعروض على الإنترنت كصورة. وكانت هذه هي الطريقة التي نَفذ منها أصحاب المواقع المعربة للدخول إلى عالم الإنترنت. لكن من الواضح أنها لم تكن بالطريقة الفعالة أو العملية، لعدة أسباب أهمها:<br />بالنسبة للمصمم: كانت عملية إنشاء الصفحة تعني كتابتها وتنسيقها وطباعتها ومن ثم مسحها على <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Scanner</span></font> فإذا أراد فيما بعد إجراء أي عملية تعديل مهما كانت بسيطة فذلك يعني إعادة تحريرها وسحبها، مكلفة في ذلك الوقت والجهد وربما المال.<br />أما بالنسبة للزائر فذلك يعني إضاعة وقت أطول في عرض هذه النصوص -الصور- أضعافاً مضاعفة مما لو كانت نصوصاً بحتة. بالإضافة إلى استحالة إجراء عمليات البحث المعتادة سواءً كانت خارجية من خلال محركات بحث الإنترنت، أو داخلية ضمن الصفحة نفسها من خلال أمر البحث الموجود في المتصفح. وأحياناً قد يواجه مشكلة رداءة الصورة وبالتالي عدم إمكانية إخراجها بشكل واضح وسليم على الطابعة. </div><div align="right">لكن دعنا لا نلم هؤلاء الرواد الذين اتبعوا هذه الطريقة. فكما يقال (مكره أخاك لا بطل) وعذرهم هو عدم وجود متصفحات تستطيع عرض النصوص العربية بطريقة صحيحة. إلى أن قامت شركة صخر بإطلاق متصفحها سندباد الذي جاء معرباً لـ <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape</span></font> وشركة مايكروسوفت التي أطلقت <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MS Internet Explorer</span></font> ليكونا فاتحة خير بالنسبة لنا كمستخدمين عرب للإنترنت، ولا نستطيع إلا أن نكنّ لهما كل التقدير. فهانحن كما ترى نبحر في الإنترنت ولغتنا العربية تزداد انتشاراً فيها يوماً بعد يوم. </div><br /><br /><div align="right">حسناً، لا تظن أننا سنحتاج إلى إعدادات معينة أو أننا سنتعامل مع وسوم إضافية غير عادية عندما نتحدث عن صفحات ويب باللغة العربية... إطلاقاً، فالواقع أنك تستطيع اعتبار هذا الدرس مجرد دردشة عادية عن الويب واللغة العربية. ولن يكون هناك إلا وسم جديد واحد سيتم التعرض له بشكل مقتضب بما يهمنا في موضوع اللغة العربية هنا على أن نناقشه بالتفصيل في درس لاحق. </div><div align="right"><strong><span style="font-size: 21px; line-height: normal">ولنبدأ الآن...</span></strong></div><div align="right">لنقم بداية بتعريف صفحة ويب عادية كما إعتدنا: </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML> <br /><HEAD> <br /><TITLE> ... <‎/TITLE><br /><‎/HEAD><br /> <br /><BODY><br />....<br /><‎/BODY><br /><‎/HTML> </span></font><br /><div align="right">ومن ثم سنقوم بإضافة هذه الشيفرة لها </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎ <br /></span></font><div align="right">وذلك في القسم الأعلى أي ضمن الوسمين <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><HEAD> ... <‎/HEAD> </span></font>ويفضل أن تكتبها بعد وسوم العنوان <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><TITLE> ... <‎/TITLE> </span></font></div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML> <br /><HEAD> <br /><TITLE> ... <‎/TITLE><br />‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; <font color="#ff0000">charset=windows-1256</font> ">‎ <br /><‎/HEAD><br /> <br /><BODY><br />....<br /><‎/BODY><br /><‎/HTML> </span></font><br /><div align="right">قم بكتابة هذه الشيفرة كما هي نصاً وحرفاً. وما يعنينا فيها الآن هي العبارة </div><div align="center"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">charset=windows-1256 </span></font></div><div align="right">فهي لب موضوعنا. أما باقي الشيفرة فسوف نقوم بمناقشتها إن شاء الله في درس لاحق عند الحديث عن الوسوم المتقدمة. </div><div align="right">فما الذي تعنيه العبارة السابقة؟؟ بإختصار شديد، هي تحدد قائمة الترميز العربية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Code Page</span></font> التي سيتم عرض صفحتنا من خلالها. أو لنقل أنها تحدد أسلوب التشفير الذي سيستخدمه المتصفح لعرض الأحرف. </div><br /><br /><div align="right">حسناً، يبدو أننا سنعود ثانية للفذلكة التاريخية. وهذه المرة إلى بدايات اللغة العربية مع الحاسوب الشخصي نفسه وليس مع الإنترنت فقط:-<br />إذا كنت من مستخدمي الحاسوب القدامى ... وبالتحديد من أيام نظام التشغيل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">DOS</span></font> وتطبيقاته (أي قبل أن يكون هناك برنامج ويندوز المعرّب) فلا بد أنك تعرف، وربما تعاملت مع برامج التعريب القديمة التي واكبت تلك الفترة كبرنامج النافذة وريم ونظم صخر ... إلخ. حيث أنه في تلك الفترة كانت هناك عدة جهات أخذت على عاتقها مهمة تعريب الحاسوب وأنظمة تشغيله. لكن المشكلة كانت في في غياب التنسيق بين هذه الجهات. وكانت النتيجة هي إصدار العشرات من برامج التعريب التي تختلف عن بعضها البعض في <strong>طريقة ترتيب قائمة الرموز والحروف</strong> وبالتالي اختلف أسلوب تشفير النصوص وعرضها. بمعنى أن النص المكتوب من خلال برنامج "النافذة" سوف يبدو كمجموعة من الحروف والكلمات المبهمة وكأنها مكتوبة بلغة أخرى باستخدام برنامج آخر مثل "ريم". </div><br /><br />ولتوضيح الفكرة السابقة (على الأقل كما أفهمها أنا!!!) إليك هذا المثال.<br />لنفرض أن هناك قائمة ترميز رتّبت فيها الحروف بالشكل التالي: <br /><br /><table bgColor=#ffffff border=2><tr><td>ي</td><td>و</td><td>هـ</td><td>ن</td><td>م</td><td>ل</td><td>ك</td><td>ق</td><td>ف</td><td>غ</td><td>ع</td><td>ظ</td><td>ط</td><td>ض</td><td>ص</td><td>ش</td><td>س</td><td>ز</td><td>ر</td><td>ذ</td><td>د</td><td>خ</td><td>ح</td><td>ج</td><td>ث</td><td>ت</td><td>ب</td><td>ا</td></tr></table><div align="right">وأننا أردنا كتابة كلمة "سندباد" من خلالها... </div><div align="right">ثمّ لنفرض الآن أننا قمنا باستعراض الكلمة باستخدام برنامج يتعامل مع قائمة ترميز مختلفة وبالترتيب التالي: </div><br /><br /><table bgColor=#ffffff border=2><tr><td>ر</td><td>و</td><td>ز</td><td>ظ</td><td>ش</td><td>س</td><td>ي</td><td>ب</td><td>ل</td><td>ا</td><td>ت</td><td>ن</td><td>م</td><td>ك</td><td>ط</td><td>ذ</td><td>ض</td><td>ص</td><td>ث</td><td>ق</td><td>ف</td><td>غ</td><td>ع</td><td>هـ</td><td>خ</td><td>ح</td><td>ج</td><td>د</td></tr></table><div align="right">بالمقارنة بين النظامين سوف نشاهد أن كلمة "سندباد" في النطام الأول قد أصبحت "ضظفجدف"!!! في النظام الثاني </div><br /><br /><table bgColor=#ffffff border=2><tr><td>ي</td><td>و</td><td>هـ</td><td bgColor=#ffff00>ن</td><td>م</td><td>ل</td><td>ك</td><td>ق</td><td>ف</td><td>غ</td><td>ع</td><td>ظ</td><td>ط</td><td>ض</td><td>ص</td><td>ش</td><td bgColor=#ffff00>س</td><td>ز</td><td>ر</td><td>ذ</td><td bgColor=#ffff00>د</td><td>خ</td><td>ح</td><td>ج</td><td>ث</td><td>ت</td><td bgColor=#ffff00>ب</td><td bgColor=#ffff00>ا</td></tr><tr><td>ر</td><td>و</td><td>ز</td><td bgColor=#00ff00>ظ</td><td>ش</td><td>س</td><td>ي</td><td>ب</td><td>ل</td><td>ا</td><td>ت</td><td>ن</td><td>م</td><td>ك</td><td>ط</td><td>ذ</td><td bgColor=#00ff00>ض</td><td>ص</td><td>ث</td><td>ق</td><td bgColor=#00ff00>ف</td><td>غ</td><td>ع</td><td>هـ</td><td>خ</td><td>ح</td><td bgColor=#00ff00>ج</td><td bgColor=#00ff00>د</td></tr></table><div align="right">إذن تعدد نظم التشفير لم يكن لصالح المستخدم العربي أبداً، إذ أنها أوقعته في إشكالات أقلها عدم التوافق بين التطبيقات التي يتم العمل عليها. ولا شك أن ظهور نظام ويندوز وانتشاره بين المستخدمين العرب بصورة كبيرة قد حدّ من هذه المشكلة بشكل فعّال. </div><br /><br /><div align="right">والآن عودة إلى الإنترنت... لقد ألقت المشكلة سالفة الذكر بظلالها على نظم إنترنت ومتصفحاتها المعرّبة (وإن كان ذلك بصورة أقل تأثيراً عمّا سبق). لذلك تجد أن من الميزات التي تحرص شركات صخر وميكروسوفت على إضافتها للمتصفحات هي ميزة تعدد قوائم الترميز التي يستطيع المتصفح دعمها. ومن الأمثلة على هذه القوائم: <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Windows-1256, DOS-720, ISO-8859-6</span></font> وأكثرها استخداماً وانتشاراً هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Windows-1256.</span></font> وعادة تملك المتصفحات القدرة على اكتشاف قائمة الترميز المطبقة على الصفحة بصورة تلقائية. لكن من الحكمة أن نقوم نحن دائماً بتحديد هذه القائمة ليس بسبب قلة الثقة في المتصفحات وإنما من باب الإحتياط الواجب دائماً في عالم الإنترنت وتصميم الصفحات...<br />إذن، هل عرفت الآن السبب في إضافة الشيفرة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">charset=windows-1256</span></font> إلى بداية الصفحة؟ </div><br /><br /><div align="right">لكن ماذا سيحدث لو دخلت إلى إحدى الصفحات ولم تكن تتضمن الشيفرة الخاصة بقائمة الترميز؟ حسناً، هناك إحتمال من إثنين: إما أن يكون المتصفح قد اكتشفها بصورة تلقائية واستخدم الإعدادات الإفتراضية وبالتالي تم عرض الصفحة بالشكل الصحيح وبذلك حلّت المشكلة قبل أن تبدأ. أو تستطيع أنت أن تحل المشكلة بنفسك ، كيف؟؟ إليك الطريقة:</div><div align="right">في المتصفح <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MS Explorer</span></font> تجد أيقونة صغيرة في الزاوية اليمنى السفلى لنافذة المتصفح. فإذا قمت بالنقر عليها ستظهر قائمة بأسماء قوائم الترميز التي يدعمها.</div><br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/msiecode.gif" style="width: 212;height: 80" border="0" alt="مقدمة في HTML 4 Msiecode"/><div align="right">وما عليك الآن إلا أن تختار القائمة التي تعتقد أنها المناسبة وإذا أخطأت قم باختيار قائمة أخرى وهكذا. </div><div align="right">أما في برنامج سندباد فتستطيع أداء هذه المهمة باختيار الأمر "خيارات صفحة الويب الحالية" من قائمة "خيارات سندباد" حيث يظهر بضمنها صندوق حوار خاص بقوائم الترميز. </div><div align="right">وبالمناسبة، هل أخبرتك أن باستطاعتك رؤية النص العربي حتى لو كنت تستخدم متصفحاً غير معرب؟ كيف ذلك؟! كل ما عليك فعله هو تغيير إعدادات الخطوط الإفتراضية في المتصفح واختيار خطوط عربية بدلاً من الخطوط المحددة أصلاً. هذه هي الحكاية فقط لكنها ليست الحل!!. إذ سرعان ما ستكتشف أن النص غير مرتب والأسطر والفقرات متداخلة بطريقة غير منطقية خاصة إذا احتوت الصفحة على كلمات أجنبية. فعلى سبيل المثال إذا كانت هناك كلمة أجنبية في منتصف أحد الأسطر فسوف تلاحظ أن الكلمات التي تليها على اليسار قد أصبحت على اليمين والعكس صحيح. وبذلك سيكون من الصعب عليك متابعة هذه الفقرات. (وعلى أية حال لو كان هذا هو الحل لما وجدنا شركات مثل صخر وميكروسوفت تضيعان وقتهما في إيجاد متصفحات معربة). إذن الحل السابق هو مجرد حل مؤقت لمشكلة ظهور النص العربي فقط ولكنه لم يحل أبداً مشكلة كون اللغتين العربية والإنجليزية تكتبان بإتجاهين مختلفين وبشكل يحتاج إلى حل جذري بإيجاد المتصفحات المعربة ثنائية الإتجاه <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Bi-Directional</span></font> أو <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">(BiDi)</span></font>. </div><br /><br /><div align="right">لا يخلو الموضوع هنا من الحديث عن الإختلافات بين المتصفحات في التعامل مع صفحات اللغة العربية. (عدنا ثانية للحديث عن الوسوم والخصائص الخاصة بكل متصفح). ولنبدأ بمناقشة تلك الخاصة بالمتصفح ميكروسوفت إكسبلورر:- </div><div align="right">في <a href="http://www.khayma.com/hpinarabic/htutor04.html" class="postlink" target="_blank" rel="nofollow">الدرس الرابع</a> تطرقنا إلى وسم الفقرات <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><P>.</span></font> وقلنا أن إحدى خصائص هذا الوسم هي الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">DIR</span></font> التي تحدد إتجاه النص من خلال القيم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">rtl</span></font> و <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ltr.</span></font> (وقد طلبت منك أن تبقى متذكراً لها لأننا سنتطرق إليها عند الحديث عن اللغة العربية.) إذن لقد حان الوقت!!. يدعم إكسبلورر هذه الخاصية بشكل كبير، ذلك لأن من ميزاته أنه لا يتعامل مع الصفحة والفقرات المكونة لها كوحدة واحدة بل أنه يتعامل مع كل فقرة على حدة. ويتطلب هذا أن تقوم بتكرار الإعدادات التي تريدها مع كل فقرة بحد ذاتها. </div><div align="right">وعلى سبيل المثال، سوف تجد أن كل فقرة عربية في كل صفحة في هذا الموقع محاطة بالوسوم </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><P DIR="rtl" ALIGN="right"> ... <‎/P> </span></font><br /><div align="right">وأن كل فقرة إنجليزية محاطة بالوسوم</div><font face="Arial"><span style="font-size: 9px; line-height: normal"><P DIR="ltr" ALIGN="left"> ... <‎/P> </span></font><br /><div align="right">وذلك ليس لسبب إلا لضمان ظهورها بالشكل المناسب في المتصفح إكسبلورر. ولاحظ أنني في الحالتين أقوم بتحديد إتجاه النص جنباً إلى جنب مع المحاذاة المطلوبة. وفي الحقيقة أن هذه الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">DIR</span></font> تستخدم ليس فقط مع وسوم الفقرات بل مع أي وسوم أخرى نستخدم معها الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ALIGN</span></font> وبشكل خاص مع الجداول. </div><div align="right">نأتي الآن إلى المتصفح سندباد... كما تعلم فإن هذا المتصفح هو برنامج مضاف <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Plugin</span></font> لتعريب المتصفح <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape</span></font> بإصداراته المختلفة. لذلك من البديهي أن يرث خصائصه المختلفة، إبتداءاً من الواجهة التطبيقية للبرنامج وإنتهاءاً بالوسوم الخاصة التي يدعمها. لذلك فعند الحديث عن أحدهما نستطيع القول بأننا نتحدث عن الآخر بدون أدنى اختلاف.</div><div align="right">ما يهمنا في هذا المقام هو أن سندباد يتعامل مع الصفحة التي يعرضها كوحدة واحدة، وذلك على خلاف إكسبلورر. بمعنى أنه لا يدعم الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">DIR.</span></font> لذلك نرى أن سندباد يحتوي على زر خاص بتحويل إتجاه الصفحة يميناً أو يساراً، وهو الزر الموجود في أعلى نافذته ويكون على شكل سهم. </div><div align="right">إذن بشكل عام، طالما كانت الصفحة موحدة اللغة (سواءاً كانت هذه اللغة عربية أو إنجليزية) وبالتالي كانت تحتوي على فقرات موحدة الإتجاه (يميناً أو يساراً) فمن غير الضروري أن نقوم بتحديد المحاذاة لكل فقرة على حدة، فالأصل أن نقوم بذلك من خلال زر تحديد الإتجاه. لكن عندما تحتوي صفحتنا العربية على فقرة إنجليزية (أو العكس) فهنا لا بد من استخدام وسم الفقرات وتحديد المحاذاة المطلوبة لهذه الفقرة فقط، ومن ثم المتابعة مع باقي الفقرات العربية بشكل طبيعي كالسابق. ونكرر العملية مع أي فقرة إنجليزية لاحقة. وهنا عند الضغط على زر تحديد الإتجاه ستجد أنه يغير إتجاه جميع الفقرات فالعربية ستحول إلى اليسار والإنجليزية إلى اليمين والعكس بالعكس. </div><div align="right">السؤال الآن، أي من الطرق نستخدمها في صفحاتنا؟ هل نعتمد على الخاصية التي يدعمها إكسبلورر أو على الزر الذي يتضمنه سندباد؟ </div><div align="right">الجواب عموماً هو أن نتبع الطريقة التي تضمن أكبر قدر من التوافق في مظهر الصفحات فوجود الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">DIR</span></font> لن يضر بصحة المتصفح سندباد. لكن غيابها هو ما سيجعل إكسبلورر هزيلاً. إذن لنستخدمها دائماً ومع كل فقرة من فقرات صفحتنا. </div><br /><br /><br /><br />خلاصة القول أضعها في النقاط التالية، وكما يقال: في الإعادة إفادة! <br /><br /><table cellPadding=3 width="80%" align=center bgColor=#ffffff border=5><tr><td><br /><br /><br /><ol type="1"><br /><li><div align="right"><strong>في بداية الصفحة ضع الشيفرة التالية كما هي نصاً وحرفاً</strong> </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎ <br /></span></font><br /></li><li><div align="right"><strong>قم بإحاطة كل فقرة عربية من فقرات صفحتك بالوسوم التالية:</strong></div><font face="Arial"><span style="font-size: 9px; line-height: normal"><P DIR="rtl" ALIGN="right"> ... <‎/P> </span></font><br /></li><li><div align="right"><strong>إذا أردت إدراج فقرات إنجليزية فقم بإحاطة كل منها بالوسوم</strong></div><font face="Arial"><span style="font-size: 9px; line-height: normal"><P DIR="ltr" ALIGN="left"> ... <‎/P> </span></font><br /></li><li><div align="right"><strong>تستطيع استخدام الوسوم السابقة مع الجداول أيضاً </strong></div></li></ol><br /></td></tr></table><br /><br /><div align="right">في الأيام الأولى لإنشاء هذا الموقع، وبالذات في الدرس الأول، واجهت إشكالاً معيناً وذلك عندما كنت أقوم بكتابة بعض المصطلحات الإنجليزية وبضمنها رموز خاصة أو أرقام. فقد كانت هذه الرموز تظهر بصورة معكوسة عندما يتم عرضها في المتصفح سندباد. مثال ذلك: أن الإشارة / الموجودة في وسوم النهاية كانت تظهر في آخر الوسم (أي إلى اليمين) بدلا من أن تظهر في بدايته. كذلك عند الحديث عن الرموز الخاصة كالفراغات كانت إشارة (&) تظهر على اليسار وإشارة (<img src="https://2img.net/i/fa/i/smiles/icon_wink.gif" alt="Wink" longdesc="15" /> تظهر على اليمين، أي انهما تظهران بشكل معاكس لما يجب أن يكونا عليه. </div><div align="right">وبصراحة مطلقة فقد سببت لي هذه المشكلة كابوساً على مدى عدة أيام متلاحقة، حاولت خلالها تجربة العديد من الحلول. كان من ضمنها أن أقوم بكتابة هذه الرموز بصورة معاكسة علّها تعود إلى رشدها. لكن للسخرية كانت في الحالة المعكوسة تبقى كما هي في مكانها. وأخيراً جاء الحل السحري بعد أن أرسلت إلى شركة صخر أستفسر عن هذه المشكلة. وكان هذا الحل بكتابة رمز يسمى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">OXFD</span></font> وهو رمز الفراغ باللاتيني، وتتم كتابته بالضغط على المفتاح <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ALT</span></font> في لوحة المفاتيح مع الأرقام (من اليسار إلى اليمين) <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">0253</span></font> وذلك قبل أي رمز "مشاغب" لا يظهر في مكانه الصحيح. وبذلك تم حل كل الإشكالات التي واجهتها مع هذه الرموز. </div><div align="right">إذن أستطيع الآن أن أضيف نقطة خامسة إلى النقاط السابقة: </div><br /><br /><table cellPadding=3 width="80%" align=center bgColor=#ffffff border=5><tr><td><div align="right"><strong>استخدم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ALT+0253</span></font> قبل الرموز أو الحروف الإنجليزية التي لا تظهر في مكانها الصحيح عند عرضها من خلال المتصفحات </strong></div></td></tr></table><br /><div align="right">وعند هذه النقطة نكون قد وصلنا إلى نهاية هذا الدرس والذي لن يكون بالطبع هو نهاية المطاف في دروس إتش.بي بالعربية. فما زال هناك ما يقال، ألقاك على خير في الدرس التالي. </div></BLOCKQUOTE></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--267" style=""><td class="row2 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row2 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr class="post post--268" id="p268" style=""><td class="row1" valign="top" width="150"><span class="name"><a name="268" style="position: relative; top: -30px; width: 1px;" id="268"></a><strong>Eng. Ahmedzoubaa</strong></span><br /><span class="postdetails poster-profile">Admin<br /><img loading="lazy" src="https://2img.net/u/3115/12/13/38/avatars/1-47.jpg" alt="Eng. Ahmedzoubaa" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#06067a;">عدد المساهمات</span> : </span> 1216<br /><span class="label"><span style="color:#06067a;">تاريخ التسجيل</span> : </span> 28/08/2010<br /><span class="label"><span style="color:#06067a;">العمر</span> : </span> 50<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="مقدمة في HTML 4 Empty" style="width:150px;height:1px" /></td><td class="row1" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: مقدمة في HTML 4   <img src="https://2img.net/i/fa/empty.gif" alt="مقدمة في HTML 4 Empty" border="0" />الخميس 18 نوفمبر 2010 - 8:36</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr height="100%" valign="top"><td colspan="2"><div class="postbody"><div><strong><span style="font-size: 25px; line-height: normal"><font color="#ff0000">الدرس الثامن عشر<br />وسوم <font face="Times New Roman">META </font>ومحركات البحث </font></span></strong><br /><BLOCKQUOTE><div align="right">أهلاً وسهلاً بك إلى الدرس الثامن عشر من دروس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML...</span></font> </div><div align="right">من المحتمل أن يكون عنوان هذا الدرس غريباً بعض الشيء بالنسبة لك. وأنه قد أثار لديك بعض التساؤلات عن فحوى هذه الوسوم وعن الهدف من هذا الدرس بشكل عام... ولكي لا تطول تساؤلاتك دعني أوضحها لك كما يلي:- </div><div align="right">لقد تابعنا معا من خلال الدروس السابقة مفردات لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> خطوة بخطوة. ومن المحتمل أنك قمت بتطبيق هذه الدروس بصورة عملية من خلال صفحات وهمية قمت أنت بإنشائها. (حسناً فعلت!!! - لأنه من الصعب استيعاب أي موضوع جديد دون القيام بالتطبيق العملي له، وخصوصاً في مجال الكمبيوتر عموماً ولغاته بشكل خاص). والآن أنت تعتقد أنه حان الوقت للعمل الجدي، فلديك فكرة لموضوع ما، وتريد طرحها على الإنترنت. وأنك تفكر بإنشاء موقعك الخاص لتعرض هذا الموضوع من خلاله. وتؤمن أن هذه الدروس التي تتابعها في هذا الموقع قد كوّنت لديك المعرفة الكافية للقيام بتصميم موقعك بنفسك (كما أتمنى)... وبذلك تجد نفسك جاهزاً للانطلاق في رحاب الإنترنت ولتقول بكل فخر: "لدي موقع على الإنترنت". لكنك أيضا قد تتوقف لتفكر للحظات… فأنت تعرف والجميع يعرف أنه يوجد في الإنترنت حالياً الملايين من المواقع! وربما تتساءل: كيف لي أن أنشئ موقعي في هذا الخضم الهائل من المواقع؟! وكيف للناس أن يجدوا طريقهم إلى هذه الزاوية الصغيرة التي أنشأتها في هذا الكيان اللامحدود؟ وإذا كنت من النوع المتشائم فربما ستتراجع عن هذه الفكرة (فكرة الموقع) قبل أن تبدأها... حسناً، لا أريدك أن تشعر بالإحباط. فالطبع لو أن كل واحد منّا يفكر بالجدوى من إنشاء موقع إنترنت خاص به بهذه الطريقة لما وجدت كل هذه المواقع ولما تكونت الإنترنت أصلاً، أليس كذلك؟ </div><div align="right">في بدايات الإنترنت، كانت هناك عبارة دارجة تقول </div><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Build it, and they will come</span></font> <div align="right"><i>أي أنشيء موقعك، وسوف يأتون إليه.</i> ولا أعرف إلى أي مدى كان صدق هذه العبارة في تلك الأيام. فأنا لا أستطيع تخيل أي موقعِ على الويب تهلّ إليه جحافل الزوار بمجرد افتتاحه مهما كانت طبيعة هذا الموقع أو موضوعه أو التقنيات المستخدمه فيه. لكن ما أعرفه حالياً أن تسويق الموقع في متاهات الويب يعد من أهم وأصعب المهمات التي تواجه أصحابه. بل وربما أصعب من عملية إنشاء الموقع نفسها.</div><div align="right">السؤال الآن ... ما هي الطريقة المثلى للوصول إلى شيء ما عندما تحتاجه في الإنترنت؟ والجواب بديهي، إنها محركات البحث. لذلك لا نبالغ إذا قلنا أن الموقع الذي يدرج في محركات البحث وبالذات في الصفحات الأولى منها وفي أعلى مستويات هذه الصفحات هو موقع ناجح يستطيع أن يضمن وصول أكبر عدد من الزوار إليه.</div><br /><strong>إذن فمحركات البحث هي الخطوة الأولى</strong><div align="right">لكن كيف نصل أصلاً إلى محركات البحث هذه؟ (وأعني هنا كيف نتوصل إلى إدراج موقعنا في قوائم هذه المحركات؟) وهو ما سنحاول الإجابة عليه في هذا الدرس. </div><div align="right">حسناً... قد تقول: نحن هنا نناقش لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> فما دخل محركات البحث بهذا الموضوع؟ بالطبع فإن الهدف من هذا الدرس هو إكمال ما بدأناه في الدروس السابقة حول لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> أي أننا سوف نناقش وسوماً جديدة لهذه اللغة. لكن بما أن هذه الوسوم تتعلق بمحركات البحث. فقد وجدت أنه من المحتم توضيح العديد من النقاط حول هذه المحركات. وعلى أية حال فالمزيد من المعرفة لن يضر أحداً. <br />إذن فما ستجده هنا في هذا الدرس لن يكون فقط وسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> بل أيضاً بعض المعلومات والأفكار حول محركات البحث، ولن يعنينا هنا كيفية استخدامها للبحث بل ما سيعنينا هو كيفية إدراج المواقع ضمنها... أي أنك لن تكون هنا باحثاً عن المعلومة، بل ستكون ناشراً لها. وأتمنى أن تكون هذه الأفكار عوناً لك على ذلك. </div><br /><br /><table width="80%" bgColor=#ffffff border=5><tr><td><br /><br /><span style="font-size: 21px; line-height: normal">كيف لك أن تجعل الناس يأتون إلى موقعك، وأن يجدوا طريقهم إليه بسهولة ويسر؟ وبشكل أعمّ ... كيف تستطيع أن تسوّق موقعك؟؟؟<br /><strong>هذا هو السؤال</strong></span> <br /></td></tr></table><div align="right">هنا لن أتكلم معك في أمور بديهية وأقول لك إن الفكرة الموجودة في موقعك والموضوع المطروح فيه لهما أثر واضح في جذب الزوار إليه. ولن أقول لك بأن طريقة تنظيمه وتنسيقه تسهل عليهم التجول فيه، وبالتالي لن يجدوا صعوبة في إيجاد ما يبحثون عنه. كذلك لن أذكّرك بأن التجديد المستمر لمحتوياته يجعل زوارك يحرصون على العودة مرة بعد مرة… طبعا لن أقول لك كل ذلك!!!! <br /></div><div align="right">لا أعرف مدى استخدامك لمحركات البحث للوصول إلى ما تريده في الإنترنت! ولا أعرف أيضاً إن كان استخدامها قد أثار لديك بعض التساؤلات! على سبيل المثال: </div><br /><br /><br /><ul><br /><li>ما الفرق بين <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Yahoo</span></font> و <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Altavista؟</span></font><br /></li><li>ما السبب في تباين النتائج التي تظهر من موقع لآخر من حيث العدد والمحتوى؟<br /></li><li>لماذا يوجد وصلات تشعبية لا تعمل في بعض المحركات أكثر من غيرها؟<br /></li></ul><br /><div align="right">عند الحديث عن مواقع البحث في الإنترنت، من الضروري أن نميز بين محركات البحث من جهة والفهارس (أو أدلة البحث) من جهة أخرى، وذلك من حيث المفهوم والخصائص وأسلوب العمل. </div><br /><br /><div align="right"><strong><i>محركات البحث <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Search Engines</span></font> </i></strong></div><br /><div align="right">يعتبر محرك <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Altavista</span></font> من أوضح الأمثلة على محركات البحث. وهي تسمى أيضاً بالزواحف <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Crawlers</span></font> أو العناكب <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Spiders</span></font> ومردّ هذه التسميات إلى الطريقة التي يتبعها المحرك لإيجاد المواقع وتصنيفها حيث تقوم الروبوتات الخاصة به (برامج خاصة بالبحث وتتميز بالذكاء …الإصطناعي طبعاً) بالزحف في الإنترنت بحثاً عن المواقع الجديدة وعندما تجد أحدها تقوم بفهرسة وتصنيف كل كلمة من الكلمات الموجودة في صفحات هذا الموقع ضمن قاعدة البيانات الهائلة الخاصة بالمحرك، حيث تستخدم هذه البيانات لتكوّن نتائج البحث التي يطرحها زوار المحرك فيما بعد. وتقوم الروبوتات أيضاً من حين لآخر بإعادة زيارة المواقع السابقة بعد مدة قد تطول أو تقصر (أسبوع أو شهر) تبعاً لطبيعة المواقع نفسها وعدد الزوار اليوميين وكبر الحجم وذلك بهدف تحديث المعلومات عن هذه المواقع وإعادة تصنيف أي إضافات أو إلغاءات طرأت عليها. وكل ذلك يجرى بصورة أتوماتيكية من خلال هذه الروبوتات. ونستطيع القول أن التصنيفات الموجودة في مثل هذه المحركات تكون إلى حد ما حديثة. </div><br /><strong><i>الفهارس أو أدلة البحث <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Directories</span></font> </i></strong><br /><div align="right">ولعل من أبرز الأمثلة عليها هو الفهرس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Yahoo</span></font> وفي هذا النوع من طرق البحث يتم تصنيف المواقع ضمن قوائم متدرجة ومتشعبة عن بعضها البعض بحيث يبدأ بالمفتاح الأساسي العام ثم يتدرج إلى الأكثر تحديداً وهكذا. ويقوم بعملية التصنيف هذه طاقم يعمل خصيصاً في البحث عن المواقع. (أي طاقم بشري، وذلك على خلاف المحركات) كما يعتمد على المعلومات التي يقوم أصحاب المواقع بإرسالها إلى الفهرس عندما يقومون بتحميل المعلومات الخاصة بموقعهم إليه. لذلك نجد أن كمية المعلومات المصنفة في الأدلة أقل منها في محركات البحث وأحياناً أقل حداثة. </div><div align="right">ولكي أوضح لك الفرق بين كلا الموقعين إليك المثال العملي التالي: </div><div align="right">عندما قمت بالبحث عن المواقع الخاصة بمدينتي نابلس باستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Yahoo</span></font> كانت نتيجة البحث ثلاثة مواقع فقط، وكانت إحدى النتائج كما يلي:</div><font face="Arial"><span style="font-size: 9px; line-height: normal">Regional: Regions: Middle East: Countries and Regions: Palestinian Authority: Cities and Regions: Nablus </span></font><br /><div align="right">وكما ترى فإن تسلسل البحث انتقل من <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Regional</span></font> إلى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Region</span></font> إلى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Middle East</span></font> وهكذا نزولاً إلى أن وصل إلى نابلس </div><div align="right">أما باستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Altavista</span></font> فكانت النتيجة حوالي 4218 موقع، حيث تمّ سرد المواقع تباعاً ودون أي تصنيف أو ترتيب محدد. والحقيقة أن هناك صفحات في نفس الموقع تكرر ظهورها ضمن نتائج البحث، والسبب في ذلك فقط لأن كلمة نابلس تكررت في كل صفحة من صفحات الموقع.<br />وطبعاً كما تلاحظ فإن هناك فرقاً شاسعاً بين النتائج التي تم الحصول عليها ومردّه كما أسلفت إلى طريقة العمل والتصنيف المتبعة في كل من المحركين. </div><br /><br /><div align="right">والآن لنبدأ حديثناً عن وسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">META</span></font> فما هي هذه الوسوم ؟؟؟<br />باختصار شديد، هي وسوم تدرج ضمن صفحات الويب، وبالتحديد في أعلاها وضمن المقطع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><HEAD> ... <‎/HEAD> </span></font>وتستخدم لوصف الصفحة أو الموقع بشكل عام، من حيث المحتويات والكلمات الرئيسية أو المفتاحية والمؤلف وغيرها من المعلومات التي قد نعتبرها توثيقية. كما أنها تفيد في عملية التصنيف التي تجرى من قبل محركات البحث. (ولاحظ أنّي قلت محركات البحث ولم أقل أدلة البحث) فالحقيقة أن محركات البحث مثل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Altavista, Hotbot, Infoseek </span></font>هي التي تستفيد فقط من هذه الوسوم وتلجأ إليها في عملية تصنيف الموقع ولا تستفيد منها الأدلة. أي أن <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Yahoo</span></font> لا يتعامل معها أبداً. ومع ذلك فإن نشرك لصفحاتك على الإنترنت دون وضع هذه الوسوم ضمنها يعتبر إغفالاً لجانب مهم من جوانب إنشاء المواقع على الويب. <strong><u>ولكن ...</u></strong> (عادة عندما تظهر "لكن" في منتصف الحديث، فإن هناك أخباراً غير سارة في الطريق) لا تعتبر هذه الوسوم حلاً سحرياً لمسألة محركات البحث، صحيح أنها تزيد من إحتمالات إدراج موقعك في هذه المحركات، وأنها تساعد المحركات على تصنيف صفحاتك بالطريقة التي تراها أنت مناسبة. لكن سيبقى أمامك خطوات أخرى لإكمال هذه المهمة. </div><br /><br /><div align="right">لقد حان الوقت للتّكلم بلغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML... </span></font>وأبدأ بالقول إن الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><META></span></font> هو وسم مفرد. وهو يأخذ الخصائص التالية: </div><br /><br /><br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTTP-EQUIV</span></font> <br />تعتبر هذه الخاصية مكافئةً للوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><HEAD></span></font> الذي يعرف الصفحة ككل. (والحقيقة أن اسمها يدل على ذلك) وبدون الدخول في تفاصيل جانبية، نستطيع أن نقول أنها تحدد خصائص الصفحة ككل. <div align="right">وإذا كانت لديك ذاكرة قوية فسوف تدرك أننا قمنا بالفعل باستخدام هذه الوسوم مسبقاً!! وكان ذلك في <a href="http://www.khayma.com/hpinarabic/htutor17.html" class="postlink" target="_blank" rel="nofollow">الدرس السابق</a> عندما حددنا صفحة الترميز العربية التي سيتم عرض الصفحة من خلالها وكان ذلك بالشكل التالي: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎ <br /></span></font><br /><div align="right"></div><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> <br />نقوم من خلال هذه الخاصية بتحديد اسم (أو لنقل عنوان) وحدة البيانات التي نريد تعيين قيمها <br /><div align="right"></div><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">CONTENT</span></font> <br />تحدد المحتويات أو البيانات التي نريد إسنادها للخاصيتين السابقتين <br /><div align="right">في واقع الأمر فإن لهذه الخصائص الكثير من القيم. لكنها بكل بساطة لا تعنينا في شيء، فمعظم هذه القيم توصف بأنها <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Server Side</span></font> أي يتم التعامل معها على مستوى المزود وليس على مستوى جهاز المستخدم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Client Side</span></font> ولا تهم مصممي صفحات بسطاء مثلنا. وما يعنينا بالدرجة الأولى هي القيم التالية: </div><br /><ul><br /><br /><br /><li>مع الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTTP-EQUIV...</span></font><br />القيمة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Content-Type</span></font> والتي تعني نوعية المحتويات. وأذكرك مرة أخرى أننا تعاملنا معها مسبقاً ... ثم باستخدام الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Content</span></font> قمنا بتحديد طبيعة هذه المحتويات على أنها <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">text/html</span></font> أي نصوص لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> وأن صفحة ترميزها هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Windows-1256</span></font> ...ولن نحتاج أكثر من ذلك مع هذه الخاصية.<br /></li><li><div align="right">مع الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME...</span></font> نستخدم </div><ul><br /></li><li><div align="right">القيمة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">keywords</span></font> لتحديد الكلمات المفتاحية للصفحة. </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META NAME="keywords" ... >‎</span></font><br /><div align="right">ثم نستخدم الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Content</span></font> لتحديد هذه الكلمات. وعلى سبيل المثال إليك الشيفرة التالية التي أستخدمها في صفحات هذا الموقع </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META NAME="keywords"CONTENT="html,webpage design,psp,paint shop pro,arabic site">‎</span></font><br /><div align="right">ولا ضرر في تكرار بعض أو كل الكلمات المفتاحية لثلاث أو أربع مرات للتأكيد عليها </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META NAME="keywords"CONTENT="html,html,html,html,webpage design,psp,paint shop pro,arabic site">‎</span></font><br /></li><li><div align="right">القيمة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">description</span></font> لتوصيف الصفحة، وذلك بعبارات قصيرة تلخص محتويات الصفحة والهدف منها. </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META NAME="description" CONTENT="Html and Paint Shop Pro tutorials in Arabic,learning web page design in Arabic">‎</span></font> <br /></li><li><div align="right">القيمة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">author</span></font> لتوثيق اسم المؤلف أو صاحب الموقع </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META NAME="author" CONTENT="Abu Al-Abed">‎</span></font> <br /></li><li><div align="right">القيمة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">copyright</span></font> لسرد حقوق النشر الخاصة بالصفحة</div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<META NAME="copyright" CONTENT="....">‎</span></font> <br /></li></ul></LI><br /></ul><br /><br /><div align="right">هذه هي وسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">META</span></font> التي تهمنا. وسوف أقوم الآن بإجمالها لك في شيفرة واحدة مع باقي الوسوم في ترويسة الصفحة بحيث يمكنك قصها ولصقها في كل صفحة من صفحاتك. وعليك طبعا كتابة القيم والبيانات التي تريدها فيما بعد حسب عنوان صفحتك والكلمات المفتاحية والوصف الذي تريده (لا تتوقع مني أن أقوم أيضاً بكتابه هذه القيم لك). كذلك لا تنس تحديد صفحة الترميز إن كانت مختلفة أو حذف الوسم الخاص بها إن كانت صفحتك باللغة الإنجليزية. </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HEAD><br /><TITLE> ... <‎/TITLE><br />‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎<br />‎<META NAME="keywords" CONTENT=" ... ">‎<br />‎<META NAME="description" CONTENT=" ... ">‎<br />‎<META NAME="author" CONTENT=" ... ">‎<br />‎<META NAME="copyright" CONTENT=" ... ">‎<br /><‎/HEAD><br /></span></font><br /><br /><br /><div align="right">هل هذا يكفي؟ وأعني هل تكفي هذه الوسوم لتكون من الأوائل دائماً على صفحات محركات البحث؟ كما أسلفت هناك دائماً جهود إضافية يجب عليك بذلها. وهذه المرة عليك التوجه إلى هذه المحركات والبحث عن الوصلات التشعبية الخاصة بإضافة المواقع الجديدة. في <a href="http://www.altavista.com/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Altavista</span></font></a> ستجد أنها تسمى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><strong><i>Add Page</i></strong>.</span></font> وفي <a href="http://www.infoseek.com/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Infoseek</span></font></a> و <a href="http://www.excite.com/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Excite</span></font></a> و <a href="http://www.hotbot.com/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HotBot</span></font></a> ستجدها <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><i><strong>Add URL</strong></i></span></font> أما في <a href="http://www.yahoo.com/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Yahoo</span></font></a> فهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><strong><i>How To Suggest a Site?</i></strong></span></font> كذلك ستجد مثل هذه الوصلات في المواقع العربية وعادة تعرف بـِ <strong><i>أضف موقعك.</i></strong> <br />على أية حال قم بالنقر عليها لكي تقودك إلى نموذج بسيط عليك ملؤه ببعض المعلومات عن موقعك (لا تخف فإن طريقة التعامل مع هذه النماذج هي أبسط مما تتصور). لكن لا تتوقع أن ترى موقعك وقد تمت إضافته في الدقائق التالية لهذه العملية، فهذا يحتاج في معظم الأحوال إلى عدة أيام. </div><div align="right">أعرف أنك ستقول عن هذه العملية بأنها صعبة وشاقة... لذلك سوف أدلك على طريقة أسهل وأسرع بكثير. هناك برامج خاصة لإدراج المعلومات عن المواقع والصفحات بحيث تقوم بملء نموذج خاص لمرة واحدة فقط بكل ما تريده من معلومات ثم يقوم هذا البرنامج بإرسالها إلى المئات من محركات وأدلة البحث... هكذا ببساطة وبدقائق معدودة. ومن هذه البرامج برنامج <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><a href="http://www.cyberspacehq.com/addweb/home.htm" class="postlink" target="_blank" rel="nofollow">AddWeb</a></span></font> وبرنامج <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><a href="http://www.exploit.net/wizard/index.html" class="postlink" target="_blank" rel="nofollow">Submission Wizard</a></span></font> لكن من المؤسف أن النسخ المشتركة لهذه البرامج أو مثيلاتها، تكون محدودة الفعالية أي تتعامل مع عدد محدود من المحركات والأدلة وليس كلها إلا إذا قمت بشراء هذه البرامج. ...لكن لا بأس من تجربتها على الإطلاق. </div><div align="right">وأخيراً ما رأيك بارسال عنوان موقعك إليّ وسوف أقوم بكل سرور بإضافته إلى صفحة الوصلات التشعبية الخاصة بهذا الموقع. </div><br /> <br /><br /><table dir=rtl border=0><tr><td>اسم الموقع</td><td></td></tr><tr><td>العنوان</td><td></td></tr></table> <div align="right">نكون الآن قد وصلنا إلى نهاية هذا الدرس، مع أصدق تمنياتي بأن يكون موقعك دائما على الصفحة الأولى لمحركات البحث. </div></BLOCKQUOTE></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--268" style=""><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr class="post post--269" id="p269" style=""><td class="row2" valign="top" width="150"><span class="name"><a name="269" style="position: relative; top: -30px; width: 1px;" id="269"></a><strong>Eng. Ahmedzoubaa</strong></span><br /><span class="postdetails poster-profile">Admin<br /><img loading="lazy" src="https://2img.net/u/3115/12/13/38/avatars/1-47.jpg" alt="Eng. Ahmedzoubaa" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#06067a;">عدد المساهمات</span> : </span> 1216<br /><span class="label"><span style="color:#06067a;">تاريخ التسجيل</span> : </span> 28/08/2010<br /><span class="label"><span style="color:#06067a;">العمر</span> : </span> 50<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="مقدمة في HTML 4 Empty" style="width:150px;height:1px" /></td><td class="row2" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: مقدمة في HTML 4   <img src="https://2img.net/i/fa/empty.gif" alt="مقدمة في HTML 4 Empty" border="0" />الخميس 18 نوفمبر 2010 - 8:40</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr height="100%" valign="top"><td colspan="2"><div class="postbody"><div>وإلي هنا وصنا إلي نهاية الشرح ونفيدكم بمجموعة مواقع قد تهمك لزيادة معلوماتك <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/linkhtml.gif" style="width: 250;height: 50" border="0" alt="مقدمة في HTML 4 Linkhtml"/> <div align="right"><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">World Wide Web Consortium.</span></font> </a><br />إتحاد الشبكة العالمية: ليس فقط الموقع الذي يضع معايير لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> بل يضم أيضا الكثير الكثير من المعلومات المرجعية لكل ما يحتاجه مطورو مواقع الإنترنت.<br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://webreference.com/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">WebReference</span></font></a><br />موقع مرجعي رائع يضم مواضيع في جميع مجالات تصميم وإنشاء مواقع الويب. <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://www.hwg.org/resources/html/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML Writers' Guild.</span></font></a><br />موقع خاص بمجموعة الكتّاب والمهتمين بلغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font>. تستطيع الإستفادة من بعض الخدمات المجانية لهذا الموقع، كما تستطيع الإشتراك فيه والحصول على جميع الخدمات مقابل رسم سنوي. <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://www.yahoo.com/Computers/World_Wide_Web/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">World Wide Web section of Yahoo. </span></font></a>صفحة على موقع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Yahoo</span></font> تضم عناوين لصفحات ومواقع تعليمية للغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> وغيرها. <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://www.newbie.net/frames/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">THE Netscape Frames Tutorial</span></font></a> دليل شامل من شركة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape</span></font> لتعليم تصميم صفحات الإطارات <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://werbach.com/barebones/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">The Bare Bones Guide to HTML</span></font></a> فهرس متعدد اللغات بجميع وسوم وخصائص لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> مع شرح مبسط جداً لها. <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://owh.zarcrom.com/tutorials/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Creating A Homepage</span></font></a> يحتوي على دروس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> للمبتدئين، بالإضافة إلى صور جاهزة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Cliparts</span></font> لإستخدامها كخلفيات للصفحات. <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://www.htmlgoodies.com/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML Goodies</span></font></a> واحد من أفضل مواقع تعليم تصميم صفحات الإنترنت. وتجد هنا الكثير من الدروس للمبتدئين والمتقدمين على السواء.<br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://www2.imagiware.com/RxHTML/" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Doctor HTML</span></font></a> طبيب إتش.تي.أم.أل: دلّ هذا الموقع على صفحاتك وسوف يقوم بإيجاد العلل والأخطاء البرمجية فيها ويداويها.<br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/button.gif" style="width: 20;height: 20" border="0" alt="مقدمة في HTML 4 Button"/> <a href="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html" class="postlink" target="_blank" rel="nofollow"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">A Beginner's Guide to HTML</span></font></a> دليل المبتدئين إلى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font><br /></div></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--269" style=""><td class="row2 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row2 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr align="right"><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="9%" class="noprint"> </td><td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">مقدمة في HTML 4</div></td><td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> </td></tr></table></td></tr></table><table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;"><tr><td class="row2" valign="top" colspan="2" width="150"><span class="gensmall">صفحة <strong>1</strong> من اصل <strong>1</strong></span></td></tr><tr><td class="row2" colspan="2" align="right" valign="top"><span class="gensmall"></span></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><div class="cattitle"> مواضيع مماثلة</div></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_more" src="https://2img.net/i/empty.gif" alt="+" align="middle" border="0" /></a></span></td></tr></table></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><div class="cattitle"> مواضيع مماثلة</div></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_less" src="https://2img.net/i/empty.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr><tr><td class="row2 postbody" valign="top">» <a style="text-decoration:none" href="/t192-topic" title="مقدمة في HTML">مقدمة في HTML</a><br />» <a style="text-decoration:none" href="/t193-topic" title="مقدمة في HTML 2">مقدمة في HTML 2</a><br />» <a style="text-decoration:none" href="/t194-topic" title="مقدمة في HTML 3 ">مقدمة في HTML 3 </a><br />» <a style="text-decoration:none" href="/t186-topic" title="كتب تعليم تصميم المواقع - كتاب تعليم HTML-40">كتب تعليم تصميم المواقع - كتاب تعليم HTML-40</a><br />» <a style="text-decoration:none" href="/t196-topic" title="مقدمة إلى برنامج Paint Shop Pro">مقدمة إلى برنامج Paint Shop Pro</a><br /></td></tr></table><table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="row2" colspan="2" align="center" style="padding:0px"><a name="quickreply"></a><br /></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"><tbody><tr><td class="row2" valign="top" width="25%"><span class="gensmall"><strong>صلاحيات هذا المنتدى:</strong></span></td><td class="row1" valign="top" width="75%"><span class="gensmall"><strong>لاتستطيع</strong> الرد على المواضيع في هذا المنتدى<br /></span></td></tr><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/">رسالة مصرية ثقافية</a><a class="nav" href=""></a> :: <a href="/f20-montada" class="nav"><span>برامج الحاسب الآلي وتكنولوجيا المعلومات</span></a> :: <a href="/f22-montada" class="nav"><span>كتب وبرامج تعلمية</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img class="sprite-tabs_less" src="https://2img.net/i/empty.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;"><tbody><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/">رسالة مصرية ثقافية</a><a class="nav" href=""></a> :: <a href="/f20-montada" class="nav"><span>برامج الحاسب الآلي وتكنولوجيا المعلومات</span></a> :: <a href="/f22-montada" class="nav"><span>كتب وبرامج تعلمية</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img class="sprite-tabs_more" src="https://2img.net/i/empty.gif" alt="+" align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr></table><form action="/viewforum" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}"><table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"><tr><td align="left" valign="middle" nowrap="nowrap" ><span class="nav"></span></td><td align="right" nowrap="nowrap"><span class="gensmall">انتقل الى: <select name="selected_id" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">اختر منتدى</option><option value="-1"></option><option value="-1">|</option><option txt="foro" value="c1">|--الفئة الأولى</option><option txt="foro" value="f1">|   |--المنتدى العام</option><option txt="foro" value="f35">|   |--إعلانات عامة</option><option txt="foro" value="f37">|   |--التواصل بين الإدارة والزوار</option><option value="-1">|   </option><option txt="foro" value="f6">|--ديني</option><option txt="foro" value="f17">|   |--كتب دينية</option><option txt="foro" value="f23">|   |--قرآن كريم</option><option txt="foro" value="f36">|   |--أدعية وأذكار</option><option txt="foro" value="f39">|   |--العقيدة الإسلامية</option><option txt="foro" value="f40">|   |--السيرة</option><option txt="foro" value="f45">|   |   |--هدي النبي صليى الله عليه وسلم وشمائله المحمدية</option><option txt="foro" value="f46">|   |   |--فقه السيرة النبوية</option><option value="-1">|   |   </option><option txt="foro" value="f43">|   |--تفسير القرآن الكريم</option><option txt="foro" value="f42">|   |--الفقه الإسلامي</option><option txt="foro" value="f41">|   |--التربية الإسلامية</option><option txt="foro" value="f44">|   |--موضوعات إسلامية</option><option value="-1">|   </option><option txt="foro" value="f4">|--المنتدي الثقافي</option><option txt="foro" value="f14">|   |--كتب متنوعة</option><option txt="foro" value="f18">|   |--مقالات وأدبيات</option><option txt="foro" value="f9">|   |--عالم المرأة والأسرة</option><option txt="foro" value="f29">|   |   |--أزياء وموضة</option><option txt="foro" value="f30">|   |   |--عالم المطبخ</option><option value="-1">|   |   </option><option txt="foro" value="f24">|   |--عالم الطفل</option><option txt="foro" value="f27">|   |--أبـــــــــــــــراج</option><option txt="foro" value="f38">|   |--ملف خاص بصور الثورة المصرية</option><option value="-1">|   </option><option txt="foro" value="f8">|--قسم العلوم التربوية والأدبية</option><option txt="foro" value="f5">|   |--التاريخ العربي</option><option txt="foro" value="f31">|   |   |--كتاب تاريخ العالم</option><option txt="foro" value="f32">|   |   |--كتاب تاريخ مختصر العالم الإسلامي</option><option value="-1">|   |   </option><option txt="foro" value="f25">|   |--شخصيات تاريخية</option><option txt="foro" value="f7">|   |--قسم علوم التربية</option><option txt="foro" value="f19">|   |--تعليم لغات</option><option value="-1">|   </option><option txt="foro" value="f3">|--علم الزراعة والإنتاج الزراعي</option><option txt="foro" value="f10">|   |--مكافحة الآفات</option><option txt="foro" value="f11">|   |--تنسيق حدائق وشبكات ري</option><option txt="foro" value="f12">|   |--بساتين ( خضر - محاصيل - فاكهة)</option><option txt="foro" value="f26">|   |   |--البرامج الزمنية للعمليات الزراعية في المحاصيل المختلفة</option><option value="-1">|   |   </option><option txt="foro" value="f33">|   |--أمراض نبات</option><option txt="foro" value="f28">|   |--النباتات والأعشاب الطبية</option><option txt="foro" value="f13">|   |--إنتاج حيواني وتربية</option><option txt="foro" value="f15">|   |   |--إنتاج حيواني</option><option txt="foro" value="f16">|   |   |--إنتاج داجني</option><option value="-1">|   |   </option><option txt="foro" value="f34">|   |--الصناعات الغذائية والألبان</option><option value="-1">|   </option><option txt="foro" value="f20">|--برامج الحاسب الآلي وتكنولوجيا المعلومات</option><option txt="foro" value="f21">    |--برامج الحاسب الآلي</option><option txt="foro" value="f22">    |--كتب وبرامج تعلمية</option></select><input type="hidden" name="tid" value="08ee797a649cd3b7e9800998ecf8427e" /> <input class="liteoption" type="submit" value="انتقل الى" /></span></td></tr></table></form><div id="j64d134" style="clear:both;"><div align="center"><div></div></div></div><div style="height:3px"></div></td><td valign="top" width="0"><div id="emptyidright"></div></td></tr></tbody></table></div></div><!-- close div id="page-body" --><div id="page-footer"><div align="center"><div class="gen"><span class="gensmall">©</span><a href="https://www.ahlamontada.com/phpbb" target="_blank">phpBB</a> | <strong><a href="https://www.ahlamontada.com/" target="_blank">Ahlamontada.com</a></strong> | <a name="bottom" href="https://help.ahlamontada.com/" target="_blank">منتدى مجاني للدعم و المساعدة</a> | <a href="/abuse?page=%2Ft195-topic&report=1" rel="nofollow">التبليغ عن محتوى مخالف</a> | <a href="javascript:window.Sddan.cmp.displayUI();">ملفات تعريف الارتباط التابعة لجهات خارجية</a> | <strong><a href="/latest" target="_blank">آخر المواضيع</a></strong></div></div></div></td></tr></table><script type="text/javascript">$(document).ready( function() {$('div.ti-connect').attr({'data-loc' : 'https://connect.topicit.net/','data-login' : 'https://resalahmasriyah.mam9.com/topicit/index.php/connect','data-version' : '1','data-lang' : 'ar'});(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.topicit.net/scripts/connect.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'topicit-connect'));});</script><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script><script type="text/javascript"> var vglnk = { key: '74bad24252620514d1244cfba01f2ee2' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <script async src="https://ac.audiencerun.com/j/tag.js" data-arun-z="327yqx5vf9" data-arun-a="1" data-arun-cb="%%CACHEBUSTER%%" data-arun-vu="%%VIEW_URL_UNESC%%" data-arun-pm="%%PREVIEW_MODE%%" data-arun-site="%%SITE%%" data-arun-url="%%PATTERN:url%%" > </script></body></html>