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




  • يتصفح الموقع حالياً
  • [ 96 ]
  • Loading...


البحث داخل الموقع

Loading

الساحة الأولى : دروس لغة الهتمل HTML ردود(0) قراءات(16883)
دروس لغة الهتمل HTML مقدمة في لغة دروس لغة الهتمل HTML
دروس لغة الهتمل HTML HTML دروس لغة الهتمل HTML




إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ Hyper Text Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C . فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به Compiler . وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.

تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين) :-


دروس لغة الهتمل HTML



فعلى سبيل المثال الوسم يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:

Text <‎/B>

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

.
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله


كيف نبدأ...


لا يتطلب كتابة ملف HTML أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود في Windows يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت Netscape Navigator أو MS Internet Explorer لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط أن نقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد ‎.html أو ‎.htm
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق html. أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج. وهذه الطريقة على سهولتها وسرعتها نسبياً، إلا أني لا أنصح باستخدامها لمن يريد معرفة هذه اللغة والتمكن منها.


قبل أن نبدأ


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


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

الأساسيات
تعريف ملف
Html والوسوم الرئيسية فيه ، إنشاء صفحة ويب بسيطة

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

لنأخذ الوسوم التالية:
وسم البداية وسم النهاية
<‎/HTML>
<‎/HEAD>
</font></font></td> <td><font face="Times New Roman"><font size="4"><‎/TITLE></font></font></td> </tr> <tr align="CENTER"> <td><font face="Times New Roman"><font size="4"><BODY></font></font></td> <td><font face="Times New Roman"><font size="4"><‎/BODY></font></font></td> </tr> </tbody></table> </center> <br /> ماذا تلاحظ؟ أن كل منها يتألف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> زوج <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف <font face="Times New Roman"><font size="4">Html</font></font> <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/htsketsh.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <font face="Wingdings"><font size="5">E</font></font> إذن فملف <font face="Times New Roman"><font size="4">Html</font></font> يبدأ دائماً بالوسم <font face="Times New Roman"><font size="4"><HTML></font></font> وينتهي بالوسم <font face="Times New Roman"><font size="4"><‎/HTML>.</font></font> لا تنسى ذلك! <br /> أما الوسم <font face="Times New Roman"><font size="4"><HEAD></font></font> فيحدد بداية المقطع <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <font face="Times New Roman"><font size="4"><TITLE> … <‎/TITLE></font></font> وبالطبع يجب كتابة الوسم <font face="Times New Roman"><font size="4"><‎/HEAD></font></font> لكي ننهي هذا المقطع. <br /> نأتي إلى الوسم <font face="Times New Roman"><font size="4"><BODY></font></font> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء <font face="Times New Roman"><font size="4"><‎/BODY></font></font> <br /> ما رأيك لو نبدأ بتطبيق هذه المعلومات بصورة عمليه؟ هيا… قم بفتح <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> المفكرة واكتب ما يلي: <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE><br /> This is a test Webpage<br /> <‎/TITLE><br /> <‎/HEAD><br /> <br /> <BODY><br /> Wow, I'm writing my first webpage<br /> <‎/BODY><br /> <‎/HTML> <br /> </font></font> والآن قم بحفظ ما كتبته <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أسماء ملفات <font face="Times New Roman"><font size="4">HTML</font></font> هو <i><font face="Times New Roman"><font size="4">htm.</font></font></i> أو <i><font face="Times New Roman"><font size="4">html.</font></font></i> مثلاً أنا اخترت الاسم <font face="Times New Roman"><font size="4">‎1st_file.htm</font></font> ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث وليكن هذا المجلد مثلاً بالاسم <font face="Times New Roman"><font size="4">C:\htmfiles</font></font> (أو بأي اسم يحلو لك). <br /> حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تستخدمه. فإذا كان <font face="Times New Roman"><font size="4">Netscape Navigator</font></font> اختر الأمر <font face="Times New Roman"><font size="4">Open File…</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قائمة <font face="Times New Roman"><font size="4">File.</font></font> أما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">MS <a href="http://www.hikm4.com/vb/tags.php?tag=Internet" > Internet </a> Explorer</font></font> فاختر الأمر <font face="Times New Roman"><font size="4">Open…</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قائمة <font face="Times New Roman"><font size="4">File.</font></font> ثم حدد المسار <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يوجد به الملف. أنا شخصياً قمت بتحديد المسار التالي: <br /> <font face="Times New Roman"><font size="4"> C:\htmfiles\1st_file .htm</font></font> <br /> وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. وهذا ما حصلت عليه: <br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/webpage1.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> وماذا عنك؟ هل حصلت على نفس النتيجة؟ إذن مبروك <font face="Wingdings"><font size="5">J</font></font> لقد قمت بإنشاء أول صفحة ويب خاصة بك. (وإلا، إذا لم تحصل على نفس النتيجة قم بالنقر هنا) <br /> وقبل أن نستمر أريد أن أنبهك إلى <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الملاحظات عند كتابة صفحات الويب: <br /> <ul><li><div align="right"> لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة <font face="Times New Roman"><font size="4">UPPERCASE</font></font> أو الأحرف الصغيرة <font face="Times New Roman"><font size="4">lowercase.</font></font> لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما. </div></li> <li> إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح <font face="Times New Roman"><font size="4"><i>Enter</i>)</font></font> التي تجدها هذه المتصفحات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ملف <font face="Times New Roman"><font size="4">Html.</font></font> وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي: </li> </ul> <font face="Arial"><font size="2"> <HTML><HEAD><TITLE> This is a test Webpage
Wow, I'm writing my first webpage ‎
أو بالشكل التالي:


<br /> This <br /> is a <br /> test <br /> Webpage<br /> <‎/TITLE><br /> <‎/HEAD><br /> <BODY><br /> Wow, <br /> I'm <br /> writing <br /> my <br /> first <br /> webpage<br /> <‎/BODY><br /> <‎/HTML> </font></font> <br /> أو حتى بهذا الشكل: <br /> <font face="Arial"><font size="2"> <HTML> <HEAD> <TITLE> <br /> This is a test Webpage<br /> <‎/TITLE><br /> <‎/HEAD><br /> <BODY><br /> Wow, I'm writing my first webpage<br /> <‎/BODY><br /> <‎/HTML><br /> </font></font> وفي كل الحالات ستحصل على نفس النتيجة. وإذا كنت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> تلك النوعية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الناس التي لا تصدق كل ما يقال… تستطيع أن تجرب ذلك بنفسك!!! هيا جرب.<br /> <br /> لكن هذا لا يعني أن الفقرة المكونة مثلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عشرة أسطر ستمتد إلى عدة أمتار بعرض الشاشة. كلا بالطبع لأن المتصفح سيقوم بعمل التفاف تلقائي لها بحسب عرض الشاشة، مهما كان مقدار هذا العرض. <br /> <br /> والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟ سؤال وجيه!!! والإجابة عليه هي: <br /> سوف نستخدم الوسم <font face="Times New Roman"><font size="4"><BR></font></font> لتحديد النهاية للسطر. والبدء بسطر <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF" > جديد </a> (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية). <br /> ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل التالي <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE> <br /> This is a test Webpage<br /> <‎/TITLE><br /> <‎/HEAD><br /> <BODY><br /> <br /> </font></font><font face="Arial"><font size="2">Wow, <font color="#ff0000"><BR></font> I'm writing my <font color="#ff0000"><BR>‎<br /> </font> first webpage<br /> <‎/BODY><br /> <‎/HTML> </font></font><br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/webpage2.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <br /> وهناك أيضا الوسم <font face="Times New Roman"><font size="4"><P></font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF" > جديد </a> لكن مع إضافة سطر إضافي فارغ بين الفقرات.<br /> المزيد عن هذا الوسم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الرابع الفقرات <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE> <br /> This is a test Webpage<br /> <‎/TITLE><br /> <‎/HEAD><br /> <BODY><br /> Wow, <font color="#ff0000"><P></font> I'm writing my <font color="#ff0000"><P>‎</font><br /> first webpage<br /> <‎/BODY><br /> <‎/HTML> </font></font><br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/webpage3.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم <font face="Times New Roman"><font size="4">‎ ‎</font></font> (والأحرف هي اختصار للعبارة <font face="Times New Roman"><font size="4">Non Breakable Space).</font></font> وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا. <br /> إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي: <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE> <br /> This is a test Webpage<br /> <‎/TITLE><br /> <‎/HEAD><br /> <BODY><br /> Wow,      ‎<br /> I'm      writing    ‎<br /> ‎  my       first       webpage<br /> <‎/BODY><br /> <‎/HTML> </font></font> <br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/webpage4.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <br /> وبمناسبة الحديث عن الرموز الخاصة فهناك العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الرموز والتي يجب أن تكتب بصورة معينة وباستخدام الوسوم وليس مباشرة بصورتها العادية. خذ مثلا إشارتي <i> أكبر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وأصغر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وإشارة الاقتباس <font face="Times New Roman"><font size="4">".</font></font></i> كل هذه الإشارات تستخدم أصلاً مع الوسوم فهي محجوزه ضمن مفردات <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> ومن الخطأ استخدامها بصورتها الصريحة لئلا يؤدي ذلك إلى حدوث مشاكل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> طريقة عرض الصفحة. كذلك فإن هناك رموزاً غير موجودة أساساً على لوحة المفاتيح كرمز حقوق الطبع <font face="Times New Roman"><font size="4">©</font></font> ورمز العلامة المسجلة <font face="Times New Roman"><font size="4">®</font></font> ونحتاج إلى هذه الطريقة(طريقة الوسوم) لكتابتها. وإليك جدول ببعض هذه الرموز ووسومها المكافئة. وألفت نظرك إلى أنها تكتب كما هي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجدول وبدون إشارتي <> <br /> وصلنا إلى النهاية... نهاية الدرس الأول. أتمنى أن تكون قد وجدت فيه <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المتعة والفائدة ما يجعلك تنقر هنا للإنتقال فوراً إلى الدرس الثاني. <br /> <br /> <div align="center"><br /> <br /> <font size="5"><font color="Red">الألوان<br /> تنسيق الصفحة، أضف لصفحتك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الحيوية باستخدام الألوان والخلفيات</font></font><br /> <br /> </div><blockquote> أهلاً وسهلاً بك إلى الدرس الثاني <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> سوف نقوم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس بالتعرف على الخصائص التي يمكن إضافتها إلى الوسم <font face="times new roman"><font size="4"><BODY></font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أجل التحكم بالشكل العام للصفحة، وخصوصا فيما يتعلق بالألوان. <br /> طبعاً أنت لا زلت تذكر الصفحة التي قمنا بكتابتها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الأول. صفحة بسيطة بخلفية رمادية وخط صغير نسبياً لونه أسود. وهذه هي الإعدادات الإفتراضية التي يعتمدها المتصفح عندما لا نقوم نحن بتحديد إعدادات أخرى. (ربما تقول: أهذه صفحة إنترنت! أين الألوان والرسومات والخطوط الجميلة والتنسيقات التي نراها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الإنترنت؟ معك حق لكن مهلاً فما زلنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> البداية). <br /> سوف نستمر باستخدام صفحتنا هذه لتوضيح أمثلة هذا الدرس أيضاً، لكن لن أقوم بتكرار كتابة وسوم البداية طالما أن عملنا يتركز <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجزء المخصص لمحتويات الصفحة نفسها أي ضمن الوسمين <font face="Times New Roman"><font size="4"><BODY> ... <‎/BODY>.</font></font><br /> إذن لنبدأ العمل! <br /> نطلق كلمة خاصية <font face="times new roman"><font size="4">(Attribute)</font></font> على التعابير التي تضاف إلى الوسوم، <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أجل تحديد الكيفية أو الشكل <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تعمل بها هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل. <br /> تأمل الشيفرة التالية: <br /> <font face="Arial"><font size="2"> ‎<BODY BGCOLOR="FFFFFF">‎<br /> ...<br /> <‎/BODY> </font></font> <br /> لقد قمت بإضافة الخاصية <font face="Times New Roman"><font size="4">BGCOLOR</font></font> إلى الوسم <font face="Times New Roman"><font size="4"><BODY></font></font> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما <font face="Times New Roman"><font size="4">FFFFFF</font></font> فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي " " ) ولو أردت تمثيل اللون الأسود لكتبت الرمز <font face="times new roman"><font size="4">000000.</font></font> أو الرمز <font face="times new roman"><font size="4">6699CC</font></font> للون الأزرق الفاتح......<br /> فمن أين جاءت هذه القيم، وكيف؟... تابع القراءة وسوف تعرف <br /> <hr width="80%"><br /> <br /> <font face="Arabic Transparent"><font size="6"> <b>القليل عن الألوان...</b> </font></font> <br /> <br /> تلاحظ أن القيم السابقة مكونة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ستة رموز، وهي مكتوبة بالصيغة التالية:- <br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/rrggbb.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <br /> هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى. <br /> <center> <table dir="RTL" align="CENTER" bgcolor="#FFFFFF" border="4" cellpadding="5"> <tbody><tr> <td dir="RTL"> <font face="Arabic Transparent"><font size="4"> * إن أي لون هو مزيج -وبنسبة معينة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الدرجات- <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الألوان الثلاثة * </font></font> </td> </tr> </tbody></table> </center> فمثلا اللون الأسود مكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الدرجة 000 <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> كل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الدرجة 255 <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الألوان. أما اللون الأصفر فهو مكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان. <br /> وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط. <br /> حسنا، لكن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أي جاءت الرموز <font face="Times New Roman"><font size="4">FFFFFF</font></font> والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> 0 إلى 9 والرموز <font face="Times New Roman"><font size="4">A,B,C,D,E,F</font></font> ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم <font face="Times New Roman"><font size="4">FF</font></font> بالنظام السداس عشري.<br /> إذن فالرقم السداس عشري <font face="Times New Roman"><font size="4">FF</font></font> على اليسار يمثل الدرجة 255 للون الأحمر. والرقم <font face="Times New Roman"><font size="4">FF </font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الوسط يمثل الدرجة 255 <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اللون الأخضر. والرقم <font face="Times New Roman"><font size="4">FF</font></font> على اليمين يمثل الدرجة 255 <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اللون الأزرق. <br /> وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: <font face="Times New Roman"><font size="4">6699CC</font></font> أما اللون الأسود فرقمه هو <font face="Times New Roman"><font size="4">000000.</font></font> <br /> <br /> وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري. <br /> <br /> <center> <table dir="LTR" border="1" cellpadding="5" width="60%"> <tbody><tr> <td bgcolor="#ABCDEF" width="15%"> </td> <td width="15%">ABCDEF</td> <td bgcolor="#FFFF00" width="15%"> </td> <td width="15%">FFFF00</td> </tr> <tr><td bgcolor="#FEDCBA"> </td> <td>FEDCBA</td> <td bgcolor="#336699"> </td> <td>336699</td> </tr> <tr><td bgcolor="#773466"> </td> <td>773466</td> <td bgcolor="#112233"> </td> <td>112233</td> </tr> <tr><td bgcolor="#FF1122"> </td> <td>FF1122</td> <td bgcolor="#666666"> </td> <td>666666</td> </tr> <tr><td bgcolor="#0033FF"> </td> <td>0033FF</td> <td bgcolor="#663333"> </td> <td>663333</td> </tr> <tr><td bgcolor="#AABBAA"> </td> <td>AABBAA</td> <td bgcolor="#00FF00"> </td> <td>00FF00</td> </tr> <tr><td bgcolor="#800800"> </td> <td>800800</td> <td bgcolor="#FF6600"> </td> <td>FF6600</td> </tr> <tr><td bgcolor="#008008"> </td> <td>008008</td> <td bgcolor="#993366"> </td> <td>993366</td> </tr> <tr><td bgcolor="#020769"> </td> <td>020769</td> <td bgcolor="#123456"> </td> <td>123456</td> </tr> <tr><td bgcolor="#111111"> </td> <td>111111</td> <td bgcolor="#654321"> </td> <td>654321</td> </tr> </tbody></table> </center><br /> <br /> أما كيف تعرف الرمز الخاص باللون <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تريد اختياره، فيوجد <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> خاصة تستطيع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلالها دمج الألوان الثلاثة بنسب مختلفة، ومن ثم يقوم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%E4%C7%E3%CC" > البرنامج </a> بتوليد الرمز السداس عشري المكافئ للون الناتج. وهذا أحدها <br /> <center> <table dir="RTL" bgcolor="#ffffff" cellpadding="5" width="60%"> <tbody><tr> <td align="RIGHT"> <font size="4"> ملاحظة مهمة:<br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.<br /> </font> </td> </tr> </tbody></table> </center> وبالنسبة لبعض الألوان الأساسية والدارجة، <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الممكن استخدام أسماء هذه الألوان مباشرة بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأرقام السداس عشرية. وهذا جدول يوضح هذه الألوان ومسمياتها: <br /> <center> <table dir="LTR" border="2" cellpadding="5" width="60%"> <tbody><tr> <td bgcolor="Black" width="15%"> </td> <td width="15%">Black</td> <td bgcolor="White" width="15%"> </td> <td width="15%">White</td> </tr> <tr> <td bgcolor="Red"> </td> <td>Red</td> <td bgcolor="Green"> </td> <td>Green</td> </tr> <tr> <td bgcolor="Maroon"> </td> <td>Marron</td> <td bgcolor="Purple"> </td> <td>Purple</td> </tr> <tr> <td bgcolor="Navy"> </td> <td>Navy</td> <td bgcolor="Blue"> </td> <td>Blue</td> </tr> <tr> <td bgcolor="Teal"> </td> <td>Teal</td> <td bgcolor="Lime"> </td> <td>Lime</td> </tr> <tr> <td bgcolor="Gray"> </td> <td>Gray</td> <td bgcolor="Silver"> </td> <td>Silver</td> </tr> <tr> <td bgcolor="Olive"> </td> <td>Olive</td> <td bgcolor="Aqua"> </td> <td>Aqua</td> </tr> <tr> <td bgcolor="Fuchsia"> </td> <td>Fuchsia</td> <td bgcolor="Yellow"> </td> <td>Yellow</td> </tr> </tbody></table> </center> <br /> <hr width="80%"><br /> <br /> ونعود إلى الوسوم و خصائصها ... <br /> <br /> <font face="Arial"><font size="2"> ‎<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">‎<br /> ...<br /> <‎/BODY> </font></font> <br /> تقوم الخاصية <font face="times new roman"><font size="4">BACKGROUND </font></font> بتحديد صورة كخلفية (ورق جدران) للصفحة وقد استخدمت الصورة التالية:<br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/image.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <div align="right"> والمسماة <font face="times new roman"><font size="4">image.jpg</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحتي وكانت هذه النتيجة </div> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/webback.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <br /> تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشة. بحيث حجبت أيضاً اللون الأبيض <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> حددناه كلون الخلفية (من خلال الخاصية <font face="times new roman"><font size="4">BGCOLOR)</font></font> والحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده إحتياطاً خاصة وأن <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المتصفحات القديمة توصف بأنها متصفحات نصية <font face="times new roman"><font size="4"> Text-Based Browsers</font></font> (أي ليس بإمكانها عرض الصور). أو ربما هناك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المستخدمين الذين قاموا بإلغاء خيار عرض الصور تلقائياً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الألوان إن لم يستطيعوا مشاهدة الصور. <br /> إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحة، والمتصفح نفسه هو <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يقوم تلقائياً بعرضها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> وضع التجانب مما يعطي الانطباع بأنها صورة كبيرة. وإليك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الأمثلة:<br /> <u><b>أنقر على الصورة لكي تشاهدها كخلفية للصفحة.</b></u> <br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/back1.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/back2.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a><br /> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/back3.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a><br /> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/back4.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a><br /> <br /> </center> ولنكمل مع باقي الخصائص <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> وسم <font face="times new roman"><font size="4"><BODY>:</font></font> ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية <font face="Times New Roman"><font size="4">(Links)</font></font> التي تنقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟ <br /> إليك هذه الخصائص التي تقوم بالتحكم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ألوان النصوص: <br /> <center> <table dir="ltr" align="CENTER" border="1" cellpadding="5"> <tbody><tr> <td width="150"> <font face="Times New Roman"><font size="4">‎TEXT="#rrggbb"‎</font></font> </td> <td dir="rtl" align="right"> <font face="Arabic Transparent"><font size="4">تحديد لون النص الأساسي للصفحة </font></font> </td> </tr> <tr> <td> <font face="Times New Roman"><font size="4">‎LINK="#rrggbb"‎</font></font> </td> <td dir="rtl" align="right"> <font face="Arabic Transparent"><font size="4">تحديد لون الوصلات التشعبية</font></font> </td> </tr> <tr> <td> <font face="Times New Roman"><font size="4">‎VLINK="#rrggbb"‎</font></font> </td> <td dir="rtl" align="right"> <font face="Arabic Transparent"><font size="4"> تحديد لون الوصلات التشعبية التي تمت زيارتها visited links</font></font> </td> </tr> <tr> <td> <font face="Times New Roman"><font size="4">‎ALINK="#rrggbb"‎</font></font> </td> <td dir="rtl" align="right"> <font face="Arabic Transparent"><font size="4">تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> active links</font></font> </td> </tr> </tbody></table> </center> والآن، دعنا نجمل الخصائص السابقة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عبارة واحدة. وسوف أكتب الرموز الخاصة بالألوان بنفس تلك الألوان التي تمثلها. وألفت نظرك إلى أنه لا أهمية للترتيب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كتابة هذه الخصائص داخل العبارة. <br /> <div align="left"> <font face="Arial"><font size="2"> ‎<BODY BACKGROUND="backimag.jpg"‎<br /> BGCOLOR="<font color="#ffff00">#ffff00</font>"‎<br /> TEXT="<font color="#000066">#000066</font>"‎<br /> LINK="<font color="#00ff00">#00ff00</font>"‎<br /> VLINK="<font color="#ff0000">#ff0000</font>"‎<br /> ALINK="<font color="#999999">#999999</font>">‎<br /> </font></font> </div> حاول أن تحللها! هل استنتجت أنني قد حددت الصورة <font face="times new roman"><font size="4">backimag.jpg</font></font> كخلفية للصفحة؟ وأنني اخترت اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> لحظة النقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> بالفأرة.<br /> <br /> إذا كانت هذه هي استنتاجاتك... فمبروك، لقد نجحت. وكل ما أتمناه أن تكون قد قضيت وقتاً ملوناً وزاهياً مع هذا الدرس. <br /> <br /> <br /> <br /> <div align="center"> <b><font size="5"><font color="Red">الخطوط<br /> التحكم بالخطوط <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة ، إختيار أنواعها وأحجامها وتنسيقاتها</font></font></b><br /> <br /> </div><blockquote> أهلاً وسهلاً بك إلى الدرس الثالث <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> لا زلنا نناقش معاً أساسيات تنسيق صفحات الإنترنت والتحكم بخصائصها. وسوف نتابع ذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال التعرف على الوسوم الخاصة بالخطوط.<br /> سوف تلاحظ <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس والدروس اللاحقة أن هناك أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> طريقة لأداء نفس العمل، أو إعطاء نفس الخصائص لصفحات الإنترنت. وبالمقابل قد يبدو لك أن <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الوسوم والخصائص متشابهة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تأثيرها، لكن بالقليل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> التدقيق والتجربة ستكتشف أن لكل وسم خصوصيته. <br /> <br /> <font size="6">ولنبدأ</font> <br /> <br /> راجع صفحتنا البسيطة التي عملنا فيها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرسين السابقين. إننا لم نقم بالتعامل مع الخطوط فيها ولا بأي شكل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأشكال. أي أننا تركناها على إعداداتها الافتراضية.<br /> وبالمناسبة فإن هذه الإعدادات هي خط عادي، نوعه <font face="times new roman"><font size="4">Times New Roman</font></font> وحجمه 3 (بمقياس متصفحات الإنترنت). <br /> الوسم الأول الخاص بالخطوط هو <font face="times new roman"><font size="4"><FONT> ... </FONT></font></font><br /> وهو يقوم بالتحكم بالخطوط <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي: <br /> <center><table dir="LTR" bgcolor="#ffffff" border="1" cellpadding="7" cellspacing="1" width="90%"> <tbody><tr> <td valign="top" width="10%"> <font face="times new roman"><font size="4">Face</font></font> </td> <td valign="top"> <font face="Arabic Transparent"><font size="4"> تقوم هذه الخاصية بتحديد نوع الخط <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريده، وقد نقوم بتحديد أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا <br /> </font></font> <div align="left"> <font face="Arial"><font size="2"> ‎<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic">‎<br /> ... Text ...<br /> <‎/FONT></font></font> </div> <font face="Arabic Transparent"><font size="4"> طبعاً لا تنس أن تتأكد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> كتابة أسماء الخطوط بالصورة الصحيحة هجائياً. </font></font> <br /> </td> </tr> <tr> <td valign="top"> <font face="times new roman"><font size="4">Color</font></font> </td> <td valign="top"> <font face="Arabic Transparent"><font size="4"> أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان التي تحدثنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق <br /> <font face="Arial"><font size="2"> <div align="left"> ‎<FONT COLOR="#FF0000">‎<br /> ... Text ...<br /> <‎/FONT><br /> </div> </font></font> </font></font> </td> </tr> <tr> <td valign="top"> <font face="times new roman"><font size="4">Size</font></font> </td> <td valign="top"> <font face="Arabic Transparent"><font size="4"> ولتحديد حجم الخط نستخدم هذه الخاصية. <u>وفقط</u> هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.<br /> ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريده مباشرة. </font></font> <br /> <font face="Arial"><font size="2"> <div align="left"> ‎<FONT SIZE="4">‎<br /> ... Text ...<br /> <‎/FONT><br /> </div> </font></font> <br /> <font face="Arabic Transparent"><font size="4"> وإليك نماذج بأحجام الخطوط<br /> <br /> <font size="1">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> 1</font><br /> <font size="2">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> 2</font><br /> <font size="3">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> 3 (الخط الافتراضي)</font><br /> <font size="4">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> 4</font><br /> <font size="5">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> 5</font><br /> <font size="6">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> 6</font><br /> <font size="7">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> 7</font><br /> <br /> <br /> أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -. </font></font> <br /> <font face="Arial"><font size="2"> <div align="left"> ‎<FONT SIZE="+4">‎<br /> ... Text ...<br /> <‎/FONT><br /> </div> </font></font> <br /> <font face="Arabic Transparent"><font size="4"> وفي هذه الطريقة فإن الأرقام 1-6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك نسبةً إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي وهو 3، أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي يصبح بالحجم 2. <br /> ولتوضيح هذا الأسلوب، إليك هذه النماذج:<br /> <br /> <font size="-3">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> -3</font><br /> <font size="-2">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> -2</font><br /> <font size="-1">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> -1</font><br /> <font size="-0">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> +0 (أو -0 وهو الافتراضي)</font><br /> <font size="+1">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> +1</font><br /> <font size="+2">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> +2</font><br /> <font size="+3">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> +3</font><br /> <font size="+4">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> +4</font><br /> <font size="+5">خط <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> +5</font><br /> <br /> لاحظ أنه حتى <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأسلوب النسبي لا نستطيع الحصول على أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5. </font></font><br /> </td> </tr> </tbody></table> </center> <br /> والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وجود الدرجات الأخرى الأقل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> -2 والأكبر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> +4؟<br /> حسنا وأنا أجيبك بسؤال آخر: ماذا لو قمنا بتغيير الحجم الافتراضي للخط <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل الصفحة إلى 1 بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)، ألا نحتاج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه الحالة إلى الدرجات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم إفتراضي ألا نحتاج إلى الدرجات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الإحتمالات الواردة.<br /> أرجو أن يكون هذا الجواب قد أقنعك :-)<br /> <br /> وهذه <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الأمثلة لتوضح لك كيفية استخدام هذا الوسم، وسوف أرفق نتيجة كل مثال بعده مباشرة. <br /> <br /> <font face="Arial"><font size="2"> ‎‎<FONT FACE="arial" SIZE="6" COLOR="#FF0000">‎<br /> This font is Arial, Size is 6, Color is Red<br /> <‎/FONT> </font></font> <br /> <div align="left"> <font face="arial"><font size="6"><font color="#FF0000"> This font is Arial, Size is 6, Color is Red </font></font></font> </div> <hr align="CENTER" width="80%"> <br /> <font face="Arial"><font size="2"> ‎<FONT FACE="arial" SIZE="+3" COLOR="#FF0000">‎<br /> This font is Arial, Size is +3, Color is Red<br /> <‎/FONT> </font></font><br /> <font face="arial"><font size="+3"><font color="#FF0000"> This font is Arial, Size is +3, Color is Red </font></font></font><br /> <hr align="CENTER" width="80%"> <br /> <font face="Arial"><font size="2"> ‎‎<FONT FACE="Times New Roman" SIZE="5" COLOR="#0000FF">‎<br /> This font is Times New Roman, Size is 5, Color is Blue<br /> <‎/FONT> </font></font><br /> <font face="Times New Roman"><font size="5"><font color="#0000FF"> This font is Times New Roman, Size is 5, Color is Blue </font></font></font><br /> <hr align="CENTER" width="80%"> <br /> <font face="Arial"><font size="2"> ‎<FONT FACE="courier" SIZE="2" COLOR="#800000">‎<br /> This font is Courier, Size is 2, Color is Maroon<br /> <‎/FONT> </font></font><br /> <font face="courier"><font size="2"><font color="#800000"> This font is Courier, Size is 2, Color is Maroon </font></font></font><br /> <hr align="CENTER" width="80%"> <br /> <font face="Arial"><font size="2"> <FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <‎/FONT><br /> <FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT><br /> <FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> <a href="http://www.hikm4.com/vb/tags.php?tag=multi" > multi </a> <‎/FONT><br /> <FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <‎/FONT><br /> <FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> <a href="http://www.hikm4.com/vb/tags.php?tag=multi" > multi </a> <‎/FONT><br /> <FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <‎/FONT><br /> <FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <‎/FONT><br /> <FONT FACE="Arial" SIZE="5" COLOR="#808080"> <a href="http://www.hikm4.com/vb/tags.php?tag=multi" > multi </a> <‎/FONT><br /> <FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <‎/FONT><br /> <FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text <‎/FONT> </font></font> <br /> <font face="Arial"><font size="5"><font color="#00FF00"> This </font></font></font> <font face="Times New Roman"><font size="7"><font color="#FF00FF"> is </font></font></font> <font face="Arial"><font size="2"><font color="#ff0000"> <a href="http://www.hikm4.com/vb/tags.php?tag=multi" > multi </a> </font></font></font> <font face="Impact"><font size="4"><font color="#000000"> colors, </font></font></font> <font face="Courier"><font size="2"><font color="#0000FF"> <a href="http://www.hikm4.com/vb/tags.php?tag=multi" > multi </a> </font></font></font> <font face="Times New Roman"><font size="3"><font color="#008080"> faces, </font></font></font> <font face="Courier"><font size="6"><font color="#FFFF00"> and </font></font></font> <font face="Arial"><font size="5"><font color="#808080"> <a href="http://www.hikm4.com/vb/tags.php?tag=multi" > multi </a> </font></font></font> <font face="Impact"><font size="2"><font color="#800000"> sizes </font></font></font> <font face="Times New Roman"><font size="7"><font color="#00FFFF"> text </font></font></font> <br /> <hr align="CENTER" width="80%"> <br /> <font face="Arial"><font size="2"> <FONT FACE="Impact" SIZE="6" COLOR="#000000">C <‎/FONT><br /> <FONT FACE="Impact" SIZE="6" COLOR="#008080">O<‎/FONT><br /> <FONT FACE="Impact" SIZE="6" COLOR="#FF0000">L<‎/FONT><br /> <FONT FACE="Impact" SIZE="6" COLOR="#0000FF">O<‎/FONT><br /> <FONT FACE="Impact" SIZE="6" COLOR="#800000">R<‎/FONT><br /> <FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">S<‎/FONT><br /> </font></font><br /> <font face="Impact"><font size="6"><font color="#000000">C</font></font></font> <font face="Impact"><font size="6"><font color="#008080">O</font></font></font> <font face="Impact"><font size="6"><font color="#FF0000">L</font></font></font> <font face="Impact"><font size="6"><font color="#0000FF">O</font></font></font> <font face="Impact"><font size="6"><font color="#800000">R</font></font></font> <font face="Impact"><font size="6"><font color="#FF00FF">S</font></font></font> <br /> <hr align="CENTER" width="80%"> <br /> ننتقل الآن إلى الوسم الثاني <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم الخاصة بالخطوط وهو <font face="times new roman"><font size="4"><BASEFONT>.</font></font><br /> وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة <u>كلها</u> . أي أنه يقوم بتعريف نوع الخط الأساسي <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> سيستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> بدايتها إلى نهايتها ويحدد لونه وحجمه.<br /> هل لاحظت انه وسم مفرد ولا يحتوي على وسم للنهاية؟ بالطبع ما الحاجة إلى وسم النهاية طالما أنه يتعامل مع الصفحة ككل ومع الإعدادات الأساسية لها، وليس مع كلمة أو سطر أو فقرة بذاتها. لذلك فإن هذا الوسم يكتب عادة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أول الملف، ويفضل مباشرة بعد وسم <font face="times new roman"><font size="4"><BODY>.</font></font> أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة الذكر مع <font face="Times New Roman"><font size="4"><FONT></font></font> ، (نستطيع استخدام الخاصية <font face="times new roman"><font size="4">Name</font></font> معه بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <font face="times new roman"><font size="4">Face).</font></font> وبنفس الطريقة وبدون أي اختلافات. وإليك هذه الشيفرة كمثال: <br /> <font face="Arial"><font size="2"> ‎<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">‎ </font></font><br /> وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح نوعه <font face="times new roman"><font size="4">Arial</font></font> وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تلك الصفحة سيطبق <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> هذا النمط <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخط. ما لم نقم طبعا باستخدام الوسوم <font face="times new roman"><font size="4"><Font> ... </‎Font></font></font> لتعديلها والتحكم بمظهرها كما فعلنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأمثلة السابقة، فهي أكثر تحديداً وأكثر مرونة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسم <font face="times new roman"><font size="4"><BASEFONT></font></font> <br /> وبمناسبة الحديث عن الألوان وتغيير اللون الأساسي لنص الصفحة. ألا تذكر أننا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق تكلمنا عن الخاصية <font face="times new roman"><font size="4">Text</font></font> التي تكتب مع الوسم <font face="times new roman"><font size="4"><Body></font></font> والتي استخدمناها لتحديد لون نص الصفحة... أنا لا زلت أذكر ذلك.<br /> لا يوجد تعارض بين هذه الخاصية وخاصية <font face="times new roman"><font size="4">Color</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الوسم <font face="times new roman"><font size="4"><BASEFONT></font></font> فأنت بكل بساطة تستطيع استخدام أي منهما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحتك. وإذا حدث واستخدمت كلاهما فإن اللون المحدد مع الوسم <font face="times new roman"><font size="4"><BASEFONT></font></font> هو <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> سيطبقه المتصفح ويعتمده. <br /> وهنا أريد أن أذكرك بما قلته <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بداية هذا الدرس: <br /> <table align="center" bgcolor="#FFFFFF" border="1"> <tbody><tr><td> <b> <font size="5"><font color="#800000"> يوجد دائماً أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> طريقة لأداء نفس العمل </font></font> </b> </td></tr> </tbody></table> <br /> <hr align="CENTER" width="80%"><br /> <br /> هناك وسوم خاصة تستخدم لتمييز العناوين <font face="times new roman"><font size="4">Headings</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الإنترنت وهي: <br /> <br /> <center> <font face="times new roman"><font size="4"><Hn> ... <‎/Hn></font></font><br /> </center> وحرف <font face="times new roman"><font size="4">n</font></font> هو رقم بين 1-6 يمثل مستوى العنوان.<br /> <font face="Arial"><font size="2"> <H1> Heading 1 <‎/H1><br /> <H2> Heading 2 <‎/H2><br /> <H3> Heading 3 <‎/H3><br /> <H4> Heading 4 <‎/H4><br /> <H5> Heading 5 <‎/H5><br /> <H6> Heading 6 <‎/H6><br /> </font></font> <br /> <center> <b> Heading 1 </b><br /> <br /> <b> Heading 2 </b><br /> <br /> <b> Heading 3 </b><br /> <br /> <b> Heading 4 </b><br /> <br /> <b> Heading 5 </b><br /> <br /> <b> Heading 6 </b><br /> <br /> <br /> <hr align="CENTER" width="80%"><br /> <br /> </center> ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي الوسوم الخاصة بها متبوعة بمثال ونتيجته: <br /> <br /> <blockquote> * الخط الغامق (الأسود العريض)، ونستخدم له الوسوم التالية: <br /> <font face="Arial"><font size="2"> <B> ... <‎/B><br /> <STRONG> ... <‎/STRONG><br /> </font></font> <br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><B> Bold Text <‎/B></td> <td>This is <b> Bold Text </b></td> </tr> <tr align="CENTER"> <td><STRONG> Strong Text <‎/STRONG></td> <td>This is<b> Strong Text </b></td> </tr> </tbody></table> <br /> * الخط المائل <br /> <font face="Arial"><font size="2"> <I> ... <‎/I><br /> <EM> ... <‎/EM><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><I> Italic Text <‎/I></td> <td>This is<i> Italic Text </i></td> </tr> <tr align="CENTER"> <td><EM> Emphasized Text <‎/EM></td> <td>This is<i> Emphasized Text </i></td> </tr> </tbody></table> <br /> * الخط المسطر <br /> <font face="Arial"><font size="2"> <U> ... <‎/U><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><U> Undelined Text <‎/U></td> <td> This is<u> Undelined Text </u></td> </tr> </tbody></table> <br /> * الخط المرتفع <br /> <font face="Arial"><font size="2"> <SUP> ... <‎/SUP><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><SUP> Superscript Text <‎/SUP></td> <td>This is <sup> Superscript Text </sup></td> </tr> </tbody></table> <br /> * الخط المنخفض <br /> <font face="Arial"><font size="2"> <SUB> ... <‎/SUB><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><SUB> Subscript Text <‎/SUB></td> <td>This is <sub> Subscript Text </sub></td> </tr> </tbody></table> <br /> * خط كبير <br /> <font face="Arial"><font size="2"> <BIG> ... <‎/BIG><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><BIG> Big Text </BIG></td> <td>This is <big> Big Text </big></td> </tr> </tbody></table> <br /> * خط صغير <br /> <font face="Arial"><font size="2"> <SMALL> ... <‎/SMALL><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><SMALL> Small Text <‎/SMALL></td> <td>This is <small> Small Text </small></td> </tr> </tbody></table> <br /> * نص يعترضه خط <br /> <font face="Arial"><font size="2"> <STRIKE> ... <‎/STRIKE><br /> <S> ... <‎/S><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><STRIKE> Striked Text <‎/SRTIKE></td> <td>This is <strike> Striked Text </strike></td> </tr> <tr align="CENTER"> <td><S> Striked Text <‎/S></td> <td>This is <s> Striked Text</s> too</td> </tr> </tbody></table> <br /> * نص الآلة الطابعة <font face="Times New Roman"><font size="4">TeleType</font></font> <br /> <font face="Arial"><font size="2"> <TT> ... <‎/TT><br /> </font></font><br /> <table border="1" width="80%"> <tbody><tr align="CENTER"> <td width="55%"><TT> TeleType Text <‎/TT></td> <td>This is <tt> TeleType Text </tt></td> </tr> </tbody></table> <br /> وهذا النص يعرف أيضاً بالنص موحَد المسافات <font face="Times New Roman"><font size="4">Monospaced Text.</font></font> ولتوضيح هذا المفهوم إليك المثال التالي:<br /> إذا أخذنا الحرفين <font face="Times New Roman"><font size="4">m,i</font></font> وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف <font face="Times New Roman"><font size="4">m</font></font> هي أضعاف المساحة التي شغلها الحرف <font face="Times New Roman"><font size="4">i</font></font> <br /> iiiiiiiiii<br /> mmmmmmmmmm <br /> أما عند استخدام الوسم <TT> ... <‎/TT> فإن المساحة التي يشغلها كلا الحرفين تصبح موحدة<br /> <tt>iiiiiiiiii</tt><br /> <tt>mmmmmmmmmm</tt><br /> <br /> </blockquote><hr align="CENTER" width="80%"> <br /> وهذه أمثلة تجمع بين عدة تنسيقات معاً: <br /> <br /> <font face="Arial"><font size="2"> <B><I><U><br /> This is a Bold, Italic and Underlined Text<br /> <‎/U> <‎/I> <‎/B> </font></font> <br /> <center><b><i><u> This is a Bold, Italic and Underlined Text </u></i></b> <br /> <br /> </center> <font face="Arial"><font size="2"> <FONT COLOR="#FF0000" SIZE="+3"><U><I><br /> This text is red, size +3, Italic, and Underlined <br /> <‎/I> <‎/U> <‎/FONT> </font></font> <br /> <center> <font size="+3"><font color="#FF0000"><u><i> This text is red, size +3, Italic, and Underlined </i></u> </font></font> <br /> <hr align="CENTER" width="80%"> </center> وقد أردت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الأمثلة توضيح مسائل معينة أولها: أن بإمكاننا استخدام عدة وسوم وتنسيقات معاً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الوقت ولنفس المقطع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النص. (وذلك لجميع الوسوم وليس فقط لوسوم الخطوط). وكما ذكرت سابقاً، لا أهمية لترتيب هذه الوسوم ولا أيها ورد أولاً... <b><u><font size="+2">لكن</font></u></b> <br /> عند استخدام الوسوم المتعددة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مقطع واحد يجب مراعاة عدم التداخل بينها!... كيف؟ أنظر إلى الرسم التالي:<br /> <br /> <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/tag_loop.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center><br /> <br /> فكتابة الوسوم السابقة بالطرق التالية هو خطأ: <br /> <font face="Arial"><font size="2"> <B><I><U><br /> This is a Bold, Italic and Underlined Text<br /> <‎/B> <‎/I> <‎/U> <br /> <br /> <B><I><U><br /> This is a Bold, Italic and Underlined Text<br /> <‎/B> <‎/U> <‎/I> </font></font> <br /> أعرف أنك لم تصدقني وأنك قمت بتجربة هذه الوسوم وربما حصلت على نتيجة صحيحة. حسناً العبرة ليست <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عبارة واحدة مكونة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وسمين أو ثلاثة تكتبها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ملف صغير بل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحة إنترنت كاملة قد تتألف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مئات أو حتى آلاف الوسوم مكتوبة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ملف خالٍ <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأخطاء المنطقية والتداخلات التي قد تسبب الإرباك للمتصفحات، وتؤدي إلى عدم عرض هذه الصفحة بالشكل المناسب والمطلوب.<br /> لذلك فأهمية أن تتجنب وجود الوسوم المتداخلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحتك هو بنفس الأهمية التي يجب أن توليها لكتابة هذه الوسوم بالصورة الصحيحة إملائياً. وإلا فالمتصفحات لا ترحم. وكثيرة هي المرات التي حصل فيها المصممون على صفحات منهارة بسبب نسيان حرف واحد أو إشارة مثل < أو > أو " <br /> بإختصار شديد... وكقاعدة أساسية، الصفحة المصممة جيداً هي الصفحة ذات الوسوم الصحيحة وغير المتداخلة.<br /> <br /> وصلنا الآن إلى نهاية هذا الدرس. أتمنى أن تكون قد قضيت وقتاً ممتعاً معه. وأن لا يكون قد أحدث تداخلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> وسوم أفكارك. أراك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس التالي<br /> <br /> <br /> <div align="center"><b><font size="5"><font color="Red">الفقرات والقوائم<br /> قم بتنسيق وتنظيم صفحتك، واستخدم القوائم لترتيب بياناتك </font></font></b><br /> <br /> <br /> </div><blockquote> أهلاً وسهلاً بك إلى الدرس الرابع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص وترتيب الصفحات وتنسيقها بشكل عام.<br /> صحيح أن استخدامك للألوان والرسومات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة يضفي <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> نوعاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحيوية، وأن الخطوط تعطي صفحتك رونقاً وجمالاً. لكنك إن لم تهتم بترتيب صفحتك أو تقضي <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الوقت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تنسيق هيكلها العام وتنظيم فقراتها وقوائمها، فإنه <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصعب عليك الحصول على صفحة ويب ناجحة. فالترتيب هو الخطوة الأولى لجذب اهتمام الزائر أو القارئ لصفحتك وتسهل عليه فهم الخطوط العريضة للصفحة. <br /> لقد قمت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الأول بإيضاح <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الوسوم الخاصة بالفقرات. ولا بأس <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> تذكيرك بها. فالوسم <font face="Times New Roman"><font size="4"><P> </font></font> يقوم بإنهاء الفقرة. والوسم <font face="Times New Roman"><font size="4"><BR></font></font> ينهي السطر الحالي وينقل النص إلى سطر جديد. والوسم <font face="Times New Roman"><font size="4"> ‎ ‎</font></font> يقوم بإضافة الفراغات، ويجب تكرار كتابته بنفس عدد الفراغات المطلوب.<br /> ونتابع <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس مع هذه الوسوم وغيرها. <br /> لقد قلت إن الوسم <font face="Times New Roman"><font size="4"> <P></font></font> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج <font face="Times New Roman"><font size="4"> <P> ... <‎/P></font></font> وفي هذه الحالة يمكّننا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص <font face="Times New Roman"><font size="4">ALIGN, DIR.</font></font> <br /> فالخاصية <font face="Times New Roman"><font size="4">ALIGN</font></font> تحدد محاذاة الفقرة وهي تأخذ القيم <font face="Times New Roman"><font size="4">Left, Center, Right</font></font> وأوضحها بالأمثلة التالية:<br /> <font face="Arial"><font size="2"> <P Align="left"> This is a left-aligned paragraph <‎/P> </font></font><br /> <font color="#FF0000"> This is left-aligned paragraph</font><br /> <hr align="CENTER" width="50%"> <font face="Arial"><font size="2"> <P Align="right"> This is right-aligned paragraph</P> </font></font> <br /> <font color="#FF0000"> This is a right-aligned paragraph</font><br /> <hr align="CENTER" width="50%"> <font face="Arial"><font size="2"> <P Align="center"> This is a centered paragraph</P></font></font><br /> <font color="#FF0000"> This is a centered paragraph</font><br /> <hr align="CENTER" width="50%"> كذلك لتوسيط الفقرات أو الكائنات بشكل عام <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة نستطيع استخدام الوسوم <font face="Times New Roman"><font size="4"> <CENTER> ... </CENTER> </font></font><br /> <font face="Arial"><font size="2"> <CENTER> This is a centered text </CENTER> </font></font><br /> <center> <font color="#FF0000">This is a centered text</font> </center> <br /> <br /> أما الخاصية <font face="Times New Roman"><font size="4">DIR</font></font> والتي نستخدمها أيضاً مع <font face="Times New Roman"><font size="4"><P></font></font> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم <br /> <center> <table align="CENTER" border="1" cellpadding="5" width="70%"> <tbody><tr> <td width="10%"><font face="Times New Roman"><font size="4">LTR</font></font> </td> <td> <font face="Arabic Transparent"><font size="4"> إتجاه النص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اليسار إلى اليمين <font face="Times New Roman"><font size="4"> (Left To Right)</font></font> </font></font> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">RTL</font></font> </td> <td> <font face="Arabic Transparent"><font size="4"> إتجاه النص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اليمين إلى اليسار <font face="Times New Roman"><font size="4"> (Right To Left)</font></font> </font></font> </td> </tr> </tbody></table> </center> (تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية) <br /> <hr align="CENTER" width="80%"> <br /> ولتنسيق الفقرات أيضاً يوجد الوسوم<br /> <font face="Times New Roman"><font size="4"> <BLOCKQUOTE> ... <‎/BLOCKQUOTE></font></font> أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها. أنظر إلى الفقرة التالية التي قمت (باقتباسها) <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> إحدى صفحات هذا الموقع. ومن ثم وضعتها ضمن <font face="Times New Roman"><font size="4"> <BLOCKQUOTE> ... <‎/BLOCKQUOTE></font></font> <blockquote> <font size="-1">وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%D5%E3%ED%E3" > تصميم </a> صفحات الإنترنت، لم يكن هناك مشكلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب .... </font><br /> </blockquote>والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج هوامش أكبر. كما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المثال التالي: <br /> <font face="Arial"><font size="2"> <BLOCKQUOTE><br /> <BLOCKQUOTE><br /> <br /> وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%D5%E3%ED%E3" > تصميم </a> صفحات الإنترنت، لم يكن هناك مشكلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب .... <br /> <‎/BLOCKQUOTE><br /> <‎/BLOCKQUOTE><br /> <br /> </font></font> وتكون النتيجة:<blockquote><blockquote> <font size="-1">وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%D5%E3%ED%E3" > تصميم </a> صفحات الإنترنت، لم يكن هناك مشكلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب .... </font><br /> </blockquote></blockquote>وبالطبع ليس شرطاً أن تستخدم هذا الوسوم مع الفقرات المقتبسة فقط. فأنا مثلاً أضعها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بداية ونهاية كل صفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صفحات هذا الموقع. وبالتالي يظهر النص بعيداً قليلاً عن حاشية الصفحة فهذا أفضل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أن يكون ملاصقاً لها وأجمل. (مجرد وجهة نظر) <br /> <hr align="CENTER" width="80%"> <br /> والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت بإعداده...!؟ <br /> <br /> A B C D<br /> E F G H<br /> I J K L<br /> M N O P<br /> Q R S T<br /> </pre> ربما توصلت إلى أني استخدمت عدداً كبيراً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وسوم الفراغات <font face="Times New Roman"><font size="4">‎ ‎</font></font> ونهاية السطر <font face="Times New Roman"><font size="4"> <BR>.</font></font> حسناً، إستنتاجك لا بأس به <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%E1%DF%E4%E5" > ولكنه </a> ليس دقيقاً فأنا لم أستخدم أياً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الوسوم هنا. بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه ضمن: <br /> <font face="Times New Roman"><font size="4"> <PRE> ... </PRE> </font></font><br /> وهما اختصار لكلمة <font face="Times New Roman"><font size="4">Preformated</font></font> أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسيق المسبق <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تم إعداده به. لكن تم تحويل الخط إلى خط موحد المسافات (راجع الدرس السابق) ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة كالتالي:<br /> <br /> A B C D E F G H I J K L M N O P Q R S T <br /> لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط والتنسيقات.<br /> <hr align="CENTER" width="80%"> <br /> <font size="6"> <b>القوائم</b></font><br /> تحتوي <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> على مجموعة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم الخاصة بتنظيم البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> قوائم وباستخدام عدة خيارات. وهناك نوعين <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> القوائم:<br /> أولهما المتسلسلة <font face="Times New Roman"><font size="4">Ordered Lists.</font></font> واليك المثال التالي <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> <br /> <i>أسماء <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المدن الفلسطينية</i><br /> <ol style="list-style-type: decimal"><li><div align="right">القدس </div></li> <li><div align="right">نابلس </div></li> <li><div align="right">رام <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%E1%E5" > الله </a> </div></li> <li><div align="right">الخليل </div></li> <li><div align="right">جنين </div></li> <li><div align="right">طولكرم </div></li> </ol> وثانيهما القوائم غير المتسلسلة <font face="Times New Roman"><font size="4">Unordered Lists</font></font> وهذا مثال <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> <br /> <i>أسماء <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الجامعات الفلسطينية</i> <br /> <ul><li><div align="right">جامعة النجاح </div></li> <li><div align="right">جامعة القدس المفتوحة </div></li> <li><div align="right">جامعة بيرزيت </div></li> <li><div align="right">جامعة الخليل </div></li> </ul> عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة.<br /> بالنسبة للقوائم المتسلسلة نستخدم الوسوم <br /> <center> <font face="Times New Roman"><font size="4"> <OL> ... <‎/OL> </font></font></center><br /> أما بالنسبة للقوائم غير المتسلسلة فنستخدم <br /> <center><font face="Times New Roman"><font size="4"> <UL> ... <‎/UL> </font></font></center><br /> ولتعيين كل بند <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> بنود القائمة نستخدم الوسم <font face="Times New Roman"><font size="4"><LI></font></font> وهو وسم مفرد يكتب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بداية السطر الخاص بكل بند <font face="Times New Roman"><font size="4">List Item.</font></font> <br /> إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة التالية: <br /> <font face="Arial"><font size="2"> <OL><br /> <LI>القدس<br /> <LI>نابلس<br /> <LI>رام الله<br /> <LI>الخليل<br /> <LI>جنين<br /> <LI>طولكرم<br /> <‎/OL><br /> </font></font> <br /> <br /> <font face="Arial"><font size="2"> <UL><br /> <LI>جامعة النجاح<br /> <LI>جامعة القدس المفتوحة<br /> <LI>جامعة بيرزيت<br /> <LI>جامعة الخليل<br /> <‎/UL><br /> </font></font> <br /> والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي <font face="Times New Roman"><font size="4">TYPE</font></font> ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <font face="Times New Roman"><font size="4"><UL></font></font> أو <font face="Times New Roman"><font size="4"><OL></font></font> وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم البنود <font face="Times New Roman"><font size="4"><LI></font></font> لإعطاء تحكم أكبر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مظهر القائمة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال تحديد رمز مختلف لكل بند. <br /> فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: <font face="Times New Roman"><font size="4">A, a, I, i</font></font> التي تغير رموز الترقيم <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجدول التالي:<br /> <center> <table align="CENTER" border="1"> <tbody><tr align="CENTER"> <td height="50"><font face="Arial"><font size="2"> ‎<OL TYPE="A">‎ </font></font></td> <td><font face="Arial"><font size="2"> ‎<OL TYPE="a">‎ </font></font></td> <td><font face="Arial"><font size="2"> ‎<OL TYPE="I">‎ </font></font></td> <td><font face="Arial"><font size="2"> ‎<OL TYPE="i">‎ </font></font></td> </tr> <tr align="CENTER"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody></table> </center> والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> وهي مسألة الوسوم والخصائص المحددة بمتصفح معين دون غيره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غيره. (للمزيد عن هذا الموضوع رجاءً انقر هنا)<br /> والسبب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ذلك أن هذه الخاصية تستخدم أيضاً مع القوائم غير المتسلسلة، لكن ليس بصورة مطلقة...كيف؟ أنت ترى أن الرمز الموجود عند كل بند <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> القائمة هو عبارة عن نقطة سوداء يطلق <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> اسم <font face="Times New Roman"><font size="4">Disc</font></font> وهي المعرفة ضمناً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> خاصية <font face="Times New Roman"><font size="4">TYPE.</font></font> لكن هناك رموز أخرى يمكن إظهارها وهي المربع <font face="Times New Roman"><font size="4">square,</font></font> والدائرة المفرغة <font face="Times New Roman"><font size="4">circle</font></font> وتعرف بالشكل التالي: <br /> <div align="center"><font face="ARIAL"><font size="2"> ‎<UL TYPE="square">‎<br /> ‎<UL TYPE="circle">‎ </font></font></div> ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس مع مايكروسوفت إكسبلورر <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يتعامل فقط مع القيمة الإفتراضية للخاصية. (رجاءً لا يغضب مستخدمو إكسبلورر فهناك الكثير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم والخصائص التي لا يستطيع نيتسكيب عرضها أيضاً).<br /> ولإتمام الحديث عن القوائم، أذكر لك أن هناك وسوماً أخرى تستخدم لإنشاء القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع <font face="Times New Roman"><font size="4"> <UL>...<‎/UL></font></font> وهذه الوسوم هي: <br /> <font face="Times New Roman"><font size="4"> <DIR> ... <‎/DIR><br /> <MENU> ... <‎/MENU><br /> </font></font><br /> <hr align="CENTER" width="80%"> <br /> هناك نوع خاص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> القوائم يدعى قوائم الشرح أو التعريفات <font face="Times New Roman"><font size="4">Definition Lists </font></font> وكما يدل الإسم تستخدم عندما نريد إدراج قائمة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المصطلحات يتبع كل واحد منها شرح أو تعليق. <br /> <br /> <dl><font face="Arial"><font size="2"> <dt>HTML </dt><dd>Hyper Text Markup Language </dd><dt>WWW </dt><dd>World Wide Web </dd><dt>FTP </dt><dd>File Transfer Protocol </dd><dt>GIF </dt><dd>Graphical Interchange Format </dd><dt>JPG, JPEG </dt><dd>Joint Photographic Experts Group </dd></font></font></dl> ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:<br /> الأول <font face="Times New Roman"><font size="4"> <DL> ... <‎/DL> </font></font> لتعريف بداية ونهاية القائمة.<br /> والثاني <font face="Times New Roman"><font size="4"> <DT> </font></font> ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد. <br /> أما الثالث فهو <font face="Times New Roman"><font size="4"><DD> </font></font> وهو وسم الشرح أو التعليق وهو أيضا مفرد. ولنقم الآن بكتابة شيفرة القائمة السابقة <br /> <font face="Arial"><font size="2"> ‎<DL>‎<br /> ‎<DT>HTML <DD>Hyper Text Markup Language‎<br /> ‎<DT>WWW <DD>World Wide Web‎<br /> ‎<DT>FTP <DD>File Transport Protocol‎<br /> ‎<DT>GIF <DD>Graphical Interchange Format‎<br /> ‎<DT>JPG, JPEG <DD>Joint Photographic Experts Group‎<br /> ‎<‎/DL>‎<br /> </font></font><br /> وصلنا الآن إلى نهاية هذا الدرس، والذي ناقشنا فيه ترتيب الصفحات والفقرات والقوائم. أتمنى لك صفحات مرتبة دائماً. <br /> </blockquote><b><font size="5"><font color="Red">الصور والرسومات<br /> إدراجها، التحكم بأحجامها وأبعادها . أنواع ملفات الصور <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الويب </font></font></b><br /> <br /> <blockquote> أهلاً وسهلاً بك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الخامس <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس سوف أقوم بالحديث عن الصور والرسومات وما يتعلق بالتعامل معها، بالإضافة إلى التعريف بأنواع الملفات الرسومية الدارجة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت. <br /> لقد اقتصر حديثنا عن الصور حتى الآن على إضافة خلفيات للصفحات، وكان ذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الثاني أما إدراج الصور ضمن الصفحات نفسها فله حكاية أخرى، أبدأ بروايتها لك الآن. <br /> إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو <font face="Times New Roman"><font size="4"><IMG></font></font> وهو وسم مفرد. لكن هل يكفي هذا لإدراج صورة؟ كلا، بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية له <font face="Times New Roman"><font size="4">SRC</font></font> لتحديد موقع واسم الصورة.<br /> <br /> الصورة التالية إسمها <font face="Times New Roman"><font size="4">thedome.jpg</font></font> وعندما قمت بإدراجها. كانت الشيفرة الخاصة بذلك هي <br /> <font face="Arial"><font size="2"> ‎<IMG SRC="thedome.jpg">‎ </font></font><br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/thedome.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <br /> والصيغة هذه تفترض أن الصورة موجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <i><b>نفس الدليل الفرعي أو المجلد</b></i> حيث يتواجد ملف <font face="Times New Roman"><font size="4">HTML</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> أعمل عليه، وقمت باستدعاء الصورة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلاله. لكن ماذا لو كانت الصورة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مجلد فرعي آخر؟ حسنا سوف اناقش معك حالتين لهذه المسألة. <br /> <i>الحالة الأولى</i> أن تكون الصورة موجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مجلد متفرع عن المجلد الموجود به ملف <font face="Times New Roman"><font size="4">HTML</font></font> حسب الشكل التالي: <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/src1.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center><br /> نقوم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه الحالة بكتابة إسم هذا المجلد تتبعه إشارة / ثم اسم الصورة. <br /> <br /> <i>الحالة الثانية:</i> أن يكون ملف <font face="Times New Roman"><font size="4">HTML</font></font> موجوداً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مجلد ما وتكون الصورة موجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مجلد آخر بنفس المستوى. أي أنهما مجلدين متجاورين وليسا متفرعين أحدهما عن الآخر. <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/src2.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center><br /> وفي هذه الحالة نكتب .. (نقطتين) لتوجيه المتصفح للخروج <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المجلد الفرعي الحالي (حيث يوجد ملف <font face="Times New Roman"><font size="4">HT‎ML)</font></font> ومن ثم الدخول إلى المجلد <font face="Times New Roman"><font size="4">images</font></font> حيث توجد الصورة. <br /> <br /> وبشكل عام، مهما كانت مواقع تواجد الملفات فإن عملية تحديد مواقعها والوصول إليها لا تخرج عن نطاق هذا النمط <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الشيفرة. أي كتابة النقطتين للخروج <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مجلد فرعي، وكتابة اسم المجلد <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يجب الدخول إليه. <br /> <hr align="CENTER" size="4" width="80%"> <br /> إن الأبعاد الأساسية لهذه الصورة هي 200×145 بيكسل <font face="Times New Roman"><font size="4">Pixel</font></font> (تابع القراءة حتى نهاية هذا الدرس وأعدك أن أوضح لك ما هي وحدة البيكسل إذا كانت هذه أول مرة تتعرف فيها على هذه الوحدة) وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد. ومع ذلك فنحن نستطيع التحكم أيضاً بها وإظهار الصورة بالحجم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريده <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال هذا الوسم. كيف؟ بإضافة الخصائص <font face="Times New Roman"><font size="4">HEIGHT, WIDTH</font></font> متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين. <br /> <font face="Arial"><font size="2"> ‎<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">‎ </font></font><br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/thedome.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">‎ </font></font><br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/thedome.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <hr align="CENTER" size="4" width="80%"> <br /> الخاصية التالية التي تستخدم مع <font face="Times New Roman"><font size="4"><IMG></font></font> هي <font face="Times New Roman"><font size="4">ALT</font></font> وفيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفح. كما تستطيع ملاحظته <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الفترة التي تسبق <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%CD%E3%ED%E1" > تحميل </a> الصور وخاصة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المواقع بطيئة التحميل. <br /> <font face="Arial"><font size="2"> ‎<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">‎ </font></font><br /> <hr align="CENTER" size="4" width="80%"> <br /> عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الفقرة، مثلها مثل أي كلمة أو عبارة أخرى. ونستخدم الخاصية <font face="Times New Roman"><font size="4">ALIGN</font></font> لتحديد محاذاة الصورة مع النص المرافق لها أو لنقل بعبارة أخرى: <i><b> تحديد موقع النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها بالنسبة لها</b></i> وهي تأخذ القيم: <font face="Times New Roman"><font size="4">BOTTOM, TOP, MIDDLE, LEFT, RIGHT</font></font> وأوضح لك تأثير كل قيمة كما يلي: <br /> <center><table valign="TOP" align="CENTER" border="1" cellpadding="5" cellspacing="1" width="75%"> <tbody><tr> <td> <font size="4"> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحالة العادية <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/down.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> (مثل هذه) وعندما لا نقوم بتحديد أي محاذاة فإن النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يلي الصورة يظهر بمحاذاة الحافة السفلى لها. وهذه هي الحالة الإفتراضية لظهور الصور والتي تمثلها القيمة <font face="Times New Roman"><font size="4">BOTTOM</font></font> </font> <br /> <center><font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="BOTTOM">‎</font></font> </center> </td></tr></tbody></table> <table valign="TOP" align="CENTER" border="1" cellpadding="5" width="75%"> <tbody><tr><td> <font face="Times New Roman"><font size="4"><u>TOP</u></font></font><br /> <br /> <font size="4"> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/up.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> وعند تحديد هذه القيمة فإن السطر الأول <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يلي الصورة يقع بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها. </font> <br /> <center><font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="TOP">‎</font></font> </center> </td></tr></tbody></table> <table valign="TOP" align="CENTER" border="1" cellpadding="5" width="75%"> <tbody><tr><td> <font face="Times New Roman"><font size="4"><u>MIDDLE</u></font></font><br /> <br /> <font size="4"> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/stop.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> أما عند تحديد هذه القيمة فإن السطر الأول <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النص يقع بمحاذاة منتصف الصورة. كذلك فإن باقي النص يمتد أسفلها. </font><br /> <br /> <center><font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="MIDDLE">‎</font></font> </center> </td></tr></tbody></table> <table valign="TOP" align="CENTER" border="1" cellpadding="5" height="120" width="75%"> <tbody><tr> <td> <font size="4"> <u><font face="Times New Roman"><font size="4">LEFT</font></font></u><br /> <br /> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/left.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة. </font><br /> <br /> <center><font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="LEFT">‎</font></font></center> </td></tr></tbody></table> <table valign="TOP" align="CENTER" border="1" cellpadding="5" height="120" width="75%"> <tbody><tr><td> <font size="4"> <font face="Times New Roman"><font size="4"><u>RIGHT</u></font></font><br /> <br /> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/right.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. </font><br /> <br /> <center><font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎</font></font></center> </td></tr></tbody></table> </center> <br /> <hr align="CENTER" size="4" width="80%"> <br /> والآن بعد أن قمنا بتحديد محاذاة الصورة نحتاج إلى تحديد المسافة الفاصلة بينها وبين النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يجاورها. ونستخدم لذلك الخصائص التالية:<br /> <font face="Times New Roman"><font size="4">VSPACE:</font></font> لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.<br /> <font face="Times New Roman"><font size="4">HSPACE:</font></font> لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.<br /> <br /> مثال:<br /> <br /> <font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">‎</font></font><br /> <center><table valign="TOP" align="CENTER" border="1" cellpadding="5" width="50%"> <tbody><tr><td> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/right.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <font size="4"> النتيجة: هذه الشيفرة ستدرج الصورة المسماه <font face="Times New Roman"><font size="4">image.jpg</font></font> مع محاذاتها ليمين الصفحة وإضافة مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة. (قارن بين هذا الإطار والإطار السابق <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> وضحت فيه خاصية <font face="Times New Roman"><font size="4">ALIGN</font></font> مع القيمة <font face="Times New Roman"><font size="4">RIGHT.</font></font> ولاحظ المسافة بين الصورة والنص المرافق لها.) </font><br /> </td></tr></tbody></table> </center> <br /> <hr align="CENTER" size="4" width="80%"> <br /> الخاصية الأخيرة والتي تستخدم مع الوسم <font face="Times New Roman"><font size="4"><IMG></font></font> هي <font face="Times New Roman"><font size="4">BORDER</font></font> ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. (أنظرالدرس السادس) ويتم التحكم بالسُمك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة.<br /> مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية: <br /> <font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" BORDER="5">‎</font></font><br /> <hr align="CENTER" size="8" width="80%"> <br /> والآن حان الوقت لكي نناقش معاً <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الأمور التي تتعلق بالصور والرسومات بشكل عام. <br /> <br /> * هل حاولت أن تتعرف على أنواع الملفات الرسومية التي تقوم بتحميلها خلال تصفحك لمواقع الإنترنت؟<br /> يزخر عالم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%DF%E3%C8%ED%E6%CA%D1" > الكمبيوتر </a> بالعشرات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أنواع الملفات الرسومية وتنسيقات الصور. وكل منها يختلف عن غيره <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عدة نواح، أذكر لك منها: الدقة، وعدد الألوان التي يستوعبها، والحجم التخزيني للملف. لكن هناك نوعين فقط <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الملفات يتم تداولهما حالياً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت وهما:<br /> <br /> <font face="Times New Roman"><font size="4">JPG, JPEG</font></font><br /> إختصار لـِ <font face="Times New Roman"><font size="4"> <u>J</u>oint <u>P</u>hotographic <u>E</u>xperts <u>G</u>roup.</font></font> ويدعم هذا التنسيق صوراً بعيار 24 بت (أي 16.7 مليون لون). وميزة هذا التنسيق تتمثل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> إمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم نسبياً.(أعني هنا حجم التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما إزدادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح. <br /> <div align="right"> <font face="Times New Roman"><font size="4">GIF</font></font><br /> إختصار لـِ <font face="Times New Roman"><font size="4"><u>G</u>raphical <u>I</u>nterchange <u>F</u>ormat</font></font> وأقصى عدد للألوان <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا التنسيق هو 265 لون. ومع ذلك فإن أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق <font face="Times New Roman"><font size="4">JPG.</font></font> لكن هناك مزايا رائعة ينفرد بها تنسيق <font face="Times New Roman"><font size="4">GIF</font></font> مما يستدعي استخدامه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الويب، أولها القدرة على تخزين صور بخلفيات شفافة <font face="Times New Roman"><font size="4">Transparent Images</font></font> وثانيها الصور المتحركة <font face="Times New Roman"><font size="4">Animated Gifs</font></font><br /> وتجد معلومات وافية ودروساً مفصلة حول هذه المواضيع ضمن <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">Paint Shop Pro.</font></font> </div> والآن قد تسأل، أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذين التنسيقين أستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحاتي؟! لا يوجد جواب قطعي لهذا السؤال لكن إليك هاتين المعادلتين: <br /> <font face="Times New Roman"><font size="4">JPG=</font></font> الصور الحقيقية ذات العدد الكبير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الألوان، وذات الأبعاد الكبيرة <br /> <font face="Times New Roman"><font size="4">GIF=</font></font> الصور قليلة الألوان وصغيرة الأبعاد مثل الأزرار. <br /> <hr align="CENTER" size="4" width="80%"> <br /> * ما هي درجة إستبانة شاشتك <font face="Times New Roman"><font size="4">Resolution?</font></font> إذا كنت لا تعرف الجواب قم بفتح تطبيق لوحة التحكم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%ED%E4%CF%E6%D2" > ويندوز </a> 95 وإختر أيقونة(العرض) ثم اختر التبويب (إعدادات) وهناك سوف تشاهد "مساحة سطح المكتب" <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يدل على درجة إستبانة الشاشة، وعلى الأغلب ستكون 640×480 أو 800×600، وهناك درجات أعلى تعتمد على قدرة محول العرض. كذلك سوف تشاهد "لوح الألوان" <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يدل على عدد الألوان التي يمكن عرضها بالإعدادات الحالية للشاشة.<br /> أما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%ED%E4%CF%E6%D2" > ويندوز </a> 3.11 أو 3.1 فاختر أيقونة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> إعداد <font face="Times New Roman"><font size="4">Windows</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> لوحة التحكم فتظهر لك قائمة تجد بضمنها نوع وإستبانة الشاشة. <br /> <br /> هذا الحديث يقودني إلى وحدة البيكسل <font face="Times New Roman"><font size="4">Pixel </font></font> (ألم أعدك مسبقاً بتوضيحها). وهي اختصار لـِ <font face="Times New Roman"><font size="4">Picture Element.</font></font> إذا كانت شاشتك بإستبانة 640×480 فهذا يعني أنها مقسمة(نظرياً) إلى شبكة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> 640 عمود و480 سطر. <i>وبمنتهى البساطة، إن كل خلية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الشبكة تمثل بيكسل</i> وبالطبع كلما زادت الإستبانة كلما صغر حجم وحدة البيكسل. <br /> <hr align="CENTER" size="4" width="80%"> <br /> * هل سبق لك وأن سمعت بمصطلح <font face="Times New Roman"><font size="4">Thumbnail</font></font> ضمن مصطلحات الإنترنت؟ حسناً، لا تلتفت إلى الترجمة الحرفية لهذه الكلمة، والتي تعني "ظفر الإبهام". فالمقصود حقيقةً بها هي تلك الصورة الصغيرة جداً التي تقوم بالنقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> فتؤدي إلى عرض صورة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> أكبر. لذلك قد يكون المصطلح الأنسب لوصفها هو "العيّنة".<br /> (وإذا كنت قد زرت أحد المواقع الإخبارية لرأيت كيف يتم عرض عينات وصور مصغرة للقطات الأحداث وعند النقر على العينة تظهر الصورة الأصلية. إذن أنت لست مجبراً على الإنتظار لوقت طويل لحين ظهور صورة ذات حجم كبير للقطة لست معنياً بها). <br /> <br /> ومن الواضح أن استخدام العينات مفيد وعملي جداً وأن وضعها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المواقع التي تحتوي على العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصور يؤدي إلى تقليل الزمن اللازم لتحميل الصفحات وتجنب ضياع الوقت بانتظار ظهور الصور الأصلية كبيرة الحجم. لأنها تعطي الزائر الحرية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> إذا رغب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> رؤية الأصل أو تجاهلها. أما كيف يتم عمل هذه العينات؟ فذلك باستخدام أحد <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> معالجة الرسوم كبرنامج <font face="Times New Roman"><font size="4">Paint Shop Pro.</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال تصغير أبعاد الصور الأصلية إلى النسبة المطلوبة. <br /> <br /> أعرف ماذا ستسأل الآن، ستقول ألم نتعلم قبل قليل كيفية عرض الصور مع التحكم بأبعادها؟ ألا يؤدي استخدام الخصائص <font face="Times New Roman"><font size="4">WIDTH, HEIGHT</font></font> إلى التحكم <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> الصور وعرضها بنسب مصغرة حسب ما هو مطلوب؟<br /> إن استخدامك لهذه الخصائص يؤدي إلى إظهار الصورة بحيث <u><b>تبدو</b></u> مصغرة، لكنك فعلياً قمت بإجبار متصفح الزائر على <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%CD%E3%ED%E1" > تحميل </a> الصورة بالحجم والأبعاد الأصلية ثم عرضها بالحجم المصغر أي أنك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النهاية لم تحقق الغاية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وجود هذه العينات. <br /> وصلنا إلى نهاية هذا الدرس. هل أصبحت الآن تعرف كيف تدرج الصور <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحتك؟ رائع، إذن إليك هذه المكافأة. أنقر على الصور المصغرة لتشاهد مدينتي... نابلس.<br /> <br /> <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/nablus_1.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/nablus_2.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/nablus_3.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/nablus_4.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> </center></blockquote><hr align="CENTER" size="4" width="80%"><b><font size="5"><font color="Red"> الروابط والوصلات التشعبية<br /> ... كيف وصلت إلى هنا ؟؟؟ بالنقر على وصلة تشعبية !<br /> </font></font></b>كيف وصلت إلى هذه الصفحة؟! ربما تعتبر هذا سؤالاً سخيفاً، وأن الإجابة عليه هي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> البديهيات ... وهذا صحيح! <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المؤكد أنك قمت بالإنتقال إلى هنا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال إحدى صفحات هذا الموقع، أو <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال أحد محركات التفتيش، أو <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال أحد المواقع التي قمت بزيارتها مؤخراً ... وفي كل الأحوال قمت بالنقر على وصلة تشعبية ما. <br /> <br /> <font face="Times New Roman"><font size="4"> Links...</font></font> أو الوصلات التشعبية هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه الوصلات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مواقعها. تنقر على وصلة ما فتنقلك إلى صفحة أخرى <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلياً إلى أحد المواقع <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجانب الآخر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> العالم... وصلة تجعلك تحمّل ملفاً وأخرى تجعلك تشغّل مقطعا موسيقياً وثالثة تعرض لك صورة... <br /> حسناً، <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المؤكد أنك استنتجت الآن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه المقدمة أنك بصدد تعلم كيفية إدراج الوصلات التشعبية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحاتك... لقد صدق استنتاجك لذلك هيا إلى العمل... هناك عدة خيارات للوصلات التشعبية، منها أن تكون الوصلة لموقع آخر، أو أن تكون لصفحة أخرى داخل الموقع نفسه، ومنها أن تكون لمكان آخر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الصفحة (إلى أعلى أو أسفل على سبيل المثال) أو أن تكون وصلة لعنوان بريد إلكتروني <font face="Times New Roman"><font size="4">E-mail</font></font> وفي جميع الحالات فإن المبدأ واحد لكن تختلف <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> التفاصيل. وسوف أناقش معك كل حالة على حدة وبالتفصيل. <br /> نستخدم الوسوم<br /> <center> <font face="Times New Roman"><font size="4"><A> ... <‎/A></font></font> </center><br /> <div align="right"> كوسوم أساسية لإدراج الوصلات التشعبية، وهي اختصار لكلمة <font face="Times New Roman"><font size="4">Anchor.</font></font> وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية </div> <div align="center"><font face="Times New Roman"><font size="4">HREF </font></font></div> التي نحدد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلالها الموقع <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريد الدلالة عليه، ويجب أن يكتب عنوان الموقع كاملاً. <br /> الحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع خارجي.<br /> لنقم بإدراج وصلة تشعبية إلى أحد المواقع العربية الرائدة والرائعة، وهو موقع شركة صخر. وعنوانه <font face="Times New Roman"><font size="4">http://www.sakhr.com</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه الحالة يتم كتابة الشيفرة بالشكل التالي: <br /> <font face="Arial"><font size="2"> <A HREF="http://www.sakhr.com"> <‎/A> </font></font> <br /> لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> لتشغيل الوصلة، وهذه يجب أن توضع بين الوسمين <font face="Times New Roman"><font size="4"><A> ... <‎/A>.</font></font> أي لكي تكتمل الوصلة السابقة يجب أن نكتب معها أي عبارة نريدها، لكي ينقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> الزائر فتنقله إلى العنوان المطلوب. ما رأيك بعبارة: <font face="Times New Roman"><font size="4">Go To SAKHR</font></font> والتي تصبح الشيفرة معها بالشكل التالي: <br /> <font face="Arial"><font size="2"> <A HREF="http://www.sakhr.com">Go To SAKHR<‎/A> </font></font><br /> وتظهر الوصلة كما يلي:<br /> <font face="Times New Roman"><font size="4"> Go To SAKHR</font></font> <br /> لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة <font face="Times New Roman"><font size="4">SAKH‎R</font></font> هي فقط العنوان لهذه الوصلة. <br /> <font face="Arial"><font size="2"> ‎Go To <A HREF="http://www.sakhr.com">SAKHR<‎/A>‎ </font></font><br /> <center><font face="Times New Roman"><font size="4">Go To SAKHR</font></font></center> بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما تشاهد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الكثير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواقع- وكل ما عليك فعله <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه الحالة هو كتابة الوسم الخاص بإدراج الصورة بين الوسمين <font face="Times New Roman"><font size="4"><A> ... <‎/A></font></font> بالشكل التالي: <br /> <font face="Arial"><font size="2"> <A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif">‎<‎/A> </font></font><br /> والذي يؤدي إلى ظهور الصورة التالية كوصلة تشعبية لموقع صخر<br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/sakhrlgo.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <br /> وبشكل عام فإن أي شيء يوضع بين الوسمين <font face="Times New Roman"><font size="4"><A> ... <‎/A></font></font> سوف يكون الوسيلة أو العنوان <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> ينقلنا إلى الموقع المشار إليه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الوصلة التشعبية، سواءً كان هذا الشيء نصاً أو صورة أو كلاهما معاً. <br /> والآن هل تلاحظ الإطار الظاهر حول الصورة؟ وهل تذكر متى قمنا بالحديث عن هذا النوع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الإطارات؟ نعم، <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق. عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية. وبالطبع نستطيع إزالته بكتابة الخاصية <font face="Times New Roman"><font size="4">BORDER="0"‎</font></font> ضمن وسم الصورة. <br /> <font face="Arial"><font size="2"> <A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="0"><‎/A> </font></font><br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/sakhrlgo.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية. <br /> <font face="Arial"><font size="2"> <A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="6"><‎/A> </font></font><br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/sakhrlgo.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <hr align="CENTER" size="4" width="60%"> <br /> ننتقل الآن إلى الحالة الثانية، وهي أن تشير الوصلة التشعبية إلى ملف موجود <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الموقع (أي ملف محلي) سواءً كان ملف <font face="Times New Roman"><font size="4">HTML</font></font> أو صورة أو غير ذلك. وفي هذه الحالة فإن ما يكتب مع الخاصية <font face="Times New Roman"><font size="4">HREF</font></font> هو اسم هذا الملف المطلوب الوصول إليه.<br /> <br /> لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة الرئيسية لهذا الموقع وبالمناسبة فإن الملف <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يحتويها اسمه <font face="Times New Roman"><font size="4">index.html</font></font> ، والشيفرة الخاصة بذلك هي: <br /> <font face="Arial"><font size="2"> <A HREF="index.html">Main Page<‎/A> </font></font><br /> <center>Main Page</center> وأذكرك بأنك تستطيع إدراج صورة هنا أيضاً كعنوان للوصلة التشعبية وذلك بنفس التفاصيل التي شرحتها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحالة السابقة. <br /> هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية. <br /> <font face="Arial"><font size="2"><A HREF="nablus1.jpg"><IMG SRC="nablus_1.jpg" BORDER="0"><‎/A> </font></font><br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا المثال قمت بتحديد الصورة المصغرة المسماه <font face="Times New Roman"><font size="4">nablus_1.jpg</font></font> كوصلة تشعبية تصلنا إلى الصورة الأصلية المسماه <font face="Times New Roman"><font size="4">nablus1.jpg</font></font> <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/nablus_1.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a></center> لكن إنتبه <font face="wingdings"><font size="5">I</font></font> إذا كان الملف المطلوب والذي تريد الإشارة إليه موجوداً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مجلد مختلف عن المجلد <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يوجد به الملف الحالي، فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة التي ناقشناها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق عندما قمنا يإدراج الصور. <br /> <hr align="CENTER" size="4" width="60%"> <br /> الحالة الثالثة هي أن نقوم بالإشارة إلى مكان آخر داخل نفس الصفحة، إلى أولها مثلاً أو إلى آخرها أو أي مكان آخر نريده...<br /> طبعاً مهما بلغت درجة الذكاء والألمعية التي يتصف بها <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%DF%E3%C8%ED%E6%CA%D1" > الكمبيوتر </a> ومتصفح الإنترنت، فهما لا يستطيعان معرفة ما يدور بفكرك وبالتالي لا يستطيعان معرفة المكان الموجود <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الصفحة والذي تريد نقل زائرك إليه <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال الوصلة التشعبية. لذلك يجب أن تقوم أنت بتحديده.<br /> <br /> والمبدأ هنا هو أن تقوم بتعريف أو تسمية هذا المكان بإسم معين سوف تقوم لاحقا باستخدامه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الوصلة التشعبية. وفي هذه الحالة يتحتم عليك استخدام الخاصية الثانية للوسم <font face="Times New Roman"><font size="4"><A></font></font> وهي <font face="Times New Roman"><font size="4">NAME</font></font> <br /> لنقم معاً بإدراج وصلة تشعبية داخل هذه الصفحة تقوم بنقل الزائر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مكان وجود هذه الوصلة إلى الفقرة الثالثة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الصفحة والتي بدأنا فيها الحديث عن الوصلات التشعبية <font face="Times New Roman"><font size="4">Links</font></font> <br /> <br /> أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل الوسوم <font face="Times New Roman"><font size="4"><A> ... <‎/A></font></font> <br /> <font face="Arial"><font size="2"> <A>LINKS<‎/A> </font></font><br /> والآن حان الوقت لاستخدام الخاصية <font face="Times New Roman"><font size="4">NAME</font></font> فالخطوة الثانية هي تعريف هذه الكلمة بأي اسم نريده (المهم أن نبقى متذكرين له). سوف أقوم بإعطاء الاسم <font face="Times New Roman"><font size="4">attrib1</font></font> <br /> <font face="Arial"><font size="2"> <A NAME="attrib1">LINKS<‎/A> </font></font><blockquote><blockquote> <i><b>لقد أصبحت هذه الفقرة جاهزة لكي نقوم بإدراج وصلات تشعبية إليها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أي مكان <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الملف، بل ومن أي ملف آخر ... وأكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ذلك أنه إذا أراد أحد ما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أحد المواقع الأخرى أن يضع وصلة تشعبية لها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> موقعه فإن باستطاعته ذلك شرط أن يعرف الإسم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> عرّفناها به وهذا ليس صعباً بالطبع. </b></i><br /> </blockquote></blockquote>الخطوة الثالثة هي إدراج الوصلة التشعبية لهذه الفقرة. <br /> ويلزمنا هنا معرفة اسم الملف <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> توجد به هذه الفقرة (أي هذا الملف <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نعمل به) واسمه <font face="Times New Roman"><font size="4">htutor06.html</font></font> لأنه سيشكل المدخل الأساسي للوصول إلى الفقرة المحددة. وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي: <br /> <font face="Arial"><font size="2"> <A HREF="htutor06.html#attrib 1">3rd Paragraph<‎/A> </font></font><br /> <center>‎3rd Paragraph</center><br /> لاحظ أننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب أن تقرن باسم الملف الأب <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يتضمنها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال إشارة # <br /> <hr align="CENTER" size="4" width="60%"> <br /> أما الحالة الأخيرة والتي نقوم فيها بإدراج وصلة تشعبية لعنوان بريد إلكتروني، يؤدي النقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> إلى إطلاق <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> البريد الإلكتروني للزائر بشكل تلقائي. فالإختلاف الوحيد <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يطرأ هنا هو كتابة كلمة <font face="Times New Roman"><font size="4">MAILTO</font></font> بعد خاصية <font face="Times New Roman"><font size="4">HREF</font></font> لكي تدل على أن العنوان <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يلي هو عنوان <font face="Times New Roman"><font size="4">EMAIL</font></font> وليس أي عنوان آخر <br /> <font face="Arial"><font size="2"> <A HREF="MAILTO:yahya@palnet. com"> Email Me <‎/A> </font></font><br /> <center> Email Me </center> <hr align="CENTER" size="4" width="80%"> <br /> <br /> والآن بعد أن انتهيت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> سرد أساسيات استخدام الوصلات التشعبية وإدراجها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الويب بقي هناك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> التوضيحات والملاحظات التي أجد أن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المهم ذكرها لك.<br /> <br /> عندما قمنا بالتوصيل إلى عنوان خارجي، سواء كان لموقع ويب أو عنوان <font face="Times New Roman"><font size="4">Email</font></font> لاحظنا أننا استخدمنا كلمات مفتاحية ميزت طبيعة هذا العنوان، وأعطت المتصفح فكرة عن طبيعة التعامل مع هذا العنوان وطريقة الاتصال به. فعندما أردنا التشعب إلى موقع الويب كتبنا كلمة <font face="Times New Roman"><font size="4">HTTP</font></font> والتي تدل على نوع البروتوكول المستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الاتصال بهذا الموقع، وهو بروتوكول نقل النصوص المتشعبة <font face="Times New Roman"><font size="4">HyperText Transfer Protocol</font></font> وعندما كتبنا عنوان <font face="Times New Roman"><font size="4">Email</font></font> استخدمنا كلمة <font face="Times New Roman"><font size="4">MAILTO</font></font> قبل هذا العنوان. وبالتالي قمنا بالإيعاز للمتصفح بفتح <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> البريد الإلكتروني الافتراضي وتجهيزه لإرسال رسالة إلى العنوان المدرج. وحتماً لقد صادفت مثل هذه الحالة كثيراً خلال تجولك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مواقع الويب. <br /> <br /> لكن هنا مجالات أخرى لاستخدام الإنترنت ولكل منها بروتوكوله الخاص. فمثلاً هناك الآلاف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المزودات المنتشرة عبر الإنترنت والتي تحتوي على أعداد هائلة لا تحصى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الملفات والبرامج الجاهزة للتحميل ويتم الوصول إليها عبر بروتوكول خاص لنقل الملفات يدعى <font face="Times New Roman"><font size="4">FTP (File Transfer Protocol)‎.</font></font> ومن هذه المجالات أيضاً والتي لا تقل أهمية عن الويب أو البريد الإلكتروني المجموعات الإخبارية <font face="Times New Roman"><font size="4">News Groups</font></font> أو مجموعات النقاش التي تختص كل منها بمناقشة موضوع معين. وهذه تعمل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال بروتوكول <font face="Times New Roman"><font size="4">NNTP (Network News Transfer Protocol)‎.</font></font> <br /> <center><table valign="MIDDLE" align="CENTER" bgcolor="#FFFFFF" border="0" cellpadding="25" cellspacing="25" width="80%"> <tbody><tr> <td> <font size="4"> إن تعدد مجالات إستخدام الإنترنت وتعدد البروتوكولات فيها لا يعني أنك تحتاج لأن يكتظ سطح مكتبك بالعديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> للتعامل معها. فمعظم المتصفحات التي نستخدمها تحتوي على <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> خاصة تدعم هذه الخدمات.<br /> فمثلاً عند النقر على عنوان مزود <font face="Times New Roman"><font size="4">FTP</font></font> يتم الدخول إليه مثله مثل أي موقع ويب عادي وتظهر قائمة المجلدات والملفات فيه بشكل مشابه للمستكشف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">Windows95.</font></font> أما النقر على عنوان إحدى المجموعات الإخبارية فيؤدي إلى سلوك مشابه للنقر على عناوين البريد الإلكتروني، أي إطلاق <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> تصفح خاص بالمجموعات الإخبارية يكون مدمجاً ضمن حزمة المتصفح الأصلي. </font><br /> </td> </tr> </tbody></table> </center> <br /> والآن... أعتقد أنه ليس <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصعب عليك استنتاج الكيفية التي نضيف بها وصلات تشعبية لمزود <font face="Times New Roman"><font size="4">FTP.</font></font><br /> إليك هذا العنوان لأحد المزودات التي يحتوي على الكثير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> المجانية أو المشتركة <br /> <center><font face="Times New Roman"><font size="4"> <a href="ftp://ftp.simtel.net/pub/simtelnet/win95/‎" target="_blank">ftp://ftp.simtel.net/pub/simtelnet/win95/‎</a> </font></font></center> <br /> وكل ما عليك فعله هو كتابة الشيفرة التالية: <br /> <font face="Arial"><font size="2"> <A HREF="ftp://ftp.simtel.net/pub/simtelnet/win95/">Simtel FTP Server<‎/A> </font></font><br /> <font face="Times New Roman"><font size="4"><center>Simtel FTP Server</center> </font></font> أما بالنسبة للمجموعات الإخبارية فتكتب الوصلات التشعبية لها باستخدام الكلمة المفتاحية <font face="Times New Roman"><font size="4">NEWS.</font></font> فعلى سبيل المثال، لوضع وصلة تشعبية لمجموعة النقاش <font face="Times New Roman"><font size="4">alt.html</font></font> الخاصة بمناقشة <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> نكتب الشيفرة التالية: <br /> <font face="Arial"><font size="2"> <A HREF="news:alt.html">Alt.Html<‎/A> </font></font> <br /> <font face="Times New Roman"><font size="4"><center> Alt.Html</center></font></font> <br /> <hr align="CENTER" size="4" width="80%"><b><font size="5"><font color="Red">الجداول (1)<br /> رتب بياناتك ضمن الجداول ، وتحكم بشكل صفحتك بصورة فعالة<br /> </font></font></b><blockquote> أهلاً وسهلاً بك إلى الدرس السابع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> هذا الدرس سيكون الأول <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الويب.<br /> تعد الجداول <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أقوى الأدوات التي تتضمنها <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> وأكاد أجزم بأنه لا يوجد موقع <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت إلا ويستخدمها بصورة أو بأخرى. والحقيقة أن وضع الجداول <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الويب لا يقتصر على تلك القوائم <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> البيانات التي نحتاج لترتيبها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفوف وأعمدة، بل يتعدى ذلك إلى استخدامها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%D5%E3%ED%E3" > تصميم </a> الصفحات نفسها وتنظيمها، والتحكم بمظهرها بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وسوم خاصة بتنسيق الصفحات. <br /> إن التعامل مع الجداول وإدراجها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الويب سهل جداً مثله مثل أي أداة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C3%CF%E6%C7%CA" > أدوات </a> <font face="Times New Roman"><font size="4">HTML</font></font> لكنه قد يبدو لك مربكاً <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الشيء وخاصة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> البداية، وذلك لتعدد الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها. لكن لا تقلق فكل شيء يبدو صعباً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بدايته ولكن سرعان ما يصبح سهلاً.<br /> <br /> هل أنت مستعد؟ إذن هيّا بنا… <br /> <br /> <hr align="CENTER" size="4" width="60%"> <br /> بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول <br /> <center> <table dir="LTR" border="1" cellpadding="10" width="80%"> <tbody><tr> <td width="50%"><font face="Times New Roman"><font size="4"> <nobr> <TABLE>...<‎/TABLE></nobr></font></font></td> <td align="RIGHT"><font size="4">وسوم تعريف الجدول</font></td> </tr> <tr> <td><font face="Times New Roman"><font size="4"> <nobr> <TR>...<‎/TR> </nobr> </font></font></td> <td align="RIGHT"><font size="4">Table Row وسوم تعريف الصف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجدول<br /> </font></td> </tr> <tr> <td><font face="Times New Roman"><font size="4"> <TD> <i>Cell Data</i> <‎/TD></font></font></td> <td align="RIGHT"><font size="4"> Table Data وسوم تعريف الخلايا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصف وتعريف محتويات كل خلية <br /> </font></td> </tr> </tbody></table> </center> <br /> والآن لنتكلم بصورة أكثر دقة وتفصيلاً:<br /> <br /> هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلية واحدة أو <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مليون خلية… الأمر سيان <br /> <center><font face="Times New Roman"><font size="4"><TABLE> ... <‎/TABLE></font></font></center> <br /> والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم <br /> <center><font face="Times New Roman"><font size="4"><TR> ... <‎/TR></font></font></center> <br /> بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة. <br /> <font face="Arial"><font size="2"> <TABLE><blockquote> <font color="#FF0000"> <TR> <br /> <‎/TR><br /> <br /> <TR> <br /> <‎/TR><br /> <br /> <TR> <br /> <‎/TR><br /> <br /> <br /> </font> </blockquote><‎/TABLE> <br /> </font></font> والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل صف؟<br /> وهنا نضيف الوسوم <br /> <center><font face="Times New Roman"><font size="4"> <TD> ... <‎/TD></font></font></center> <br /> بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <font face="Times New Roman"><font size="4"><TR> ... <‎/TR></font></font> طالما أن الخلايا هي جزء <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصفوف. وهنا سأفترض أننا نريد خليتين <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.<br /> وأذكرك أن النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريد إدراجه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الخلية يكتب ضمن هذين الوسمين. <br /> <font face="Arial"><font size="2"> <TABLE><blockquote> <font color="#FF0000"> <TR><br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> </font> </blockquote><‎/TABLE><br /> </font></font> هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها. <br /> <table> <tbody><tr> <td> Data </td> <td> Data </td> </tr> <tr> <td> Data </td> <td> Data </td> </tr> <tr> <td> Data </td> <td> Data </td> </tr> </tbody></table> هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:<br /> <ul><li><div align="right"> مستوى الجدول ككل </div></li> <li><div align="right">مستوى الصفوف ككل أو كل واحد على حده </div></li> <li><div align="right">مستوى الخلايا ككل أو كل واحدة على حده. </div></li> </ul> <div align="right"> ولكل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.</div> <hr align="CENTER" size="4" width="80%"> <br /> نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <font face="Times New Roman"><font size="4"><TABLE> ... <‎/TABLE> </font></font> وسأقوم أولاً بسردها لك، ومن ثم إدراج <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الأمثلة التي توضحها. <br /> <br /> <center> <table valign="TOP" align="center" bgcolor="#FFFFFF" border="1" cellpadding="10" cellspacing="1" width="80%"> <tbody><tr> <td><font face="Times New Roman"><font size="4">BORDER</font></font></td> <td> <font size="4"> تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود </font><br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5">‎<br /> ‎<TABLE BORDER="0">‎ </font></font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">WIDTH</font></font></td> <td> <font size="4"> نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح). </font><br /> <font face="Arial"><font size="2"> ‎<TABLE WIDTH="600">‎<br /> ‎<TABLE WIDTH="80%">‎ </font></font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">HEIGHT</font></font></td> <td> <font size="4"> لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح </font><br /> <font face="Arial"><font size="2"> ‎<TABLE HEIGHT="500">‎<br /> ‎<TABLE HEIGHT="100%">‎ </font></font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">CELLSPACING</font></font></td> <td><font size="4"> لتحديد المسافة بين كل خلية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلايا الجدول </font><br /> <font face="Arial"><font size="2"> ‎<TABLE CELLSPACING="10">‎ </font></font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">CELLPADDING</font></font></td> <td> <font size="4"> لتحديد المسافة الفاصلة بين الحدود وبداية النص <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول. </font><br /> <font face="Arial"><font size="2"> ‎<TABLE CELLPADDING="10">‎<br /> </font></font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">ALIGN</font></font></td> <td> <font size="4"> لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم <font face="Times New Roman"><font size="4">right, left</font></font> </font><br /> <font face="Arial"><font size="2"> ‎<TABLE ALIGN="Left">‎<br /> ‎<TABLE ALIGN="Right">‎ </font></font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">BGCOLOR</font></font></td> <td> <font size="4"> ويستخدم لتحديد لون الخلفية للجدول </font><br /> <font face="Arial"><font size="2"> ‎<TABLE BGCOLOR="#00FFFF">‎ </font></font><br /> </td> </tr></tbody></table></center> <br /> هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها: <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5">‎<br /> </font></font><br /> <table border="5"> <tbody><tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> </tbody></table> <br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" CELLPADDING="5">‎ </font></font><br /> <table border="5" cellpadding="5"> <tbody><tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> </tbody></table> <br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">‎ </font></font><br /> <table border="5" cellpadding="5" cellspacing="10"> <tbody><tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> </tbody></table><br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎<br /> BGCOLOR="#FFFF00">‎ </font></font><br /> <table bgcolor="#FFFF00" border="5" cellpadding="5" cellspacing="10"> <tbody><tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> </tbody></table><br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎<br /> BGCOLOR="#FFFF00" HEIGHT="300">‎ </font></font><br /> <table bgcolor="#FFFF00" border="5" cellpadding="5" cellspacing="10" height="300"> <tbody><tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> </tbody></table><br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎<br /> BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">‎ </font></font><br /> <table bgcolor="#FFFF00" border="5" cellpadding="5" cellspacing="10" height="300" width="75%"> <tbody><tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> <tr><td> Data </td><td> Data </td></tr> </tbody></table> <br /> <hr align="CENTER" size="4" width="80%"> <br /> <br /> ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <font face="Times New Roman"><font size="4"><TR> ... <‎/TR></font></font> ولا بأس <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> تذكيرك أن عدد الصفوف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي: <br /> <center><table valign="TOP" align="center" bgcolor="#FFFFFF" border="1" cellpadding="10" cellspacing="1" width="80%"> <tbody><tr> <td><font face="Times New Roman"><font size="4">ALIGN</font></font></td> <td> <font size="4">لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي <font face="Times New Roman"><font size="4">Right, Left, Center</font></font> والقيمة الإفتراضية هي <font face="Times New Roman"><font size="4">Center</font></font> </font> <br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">VALIGN</font></font></td> <td> <font size="4">لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: <font face="Times New Roman"><font size="4">Top, Bottom, Middle, Baseline</font></font> </font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">BGCOLOR</font></font></td> <td> <font size="4"> لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <font face="Times New Roman"><font size="4"><TABLE></font></font> ويتم تطبيق اللون المحدد هنا.</font><br /> </td> </tr></tbody></table> </center> ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال الأمثلة التالية: <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" HEIGHT="300">‎<br /> <font color="#FF0000">‎<TR ALIGN="Left">‎ </font><br /> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"> <‎/TR><br /> <br /> ‎<TR ALIGN="Right">‎<br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"> <‎/TR><br /> <br /> ‎<TR ALIGN="Center">‎ <br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"> <‎/TR><br /> </font> <‎/TABLE> </font></font> <br /> <table border="5" height="300" width="70%"> <tbody><tr align="Left"> <td> Data </td> <td> Data </td> </tr> <tr align="Right"> <td> Data </td> <td> Data </td> </tr> <tr align="Center"> <td> Data </td> <td> Data </td> </tr> </tbody></table> <br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" HEIGHT="300">‎<br /> <font color="#FF0000">‎<TR VALIGN="Top">‎ </font><br /> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"><‎/TR><br /> <br /> ‎<TR VALIGN="Bottom">‎<br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"> <‎/TR><br /> <br /> ‎<TR VALIGN="Baseline">‎ <br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"><‎/TR> </font><br /> <‎/TABLE> </font></font> <br /> <table border="5" height="300" width="70%"> <tbody><tr valign="Top"> <td> Data </td> <td> Data </td> </tr> <tr valign="Bottom"> <td> Data </td> <td> Data </td> </tr> <tr valign="Baseline"> <td> Data </td> <td> Data </td> </tr> </tbody></table> <br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎<br /> <font color="#FF0000">‎<TR BGCOLOR="#808080">‎ </font><br /> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"><‎/TR><br /> <br /> ‎<TR BGCOLOR="#C0C0C0">‎<br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"> <‎/TR><br /> <br /> ‎<TR>‎ <br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"><‎/TR> </font><br /> <‎/TABLE> </font></font> <br /> <table border="5" width="300"> <tbody><tr bgcolor="#808080"> <td> Data </td> <td> Data </td> </tr> <tr bgcolor="#C0C0C0"> <td> Data </td> <td> Data </td> </tr> <tr bgcolor="#FFFFFF"> <td> Data </td> <td> Data </td> </tr> </tbody></table> <br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">‎<br /> <font color="#FF0000">‎<TR BGCOLOR="#808080">‎ </font><br /> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"><‎/TR><br /> <br /> ‎<TR BGCOLOR="#C0C0C0">‎<br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"> <‎/TR><br /> <br /> ‎<TR BGCOLOR="#FFFFFF">‎ <br /> </font> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <font color="#FF0000"><‎/TR> </font><br /> <‎/TABLE> </font></font> <br /> </blockquote><table border="0" height="100%" width="100%"> <tbody><tr bgcolor="#808080"> <td> Data </td> <td> Data </td> </tr> <tr bgcolor="#C0C0C0"> <td> Data </td> <td> Data </td> </tr> <tr bgcolor="#FFFFFF"> <td> Data </td> <td> Data </td> </tr> </tbody></table> <br /> <hr align="CENTER" size="4" width="80%"> <br /> <blockquote> والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف أتابع الحديث عنها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس القادم إن شاء الله. أراك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس التالي لنتابع الحديث عن موضوع الجداول. <br /> <br /> <br /> <br /> <div align="center"> <b><font size="5"><font color="Red">الجداول (2)<br /> تابع مع الجداول، وتعرف على باقي الوسوم الخاصة بها <br /> * أمثلة تطبيقية على الجداول<br /> </font></font></b><blockquote> أهلاً وسهلاً بك إلى الدرس الثامن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> نتابع معاً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس الحديث عن الجداول. وأنا أفترض أنك قد أنهيت الدرس السابق بنجاح، وأن لديك الآن فكرة جيدة جداً عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل الآن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث توقفنا، أي مع خصائص الخلايا. <br /> هل تذكر ما قلناه عن عدد الخلايا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال كتابة الوسوم <font face="Times New Roman"><font size="4"><TD> ... <‎/TD></font></font> مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عناصر <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> : نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول داخل جدول آخر)<br /> <br /> لنسترجع معا المثال <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> قمنا بالتدرب عليه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ثلاثة صفوف وعمودين (أي خليتين <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل صف). <br /> <font face="Arial"><font size="2"> <TABLE><blockquote> <font color="#FF0000"> <TR><br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> </font> </blockquote><‎/TABLE><br /> </font></font> <br /> أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها: <br /> <table align="CENTER" bgcolor="#FFFFFF" border="1" cellpadding="10" cellspacing="1" width="80%"> <tbody><tr> <td><font face="Times New Roman"><font size="4">ALIGN</font></font></td> <td> <font size="4"> تحدد محاذاة النص الموجود <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الخلية أفقياً، والقيم المستخدمة هي <font face="Times New Roman"><font size="4">Left, Center, Right</font></font> <br /> </font> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">VALIGN</font></font></td> <td><font size="4"> تحدد المحاذاة العمودية للنص، وهو يأخذ القيم <font face="Times New Roman"><font size="4">Top, Middle, Bottom, Baseline</font></font> <br /> </font> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">WIDTH</font></font></td> <td><font size="4"> تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أحد الصفوف لكي يتم تطبيقه على كل الخلايا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل الصفوف. </font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">HEIGHT</font></font></td> <td><font size="4"> تحدد الإرتفاع المطلوب للخلية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصف يؤدي إلى تطبيقه على كل الخلايا فيه. </font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">BGCOLOR</font></font></td> <td><font size="4"> تحدد لون خلفية الخلية </font><br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">COLSPAN</font></font></td> <td><font size="4"> يقوم بدمج الخلية الحالية مع العدد المطلوب <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخلايا التي تليها أفقياً </font><br /> <font face="Arial"><font size="2"> ‎<TD COLSPAN="n">‎</font></font> <br /> <font size="4">حيث n هو عدد الخلايا التي سيتم دمجها </font> <br /> </td> </tr> <tr> <td><font face="Times New Roman"><font size="4">ROWSPAN</font></font></td> <td><font size="4"> يقوم بدمج الخلية الحالية مع العدد المطلوب <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخلايا التي تليها عمودياً (أي أسفلها). </font><br /> <font face="Arial"><font size="2"> ‎<TD ROWSPAN="n">‎</font></font> <br /> <font size="4">وبالطبع n هو عدد الخلايا التي سيتم دمجها </font> <br /> </td> </tr> </tbody></table><br /> <br /> وقبل أن نستمر، يبدو لي أن هناك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الملاحظات المهمة التي ينبغي ذكرها: <br /> <ul><li><div align="right"> كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية <font face="Times New Roman"><font size="4">BGCOLOR.</font></font> كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الوسم <font face="Times New Roman"><font size="4"><BODY>.</font></font> </div></li> <li><div align="right"> الملاحظة الثانية تتعلق بالخصائص <font face="Times New Roman"><font size="4">WIDTH, HEIGHT.</font></font> يختلف أسلوب التعامل مع هذه الخصائص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> متصفح لآخر، بل وتختلف أيضاً طريقة <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%DD%D3%ED%D1" > تفسير </a> القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات ).<br /> وبدون الخوض <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال الوسم <font face="Times New Roman"><font size="4"><TABLE>.</font></font> ثم استخدام هذه الخصائص <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصف الأول، والارتفاع المطلوب لكل صف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجدول.<br /> وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.</div></li> <li><div align="right"> إذا أردت أن تحتوي <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الصفوف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجدول على عدد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخلايا أقل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> باقي الصفوف، فلا يكفي أن تقوم بحذف وسوم الخلايا منها. (كما ترى <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الشيفرة التالية<a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="images/smilies/smile.gif" border="0" alt="دروس لغة الهتمل HTML" title="Smile" class="inlineimg" /></a></div> <font face="Arial"><font size="2"> <TABLE BORDER="5"><blockquote> <font color="#FF0000"> <TR><br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> </font> <br /> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> </font> </blockquote><‎/TABLE><br /> </font></font> <br /> <div align="right">لأن هذا ما ستحصل عليه: </div> <center><table border="5"><tbody><tr> <td> Data </td> </tr><tr> <td> Data </td> <td> Data </td> </tr><tr> <td> Data </td> </tr></tbody></table></center><br /> <div align="right"> لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم <u><b><i>بدمج</i></b></u> الخلايا معاً وذلك باستخدام الخصائص <font face="Times New Roman"><font size="4">COLSPAN, ROWSPAN.</font></font> </div></li> </ul> <hr align="CENTER" size="4" width="40%"> <br /> إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص: <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5">‎<blockquote> <font color="#FF0000"> <TR><br /> </font> <blockquote> <font color="#008000"> <TD COLSPAN="2"> <i>Data</i> <‎/TD><br /> </font> <br /> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD COLSPAN="2"> <i>Data</i> <‎/TD><br /> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> </font> </blockquote><‎/TABLE><br /> </font></font> <center><table border="5"> <tbody><tr><td colspan="2"> Data </td> </tr><tr> <td> Data </td> <td> Data </td> </tr><tr> <td colspan="2"> Data </td> </tr> </tbody></table> </center><br /> لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً انني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج. <b> وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها. ما عدا تعريف الخلية الأساسية بالطبع. </b><br /> مثال آخر: لنقم بدمج الخلايا الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> العمود الأول <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5">‎<blockquote> <font color="#FF0000"> <TR><br /> </font> <blockquote> <font color="#008000"> <TD ROWSPAN="3"> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> <br /> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> </font> </blockquote><‎/TABLE><br /> </font></font> ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف الخلايا المدموجة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصف الثاني والثالث. وهذا هو الجدول الناتج. <br /> <center><table border="5"> <tbody><tr> <td rowspan="3"> Data </td><td> Data </td> </tr><tr> <td> Data </td> </tr><tr> <td> Data </td> </tr></tbody></table> </center><br /> <hr align="CENTER" size="4" width="80%"> <br /> هناك نوع خاص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخلايا التي يتم تعريفها باستخدام الوسوم <font face="Times New Roman"><font size="4"><TH> ... <‎/TH></font></font> وهي اختصار <font face="Times New Roman"><font size="4">Table Header</font></font> أي ترويسة الجدول.<br /> والفرق الوحيد بينها وبين <font face="Times New Roman"><font size="4"><TD> ... <‎/TD></font></font> هو أن النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تحتويه يظهر بخط أسود عريض ومحاذاته <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص <font face="Times New Roman"><font size="4"><TD></font></font> وبنفس التفاصيل التي ذكرت. <br /> <hr align="CENTER" size="4" width="80%"> <br /> الوسوم الأخيرة المستخدمة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الجداول هي <font face="Times New Roman"><font size="4"> <CAPTION> ... <‎/CAPTION> </font></font> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم <font face="Times New Roman"><font size="4"><TABLE></font></font> وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا. <br /> <font face="Arial"><font size="2"> ‎<TABLE BORDER="5">‎<br /> <CAPTION> Table Caption <‎/CAPTION> <blockquote> <font color="#FF0000"> <TR><br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD><br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> <br /> <TR> <br /> </font> <blockquote> <font color="#008000"> <TD> <i>Data</i> <‎/TD><br /> <TD> <i>Data</i> <‎/TD> <br /> </font> </blockquote> <font color="#FF0000"> <‎/TR><br /> </font> </blockquote><‎/TABLE><br /> </font></font> <center><table border="5"> <caption> Table Caption </caption> <tbody><tr> <td> Data </td><td> Data </td> </tr> <tr> <td> Data </td><td> Data </td> </tr> <tr> <td> Data </td><td> Data </td> </tr> </tbody></table> </center><br /> <hr align="CENTER" size="4" width="80%"> <br /> وأخيراً... وصلنا إلى نهاية هذه الدرس. وما بقي لدي هو أن أحثـك على تطبيق ما قمت بشرحه فيه وفي الدرس السابق وباقي الدروس، وتجربة جميع الاحتمالات الواردة للخصائص والقيم. ومن ناحيتي إليك هذه الصفحة التي تحتوي على عدة طرق وأمثلة تطبيقية لاستخدام الجداول.<br /> <div align="center"><b><font size="5"><font color="Red"><br /> الإطارات (1)<br /> قسم صفحتك إلى إطارات أفقية أو عمودية أو الإثنين معاً ... لا فرق!</font></font></b></div> أهلاً وسهلاً بك إلى الدرس التاسع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس والدرسين التاليين سوف نقوم بالتعرف على الإطارات <font face="Times New Roman"><font size="4">Frames</font></font> وطريقة عرض صفحات الويب باستخدامها…<br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%E5%E1" > فهل </a> تعرف ما هي الإطارات؟ حسنا، سأوضحها لك… هل سبق لك وأن زرت إحدى الصفحات لتشاهد أنها مقسمة إلى عدة أقسام بحيث يظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل منها صفحة مستقلة، وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما تكون قد قمت بالنقر على إحدى الوصلات التشعبية الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أحد الأقسام لتظهر الصفحة المتعلقة بها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> القسم الآخر. <br /> إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك وإلا قم بالنقر هنا لتشاهد مثالاً على صفحة ذات إطارات (ولا تنسى العودة لكي تتابع الدرس معا). <br /> كما شاهدت، فإن الصفحة مكونة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ثلاثة أقسام: علوي وأيسر وأيمن… والحقيقة أن كل قسم منها هو عبارة عن ملف <font face="Times New Roman"><font size="4">Html</font></font> كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن تلك التي تعلمت إنشاءها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدروس السابقة، ولا <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%C7%DE%C9" > علاقة </a> لكل منها بالصفحات الأخرى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث التركيب والتعريف.<br /> أما كيف تم جمعها معا لتظهر بالشكل <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> شاهدته؟ فهنا بيت القصيد. فبالإضافة إلى الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم إنشاؤه خصيصا لتعريف صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن المعادلة تتلخص بـِ:<br /> <br /> <i><b>مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يجمعها. </b></i><br /> <br /> أي أنني <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المثال السابق إحتجت فعلياً إلى أربعة ملفات لتكوين الصفحة. <br /> وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تطبيق الأمثلة أو استخدم ملفاتك القديمة التي قمت بالتدرب <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدروس السابقة. أنا قمت بإنشاء ملفات على النمط التالي (وهي التي استخدمتها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المثال) وأسميتها <font face="Times New Roman"><font size="4">frame1.html, frame2.html, frame3.html</font></font> <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE>Frame1<‎/TITLE><br /> <‎/HEAD><br /> <BODY><br /> Frame 1<br /> <‎/BODY><br /> <‎/HTML><br /> </font></font><br /> ونبدأ الآن بتعريف الملف الرئيسي <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم <br /> <font face="Times New Roman"><font size="4"> <FRAMESET> ... <‎/FRAMESET> </font></font><br /> بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم <font face="Times New Roman"><font size="4"><BODY> ... <‎/BODY> </font></font><br /> <div align="center"> ((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام <font face="Times New Roman"><font size="4">BODY</font></font> )) </div> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE>Master File<‎/TITLE><br /> <‎/HEAD><br /> <br /> <FRAMESET><br /> <‎/FRAMESET><br /> <br /> <‎/HTML><br /> </font></font><br /> نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي <font face="Times New Roman"><font size="4">COLS</font></font> وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا. <br /> والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة عملية <u><b>لكن إنتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات </b></u> حيث ينقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل الإطارات، وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. لذلك أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص المهمة لاحقاً. <br /> <center> <table dir="LTR" border="1" cellpadding="5" width="80%"> <tbody><tr> <td> <font face="Arial"><font size="2"> <nobr>‎<FRAMESET COLS="50%,50%">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4">يحدد إطارين عموديين حجم كل منهما 50% <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حجم الشاشة </font><br /> </td> </tr> <tr> <td> <font face="Arial"><font size="2"> <nobr>‎<FRAMESET COLS="20%,50%,30%">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4"> يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حجم الشاشة </font><br /> </td> </tr> <tr> <td> <font face="Arial"><font size="2"> <nobr>‎<FRAMESET COLS="200,300,*">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4"> يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل، <br /> أما الثالث * أي انه غير محدد <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> معين <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%E1%DF%E4%E5" > ولكنه </a> سيكون بالحجم المتبقي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع) </font><br /> </td> </tr> <tr><td><font face="Arial"><font size="2"> <nobr>‎<FRAMESET COLS="200,*,15%,20%">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4"> يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حجم الشاشة، والرابع 20% <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حجم الشاشة أما الثاني فسيكون حجمه بما تبقى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الشاشة. </font><br /> </td> </tr> <tr> <td> <font face="Arial"><font size="2"> <nobr>‎<FRAMESET COLS="150,*,2*">‎</nobr><br /> <‎/FRAMESET><br /> <br /> * </font></font><br /> </td> <td> <font size="4"> يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*) </font><br /> </td> </tr> </tbody></table> </center> أما الخاصية الثانية فهي <font face="Times New Roman"><font size="4">ROWS</font></font> وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الأمثلة لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة): <br /> <center><table border="1" width="80%"> <tbody><tr> <td><font face="Arial"><font size="2"> <nobr>‎<FRAMESET ROWS="50%,50%">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4"> يحدد إطارين أفقيين ارتفاع كل منهما 50% <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ارتفاع الشاشة </font><br /> </td> </tr> <tr> <td> <font face="Arial"><font size="2"> <nobr>‎<FRAMESET ROWS="20%,50%,30%">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4"> يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ارتفاع الشاشة </font><br /> </td> </tr> <tr> <td> <font face="Arial"><font size="2"> <nobr>‎<FRAMESET ROWS="50,120,*">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4">يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الشاشة </font><br /> </td> </tr> <tr><td><font face="Arial"><font size="2"> <nobr>‎<FRAMESET ROWS="50,*,15%,20%">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4">يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ارتفاع الشاشة، والرابع 20% <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ارتفاع الشاشة. </font><br /> </td> </tr> <tr> <td> <font face="Arial"><font size="2"> <nobr>‎<FRAMESET COLS="*,2*">‎</nobr><br /> <‎/FRAMESET><br /> * </font></font><br /> </td> <td> <font size="4"> يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول </font><br /> </td> </tr> </tbody></table> </center> لم ننته بعد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ذكر كل الخصائص المتعلقة بالوسوم <font face="Times New Roman"><font size="4"><FRAMESET></font></font> فلا زال هناك الكثير. ولكن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه، وهي <font face="Times New Roman"><font size="4"><FRAME></font></font> فما هو عمل هذا الوسم؟ <br /> حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الوسم <font face="Times New Roman"><font size="4"><BODY></font></font> دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو <font face="Times New Roman"><font size="4"> ‎<IMG SRC="imagname.ext">‎</font></font> <br /> وفي حالة الإطارات فإننا نستخدم الوسم <font face="Times New Roman"><font size="4"><FRAME></font></font> وهو وسم مفرد أي ليس له وسم نهاية تماماً مثل <font face="Times New Roman"><font size="4"><IMG></font></font>. وفيه نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات المذكورة داخل <font face="Times New Roman"><font size="4"><FRAMESET>.</font></font> وسوف أقوم مباشرة باستخدام الخاصية <font face="Times New Roman"><font size="4">SRC</font></font> لتحديد مصدر الملف. <br /> دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبدأ بالمثال الأول: <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> <‎/FRAMESET><br /> </font></font><br /> <div align="center">الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.</div> مثال آخر:<br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="200,400,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> <‎/FRAMESET><br /> </font></font><br /> مثال ثالث:<br /> <font face="Arial"><font size="2"> ‎<FRAMESET ROWS="50,*,15%,20%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> </font></font><br /> ورابع:<br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="*,2*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> <‎/FRAMESET><br /> </font></font><br /> <hr align="CENTER" size="4" width="80%"> وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام <font face="Times New Roman"><font size="4"><FRAME SRC></font></font> تماماً كما ندرجها باستخدام <font face="Times New Roman"><font size="4"><IMG SRC></font></font> وإليك هذا المثال: <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="thedome.jpg">‎<br /> <‎/FRAMESET><br /> * </font></font><br /> <hr align="CENTER" size="4" width="80%"> <br /> والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:- <br /> <center> <table dir="rtl" bgcolor="#FFFFFF" border="5" width="80%"> <tbody><tr> <td> <font size="4"> <br /> <ul><li>لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> سيضم هذه الإطارات.</li> <li>الملف الرئيسي هو ملف <font face="Times New Roman"><font size="4">HTML</font></font> إعتيادي غير أننا نكتب الوسوم <font face="Times New Roman"><font size="4"><FRAMESET> ...<‎/FRAMESET></font></font> بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <font face="Times New Roman"><font size="4"><BODY> ...</BODY>.</font></font> وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها.</li> <li>نستخدم الخصائص <font face="Times New Roman"><font size="4">COLS, ROWS</font></font> لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها.</li> <li>الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة.</li> <li>نستخدم الوسم <font face="Times New Roman"><font size="4"><FRAME></font></font> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية <font face="Times New Roman"><font size="4">SRC.</font></font> بالإضافة إلى استخدامه لتحديد باقي الخصائص .</li> </ul> </font> </td> </tr> </tbody></table><br /> </center> كما نستطيع تمثيل هيكلية الإطارات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال الشكل التالي: <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/frameset.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <br /> <br /> هل تأكدت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> فهمك لهذه النقاط؟ لنتابع إذن ... <br /> حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية إدراج كلاهما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة. كما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأمثلة التالية: <br /> <br /> <ul><li><div align="right"> صفحة مكونة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صفين، الثاني منهما مقسم بدوره إلى عمودين * </div></li> <li><div align="right"> صفحة مكونة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عمودين، الثاني منهما مقسم بدوره إلى صفين * </div></li> </ul> لنبدأ بالمثال الأول:<br /> بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولاً حسب الإرتفاعات المرغوب بها: <br /> <font face="Arial"><font size="2"> ‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> <‎/FRAMESET><br /> <br /> </font></font><br /> لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> وكأنه صفحة إطارات <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> لذلك لا نحتاج لتعريفه كصف وبدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ذلك نعاود استخدام تعريف الصفحات! أي <font face="Times New Roman"><font size="4"><FRAMESET></font></font> مرة أخرى. <br /> <font face="Arial"><font size="2"> ‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> <FRAMESET><br /> <‎/FRAMESET><br /> <br /> <‎/FRAMESET><br /> <br /> </font></font><br /> وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية كالتالي: <br /> <font face="Arial"><font size="2"> ‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET COLS="200,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> <‎/FRAMESET><br /> <br /> <‎/FRAMESET><br /> <br /> </font></font><br /> ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما إذا أردت إختصار هذه المهمة فهذه هي <br /> <hr align="CENTER" size="4" width="80%"> <div align="right"> لنقم الآن بإدراج مثال آخر وتحليله: أنقر هنا لمشاهدته ثم عد إلى هنا لنناقشه معاً </div> يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها). <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> <‎/FRAMESET><br /> <br /> </font></font><br /> العمود الأوسط <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صفين (وهذا هو التعريف بصورة مستقلة) <br /> <font face="Arial"><font size="2"> ‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> <br /> </font></font><br /> وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية: <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> <br /> ‎<FRAME SRC="frame3.html">‎<br /> <‎/FRAMESET><br /> <br /> </font></font><br /> وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا المجال. وهو ما سنكمله <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرسين القادمين!<br /> <b><font size="5"><font color="Red"><br /> الإطارات (2)<br /> لا يكفي أن تدرج إطاراً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحتك، بل حدد خصائصه أيضاً </font></font></b><br /> أهلاً وسهلاً بك إلى الدرس العاشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> والذي لا زلنا نناقش موضوع الإطارات فيه. لقد تعرفت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق على الأساسيات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الموضوع، وتعلمت كيفية إنشاء صفحة ويب باستخدام مبدأ الإطارات. ونتابع معاً التعرف على باقي الخصائص والتحديدات المتعلقة بها.<br /> بداية، أجد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الملف الأساسي، وهما <font face="Times New Roman"><font size="4"><FRAMESET></font></font> والذي يوضع بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <font face="Times New Roman"><font size="4"><BODY></font></font> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة وخصائص هذه المجموعة ككل. و <font face="Times New Roman"><font size="4"><FRAME></font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما. <br /> وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة (والتي قمت بتوضيحها هنا). فمثلاً لدينا أربع خصائص للوسم <font face="Times New Roman"><font size="4"><FRAMESET></font></font> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين <font face="Times New Roman"><font size="4">Netscape, MS Explorer.</font></font> وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت. <br /> أولى هذه الخصائص هي <font face="Times New Roman"><font size="4">FRAMEBORDER</font></font> وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها: <br /> <font face="Arial"><font size="2"> ‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> * </font></font><br /> أما الخصائص الثلاث الأخرى فهي: <br /> <ul><li><div align="right"><font face="Times New Roman"><font size="4">BORDER: </font></font> تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. <font face="Arial"><font size="2">(‎BORDER="n"‎)</font></font> وتعمل فقط مع <font face="Times New Roman"><font size="4">Netscape</font></font> <br /> </div></li> <li><div align="right"><font face="Times New Roman"><font size="4">BORDERCOLOR: </font></font> لإضافة لون للحدود <font face="Arial"><font size="2">(‎BORDERCOLOR="rrggbb"‎)</font></font> وتعمل مع <font face="Times New Roman"><font size="4">Netscape</font></font> أيضاً. <br /> </div></li> <li><div align="right"><font face="Times New Roman"><font size="4">FRAMESPACING: </font></font> لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل <font face="Arial"><font size="2">(FRAMESPACING="n"‎)</font></font> وهي تعمل مع <font face="Times New Roman"><font size="4">MS Explorer.</font></font> </div></li> </ul> <hr align="CENTER" size="4" width="80%"> <br /> أما الخصائص المستخدمة مع الوسم <font face="Times New Roman"><font size="4"><FRAME></font></font> فهي كالتالي: <br /> <br /> <ul><li><div align="right"><font face="Times New Roman"><font size="4">MARGINHEIGHT: </font></font> تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل). </div><font face="Arial"><font size="2">‎MARGINHEIGHT="n"‎</font></font></li> <li><div align="right"><font face="Times New Roman"><font size="4">MARGINWIDTH: </font></font> تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل). </div><font face="Arial"><font size="2">‎MARGINWIDTH="n"‎</font></font></li> <li><div align="right"><font face="Times New Roman"><font size="4">SCROLLING: </font></font> تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم <font face="Times New Roman"><font size="4">yes</font></font> للظهور. <font face="Times New Roman"><font size="4">no</font></font> لعدم الظهور. و <font face="Times New Roman"><font size="4">auto</font></font> التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> معظم تطبيقات <font face="Times New Roman"><font size="4">Windows</font></font> </div> <font face="Arial"><font size="2"> SCROLLING="yes"‎<br /> SCROLLING="no"‎<br /> SCROLLING="auto"‎<br /> </font></font></li> <li><div align="right"><font face="Times New Roman"><font size="4">NORESIZE</font></font> عند إضافة هذه الخاصية يتم منع عملية التحكم <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%CD%CC%E3" > بحجم </a> الإطار بالتصغير أو التكبير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال السحب والإفلات. وهي لا تأخذ أي قيم. </div></li> </ul> ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> أدرجت فيه الصورة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق، فهو أفضل مثال لتوضيحها). ولكي أذكرك به رجاءً أنقر هنا. وقم بتفحصه والتدقيق <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية <font face="Times New Roman"><font size="4">NORESIZE</font></font> <br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎</FRAMESET>‎<br /> * </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎</FRAMESET>‎<br /> * </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎</FRAMESET>‎<br /> * </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> <font face="Arial"><font size="2"> ‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE>‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎</FRAMESET>‎<br /> * </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> <br /> كذلك هناك الخصائص <font face="Times New Roman"><font size="4">FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR</font></font> التي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع <font face="Times New Roman"><font size="4"><FRAMESET>.</font></font> لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة. وهي تعمل على متصفحات معينة دون غيرها. <br /> بقي لدينا الخاصية <font face="Times New Roman"><font size="4">NAME</font></font> والتي تعتبر أهم خاصية لهذا الوسم، فهي التي تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعاً خاصاً وبصورة مستقلة عن باقي الخصائص، وذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس التالي إن شاء الله.<br /> <hr align="CENTER" size="4" width="80%"> هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النهاية وهو: <br /> <font face="Times New Roman"><font size="4"><NOFRAMES> ... <‎/NOFRAMES> </font></font><br /> يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ <font face="Times New Roman"><font size="4">Netscape, MS Explorer)</font></font> لكنك حتماً تستطيع مشاهدتها وذلك لأن الإصدارات المعربة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه المتصفحات هي إصدارات حديثة نسبياً وتدعم الإطارات. <br /> فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحاً حديثاً فرصة مشاهدة موقعك، فكل ما عليك فعله هو إدراج هذا الوسم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نهاية الملف الرئيسي للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية. <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE>Main File<‎/TITLE><br /> <‎/HEAD><br /> ‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> <br /> <NOFRAMES><br /> <BODY><br /> </font></font><br /> <font size="-1"> أكتب صفحتك<br /> بالصورة<br /> الإعتيادية هنا </font><br /> <font face="Arial"><font size="2"> <‎/BODY><br /> <‎/NOFRAMES><br /> <br /> <‎/HTML><br /> </font></font><br /> أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى للموقع بدونها، فلم لا تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بأن الموقع يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (على الأقل لكي تخفف عنه الصدمة)!! <br /> <hr align="CENTER" size="4" width="80%"> وماذا بعد...؟ لم يبق أي شيء ليذكر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس فقد قمنا بمناقشة جميع خصائص الإطارات عدا الخاصية <font face="Times New Roman"><font size="4">NAME.</font></font> ما رأيك لو قمنا بالتدرب على إنشاء نسخة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذا الموقع باستخدام الإطارات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس التالي؟ فكر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الموضوع وتخيّل تصميماً معيناً تحب أن تراه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الموقع (أو بالأحرى تحب أن ترى الموقع فيه). وقم بتجهيز الملفات الخاصة بذلك لتقارنها مع الملفات والأمثلة التي سأوردها.<br /> <b><font size="5"><font color="Red">الإطارات (3)<br /> أدرجت إطاراً؟ <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%E5%E1" > فهل </a> تأكدت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أنه يعمل بالشكل المطلوب...؟ </font></font></b><blockquote> أهلاً وسهلاً بك إلى الدرس الحادي عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> كما ترى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> العنوان لا زلنا نتابع <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> موضوع الإطارات، وفي القسم الثالث منه. وذلك لأهمية هذا الموضوع وتشابك خطوطه. وخصوصاً لأننا نحتاج إلى التعامل مع أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وسم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الوقت وداخل أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ملف. مما يستدعي التركيز والتروي عندما نريد إنشاء صفحة إطارات. <br /> لقد أنهينا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرسين الماضيين شرح كافة الوسوم والخصائص التي تتعلق بالإطارات، عدا واحدة هي <font face="Times New Roman"><font size="4">NAME</font></font> ووعدتك أن أقوم بشرحها بصورة وافية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> درس مستقل. كما وعدتك أن نقوم بإجمال موضوع الإطارات والتدرب <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال مثال واقعي يتمثل بإنشاء صفحة إطارات لهذا الموقع وهاأنا ذا أفي بوعدي. <br /> لقد قلت إن هذه الخاصية تعتبر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أهم خصائص الوسم <font face="Times New Roman"><font size="4"><FRAME></font></font> لأنها تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها. <b> لنعتبر هذا تعريفاً مبدئياً.</b> ولكي أوضح لك الهدف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الخاصية، قم باستعراض المثال التالي ... <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> قمت فيه بتمثيل <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الأجزاء <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذا الموقع (لنترك تلك الأمثلة المملة التي كنا نعمل <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرسين السابقين ولنبدأ بالعمل الجدي). وأنقر على أزرار الوصلات التشعبية الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإطار الأيسر ......وبالطبع لا تنسى النقر على زر <font face="Times New Roman"><font size="4">BACK</font></font> الموجود <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> متصفحك للعودة إلى هذه الصفحة. وقد تحتاج إلى نقره عدة مرات بحسب عدد المرات التي تنقلت فيها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الإطار. <br /> <br /> ماذا وجدت؟!؟ إن الصفحات تظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الإطار (أعرف أنك كنت تتوقع ظهورها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإطار الآخر... <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%E5%E1" > فهل </a> خيبت ظنّك؟). حسناً، لا زالت هذه الإطارات تحتاج إلى القليل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن تتمعن <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الشيفرات التالية، وهي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الواقع الشيفرات الخاصة بالملفات المستخدمة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا المثال. وأرجو أن تقوم بدراستها جيداً، على الأقل لكي تكون متأكداً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> فهمك لكل الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي. <br /> <hr align="CENTER" size="4" width="40%"> شيفرة الملف الرئيسي <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> أسميته <font face="Times New Roman"><font size="4">mainfile.html</font></font> <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE>Main File<‎/TITLE><br /> <‎/HEAD><br /> ‎<FRAMESET ROWS="60,*">‎<br /> ‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br /> ‎<FRAMESET COLS="120,*">‎<br /> ‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br /> ‎<FRAME SRC="htmintro.html">‎<br /> <‎/FRAMESET><br /> <‎/FRAMESET><br /> <‎/HTML><br /> </font></font><br /> <hr align="CENTER" size="4" width="40%"> شيفرة الملف العلوي (الترويسة) <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> أسميته <font face="Times New Roman"><font size="4"> header.html</font></font> <br /> <font face="Arial"><font size="2"><HTML><br /> <HEAD><br /> <TITLE>Header File<‎/TITLE><br /> <‎/HEAD><br /> ‎<BODY bgcolor="#BCD8EB">‎<br /> <CENTER><IMG SRC="frambnr.jpg"><‎/CENTER><br /> <‎/BODY><br /> <‎/HTML><br /> </font></font><br /> <hr align="CENTER" size="4" width="40%"> شيفرة الملف <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يحتوي على الأزرار والوصلات التشعبية والذي أسميته <font face="Times New Roman"><font size="4">lftframe.html</font></font> <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE>Buttons<‎/TITLE><br /> <‎/HEAD><br /> ‎<BODY BGCOLOR="#BCD8EB">‎<br /> ‎<A HREF="htutor01.html"><IMG SRC="lesson1.jpg"></A><BR>‎<br /> ‎<A HREF="htutor02.html"><IMG SRC="lesson2.jpg"></A><BR>‎<br /> ‎<A HREF="htutor03.html"><IMG SRC="lesson3.jpg"></A><BR>‎<br /> ‎<A HREF="htutor04.html"><IMG SRC="lesson4.jpg"></A><BR>‎<br /> ‎<A HREF="htutor05.html"><IMG SRC="lesson5.jpg"></A><BR>‎<br /> <‎/BODY><br /> <‎/HTML><br /> </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> وبالطبع بقي لدينا الإطار الأكبر وهو لا يحتوي على ملف خاص لأنه الإطار العام <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريد إظهار الملفات فيه. ولن يتم إجراء أي تعديل على تلك الملفات. وبصورة مبدئية لقد شاهدت أنه يحتوى على صفحة المقدمة والمسماه <font face="Times New Roman"><font size="4">htmintro.html</font></font> <br /> <hr align="CENTER" size="4" width="80%"> <br /> وهنا يأتي دور الخاصية <font face="Times New Roman"><font size="4">NAME</font></font> والتي نقوم <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلالها بتعيين اسم ما للإطار <b>-أي الإطار <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نرغب أن تظهر به الملفات عندما نقوم بالنقر على الوصلات التشعبية-</b> حيث سيتم فيما بعد استخدام هذا الإسم <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أجل استهداف هذا الإطار <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل الوصلات التشعبية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإطارات الأخرى أو حتى <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحات الأخرى.<br /> وبالمناسبة فقد حان الآن ذكر خاصية <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خصائص الوسم <font face="Times New Roman"><font size="4"><A> ... <‎/A></font></font> ( وهو وسم الوصلات التشعبية كما عرفت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السادس.) وهذه الخاصية هي <font face="Times New Roman"><font size="4">TARGET.</font></font> (انتظر قليلاً وستعرف لماذا) <br /> دعنا نقوم بترتيب الأمور بصورة أكثر وضوحاً وتسلسلاً:<br /> برأيك بأي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الملفات الثلاثة السابقة يجب أن نضع الخاصية <font face="Times New Roman"><font size="4">NAME?</font></font> سؤال سخيف! أليس كذلك؟ طالما أنها إحدى خصائص الوسم <font face="Times New Roman"><font size="4"><FRAME></font></font> إذن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الملف الرئيسي إذن هي توضع <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الملف الرئيسي... هذه أصبحت واضحة‍! لكن مع أي وسم <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وسوم <font face="Times New Roman"><font size="4"><FRAME></font></font> الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الملف الرئيسي؟؟ بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافه، وكذلك الأمر بالنسبة لتعريف ملف الوصلات التشعبية <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> لا نريد استهدافه أيضاً. إذن لم يبق لدينا إلا الوسم الخاص بتعريف الإطار العام <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> ستظهر به الملفات. وبافتراض أننا نريد تسمية هذا الإطار بالاسم <font face="Times New Roman"><font size="4">mainwindow.</font></font> وهو اسم اختلقته أنا حسب ما أريد وأستطيع إعطاءه أي اسم آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص مثل /؟#$%^ (عدا الرمز _ <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> حالات خاصة سأذكرها لك لاحقاً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس). <br /> <br /> إذن تصبح شيفرة الملف الأساسي هي: <br /> <font face="Arial"><font size="2"> <HTML><br /> <HEAD><br /> <TITLE>Main File<‎/TITLE><br /> <‎/HEAD><br /> ‎<FRAMESET ROWS="60,*">‎<br /> ‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br /> ‎<FRAMESET COLS="120,*">‎<br /> ‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br /> ‎<FRAME SRC="htmintro.html" <b>NAME="mainwindow"</b>>‎<br /> <‎/FRAMESET><br /> <‎/FRAMESET><br /> <‎/HTML><br /> </font></font><br /> وبهذا نكون قد إنتهينا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> إعداد الملف الرئيسي ليكون ملف إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك الإطار <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أي مكان باستخدام الإسم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> عرفناه به. <br /> المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل الملفات المتعلقة بهذه الوصلات تظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإطار المحدد. وهنا يأتي دور الخاصية <font face="Times New Roman"><font size="4">TARGET</font></font> سالفة الذكر لكي تقوم على الرحب والسعة بأداء هذه الوظيفة. وسوف نعمل الآن على الملف المسمى <font face="Times New Roman"><font size="4">lftframe.html.</font></font> أليس هو الملف <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يحتوي على الوصلات التشعبية؟! ليصبح بالشكل التالي: <br /> <font face="Arial"><font size="2"><HTML><br /> <HEAD><br /> <TITLE>Buttons<‎/TITLE><br /> <‎/HEAD><br /> ‎<BODY BGCOLOR="#BCD8EB">‎<br /> ‎<A HREF="htutor01.html" <b>TARGET="mainwindow"</b>><IMG SRC="lesson1.jpg"></A><BR>‎<br /> ‎<A HREF="htutor02.html" <b>TARGET="mainwindow"</b>><IMG SRC="lesson2.jpg"></A><BR>‎<br /> ‎<A HREF="htutor03.html" <b>TARGET="mainwindow"</b>><IMG SRC="lesson3.jpg"></A><BR>‎<br /> ‎<A HREF="htutor04.html" <b>TARGET="mainwindow"</b>><IMG SRC="lesson4.jpg"></A><BR>‎<br /> ‎<A HREF="htutor05.html" <b>TARGET="mainwindow"</b>><IMG SRC="lesson5.jpg"></A><BR>‎<br /> <‎/BODY><br /> <‎/HTML><br /> </font></font><br /> والآن حان وقت العرض، أنقر هنا لنشاهد صفحة الإطارات بعد التعديل: <br /> <div align="center"> <font face="andalus,tahoma"><font size="6">لقد نجحنا... أليس كذلك</font></font> </div> الحقيقة أننا لم ننجح بصورة مطلقة، بل إلى حد ما... وأعتذر لك لأني نغصت عليك هذا النجاح. لكن طالما أننا نريد الوصول إلى أفضل مستوى وأعلى أداء لموقعنا فيجب علينا دائماً تطبيق القواعد التي تضمن ذلك. ولكي أوضح لك السبب <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يجعلني أتكلم كالفلاسفة سوف أطلب منك العودة إلى الصفحة الرئيسية للإطارات بعد أن قمت بإضافة وصلات تشعبية إضافية لها، واحدة خاصة بالإنتقال إلى ... صفحة الإطارات نفسها، أي إعادة <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%CD%E3%ED%E1" > تحميل </a> الصفحة على الشاشة. والثانية للإنتقال <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> طريقة العرض بالإطارات إلى العرض بدون إطارات. لذلك أنقر هنا رجاءً. وقم بتجربة النقر على هذه الوصلات الجديدة. <br /> مشكلة جديدة، أليس كذلك؟ ففي الحالة الأولى تم <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%CD%E3%ED%E1" > تحميل </a> الصفحة داخل الإطار نفسه، وبذلك أصبحت الصفحات متداخلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ما بينها، وكذلك الأمر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحالة الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل:<br /> <font face="Arial"><font size="2"> <A HREF="filename.html" <b>TARGET="mainwindow"</b>> ... </A> </font></font><br /> كما لا نستطيع كتابته بالشكل التالي: <br /> <font face="Arial"><font size="2"><A HREF="filename.html"> ... </A> </font></font><br /> وطبعاً أنت تعرف السبب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كلتا الحالتين. <br /> لقد وقعنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مصيدة الإطارات. إذن فما الحل؟ الحل توفره <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> نفسها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال وضع قيمة معينة للخاصية <font face="Times New Roman"><font size="4">TARGET</font></font> وهي <font face="Times New Roman"><font size="4">"‎_top"</font></font> لتخبر المتصفح أن يقوم بتحميل الصفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <b>المستوى الأعلى</b> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الشاشة. أي ان يقوم بإلغاء أي إطارات أو صفحات عادية موجودة أصلاً وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> وليست <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عندي كما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإسم <font face="Times New Roman"><font size="4">mainwindow.</font></font> <br /> والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى <font face="Times New Roman"><font size="4">‎_top</font></font> معرفة بشكل مسبق <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> لتحدد موقع ظهور الصفحة المعنية. ويجب أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة <font face="Times New Roman"><font size="4">lowercase.</font></font> فإذا كتبت بالأحرف الكبيرة فلن تحصل على النتيجة التي تريدها لأنها ستعتبر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه الحالة وكأنها أسماء عادية. وهذه هي القيم الأربعة: <br /> <table bgcolor="#FFFFFF" border="2" cellpadding="10" width="80%"> <tbody><tr> <td> <br /> <dl><dt> <font face="Times New Roman"><font size="4">‎_top</font></font><br /> </dt><dd>تحمل الصفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أعلى مستوى للشاشة أي تلغي الإطارات الموجودة أصلاً<br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/top.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <hr align="CENTER" noshade="noshade" size="4" width="40%"> </dd><dt><font face="Times New Roman"><font size="4">‎_blank</font></font><br /> </dt><dd>تقوم بفتح شاشة <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> وفارغة للمتصفح وتعرض الصفحة المحملة فيه<br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/blank.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <hr align="CENTER" noshade="noshade" size="4" width="40%"> </dd><dt><font face="Times New Roman"><font size="4">‎_self</font></font><br /> </dt><dd> (الحالة الإفتراضية) تقوم بتحميل الصفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الإطار <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> توجد به الوصلة التشعبية التي تم النقر عليها، (وبالطبع هذا ما يحدث دائما دون وجود هذه القيمة، أليس كذلك؟) <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/self.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <hr align="CENTER" noshade="noshade" size="4" width="40%"> </dd><dt><font face="Times New Roman"><font size="4">‎_parent<br /> </font></font> </dt><dd> تقوم بعرض الإطار المحمل مكان الإطار الأب،<br /> وتأمل الشكل التالي <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يمثل صفحة إطارات مركبة. <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/parent.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <div align="right"> أنت تعرف أننا نحتاج إلى ثلاثة أزواج <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم <font face="Times New Roman"><font size="3"><FRAMESET> ... <‎/FRAMESET></font></font> لإخراج مثل هذه الصفحة. </div><ul><li><div align="right">الأول لتحديد الصفحة ككل </div></li> <li><div align="right"> الثاني لتحديد الإطارين 2 و 3 المتفرعين <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصفحة الرئيسية </div></li> <li><div align="right"> الثالث لتحديد الإطارين 4 و 5 المتفرعين <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الإطار 3 </div></li> </ul> <div align="right">وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا أردت) للإطارين 2 و 3 وأن الإطار 3 هو الأب للإطارين 4 و 5. وعلى سبيل المثال إذا احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة <font face="Times New Roman"><font size="3">‎_parent</font></font> لتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين 1 و 2 بمقابل الصفحة الرئيسية.<br /> وللتمييز بين هذه القيمة والقيمة <font face="Times New Roman"><font size="3">‎_top </font></font>فإن القيمة <font face="Times New Roman"><font size="3">‎_top</font></font> تقوم بالتحميل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المستوى الأول (الأعلى) دائماً وبغض النظر عن موقع الوصلة التشعبية. </div> </dd></dl> </td> </tr> </tbody></table> ونعود الآن إلى صفحتنا. فلو أضفنا السطرين التاليين إلى ملف الوصلات التشعبية: <br /> <font face="Arial"><font size="2"> ‎<A HREF="mainfile.html" <b>TARGET="_top"</b>><IMG SRC="mainpage.jpg"></A><BR>‎<br /> ‎<A HREF="htmintro.html" <b>TARGET="_top"</b>><IMG SRC="noframes.jpg"></A><BR>‎<br /> </font></font><br /> لحصلنا على النتيجة المرجوة. جرّب ذلك وبذلك تستطيع أن تقول وبكل ثقة <br /> <div align="center"><font face="andalus,tahoma"><font size="7"><font color="Black">نجحنا بجدارة</font></font></font> </div> </blockquote><b><font size="5"><font color="Red">وسوم ... <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هنا وهناك<br /> بلا تعليق ... فالعنوان يكفي<br /> </font></font></b> أهلاً وسهلاً بك إلى الدرس الثاني عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> كما ترى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> العنوان فقد اخترت أن يكون هذا الدرس خارجاً قليلاً عن نطاق الدروس السابقة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث المحتوى. فلن تجد هنا وسوماً محددة تستطيع حصرها تحت موضوع معين، بل وسوماً عامة وخصائص إضافية لوسوم ذكرت سابقاً. وإن كان الهدف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> معظمها ترتيب الصفحة والتحكم بشكل محتوياتها. ولا أخفي عليك أني قصدت تأجيل بعضها حتى هذا الدرس مع أنه كان <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الممكن إدراجها ضمن <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> سابقة، وخاصة الدرس الرابع (الفقرات). لكن حجّتي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عدم إدراجها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> حينه أن هذه الوسوم لن يتم استخدامها ولن تُفهم طريقة عملها إلاّ عند استخدام وسوم أخرى تمّ شرحها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> وقت لاحق بعد الفقرات مثل الصور والجداول. أما البعض الآخر ففضلت عدم حصرها ضمن أي درس على اعتبار أنها وسوم عامة لا تختص بأي موضوع. على أية حال يكفينا هذه المقدمة وأترك لك حرية تصنيفها كما يحلو لك. والآن لندخل مباشرة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الموضوع. <br /> <hr align="CENTER" size="4" width="80%"> <br /> أترى هذا الخط <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> فصلت به هذه الفقرة عن الفقرة السابقة؟ إنه يسمى بلغة <font face="Times New Roman"><font size="4">HTML</font></font> بالمسطرة الأفقية <font face="Times New Roman"><font size="4">Horizontal Rule</font></font> وتستطيع إدراجه لتقسيم صفحتك بكتابة الوسم <font face="Times New Roman"><font size="4"><HR></font></font> فقط لا غير. أكتب: <br /> <font face="Arial"><font size="2"><HR></font></font><br /> ليظهر لديك هذا الخط: <br /> <hr> لكن هذا ليس كل شيء. لأنك تستطيع تحديد سُمك هذا الخط إذا أضفت له الخاصية <font face="Times New Roman"><font size="4">SIZE</font></font> وأتبعتها برقم يمثل هذا السُمك مثلاً: <br /> <font face="Arial"><font size="2"> ‎<HR SIZE="5">‎<br /> </font></font><br /> <hr size="5"> <font face="Arial"><font size="2">‎<HR SIZE="1">‎<br /> </font></font><br /> <hr size="1"> <font face="Arial"><font size="2">‎<HR SIZE="10">‎<br /> </font></font><br /> <hr size="10"> كذلك يمكنك تحديد عرض الخط باستخدام الخاصية <font face="Times New Roman"><font size="4">WIDTH</font></font> والتي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الممكن أن تأخذ قيمة مطلقة أو نسبية <br /> <font face="Arial"><font size="2"> ‎<HR WIDTH="80%">‎<br /> </font></font><br /> <hr width="80%"> <font face="Arial"><font size="2"> ‎<HR WIDTH="400">‎<br /> </font></font><br /> <hr width="400"> <font face="Arial"><font size="2"> ‎<HR SIZE="5" WIDTH="60%">‎<br /> </font></font><br /> <hr size="8" width="60%"> ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه <font face="Times New Roman"><font size="4">ALIGN</font></font> والتي تأخذ القيم <font face="Times New Roman"><font size="4">center, left, right</font></font> <br /> <font face="Arial"><font size="2"> ‎<HR WIDTH="80%" ALIGN="center">‎ </font></font><br /> <hr align="center" width="80%"> <font face="Arial"><font size="2"> ‎<HR WIDTH="400" ALIGN="left">‎ </font></font><br /> <hr align="left" width="400"> <font face="Arial"><font size="2"> ‎<HR SIZE="5" WIDTH="60%" ALIGN="right">‎ </font></font><br /> <hr align="right" size="8" width="60%"> وكما تلاحظ فإن هذا الخط يكتسب مظهراً غائراً ثلاثي الأبعاد وإذا أردت خطاً عادياً غير غائر فقم بإضافة الخاصية <font face="Times New Roman"><font size="4">NOSHADE</font></font> <br /> <font face="Arial"><font size="2"><HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE><br /> </font></font><br /> <hr align="center" noshade="noshade" size="5" width="60%"> أما إذا كان لون هذا الخط لا يعجبك، فما <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مشكلة إذ أنك تستطيع اختيار اللون <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يعحبك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال الخاصية <font face="Times New Roman"><font size="4">COLOR</font></font> (تعمل فقط مع <font face="Times New Roman"><font size="4">MS Explorer</font></font>) <br /> <font face="Arial"><font size="2"><HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FF0000" NOSHADE><br /> </font></font><br /> <hr align="center" color="#FF0000" noshade="noshade" size="5" width="60%"> <hr align="CENTER" size="4" width="80%"> <br /> الوسم التالي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه المجموعة هو وسم الملاحظات <font face="Times New Roman"><font size="4"> ‎<!-- ... -->‎</font></font> ونستخدمه عند الحاجة لكتابة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي يقصد أن لا تظهر عند استعراض هذا الملف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفح. <br /> <font face="Arial"><font size="2"> ‎This is line one<BR>‎<br /> ‎<!-- This is line two --><BR>‎<br /> ‎and, this is line three<BR>‎<br /> </font></font><br /> وهذه هي النتيجة<br /> <font face="Arial"><font size="2"> This is line one<br /> <br /> and, this is line three<br /> </font></font><br /> <hr align="CENTER" size="4" width="80%"> <br /> من المؤكد أنك تعرف الوسم <font face="Times New Roman"><font size="4"><BR></font></font> والذي يقوم بالتحكم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نهايات الأسطر (أي أنه ينهي السطر الحالي بحيث يظهر النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> سطر جديد). <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%E5%E1" > فهل </a> تعلم أنه يوجد خاصية لهذا الوسم وهي <font face="Times New Roman"><font size="4">CLEAR</font></font>؟ <br /> لكي تتوضح لك طبيعة عمل هذه الخاصية، قم بمراجعة ما ذكرناه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الخامس عن الصور والرسومات، واستخدام الخاصية <font face="Times New Roman"><font size="4">ALIGN</font></font> التي تحدد موقع هذه الصور على الصفحة. حسناً، لقد إتفقنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> حينه على أن القيمة <font face="Times New Roman"><font size="4">right</font></font> توجه الصورة إلى يمين الصفحة وأن النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها يظهر ملتفاً بعدة أسطر على الجهة اليسرى. وكذلك الأمر (بصورة معكوسة) عند استخدام القيمة <font face="Times New Roman"><font size="4">left.</font></font> وحتى لو استخدمنا القيمة <font face="Times New Roman"><font size="4">bottom</font></font> أو لم نقم بإضافة الخاصية <font face="Times New Roman"><font size="4">ALIGN</font></font> أصلاً، فسوف نجد أن النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها يظهر بمحاذاة الحافة السفلى للصورة. <br /> يتلخص عمل الخاصية <font face="Times New Roman"><font size="4">CLEAR</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> منع النص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الإلتفاف على أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> جانبي الصورة.<br /> وهي تأخذ القيم <font face="Times New Roman"><font size="4">right</font></font> التي تمنع ظهور النص إلاّ عند بداية الهامش الأيمن الفارغ بعد الصورة (أي بمنتهى البساطة تمنع ظهور النص والتفافه على الجهة اليسرى للصورة... أليست هذه العبارة أسهل للفهم؟!!) وبالتالي فإن هذه القيمة تستخدم عندما تكون قيمة <font face="Times New Roman"><font size="4">ALIGN</font></font> للصورة هي <font face="Times New Roman"><font size="4">right.</font></font> <br /> وبنفس المبدأ لكن بصورة معكوسة نستخدم القيمة <font face="Times New Roman"><font size="4">left</font></font> والتي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نتيجتها تمنع إلتفاف النص على الجهة اليمنى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصورة. وذلك عندما تكون محاذاة الصورة هي <font face="Times New Roman"><font size="4">left</font></font> <br /> منطق معكوس... أليس كذلك؟ على أية حال إذا كنت تكرة هذه التعقيدات وتحب الطرق المختصرة مثلي، فاستخدم القيمة <font face="Times New Roman"><font size="4">all</font></font> التي تمنع الإلتفاف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> جميع الجوانب. <br /> ما رأيك أن نقتبس <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الأمثلة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الدرس الخامس لنشاهد كيف تعمل مع إضافة هذه الخاصية؟ وسوف أدرج هذه الأمثلة كما هي نصاً وحرفاً أما الإضافات فهي المميزة باللون الأحمر <br /> <table valign="TOP" align="CENTER" border="1" cellpadding="0" height="120" width="75%"> <tbody><tr><td> <font size="4"> <font face="Times New Roman"><font size="4"><u>RIGHT</u></font></font><br /> <br /> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/right.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <br /> أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. <br /> </font><br /> <center><font size="4"><font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎<br /> <font color="#FF0000">‎<BR CLEAR="right">‎</font> </font></font></font></center><font size="4"> <font color="#FF0000">فإذا أضفنا الوسم <font face="Times New Roman"><font size="4"><BR></font></font> مع الخاصية <font face="Times New Roman"><font size="4">‎CLEAR="right"‎</font></font> لوجدنا أنها منعت النص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الإلتفاف </font> </font> <br /> </td></tr></tbody></table><br /> والآن لنجرب استخدام القيمة <font face="Times New Roman"><font size="4">left</font></font> مع هذا المثال نفسه <br /> <table valign="TOP" align="CENTER" border="1" cellpadding="0" height="120" width="75%"> <tbody><tr><td> <font size="4"> <font face="Times New Roman"><font size="4"><u>RIGHT</u></font></font><br /> <br /> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/right.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <br /> أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. <br /> </font><br /> <center><font size="4"> <font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎<br /> <font color="#FF0000">‎<BR CLEAR="left">‎</font> </font></font></font></center><font size="4"> <font color="#FF0000"> نلاحظ أن لا فائدة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> استخدام الوسم <font face="Times New Roman"><font size="4"><BR></font></font> مع الخاصية <font face="Times New Roman"><font size="4">‎CLEAR="left"‎</font></font> فكل ما فعلته هو إضافة سطر فارغ أعلى النص </font> </font><br /> </td></tr></tbody></table><br /> حسناً لنستخدم القيمة <font face="Times New Roman"><font size="4">left</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مكانها الصحيح، أي مع المحاذاة <font face="Times New Roman"><font size="4">left</font></font> <br /> <table valign="TOP" align="CENTER" border="1" cellpadding="0" height="120" width="75%"> <tbody><tr> <td> <font size="4"> <u><font face="Times New Roman"><font size="4">LEFT</font></font></u><br /> <br /> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/left.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> <br /> هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة. <br /> </font><br /> <center><font size="4"> <font face="Arial"><font size="2"> ‎<IMG SRC="image.jpg" ALIGN="LEFT">‎<br /> <font color="#FF0000">‎<BR CLEAR="left">‎</font> </font></font> <font color="#FF0000"> الآن تعمل هذه القيمة كما يجب (لا شيء أفضل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وضع الوسم المناسب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المكان المناسب!) </font> <br /> </font></center> </td></tr></tbody></table><br /> وأترك لك المجال لكي تجرب القيمة <font face="Times New Roman"><font size="4">all</font></font> بنفسك <br /> <hr align="CENTER" size="4" width="80%"> <br /> من القواعد الإفتراضية للمتصفحات أن الأسطر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل فقرة تلتف وتنقسم بصورة تلقائية حسب إستبانة الشاشة وعرض نافذة المتصفح. (هذه نعرفها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الدرس الأول). لكن لنقل أننا نريد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أحد الأسطر أن لا ينقسم مهما كان مقدار الإستبانة وعرض النافذة. <br /> حسناً، كل ما علينا فعله هو وضع هذا السطر ضمن الوسوم<br /> <div align="center"><font face="Times New Roman"><font size="4"><NOBR> ... <‎/NOBR></font></font> </div> وهي إختصار لـِ <font face="Times New Roman"><font size="4">NO BReak</font></font> أي (لا إنقسام). أنقر هنا لتشاهد مثالاً على ذلك <br /> <hr align="CENTER" size="4" width="80%"> <br /> ها قد وصلنا إلى نهاية هذا الدرس والذي ناقشنا فيه وسوماً منوعة تتعلق <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مجملها بتنسيق الصفحات.<br /> <br /> <b><font size="5"><font color="Red">الخرائط الصورية<br /> صورة واحدة فقط ... وعدة وصلات تشعبية </font></font></b><br /> أهلاً وسهلاً بك إلى الدرس الثالث عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> مع بداية هذا الدرس تكون قد قطعت شوطاً طويلاً مع هذه اللغة، وأصبحت قادراً على إنشاء صفحات الويب بصورة فعالة. وسيخصص هذا الدرس لمناقشة واحداً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواضيع المتقدمة نوعاً ما والممتعة (برأيي المتواضع) <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> ألا وهو موضوع الخرائط الصورية. <br /> أنت تعرف بلا شك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال دراستك للوصلات التشعبية، أننا نستطيع إدراج أي صورة نريدها لتمثل وصلة تشعبية ما. لكن ما رأيك بصورة واحدة تحتوي على العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الوصلات التي تقوم بإيصالنا إلى مواقع مختلفة!!؟ هذا هو ببساطة مبدأ الخرائط الصورية. <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المحتمل أن تكون لا تعرفها وأن يكون هذا الموضوع جديداً عليك، لكن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المؤكد أنك استخدمتها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل. والحقيقة أن هذا الموقع يحتوي على خريطة صورية، <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%E5%E1" > فهل </a> تعرف أين هي؟ (ليست هذه فزورة رمضانية، وبالتالي لا تفرح كثيراً إذا عرفتها لأنك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النهاية لن تربح أي جائزة مني). <br /> حسناً هذه الخريطة هي بكل بساطة الصورة الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أعلى كل صفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صفحات هذا الموقع. <br /> <center> <a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/inbanner.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <br /> <br /> حاول النقر على هذه الصور وستلاحظ أنها لا تعمل، أي لا تقوم بنقلك إلى الصفحة المطلوبة لأنها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> حالتها هذه مجرد صور عادية ولم نقم حتى الآن بإضافة تلك الوسوم السحرية التي تحولها إلى خرائط صورية نابضة بالحياة .. والتشعب. <br /> إذن، إضافةً إلى الوسوم الجديدة الخاصة بالخرائط والتي سنتعرف <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال هذا الموضوع سوف نعود أيضاً للتعامل مع وسوم الصور (بما أننا نتحدث عن خرائط صورية) كذلك سنتعامل مع الوصلات التشعبية (كون الخرائط الصورية هي تطبيق آخر للوصلات).. وستحتاج أيضاً إلى القليل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الهندسة (نعم .. الهندسة. ذلك العلم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يجبرك المعلم فيه على <a href="http://www.hikm4.com/vb/tags.php?tag=%CD%E3%E1" > حمل </a> البيكار لترسم به دائرة.. فتكون النتيجة شكلاً عجائبياً قد يكون أي شيء .. إلا أن يكون دائرة). وأخيراً نحتاج إلى أحد <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> تحرير الصور مثل <font face="Times New Roman"><font size="4">Paint Shop Pro</font></font> لمساعدتنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> معرفة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> التفاصيل الخاصة بالصور. <br /> <b><font size="+1"> هل أنت مستعد؟ لننطلق إذن. </font></b> <br /> هذه هي خريطتنا أو بالأحرى ما سوف تصبح بعد قليل خريطتنا .. مجرد صورة عادية سنقوم بإدراجها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة. <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/flowers.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a></center> وهذه هي الشيفرة الخاصة بإدراجها <br /> <font face="Arial"><font size="2"> ‎‎<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"‎>‎ </font></font><br /> والآن سوف نضيف لهذه الشيفرة خاصية <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خصائص الوسم <font face="Times New Roman"><font size="4"><IMG></font></font> هي <font face="Times New Roman"><font size="4">‎USEMAP="#map_name"‎</font></font> والتي تخبر المتصفح أن يستخدم هذه الصورة كخريطة وذلك حسب التحديدات الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تعريف هذه الخريطة (وسنتحدث عن هذه التحديدات لاحقاً إن شاء الله). أما القيمة <font face="Times New Roman"><font size="4">map_name</font></font> فهي تمثل الاسم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريد أن نعيّنه للخريطة (أي اسم نريده). وكما ترى فإن هذا الاسم مسبوق بإشارة #. <br /> ما رأيك أن نسمي الخريطة باسم <font face="Times New Roman"><font size="4">ourmap</font></font>. عندها سوف تصبح الشيفرة كما يلي: <br /> <font face="Arial"><font size="2"> ‎‎<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0" USEMAP="#ourmap"‎>‎ </font></font><br /> وكانت هذه هي الخطوة الأولى <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تعريف الخريطة. والخطوة الثانية هي تحديد التفاصيل. <br /> <hr align="CENTER" size="4" width="40%"> <br /> لنقم بإخبار المتصفح أننا نريد خريطة تحمل الإسم <font face="Times New Roman"><font size="4">ourmap</font></font> <br /> <font face="Arial"><font size="2"> ‎<MAP NAME="ourmap">‎<br /> ...<br /> <‎/MAP> </font></font><br /> ولاحظ أننا لا نستخدم إشارة # مع التسمية هنا<br /> بعد ذلك نحتاج أن نحدد المناطق الساخنة للوصلات التشعبية، ولنفترض أننا نريدها بالشكل التالي:<br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/flowdots.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <br /> <br /> وهنا أريد أن أؤكد عليك وبصورة مشددة أن رسم هذه الأشكال الهندسية هو فقط بغرض توضيح مبدأ المناطق الساخنة لك، وتحديد شكل وموقع كل منطقة. ولا نحتاج لها أبداً عندما نريد إنشاء خريطة صورية كذلك فقد قمت باختيارها ورسمها بصورة عشوائية، بمعنى أنك تستطيع إختيار أي مناطق أخرى مغايرة كما تستطيع إختيار أي أشكال تريدها. وذلك بالطبع وفقاً لرغبتك كمصمم صفحات ويب. <br /> والسؤال الآن هو، كيف نحدد هذه المناطق باستخدام <font face="Times New Roman"><font size="4">HTML</font></font> وكيف يمكن للمتصفح أن يميزها دون غيرها؟ والجواب هو استخدام الوسم <font face="Times New Roman"><font size="4"><AREA></font></font> والذي يدرج ضمن الوسم السابق وبنفس عدد المناطق الساخنة التي نريدها. <br /> <font face="Arial"><font size="2"> ‎<MAP NAME="ourmap">‎</font></font><blockquote> <font face="Arial"><font size="2"> <AREA><br /> <AREA><br /> <AREA><br /> <AREA><br /> </font></font><br /> </blockquote><font face="Arial"><font size="2"><‎/MAP> </font></font><br /> ومع ذلك فهذا ليس كل شيء لأننا نحتاج أولاً لتحديد شكل كل منطقة ونستخدم لهذا الغرض الخاصية <font face="Times New Roman"><font size="4">SHAPE</font></font> ومن ثم نحتاج لتحديد موقع كل منطقة وهذا يتم بالخاصية <font face="Times New Roman"><font size="4">COORDS</font></font> وأخيراً بما أن كل منطقة تمثل وصلة تشعبية وتشير إلى عنوان موقع ما فمن البديهي أن نستخدم خاصية تحديد المواقع وهي <font face="Times New Roman"><font size="4">HREF</font></font> والتي مرت معنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السادس <br /> <font size="+1"><b>إلى التفاصيل...</b></font> <br /> تأخذ الخاصية <font face="Times New Roman"><font size="4">SH‎APE</font></font> ثلاثة قيم لتحديد شكل المنطقة الساخنة وهي:<br /> <div align="right"><font face="Times New Roman"><font size="4">RECT</font></font><br /> للأشكال المربعة والمستطيلة المنتظمة</div> <div align="right"><font face="Times New Roman"><font size="4">CIRCLE</font></font><br /> للدوائر <br /> <font face="Times New Roman"><font size="4">POLY</font></font><br /> للأشكال العشوائية والمضلعة </div> ولدينا دائرة ومستطيل وشكلين عشوائيين، إذن تصبح الشيفرة كما يلي (دون أهمية لترتيبها):<br /> <font face="Arial"><font size="2"> ‎<MAP NAME="ourmap">‎</font></font><blockquote> <font face="Arial"><font size="2"> ‎<AREA SHAPE="poly">‎<br /> ‎<AREA SHAPE="rect">‎<br /> ‎<AREA SHAPE="circle">‎<br /> ‎<AREA SHAPE="poly">‎<br /> </font></font><br /> </blockquote><font face="Arial"><font size="2"><‎/MAP> </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> نأتي الآن إلى تحديد موقع كل شكل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخريطة، والذي يتم باستخدام الخاصية <font face="Times New Roman"><font size="4">COORDS</font></font>. تأخذ هذه الخاصية قيماً رقمية تمثل إحداثيات الشكل الهندسي بالبيكسل على الخريطة (ألم أقل لك أنك ستحتاج إلى القليل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الهندسة) ومن البديهي أن تختلف دلالة كل قيمة بإختلاف الشكل المقصود. أنظر إلى الأشكال التوضيحية التالية: <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/rect.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <br /> في الشكل الرباعي المنتظم نحتاج لمعرفة إحداثيي الزاوية اليسرى العليا وإحداثيي الزاوية اليمنى السفلى. (أربعة أرقام) <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/circle.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <br /> أما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدائرة فكل ما نحتاجه هو إحداثيي نقطة المركز لهذه الدائرة بالإضافة إلى معرفة نصف قطرها. (ثلاثة أرقام فقط) <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/poly.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> <br /> وأخيراً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأشكال المضلعة العشوائية نحتاج لمعرفة إحداثيي كل نقطة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النقاط التي تمثل زوايا هذا الشكل مهما كان عددها. (عدد الأرقام غير محدد ويختلف بإختلاف الشكل المقصود) <br /> <hr align="CENTER" size="4" width="40%"> وقد تسأل الآن، كيف نستطيع إيجاد هذه الإحداثيات؟ ما <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مشكلة! هنا يأتي دور <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> الجرافيكس، فكل ما عليك هو <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%CD%E3%ED%E1" > تحميل </a> الصور <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%E4%C7%E3%CC" > البرنامج </a> ثم وضع المؤشر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المكان المطلوب وسوف تشاهد إحداثيات النقطة التي يقع <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> المؤشر على الشريط الموجود أسفل نافذة البرنامج. وبالإضافة لذلك تستطيع معرفة أبعاد الصورة ككل. وعلى أية حال كل ما عليك فعله هو تسجيل إحداثيات جميع النقاط المطلوبة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أجل استخدامها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تعريف الخريطة. <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/pspflow.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a></center> ولنعد الآن إلى خريطتنا:<br /> بالنسبة للشكل المستطيل كانت إحداثيات النقطة العليا هي:(28,255) وإحداثيات النقطة السفلى هي (310,300). <br /> أما الدائرة فكانت إحداثيات نقطة مركزها هي (140,160) ونصف قطرها 175 بيكسل. <br /> أما الشكل المضلع الأيمن (المثلث) فأن إحداثيات زواياه هي (150,10), (300,20), (315,230) وتذكر هنا أن لا أهمية للترتيب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ذكر هذه النقاط. المهم فقط أن تكون الإحداثيات دقيقة إلى حد ما. <br /> وأخيراً فإن إحداثيات النقاط <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الشكل المضلع الأيسر (الرباعي) هي: (10,10), (130,10), (110,65), (10,140) <br /> لنقم الآن بكتابة هذه البيانات ضمن الشيفرة السابقة والتي ستصبح كما يلي: <br /> <font face="Arial"><font size="2"> ‎<MAP NAME="ourmap">‎</font></font><blockquote> <font face="Arial"><font size="2"> ‎<AREA SHAPE="poly" COORDS="10,10,130,10,110,65, 10,140">‎<br /> ‎<AREA SHAPE="rect" COORDS="28,255,310,300">‎<br /> ‎<AREA SHAPE="circle" COORDS="140,160,175">‎<br /> ‎<AREA SHAPE="poly" COORDS="150,10,300,20,315,23 0">‎<br /> </font></font><br /> </blockquote><font face="Arial"><font size="2"><‎/MAP> </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> ماذا بقي الآن؟ بقي تعيين العناوين التي ستشير إليها الوصلات التشعبية والتي سنستخدم لها الخاصية <font face="Times New Roman"><font size="4">HREF.</font></font> إليك عناوين أربعة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواقع العربية الممتازة <br /> <font face="Arial"><font size="2"> ‎<MAP NAME="ourmap">‎</font></font><blockquote> <font face="Arial"><font size="2"> ‎<AREA SHAPE="poly" COORDS="10,10,130,10,110,65, 10,140"‎<br /> HREF="http://www.sakhr.com">‎<br /> ‎<AREA SHAPE="rect" COORDS="28,255,310,300"‎<br /> HREF="http://www.ayna.com">‎<br /> ‎<AREA SHAPE="circle" COORDS="140,160,175"‎<br /> HREF="http://www.pcmag-arabic.com">‎<br /> ‎<AREA SHAPE="poly" COORDS="150,10,300,20,315,23 0"‎<br /> HREF="http://www.asp.com.lb">‎<br /> </font></font><br /> </blockquote><font face="Arial"><font size="2"><‎/MAP> </font></font><br /> <hr align="CENTER" size="4" width="40%"> <br /> وأخيراً بعد تجميع الشيفرة الخاصة بإدراج الصورة مع هذه الشيفرة بالشكل التالي. (وبالمناسبة فقد قمت بالتجميع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أجل توضيح النتيجة النهائية لشيفرة الخريطة ككل. وفي الواقع أننا نستطيع وضع تعريف الخريطة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أي مكان نريده داخل الملف وليس شرطاً أن يكون قريباً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> شيفرة إدراج الصورة) <br /> <font face="Arial"><font size="2"> ‎‎<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0" USEMAP="#ourmap"‎>‎ </font></font><br /> <font face="Arial"><font size="2"> ‎<MAP NAME="ourmap">‎</font></font><blockquote> <font face="Arial"><font size="2"> ‎<AREA SHAPE="poly" COORDS="10,10,130,10,110,65, 10,140"‎<br /> HREF="http://www.sakhr.com">‎<br /> ‎<AREA SHAPE="rect" COORDS="28,255,310,300"‎<br /> HREF="http://www.ayna.com">‎<br /> ‎<AREA SHAPE="circle" COORDS="140,160,175"‎<br /> HREF="http://www.pcmag-arabic.com">‎<br /> ‎<AREA SHAPE="poly" COORDS="150,10,300,20,315,23 0"‎<br /> HREF="http://www.asp.com.lb">‎<br /> </font></font><br /> </blockquote><font face="Arial"><font size="2"><‎/MAP> </font></font><br /> سوف نحصل على النتيجة التالية وحاول أن تجربها: <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/flowers.jpg" border="0" alt="دروس لغة الهتمل HTML" /></a> </center> <map name="ourmap"> </map> <hr align="CENTER" size="4" width="80%"> <br /> والآن أريد أن أثير مسألتين مهمتين <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا السياق:<br /> الأولى: ماذا لو أردنا إدراج هذه الخريطة أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مرة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحة، <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%E5%E1" > فهل </a> نحتاج إلى تكرار كتابة الشيفرة <font face="Times New Roman"><font size="4"><MAP> ... <‎/MAP></font></font> مع كل مرة ندرج فيها الصورة؟ الجواب قطعاً لا.!!<br /> فطالما أننا نكتب الخاصية <font face="Times New Roman"><font size="4">USEMAP</font></font> فإن المتصفح يقوم بالبحث عن شيفرة الخريطة التي حددنا اسمها مع هذه الخاصية، ومن ثم يطبقها على الصورة المعطاة مهما كان عدد مرات إدراجها. <br /> الثانية: ماذا لو قررنا إلغاء هذه الصورة ووضع صورة أخرى مكانها. هل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مشكلة؟ أيضاً لا يوجد هنا أي مشكلة. لأن تعريف الخريطة بطبيعته غير مرتبط بصورة محددة بعينها. هو فقط يعرف مناطق محددة بالشكل والموقع. ولو دققت النظر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا التعريف فلن تجد ما يشير إلى أنها مرتبطة بصورة بعينها، أليس كذلك؟ بل إنك لو أدرجت صورة أكبر مما يجب أو حتى صورة أصغر مما يجب واستخدمت خاصية <font face="Times New Roman"><font size="4">USEMAP</font></font> معهما لتشير إلى الخريطة، فلن تواجه أي مشكلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ذلك. (وأعني هنا مشكلة للمتصفح) لكن بالطبع فالصورة الكبيرة ستحتوي على مناطق دون وصلات تشعبية، والصورة الصغيرة سوف لن تحتوي على <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الوصلات المعرفة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الخريطة <br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/1map4pic.gif" border="0" alt="دروس لغة الهتمل HTML" /></a> </center>والخلاصة أن تعريف الخريطة هو تعريف مشاع يوضع مرة واحدة فقط وفي أي مكان داخل الصفحة، وبشرط أن يكون ضمن <font face="Times New Roman"><font size="4"><BODY> ... <‎/BODY></font></font> وبالمقابل نستطيع إدراج عشرات الصور مهما كانت طبيعتها داخل الصفحة لتكون خرائط صورية تستخدم نفس تعريف هذه الخريطة طالما أننا وضعنا الخاصية <font face="Times New Roman"><font size="4">‎USEMAP="#map_name"‎</font></font> مع هذه الصور. <br /> ومسك الختام: تحفل الإنترنت بالكثير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> التي تقوم بتصميم الخرائط الصورية بسرعة وسهولة متناهيتين.. فقط تقوم بتحميل الصورة المطلوبة، ثم ترسم الأشكال التي تريدها <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> كما لو كنت تستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> الرسام، ومن ثم تكتب عناوين الوصلات التشعبية المطلوبة لكل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الأشكال. وهكذا ببساطة يقوم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%E4%C7%E3%CC" > البرنامج </a> بإيجاد الإحداثيات الخاصة بكل شكل وإنشاء شيفرة الخريطة المطلوبة!! أي أنك خلال دقائق معدودة تستطيع إنشاء أعقد الخرائط الصورية.. لكن بما أنك تهوى الصعب وتتحدى المستحيل فلا اعتقد أنك ستفضل هذا النوع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> البرامج. (بالمناسبة، لقد فضلت تأخير كتابة هذه الملاحظة حتى نهاية هذا الدرس، لأني لو وضعتها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> البداية لما أكملت هذا الدرس أصلاً ولهرعت للإنترنت للبحث عن مثل هذه البرامج) وعلى أية إليك هذا العنوان لبرنامج رائع يدعى <font face="Times New Roman"><font size="4">Live Image</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> شركة <font face="Times New Roman"><font size="4">Mediatec</font></font> <br /> أتمنى لك خرائطاً سعيدة دائماً..<br /> <b><font size="5"><font color="Red"><br /> النماذج (1)<br /> تودّ أن تستطلع آراء زوارك!؟ ... عليك بالنماذج </font></font></b><br /> أهلاً وسهلاً بك إلى الدرس الرابع عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> والذي سيكون الأول <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> درسين سنتحدث فيهما عن النماذج وكيفية تضمينها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الويب. <br /> مع أن النماذج تعتبر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواضيع المتقدمة (وغير السهلة) نوعاً ما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> إلا أن معظم مواقع الويب تكاد لا تخلو <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وجودها، وذلك لعدة أسباب لعل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أهمها إيجاد إمكانية للتفاعل بين الموقع وصاحبه <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> جهة والزوار <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> جهة أخرى...أحيانا قد تحتاج كمصمم لموقع ويب أن تعرف آراء زوار موقعك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مسائل معينة وقد تكتفي برسائل البريد الإلكتروني التي يرسلوها لك، لكن عندما تريد معرفة أشياء محددة بذاتها فإن النماذج هي الخيار الأفضل لك. بالإضافة إلى إمكانية تنظيم البيانات المدخلة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلالها وسهولة وسرعة استخدامها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل زوار الموقع. ومن أبرز الأمثلة على النماذج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مواقع الويب هي دفاتر الزوار وصفحات البحث عن الكلمات أو العبارات داخل المواقع. <br /> لا تكمن صعوبة التعامل مع النماذج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كونها معقدة بحد ذاتها، كلا ... فهي إحدى العناصر التي تدعمها <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> وهي مجرد وسوم عادية مثلها مثل الوسوم التي تعاملنا معها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> جميع الدروس السابقة. وبإمكانك إنشاء النماذج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> موقعك بنفس السهولة التي تدرج فيها جدولاً أو إطاراً (هذا بالطبع إذا كنت تعتقد أن الجداول والإطارات سهلة) لكن التداخل بينها (وأعني النماذج) وبين لغات البرمجة المتقدمة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الويب مثل <font face="Times New Roman"><font size="4">JavaScript, CGI</font></font> هي ما يجعلها تختلف عن سابقيها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم أو العناصر الأخرى. خاصة إذا احتجت إلى <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المقاطع البرمجية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه اللغات ضمن نماذجك. أما إذا اكتفيت بالإمكانات المتواضعة التي توفرها <font face="Times New Roman"><font size="4">HTML</font></font> بالنسبة للنماذج. فما <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مشكلة... لأنه سيكون بإمكانك التعامل معها بكل بساطة. وفي هذا الدرس لن نتطرق بالطبع إلى أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اللغات سوى <font face="Times New Roman"><font size="4">HTML.</font></font> <br /> قبل أن نبدأ، ما رأيك بزيارة صفحة (دفتر الزوار) <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الموقع للإطلاع على مثال للنماذج، (وربما تود أيضاً التوقيع فيه).<br /> كم شكلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أشكال إدخال البيانات يوجد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدفتر؟ الحقيقة أنه يوجد ستة أشكال هي كالتالي: <br /> <form> <table><tbody><tr><td><input value="Text" size="40" type="TEXT"></td></tr> <tr><td> <br /> </td></tr> <tr><td> <input type="RADIO"> 1 <input type="RADIO"> 2 <input type="RADIO"> 3 </td></tr> <tr><td><textarea name="COMMENTS" wrap="PHYSICAL" cols="80" rows="6"></textarea></td></tr> <tr><td><br /> </td></tr> <tr><td><br /> </td></tr> </tbody></table> </form> وهي الأشكال الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدفتر فقط. وأود أن ألفت نظرك إلى وجود أشكال أخرى سوف يتم التعامل معها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال هذا الدرس. <br /> <hr align="CENTER" size="4" width="60%"> <br /> <font size="+1"><b>والآن إلى العمل</b></font> <br /> مع أن الأشكال السابقة تختلف عن بعضها البعض <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث المبدأ والمظهر (وطريقة التعريف أيضاً) إلا أنها يجب أن تدرج جميعاً ضمن وسمين أساسيين للنماذج هما: <br /> <center> <font face="Times New Roman"><font size="4"><FORM> ... <‎/FORM></font></font> </center> وكما جرت العادة نحتاج لتحديد <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الخصائص التي تتعلق بطبيعة هذا النموذج. ولدينا هنا ثلاث خصائص: <br /> <dl><dt><font face="Times New Roman"><font size="4"><b>ACTION</b></font></font> </dt><dd>تحدد العنوان <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> سيتم إرسال بيانات النموذج إليه لتتم معالجتها بالصورة المطلوبة. وعادة يكون هذا عنواناً لبريد إلكتروني <font face="Times New Roman"><font size="4">Email</font></font> سوف يتم إرسال بيانات النموذج إليه. أو قد يكون عنواناً لبرنامج <font face="Times New Roman"><font size="4">CGI</font></font> موجود على <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%DF%E3%C8%ED%E6%CA%D1" > الكمبيوتر </a> الخادم <font face="Times New Roman"><font size="4">Server</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تتواجد عليه صفحة الويب، حيث يستقبل هذه البيانات ويعالجها حسب التعليمات الموجودة فيه كأن يضيفها مثلاً إلى إحدى الصفحات (كما يحدث عادة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> دفاتر الزوار) أو يتحقق <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صحة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الحقول المدخلة ومطابقتها لمعايير معينة، أو أن يقوم بالبحث عن كلمة أو عبارة ضمن صفحات الموقع كما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نماذج البحث الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مواقع الويب. <br /> <font face="ARIAL"><font size="2"> <FORM ACTION="mailto:someone@domai n.com"> ... <‎/FORM><br /> <FORM ACTION="name_and_address_of_ CGI_script"> ... <‎/FORM><br /> </font></font> <br /> <hr align="CENTER" size="2" width="30%"> <br /> </dd><dt><font face="Times New Roman"><font size="4"><b>METHOD</b></font></font> </dt><dd> تحدد الطريقة التي سيتم بها التعامل مع العنوان المحدد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الخاصية السابقة <font face="Times New Roman"><font size="4">ACTION.</font></font> وهناك قيمتين لهذه الخاصية هما: <font face="Times New Roman"><font size="4">GET</font></font> التي تستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> حالة كون عملية المعالجة داخلية أي تتم داخل الخادم <font face="Times New Roman"><font size="4">Server</font></font> نفسه. ففي مثالنا السابق عندما نستخدم نموذج البحث عن كلمة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الموقع، فإن عملية المعالجة (أي البحث) تجري مباشرة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الموقع. والقيمة الثانية هي <font face="Times New Roman"><font size="4">Post</font></font> وتستخدم عندما تكون عملية المعالجة خارجية كأن يتم إرسال البيانات إلى عنوان بريد إلكتروني. <br /> <font face="ARIAL"><font size="2"> <FORM ACTION="mailto:someone@domai n.com" METHOD="post"> ... <‎/FORM><br /> <FORM ACTION="name_and_address_of_ CGI_script" METHOD="get"> ... <‎/FORM><br /> </font></font> <br /> <hr align="CENTER" size="2" width="30%"> <br /> </dd><dt><font face="Times New Roman"><font size="4"><b>ENCTYPE</b></font></font> </dt><dd>هذه الخاصية تحدد طريقة الترميز التي سيتم إرسال البيانات وفقاً لها. وهي تأخذ القيمتين التاليتين: (يجب أن تكتب هذه القيم كما هي نصاً وحرفاً) <br /> <font face="Arial"><font size="2"> <ul><li>application/x-www-form-urlencoded</li> <li>text/plain</li> </ul> </font></font></dd></dl> وبدون الخوض <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأسباب التقنية التي أدت إلى إيجاد هذين النوعين <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> طرق الترميز أو <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أمور برمجية بعيدة عن موضوعنا، فإن الدافع لإستخدام أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> القيمتين هو طبيعة عملية المعالجة التي ستجرى على البيانات أو طبيعة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> البريد الإلكتروني <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> ستستقبل هذه البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلاله (إذا كان يدعم <font face="Times New Roman"><font size="4">MIME</font></font> أم لا، وهي إختصار للعبارة <font face="Times New Roman"><font size="4"><u>M</u>ulti-purpose <u>I</u>nternet <u>M</u>ail <u>E</u>xtentions</font></font> وهي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المعايير السائدة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت والتي تتعلق بنقل جميع أنواع البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صوت وصورة وليس فقط النصوص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال البريد الإلكتروني). وما يعنينا هنا هو الفرق بين الطريقتين <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث طريقة إرسال واستقبال البيانات. فعند استخدام <font face="Times New Roman"><font size="4">text/plain</font></font> ستصل البيانات بالشكل التالي:<br /> <br /> <font face="ARIAL"><font size="2"> NAME=Yahya Al-Sharif<br /> Address=Nablus , Palestine<br /> Email=yahya@palnet.c om </font></font><br /> <div align="right">(الكلمات <font face="Times New Roman"><font size="4">Name, Address, Email</font></font> هي أسماء الحقول <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج ونقوم نحن بتعريفها أثناء عملية <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%D5%E3%ED%E3" > تصميم </a> النموذج أما النصوص الظاهرة بعد إشارة المساواة فهي البيانات المدخلة، وسوف نتحدث عن تعريف أسماء الحقول بعد قليل) </div> أما عند استخدام <font face="Times New Roman"><font size="4">application/x-www-form-urlencoded</font></font> فستصل البيانات بالشكل: <br /> <font face="arial"><font size="2">NAME=Yahya+Al-Sharif&Address=Nablus+,+Pal estine&Email=yahya@palnet.c om </font></font> <br /> ولك أن تخيل مبلغ الصعوبة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تحليلها إذا احتوت على عشرات الحقول. لذلك تتوفر <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> خاصة تعرف بـِ <font face="Times New Roman"><font size="4">Formaters</font></font> تقوم بإعادة ترتيب البيانات المرسلة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال النماذج بشكل مفهوم بحيث تصبح كما لو كانت مرسلة بترميز <font face="Times New Roman"><font size="4">text/plain</font></font> وإليك أحدها وهو <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> مجاني يدعى <font face="Times New Roman"><font size="4">UrlCook.</font></font> لكن لا تعتقد أن الطريقة الأولى هي الأفضل دائماً فذلك يعتمد كما قلنا على طريقة المعالجة والنقل بالبريد. لذلك لا ضير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أن تجرب الطريقتين لتعرف أيهما أنسب لك. <br /> إذن خلاصة القول: قد تكون أفضل صيغة لتعريف النموذج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> حالة أردت استقبال البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> موقعك إلى عنوان بريدك الإلكتروني هي: <br /> <font face="ARIAL"><font size="2"> <nobr>‎<FORM ACTION="mailto:email@domain. com" METHOD="post" ENCTYPE="text/plain">‎</nobr> <br /> ... <br /> <‎/FORM> </font></font> <br /> وبهذا نكون قد إنتهينا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عملية تعريف النموذج وخصائصه، لكن انتظر فما زلنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بداية الطريق. <br /> <hr align="CENTER" size="4" width="60%"> <br /> نبدأ الآن <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عملية تعريف أشكال البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج. ونستخدم الوسم <font face="Times New Roman"><font size="4"><INPUT></font></font> لتعريفها والحقيقة أن هذه الأشكال هي مجرد خصائص أو بالأحرى قيم لخصائص تابعة لهذا الوسم. كيف؟ ... لنأخذ مثالاً على ذلك لأوضح لك هذا المفهوم <blockquote><blockquote><font size="-1">ملاحظة: إذا كنت تستخدم <font face="Times New Roman"><font size="3">Sindbad 3.x</font></font> فسيبدو الحقل والنص المجاور له بصورة معكوسة، وهي مشكلة ناتجة عن <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> <font face="Times New Roman"><font size="3">Netscape</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يعمل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلاله </font> <br /> </blockquote></blockquote><form> <font face="arial"><font size="2"> <br /> <center>Please enter your address:<input name="address" value="Nablus, Palestine" type="text"> </center> </font></font><input type="hidden" value="guest" name="securitytoken" /></form> حسناً، لقد استخدمت الوسم <font face="Times New Roman"><font size="4"><INPUT></font></font> لتعريف هذا الشكل (هذه إتفقنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> مسبقاً) ومن ثم قمت بإضافة الخاصية <font face="Times New Roman"><font size="4">TYPE</font></font> لهذا الوسم لتحديد نوع الشكل <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> أريده وأعطيتها القيمة <font face="Times New Roman"><font size="4">TEXT</font></font> أي <br /> <font face="ARIAL"><font size="2"> <FORM ...‎><br /> ‎<INPUT TYPE="text">‎<br /> <‎/‎FORM> </font></font><br /> لينتج لدينا هذا الشكل:<br /> <form> <input type="text"> </form> <center> <hr align="CENTER" size="2" width="60%"><br /> <form> <table bgcolor="#FFFFFF" border="5" width="70%"> <tbody><tr><td colspan="2"> <font size="+1"><b><u>فقرة معترضة</u></b>:<br /> إليك جميع الأشكال (القيم) المستخدمة مع الخاصية <font face="Times New Roman"><font size="4">TYPE</font></font> وسوف أتركها الآن بدون تعليق لحين مناقشها لاحقاً بشكل مفصل. مع ملاحظة أن هناك شكلين آخرين ندرجهما بالوسوم <br /> <font face="Times New Roman"><font size="4"><SELECT>, <TEXTAREA></font></font> <br /> </font> </td></tr> <tr> <td height="30">‎<INPUT TYPE="text">‎ </td> <td><input type="text"> </td> </tr> <tr> <td height="30">‎<INPUT TYPE="password">‎ </td> <td><input value="abcdefghigklmn" type="password"> </td> </tr> <tr> <td height="30">‎<INPUT TYPE="hidden">‎ </td> <td> <br /> </td> </tr> <tr> <td height="30">‎<INPUT TYPE="radio">‎ </td> <td><input checked="checked" type="radio"> </td> </tr> <tr> <td height="30">‎<INPUT TYPE="checkbox">‎ </td> <td><input checked="checked" type="checkbox"> </td> </tr> <tr> <td height="30">‎<INPUT TYPE="submit">‎ </td> <td> <br /> </td> </tr> <tr> <td height="30">‎<INPUT TYPE="reset">‎ </td> <td> <br /> </td> </tr> <tr> <td height="30">‎<INPUT TYPE="button">‎ </td> <td> <br /> </td> </tr> </tbody></table> </form> <hr align="CENTER" size="2" width="60%"><br /> </center> أرجو أن أكون قد وضحت لك الآن وظيفة الخاصية <font face="Times New Roman"><font size="4">TYPE</font></font> وجميع القيم المستخدمة معها<br /> ونعود الآن إلى مثالنا.. الخاصية الثانية المستخدمة مع <font face="Times New Roman"><font size="4"><INPUT></font></font> هي <font face="Times New Roman"><font size="4">NAME</font></font> وتستخدم لتسمية حقل البيانات حيث قمت بإعطاء الإسم <font face="Times New Roman"><font size="4">address</font></font> لهذا الحقل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المثال. (لك كل الحرية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> إعطاء الإسم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تريده للحقل). والحقيقة أن هذا الإسم يعرّف الحقل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> داخل النموذج نفسه، بحيث يمكن استخدامه فيما بعد للحاجات البرمجية وضرورات المعالجة إن وجدت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> التي قد تضيفها كمصمم للموقع. وحتى عندما تريد أن يُرسل النموذج إليك بالبريد فإن حقوله تعرّف بالاسم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> أدرجته لها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال هذه الخاصية. (لاحظ ما قلتُه سابقاً عن تعريف أسماء الحقول عندما تحدثنا عن الترميز والطرق التي تصل بها محتويات النموذج). وكما ترى لا يوجد (حتى الآن) ما يدل على أن هذا الحقل يختص بإدخال العنوان.<br /> <font face="arial"><font size="2"> <FORM ...‎><br /> ‎<INPUT TYPE="text" NAME="address">‎<br /> <‎/‎FORM> </font></font><br /> <form> <input name="address" type="text"> </form> أما العبارة <font face="Times New Roman"><font size="4">Please enter your address : </font></font> فهي مجرد عبارة توضيحية أضفتها ليعرف الزائر ما <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يجب عليه كتابته وتستطيع صياغة هذه العبارة كما تريد. ففي كل الأحوال ليس لها <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%C7%DE%C9" > علاقة </a> بجوهر النموذج نفسه بعكس الخاصية <font face="Times New Roman"><font size="4">NAME.</font></font> <br /> <font face="arial"><font size="2"> ‎<FORM ...>‎<br /> Please enter your address : ‎<INPUT TYPE="text" NAME="address">‎<br /> <‎/‎FORM> </font></font> <br /> <form> <font face="arial"><font size="2">Please enter your address : <input name="address" type="text"></font></font> </form> أما بالنسبة للعبارة الظاهرة داخل الحقل <font face="Times New Roman"><font size="4">Nablus, Palestine</font></font> (أو أي عبارة أخرى تريدها) وهي بمثابة القيمة الإفتراضية التي تريدها للحقل، فبالإمكان إظهارها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال الخاصية <font face="Times New Roman"><font size="4">VALUE.</font></font> وهذه الخاصية تستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحالات التي نتوقع فيها كتابة قيمة دارجة أو متكررة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل معظم الزوار وللتسهيل عليهم يتم تعيينها كقيمة إفتراضية وبالطبع مع توفر إمكانية حذفها وكتابة ما يريدنه بدلاً منها. <br /> <font face="arial"><font size="2"> ‎<FORM ...>‎<br /> Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine">‎<br /> <‎/‎FORM> </font></font> <br /> <form> <font face="arial"><font size="2">Please enter your address : <input name="address" value="Nablus, Palestine" type="text"> </font></font> </form> قد نحتاج أحياناً إلى تحديد حجم الحقل ولذلك نستخدم الخاصية <font face="Times New Roman"><font size="4">SIZE</font></font> مع الرقم <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> نريده كحجم للحقل، لنجرب الرقم 40 <br /> <font face="arial"><font size="2"> ‎<FORM ...>‎<br /> Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine" SIZE="40">‎<br /> <‎/‎FORM> </font></font> <br /> <form> <font face="ARIAL"><font size="2"> Please enter your address : <input name="address" value="Nablus, Palestine" size="40" type="text"> </font></font> </form> أو لنجرب الرقم 10 أيضاً<br /> <form> <font face="ARIAL"><font size="2"> Please enter your address : <input name="address" value="Nablus, Palestine" size="10" type="text"></font></font> </form> لا يوجد للخاصية <font face="Times New Roman"><font size="4">SIZE</font></font> أي صفة تحكمية بالنسبة لحجم المدخلات التي يمكن للزائر أن يكتبها داخل الحقل. وبعبارة أخرى: صحيح أننا حددنا حجم الحقل لكن ذلك يسري فقط على مظهره على الشاشة. ولا يوجد ما يمنع الزائر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الكتابة بحيث يتجاوز النص حجم الحقل المحدد. وهنا يأتي دور الخاصية <font face="Times New Roman"><font size="4">MAXLENGTH</font></font> لتتحكم بالحد الأقصى للنص المدخل. <br /> <font face="arial"><font size="2"> ‎<FORM ...>‎<br /> Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine"‎ <br /> SIZE="40" MAXLENGTH="30">‎<br /> <‎/‎FORM> </font></font> <br /> <form> <font face="ARIAL"><font size="2">Please enter your address : <input name="address" value="Nablus, Palestine" size="40" maxlength="30" type="text"> </font></font></form> حاول الكتابة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الحقل لأكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> 30 حرفاً وأنظر ماذا سيحدث? <br /> إنتهينا الآن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خصائص الوسم <font face="Times New Roman"><font size="4">INPUT</font></font> فما رأيك بإجمالها مرة أخرى؟ حسناً، هذه هي: <br /> <br /> <ul><li><div align="right"><font face="Times New Roman"><font size="4">TYPE: </font></font>لتحديد نوع (شكل) حقل البيانات. </div></li> <li><div align="right"><font face="Times New Roman"><font size="4">NAME: </font></font>لتعيين اسم لحقل البيانات. </div></li> <li><div align="right"><font face="Times New Roman"><font size="4">VALUE: </font></font>لتعيين قيمة إفتراضية (مبدئية) لحقل البيانات. </div></li> <li><div align="right"><font face="Times New Roman"><font size="4">SIZE: </font></font>لتحديد حجم حقل البيانات. </div></li> <li><div align="right"><font face="Times New Roman"><font size="4">MAXLENGTH: </font></font>لتعيين الحد الأقصى لعدد الحروف المدخلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحقل. </div></li> </ul> <hr align="CENTER" size="4" width="60%"> <br /> النوع الثاني <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحقول المستخدمة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النماذج هو حقل <font face="Times New Roman"><font size="4">password</font></font> وهو يشبه الحقل <font face="Times New Roman"><font size="4">text</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث الخصائص تماماً غير أن مدخلاته تظهر على شكل <font face="Times New Roman"><font size="4">******</font></font> مهما كانت، وهو الفرق الوحيد بينهما. وربما تكون قد استنتجت الآن أن هذا النوع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحقول يستخدم عندما يوجد حاجة لإدخال كلمة سر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل الزائر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج <br /> <font face="arial"><font size="2"> ‎<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> </font></font> <br /> <form> <font face="ARIAL"><font size="2">Please enter your name : <input name="the name" value="" size="40" maxlength="30" type="text"><br /> Please enter your password : <input name="the password" value="" size="40" maxlength="30" type="password"> </font></font></form> لاحظ أنني لم أرغب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كتابة قيم إفتراضية <font face="Times New Roman"><font size="4">VALUES</font></font> للحقول، ولذلك تركتها فارغة وأستطيع أيضاً أن ألغيها نهائياً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الشيفرة. وأنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا المثال أردت أن أوضح لك عدم أهمية كتابة قيمة إفتراضية للحقول <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الحالات. <br /> <hr align="CENTER" size="4" width="60%"> <br /> نأتي الآن إلى النوع الثالث <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أنواع الحقول وهو <font face="Times New Roman"><font size="4">hidden</font></font> أي الحقل المخفي. وكما نستنتج <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اسمه فهو لن يظهر ضمن النموذج. وهذا مثال: <br /> <font face="arial"><font size="2"> ‎<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> </font></font> <br /> <form> <font face="ARIAL"><font size="2"> Please enter your name : <input name="the name" value="" size="40" maxlength="30" type="text"><br /> Please enter your passwod : <input name="the password" value="" size="40" maxlength="30" type="password"> </font></font></form> لاحظ هنا أن وجود هذا الحقل مثل عدمه بالنسبة لمظهر النموذج، وأن الزائر لن يتعامل معه بل وربما لن يعرف أن هناك حقلاً مخفياً. والسؤال هنا: ما الفائدة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وجود شيء مخفى لا إمكانية لاستخدامه؟ ولكي أجيب على هذا السؤال دعني أطرح لك مثالاً أو حالة قد تواجهك كمصمم صفحات ويب...<br /> لنفرض أن لديك ثلاث صفحات تتضمن كل منها نموذجاً ما وأن هذه النماذج متشابهة. وتحتوي على نفس الحقول. وعندما تصلك البيانات كيف ستستطيع تمييز أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه النماذج استخدم لإرسال البيانات؟ بإمكانك إضافة هذا الحقل (الوهمي) وإسناد أي اسم وأي قيمة له <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل نموذج. <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج الأول ...<br /> <font face="ARIAL"><font size="2"> ‎<INPUT TYPE="hidden" NAME="my forms" VALUE="<font color="#FF0000">form1</font>">‎<br /> <br /> </font></font> <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج الثاني ...<br /> <font face="ARIAL"><font size="2"> ‎<INPUT TYPE="hidden" NAME="my forms" VALUE=" <font color="#FF0000">form2</font>">‎<br /> <br /> </font></font> <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج الثالث ...<br /> <font face="ARIAL"><font size="2"> ‎<INPUT TYPE="hidden" NAME="my forms" VALUE=" <font color="#FF0000">form3</font>">‎<br /> <br /> </font></font> <br /> وبذلك عندما تصلك البيانات المرسلة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل أي زائر استخدم أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النماذج الثلاثة سيصلك أيضا حقل إضافي قمت أنت نفسك بتعبئته سلفاً عندما صممت النموذج وذلك بأحد الأشكال التالية: <br /> <div align="right"><font face="ARIAL"><font size="2">my forms=form1 </font></font> أو <br /> <font face="ARIAL"><font size="2">my forms=form2</font></font> أو<br /> <font face="ARIAL"><font size="2">my forms=form3</font></font> </div> إذن نستطيع القول أن الحقل المخفي هو لاستخدام المصمم وليس الزائر، وأن قيمته تدخل مباشرة عند التصميم. ويستخدم بهدف تعريف قيم ما سيتم إرسالها جنباً إلى جنب ضمن بيانات النموذج التي قام الزائر بتعبئتها <br /> <hr align="CENTER" size="4" width="60%"> <br /> <b><i>ملاحظة مهمة</i></b> بالنسبة للنماذج بشكل عام. <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أجل إظهار النموذج بصورة مرتبة ومنسقة والتحكم بموقع الحقول فيه فمن الأفضل دائماً وضعه داخل جدول مع جعل الجدول بلا حدود. <br /> <font face="arial"><font size="2"> ‎<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> </font></font> <br /> وكما ترى تحتاج إلى القليل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> العمل الإضافي لكنك بالمقابل ستحصل على النتيجة التالية <br /> <form> <table border="0"> <tbody><tr> <td>Please enter your name : </td> <td> <input name="the name" value="" size="40" maxlength="30" type="text"> </td> </tr> <tr> <td>Please enter your password :</td> <td> <input name="the password" value="" size="40" maxlength="30" type="password"> </td> </tr> </tbody></table> </form> هكذا أفضل... أليس كذلك؟<br /> <hr align="CENTER" size="4" width="60%"> <br /> نكون الآن قد وصلنا إلى نهاية هذا الدرس. وأتمنى أن أكون قد نجحت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تيسير عملية فهمها والتعامل معها بالنسبة لك. ومع ذلك فنحن لم ننته بعد... فسوف نناقش ما تبقى <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس القادم <br /> <b><font size="5"><font color="Red"><br /> النماذج (2)<br /> تعدّدت الأشكال ... والنموذج واحدُ</font></font></b><blockquote> أهلاً وسهلاً بك إلى الدرس الخامس عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> وهو الثاني <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> درسين حول النماذج. لقد قمنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق بمناقشة الوسوم الأساسية للنماذج وتعلمنا كيفية إدراج النماذج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات الويب. كما قمنا بمناقشة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> أشكال إدخال البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج وهي <font face="Times New Roman"><font size="4">Text, Password, Hidden</font></font> هل تذكر كيف نقوم بتعريفها؟ راجع الدرس السابق إن أردت المزيد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> التوضيح، وإلا هيا بنا نكمل ولندخل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الموضوع مباشرة. <br /> سوف نتابع الآن مع مجموعة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأشكال الخاصة بالاختيار <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> متعدد وهي بالمناسبة ثلاثة أنواع: <font face="Times New Roman"><font size="4">Radio, Checkbox</font></font> وقائمة الإختيار<br /> نبدأ مع الشكل المسمى <font face="Times New Roman"><font size="4">RADIO.</font></font> ومن مسوغات استخدام هذا الشكل أن السؤال المطروح ينبغى أن يكون له <u>إجابة واحدة </u> فقط، أو بعبارة أخرى على الزائر أن يختار إجابة واحدة فقط. <br /> وكمثال، لنفرض أنني أريد أن أسأل الزائر عن المتصفح <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يستخدمه (كما هو موجود <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> دفتر الزوار على شكل قائمة إختيار) لكن بدلا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أن يكون على شكل قائمة إختيار أريده أن يكون على شكل <font face="Times New Roman"><font size="4">RADIO</font></font> وذلك بالشكل التالي:(أود أن أذكرك أن عناصر النموذج تظهر بشكل معكوس إذا كنت تستخدم <font face="Times New Roman"><font size="4">Sindbad 3.0)</font></font> <br /> <form><font face="ARIAL"><font size="2"> <input name="BROWSER" value="Sindbad 3.0" type="RADIO"> Sindbad 3.0<br /> <input name="BROWSER" value="Sindbad 4.0" type="RADIO"> Sindbad 4.0<br /> <input name="BROWSER" value="MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0" type="RADIO"> Ms <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0<br /> <input name="BROWSER" value="MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0" type="RADIO"> Ms <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0<br /> </font></font></form> فكيف ننشيء مثل هذه القائمة؟ ... حسناً، لنبدأ <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصفر ونعرّف نموذجاً <br /> <font face="ARIAL"><font size="2"> <FORM><br /> <br /> <‎/FORM><br /> </font></font><br /> ثم لنقم بتعريف هذا الشكل، هل تذكر الوسم الخاص بذلك؟ إنه <font face="Times New Roman"><font size="4"><INPUT></font></font> <br /> <font face="ARIAL"><font size="2"> <FORM><br /> ‎<INPUT TYPE="radio">‎<br /> <‎/FORM><br /> </font></font><br /> <br /> <form><input type="radio"></form> لكن بما أن هناك أربعة مدخلات، إذن نحتاج إلى أربعة وسوم <br /> <font face="ARIAL"><font size="2"> <FORM><br /> <INPUT TYPE="radio"> <BR><br /> <INPUT TYPE="radio"> <BR><br /> <INPUT TYPE="radio"> <BR><br /> <INPUT TYPE="radio"> <BR><br /> <‎/FORM><br /> </font></font><br /> <br /> <form> <input type="radio"> <br /> <input type="radio"> <br /> <input type="radio"> <br /> <input type="radio"> <br /> </form> نحتاج الآن إلى تسمية هذه المدخلات، أي أننا سنستخدم الخاصية <font face="Times New Roman"><font size="4">NAME</font></font> معها. أما الاسم المعطى بحد ذاته فمن الأفضل أن يكون مرتبطاً نوعاً ما بموضوع السؤال، ليس لأن هذا ضروري للنموذج بل هو ضروري لك كشخص سيقوم باستقبال البيانات المرسلة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال النموذج، وبالتالي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأفضل أن يوجد عنوان معبّر للبيانات بغرض التمييز. وبما أننا هنا نتحدث عن المتصفحات فليكن هذا الاسم هو <font face="Times New Roman"><font size="4">browser</font></font> <br /> <font face="ARIAL"><font size="2"> <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 /> </font></font><br /> <br /> <form> <input name="browser" type="radio"> <br /> <input name="browser" type="radio"> <br /> <input name="browser" type="radio"> <br /> <input name="browser" type="radio"> <br /> </form> وكما تلاحظ <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النتيجة أن هذه التسمية هي ضمنية فقط ولا تؤثر على شكل النموذج (راجع الدرس السابق) لكن أي إختيار سيقوم به الزائر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الأربعة خيارات سوف يصلك تحت الاسم <font face="Times New Roman"><font size="4">browser.</font></font> <br /> الخطوة التالية هي إعطاء قيمة لكل مدخلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه القائمة وذلك حسب ما نراه مناسباً، إذن حان الوقت لاستخدام الخاصية <font face="Times New Roman"><font size="4">VALUE</font></font>: <br /> <font face="ARIAL"><font size="2"> <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 /> </font></font><br /> <br /> <form> <input name="browser" value="Sind3" type="radio"> <br /> <input name="browser" value="Sind4" type="radio"> <br /> <input name="browser" value="Msie3" type="radio"> <br /> <input name="browser" value="Msie4" type="radio"> <br /> </form> وهنا أيضا نلاحظ أن لا تغيّر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> شكل النموذج ظاهرياً مع إضافة هذه الخاصية. لكن مع ذلك فقد قمنا حتى الآن بتسمية الحقول وإعطاء كل حقل قيمة محددة. وفعلياً لقد إنتهينا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذا النموذج. لكن بالطبع نحن لا نتوقع أن يكون الزائر عالماً بالغيب لكي يخمن أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الحقول تختص بكل قيمة. لذلك بقى علينا تعريف كل حقل باسم صريح يوضح محتواه. <br /> <font face="ARIAL"><font size="2"> <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 <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0</font><BR><br /> <INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <font color="#FF0000">MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0</font><BR><br /> <‎/FORM><br /> </font></font><br /> <br /> <br /> <form><font face="ARIAL"><font size="2"> <input name="browser" value="Sind3" type="radio"> Sindbad 3.0 <br /> <input name="browser" value="Sind4" type="radio"> Sindbad 4.0<br /> <input name="browser" value="Msie3" type="radio"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0<br /> <input name="browser" value="Msie4" type="radio"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0<br /> </font></font></form> وهناك خاصية تتعلق بهذا النوع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحقول، وهي أنك إذا أردت أن يظهر أحدها وقد تم اختياره بشكل تلقائي فعليك بإضافة الخاصية <font face="Times New Roman"><font size="4">CHECKED</font></font> إليه، مع ترك كل الحرية للزائر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> اختيار ما يريده فيما بعد. <br /> <font face="ARIAL"><font size="2"> <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 <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0</font><BR><br /> <INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <font color="#FF0000">MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0</font><BR><br /> <‎/FORM><br /> </font></font><br /> <br /> <font face="ARIAL"><font size="2"><form> <input name="browser" value="Sind3" type="radio"> Sindbad 3.0 <br /> <input name="browser" value="Sind4" checked="checked" type="radio"> Sindbad 4.0<br /> <input name="browser" value="Msie3" type="radio"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0<br /> <input name="browser" value="Msie4" type="radio"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0<br /> </form></font></font> وأخيراً... أود أن أوضح لك الصورة التي يصلك بها النموذج عند اختيار أحد حقوله (ولنفترض أنه الخيار الثالث). وهي بالشكل التالي: <br /> <div align="center"><font face="ARIAL"><font size="4">browser=Msie3</font></font></div> <hr align="CENTER" size="4" width="60%"> <br /> نأتي الآن إلى الشكل الثاني <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أشكال الإختيار <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> متعدد والذي يدعى <font face="Times New Roman"><font size="4">CHECKBOX.</font></font> ظاهرياً لا يختلف هذا الشكل عن الشكل <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> سبقه، لكن عملياً هناك اختلافات جذرية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث المفهوم والتعريف. وأنا أفضّل أن نبقى على استخدامنا للمثال السابق حتى يسهل علينا تمييز الفروق. <br /> <form><font face="ARIAL"><font size="2"> <input name="Sindbad3" value="yes" type="CHECKBOX">Sindbad 3.0<br /> <input name="Sindbad4" value="yes" type="CHECKBOX">Sindbad 4.0<br /> <input name="Msie3" value="yes" type="CHECKBOX">MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0<br /> <input name="Msie4" value="yes" type="CHECKBOX">MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0 <br /> </font></font></form> قبل أن نستمر قم بالنقر على أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حقل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> القائمة السابقة وأنظر ماذا سيحدث؟ إن باستطاعتك اختيار أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حقل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الوقت! وهذا هو الفرق الأول بين <font face="Times New Roman"><font size="4">CHECKBOX</font></font> و <font face="Times New Roman"><font size="4">RADIO</font></font> ففي <font face="Times New Roman"><font size="4">RADIO</font></font> يمكن اختيار حقل واحد فقط ليس أكثر. <br /> لنقم الآن بتعريف هذه الحقول، وتسميتها بشكل مباشر ومن ثم سنعلّق عليها: <br /> <font face="ARIAL"><font size="2"> <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 <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0 <BR><br /> <INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0 <BR><br /> <‎/FORM><br /> </font></font><br /> <br /> ماذا تلاحظ؟ أولاً لقد أسندنا القيمة <font face="Times New Roman"><font size="4">checkbox</font></font> للخاصية <font face="Times New Roman"><font size="4">TYPE.</font></font> ثم أعطينا لكل حقل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> القائمة إسماً مميزاً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الخاصية <font face="Times New Roman"><font size="4">NAME</font></font> يختلف عن باقي الحقول. أما الخاصية <font face="Times New Roman"><font size="4">VALUE</font></font> فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النهاية بكتابة الأسماء التعريفية لكل حقل. <br /> <center><table align="CENTER" bgcolor="#FFFFFF" border="5" cellpadding="5" width="70%"> <tbody><tr><td> <font size="+1"> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">RADIO</font></font> نستطيع اختيار حقل واحد فقط أما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">CHECKBOX</font></font> فنختار أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حقل، لذلك يستخدم عادة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحالات التي يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال. <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">RADIO</font></font> تكون أسماء الحقول موحدة والقيم مختلفة، أما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">CHECKBOX</font></font> فتكون الأسماء مختلفة والقيم موحدة <br /> </font> </td></tr> </tbody></table> </center> كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك النتيجة بالشكل التالي: <br /> <div align="center"><font face="ARIAL"><font size="4"> Sind4=Yes<br /> Msie4=Yes </font></font></div> كما نستطيع أيضاً تعليم <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الحقول بصورة تلقائية كما فعلنا مع <font face="Times New Roman"><font size="4">RADIO</font></font> باستخدام نفس الخاصية <font face="Times New Roman"><font size="4">CHECKED</font></font> <br /> <font face="ARIAL"><font size="2"> <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 <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0 ‎<BR>‎<br /> <INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0 <BR><br /> <‎/FORM><br /> </font></font><br /> <br /> <form><font face="ARIAL"><font size="2"> <input name="Sind3" value="Yes" checked="checked" type="checkbox"> Sindbad 3.0 <br /> <input name="Sind4" value="Yes" type="checkbox"> Sindbad 4.0 <br /> <input name="Msie3" value="Yes" checked="checked" type="checkbox"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0 <br /> <input name="Msie4" value="Yes" type="checkbox"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0 <br /> </font></font></form> <hr align="CENTER" size="4" width="60%"> <br /> النوع الثالث <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أشكال الإختيار <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> متعدد هو قوائم الاختيار، وهذا النوع سوف يقودنا إلى وسوم <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وسوم التعريف والتي ستستخدم بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <font face="Times New Roman"><font size="4"><INPUT></font></font> وهي <br /> <font face="ARIAL"><font size="2"> <SELECT><br /> <OPTION><br /> <OPTION><br /> <OPTION><br /> .....<br /> .....<br /> <‎/SELECT></font></font> <br /> بحيث أن <font face="Times New Roman"><font size="4"><SELECT> ... </‎SELECT></font></font> تحددان بداية ونهاية القائمة، والوسم <font face="Times New Roman"><font size="4"><OPTION></font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يوضع دائما بينهما يستخدم لتحديد كل عنصر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عناصر القائمة. لنعد إلى مثالنا السابق لنرى كيف يمكن وضع الخيارات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> قائمة <br /> <font face="ARIAL"><font size="2"> <FORM><br /> <SELECT><br /> ‎<OPTION> Sindbad 3.0‎<br /> ‎<OPTION> Sindbad 4.0‎<br /> ‎<OPTION> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0‎<br /> ‎<OPTION> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0‎<br /> <‎/SELECT><br /> <‎/FORM><br /> </font></font> <br /> وبذلك تكون النتيجة هي: <br /> <form> </form> وكالمعتاد لا يخلو الأمر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وجود خصائص تحدد طريقة عمل هذه الوسوم. وهناك خصائص مشتركة عرفناها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأشكال السابقة سيتم استخدامها هنا أيضاً كما يوجد خصائص <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> تتعلق فقط بهذا الشكل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حقول البيانات. فبالنسبة لـِ <font face="Times New Roman"><font size="4"><SELECT></font></font> يوجد الخاصية <font face="Times New Roman"><font size="4">NAME</font></font> وهي كما تعلم تحدد اسم القائمة. كما توجد الخاصية <font face="Times New Roman"><font size="4">SIZE</font></font> التي تحدد حجم (أو بالأحرى) ارتفاع القائمة، وبالتالي عدد البيانات الظاهرة فيها. وهي تأخذ أي قيمة عددية صحيحة. <br /> <font face="ARIAL"><font size="2"> <FORM><br /> ‎<SELECT NAME="browser" SIZE="2">‎<br /> ‎<OPTION> Sindbad 3.0‎<br /> ‎<OPTION> Sindbad 4.0‎<br /> ‎<OPTION> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0‎<br /> ‎<OPTION> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0‎<br /> <‎/SELECT><br /> <‎/FORM><br /> </font></font> <br /> <form> </form> وطالما بالإمكان عرض القائمة بأي ارتفاع نريد، وقد يصل إلى حد عرض جميع بيانات القائمة معاً، فإن هناك إمكانية أيضاً لجعل اختيار البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه القائمة متعدداً وليس فقط قيمة واحدة، كيف؟؟ بإضافة الخاصية <font face="Times New Roman"><font size="4">MULTIPLE.</font></font> لنقم الآن بعرض جميع القيم (لدينا أربعة قيم، إذن القيمة المكتوبة مع <font face="Times New Roman"><font size="4">SIZE</font></font> يجب أن تكون 4)، ومن ثم لنتح المجال أمام الزائر لاختيار أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قيمة واحدة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> القائمة. <br /> <font face="ARIAL"><font size="2"> <FORM><br /> <SELECT NAME="browser" SIZE="4" MULTIPLE><br /> ‎<OPTION> Sindbad 3.0‎<br /> ‎<OPTION> Sindbad 4.0‎<br /> ‎<OPTION> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0‎<br /> ‎<OPTION> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0‎<br /> <‎/SELECT><br /> <‎/FORM><br /> </font></font> <br /> <form> </form> لاحظ أنه لأداء عدة اختيارات يجب أن تقوم بالضغط على المفتاح <font face="Times New Roman"><font size="4">ctrl</font></font> بصورة متواصلة أثناء عملية الإختيار. <br /> <br /> أما الخصائص المستخدمة مع الوسم <font face="Times New Roman"><font size="4"><OPTION></font></font> فهي <font face="Times New Roman"><font size="4">VALUE</font></font> والتي استخدمناها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل وسنستخدمها الآن لإعطاء قيمة لكل حقل بيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> القائمة. وكذلك الخاصية <font face="Times New Roman"><font size="4">SELECTED</font></font> والتي نكتبها مع أي <font face="Times New Roman"><font size="4"><OPTION></font></font> نريد أن يظهر وقد تم اختياره بصورة تلقائية. <br /> <font face="ARIAL"><font size="2"> <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 <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0‎<br /> ‎<OPTION VALUE="MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0"> MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 4.0‎<br /> <‎/SELECT><br /> <‎/FORM><br /> </font></font> <br /> <form> </form> <hr align="CENTER" size="4" width="60%"> <br /> الشكل التالي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أشكال حقول البيانات يدعى <font face="Times New Roman"><font size="4">TEXTAREA</font></font> <br /> <center> <form><textarea></textarea></form> </center> وهو المستخدم عادة لكتابة التعليقات الحرة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج ويتم إدراجه بكتابة الوسوم <br /> <font face="Times New Roman"><font size="4"> <TEXTAREA> ... <‎/TEXTAREA> </font></font><br /> هل تستطيع تخمين الخصائص المستخدمة معه؟ بالطبع لا بد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> وجود الخاصية <font face="Times New Roman"><font size="4">NAME</font></font> لإعطاءه اسم التعريف. لكن لا وجود للخاصية <font face="Times New Roman"><font size="4">VALUE</font></font> ، وبالمقابل فإن أي نص يكتب بين الوسمين سيتم عرضه داخل الحقل بصورة تلقائية <br /> <font face="ARIAL"><font size="2"> ‎<TEXTAREA NAME="comments">‎<br /> ‎Hello, please write your comments here :-)‎<br /> <‎/TEXTAREA> </font></font><br /> <form> <textarea name="comments">Hello, please write your comments here :-) </textarea> </form> كما توجد خصائص لتحديد مساحة هذا الحقل عرضاً وارتفاعاً، وهي <font face="Times New Roman"><font size="4">COLS</font></font> التي تحدد العرض و <font face="Times New Roman"><font size="4">ROWS</font></font> التي تحدد الإرتفاع <br /> <font face="ARIAL"><font size="2"> ‎<TEXTAREA NAME="comments" COLS="30" ROWS="6">‎<br /> <‎/TEXTAREA> </font></font><br /> <form> <textarea name="comments" cols="30" rows="6"></textarea> </form> أما الخاصية الأخيرة هنا فهي <font face="Times New Roman"><font size="4">WRAP</font></font> التي تحدد طريقة إلتفاف النص المكتوب داخل الحقل (لا تعمل هذه الخاصية مع <font face="Times New Roman"><font size="4">MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.0)</font></font> وهناك ثلاثة قيم تأخذها وهي على النحو التالي: <br /> <font face="Times New Roman"><font size="4">virtual</font></font> : التي تعني أن النص سيلتف على عدة أسطر عند كتابته <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%E1%DF%E4%E5" > ولكنه </a> سيصلك عند إرساله على شكل سطر واحد متتابع (حاول الكتابة داخل الحقول وأنظر كيفية تأثير هذه الخاصية على كل منها) <br /> <font face="ARIAL"><font size="2"> ‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="virtual">‎<br /> <‎/TEXTAREA> </font></font><br /> <form> <textarea name="comments" cols="30" rows="6" wrap="virtual"></textarea> </form> <font face="Times New Roman"><font size="4">physical</font></font> : تعني أن النص سيلتف على عدة أسطر وسيصلك أيضاً على هذا النحو عند إرساله <br /> <font face="ARIAL"><font size="2"> ‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="physical">‎<br /> <‎/TEXTAREA> </font></font><br /> <form> <textarea name="comments" cols="30" rows="6" wrap="physical"></textarea> </form> <font face="Times New Roman"><font size="4">off</font></font> : تعني أن النص لن يلتف بصورة تلقائية على عدة أسطر لكنه على أية حال سيصلك بنفس الشكل <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تم إدخاله به <br /> <font face="ARIAL"><font size="2"> ‎<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="off">‎<br /> <‎/TEXTAREA> </font></font><br /> <form> <textarea name="comments" cols="30" rows="6" wrap="off"></textarea> </form> <hr align="CENTER" size="4" width="60%"> <br /> حسناً، بافتراض أننا إنتهينا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> كتابة الشيفرة الخاصة بالنموذج وننتظر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أي زائر للموقع أن يملأه، والسؤال هو كيف يمكن له أن يرسله فعلياً؟ نعود الآن إلى الوسم <font face="Times New Roman"><font size="4"><INPUT></font></font> وهذه المرة مع النوع <font face="Times New Roman"><font size="4">submit</font></font> والتي ستقوم تلقائياً بإنشاء زر سيقوم عند النقر عليه بإرسال البيانات التي تم ملؤها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج. <br /> <font face="ARIAL"><font size="2"> ‎<INPUT TYPE="submit">‎ </font></font><br /> <form> </form> لاحظ أن <font face="Times New Roman"><font size="4">Submit</font></font> أو ( <font face="Times New Roman"><font size="4">Submit Query</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">Netscape)</font></font> ظاهرة على الزر وهي العبارة الإفتراضية، فإذا أردت تغييرها فعليك باستخدام الخاصية <font face="Times New Roman"><font size="4">VALUE</font></font> لهذا الغرض <br /> <font face="ARIAL"><font size="2"> ‎<INPUT TYPE="submit" VALUE="Press here to send the form">‎ </font></font><br /> <form></form> <hr align="CENTER" size="4" width="60%"> <br /> في حالة كان زوار موقعك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النوعية المترددة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الناس والذين قد يغيرون آرائهم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> آخر لحظة، يمكنك أن تتيح لهم إمكانية مسح ما كتبوه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النموذج وإلغاء الأمر، وذلك باستخدام <font face="Times New Roman"><font size="4">reset</font></font> كنوع <font face="Times New Roman"><font size="4">TYPE</font></font> للوسم <font face="Times New Roman"><font size="4"><INPUT></font></font> بنفس طريقة التعريف والخصائص المستخدمة مع <font face="Times New Roman"><font size="4">submit.</font></font> <br /> <font face="ARIAL"><font size="2"> ‎<INPUT TYPE="reset" VALUE="Forget about it">‎ </font></font><br /> <form></form> <hr align="CENTER" size="4" width="60%"> <br /> الشكل الأخير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أشكال البيانات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النماذج والمدرج مع الوسم <font face="Times New Roman"><font size="4"><INPUT></font></font> هو <font face="Times New Roman"><font size="4">button</font></font> والذي يقوم بإنشاء زر ضمن النموذج، وهو مرتبط بالنماذج التي تحتوي على نصوص برمجية (أو <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> مكتملة) <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> لغات متقدمة مثل <font face="Times New Roman"><font size="4">JavaScript</font></font> كونه يستخدم لتشغيل هذه <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> وإطلاقها. وطبعاً هناك طرق معينة لربطها مع <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> وليس هنا المجال لطرحها. لكن مبدئياً أقول إن طريقة الإدراج والتعريف هي ذاتها المستخدمة مع <font face="Times New Roman"><font size="4">reset, submit.</font></font> <br /> <font face="ARIAL"><font size="2"> ‎<INPUT TYPE="button" VALUE="This is a sample button">‎ </font></font><br /> <form></form> <hr align="CENTER" size="4" width="60%"> <hr align="CENTER" size="4" width="60%"> <br /> وأخيراً ... وصلنا الآن إلى نهاية حديثنا عن النماذج. فما رأيك؟ هل هو <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواضيع السهلة أم الصعبة؟ لا شيء سهل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بدايته. لذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأفضل لك أن تحاول دائماً التدرب أولاً بأول على الوسوم المشروحة، بل والعودة إلى الدروس السابقة إذا اقتضى الأمر وخاصة إذا تداخلت بعضها مع الدروس الأحدث.<br /> إلى اللقاء ... ومع تمنياتي لك بنماذج موفقة تخلو <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> التعقيد. <br /> <br /> <font color="Red"><br /> </font><br /> <div align="center"><font color="Red"><b><font size="5">المتصفحات والوسوم الخاصة<br /> الأرق الدائم لمصممي صفحات الويب <br /> </font></b></font></div> أهلاً وسهلاً بك إلى الدرس السادس عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> والذي سنناقش فيه واحداً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواضيع المهمة.. والشائكة.. والمزعجة نوعاً ما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه اللغة، وفي مجال <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%D5%E3%ED%E3" > تصميم </a> صفحات الويب عموماً. وهو موضوع الوسوم الخاصة... فما هي هذه الوسوم؟ ... حسناً، إليك القصة:- <br /> هل سبق لك وأن صادفت عبارة <font face="Times New Roman"><font size="4"><i>Best Viewed with Netscape Navigator</i></font></font> أو <font face="Times New Roman"><font size="4"><i>Best Viewed with MS <a href="http://www.hikm4.com/vb/tags.php?tag=Internet" > Internet </a> Explorer</i></font></font> أو (أفضل مشاهدة بواسطة المتصفح نيتسكيب … أو إكسبلورر) عند زيارتك لبعض مواقع الإنترنت? حتماً لقد شاهدت مثل هذه العبارات تذيل الكثير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواقع. والحقيقة أن مصممي هذه المواقع ليسوا بالضرورة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المعجبين بهذا المتصفح أو ذاك بحيث يعلنوا ولائهم له دون غيره <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المتصفحات. لكن بكل بساطة ربما قاموا بتضمين <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الوسوم أو الخصائص التي يدعمها ذلك المتصفح فقط <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحاتهم…! بحيث إذا قام زائر ما بالدخول إلى ذلك الموقع مستخدماً متصفحاً آخر غير الموصى به فلن يشاهد نفس النتيجة التي يشاهدها زائر آخر يستخدم المتصفح المطلوب. (طبعاً لا أستطيع أن أعمم هذا لأن هناك العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المصممين الذين يفضلون فعلاً متصفحاً عن غيره سواءً قاموا بتضمين الوسوم الخاصة به أم لا) <br /> <br /> نعم، يوجد هناك العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الوسوم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> التي قامت الشركات المنتجة للمتصفحات كمايكروسوفت ونيتسكيب بتطويرها بحيث تعمل على متصفحها الخاص دون غيره <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المتصفحات <font face="Times New Roman"><font size="4"> Browser Specific Tags </font></font> (من قال لك أن الشركات الكبرى تتعامل مع بعضها البعض كالكبار). وقد يصل الأمر أحياناً إلى وجود وسوم موحدة تدعمها جميع المتصفحات لكن طريقة تنفيذ وعرض هذه الوسوم هي التي تختلف. وأذكرك بما قلناه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الرابع عند الحديث عن القوائم. فقد شاهدنا كيف أن كلا المتصفحين يدعمان الوسم <font face="Times New Roman"><font size="4"><UL></font></font> والخاصية <font face="Times New Roman"><font size="4">TYPE</font></font> لكنهما يختلفان على القيم التي تدرج معهما. وهذا مثال واحد فقط على هذا الإختلاف. <br /> وأكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ذلك، لا ننسى أن شركات <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> تقوم بشكل مستمر بعمليات التحديث والتحسين لبرامجها وإطلاق إصدارات <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> لها بين الحين والآخر، لذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> غير المستبعد أن يختلف الدعم للوسوم والخصائص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل نفس المتصفح بإصداراته المختلفة، وبالتالي اختلاف مظهر الصفحات. وهذه المسألة بالذات (وأعني اختلاف مظهر الصفحات) هي ما تسبب أرقاً لمصممي صفحات الويب. والسؤال الملّح دوماً لديهم هو: كيف أحصل على صفحة ويب لا تختلف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عرضها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> متصفح لآخر؟ وقد يكون جوابه أكثر إلحاحاً، إذ يكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصعب أحياناً تحقيق هذا الهدف. وتزداد صعوبته كلما ازدادت العناصر والتنسيقات المختلفة التي تحتويها الصفحة. بينما يسهل التحكم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحة تقتصر محتوياتها على النصوص فقط ويكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الممكن إخراجها بنفس الطريقة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> جميع المتصفحات. <br /> <font size="+1">فما الحل إذن؟</font><br /> مع أن <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> هذه الوسوم الخاصة تعطي تأثيرات رائعة للصفحة، وتضفي <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> مظهراً جميلاً. لكنك بالمقابل لا تضمن أن جميع زوار موقعك يستخدمون نفس المتصفح، فهذا مستحيل بالطبع. لذلك لا أقول لك لا تستخدم هذه الوسوم لكن حاول قدر الإمكان تجنبها إذا أردت أن تظهر صفحتك بنفس الطريقة التي تريدها لجميع الزوار. كذلك حاول دائماً استعراض صفحاتك باستخدام المتصفحين وباستبانات مختلفة للشاشة فهذا يعطيك فكرة مبدئية عن الطريقة التي سيشاهدها بها زوارك على مختلف المتصفحات. <br /> <center><table bgcolor="#FFFFFF" border="5" width="80%"><tbody><tr><td> <font size="4"> أنا هنا أتحدث عن الصفحات الإنجليزية القياسية عموماً، أما الصفحات العربية فهي حكاية أخرى لأن الدعم الموجود للغة العربية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفحات ليس قياسياً نتيجةً لعدة أسباب لا مجال لذكرها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا المقام. فمثلاً متصفح نيتسكيب لا يدعمها أصلاً ويحتاج إلى <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> إضافي <font face="Times New Roman"><font size="4">Plugin</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> شركة صخر وهو سندباد. وهناك متصفح آخر يدعم العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> اللغات العالمية بما فيها العربية، وهو تانجو <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> شركة أليس. لكن أنا شخصياً أفضل مايكروسوفت إكسبلورر ليس <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ناحية استخدامي لأية وسوم خاصة به بل لأنه الأفضل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عرض النصوص العربية والصفحات ثنائية اللغة أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> غيره <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المتصفحات. </font><br /> </td></tr></tbody></table> </center> قبل أن نبدأ باستعراض الوسوم لا بد لي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> التنويه بأني استخدم برنامجي <font face="Times New Roman"><font size="4">Sindbad 3.x</font></font> و <font face="Times New Roman"><font size="4">Ms <a href="http://www.hikm4.com/vb/tags.php?tag=Internet" > Internet </a> <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 3.x</font></font> وعندما أتحدث عن الوسوم والخصائص وتوافقها مع المتصفحات فأنا أعني هذين المتصفحين وأعني رقم الإصدار أيضاً <font face="Times New Roman"><font size="4">(‎3.x).</font></font> وذلك لأنهما لا زالا الأكثر رواجاً (حتى تاريخ كتابة هذا الدرس)، سواء بيننا كمستخدمين عرب أو بشكل عام بين مستخدمي الإنترنت عالمياً. ومن المحتمل إذا كنت تستخدم إصداراً أحدث لأحد هذه <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> أن تلاحظ أنه قد أصبح يدعم الوسوم الخاصة بالبرنامج الآخر (وهذا بالطبع ليس ذنبي، بل ذنب أولئك الذين يطورون برامجهم بشكل دائم ومتسارع ولا يتركوننا نلتقط أنفاسنا بين كل إصدار وآخر). وعلى أية حال إذا كنت ممن يقبلون النصيحة المجانية، حاول دائماً <a href="http://www.hikm4.com/vb/tags.php?tag=%CA%D5%E3%ED%E3" > تصميم </a> صفحاتك مع افتراض أسوأ الإحتمالات أي واضعاً نصب عينيك أن زوار موقعك يستخدمون متصفحات قديمة. وبذلك تضمن أن معظمهم إن لم يكن جميعهم سيشاهدون موقعك بنفس الصورة وبدون أي مشاكل تتعلق بالتوافقية بين المتصفحات والوسوم. <br /> <hr align="CENTER" size="4" width="60%"> <br /> وبالنسبة لطريقة عرض الوسوم لهذا الدرس، فنظراً لخصوصيتها سوف أتبع هنا منهجاً مختلفاً عن الدروس السابقة يقوم على عرض الوسوم الخاصة بكل متصفح <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحة منفصلة. وذلك بهدف حصر الوسوم المخصصة لكل متصفح وعدم تداخلها مع الوسوم الأخرى. وبالتالي تجنب احتمال حدوث خلل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بنية الصفحات عند عرضها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال متصفح لا يدعم بعضاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الوسوم والشيفرات الخاصة بها. <br /> لكن هذا لا يعني عدم قدرتك على مشاهدة الصفحة الخاصة بوسوم أحد المتصفحات إذا كنت تستخدم الآخر. بالطبع سوف يكون بإمكانك مشاهدة النص المكتوب والشيفرات المستخدمة كالمعتاد (فنحن <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النهاية لا زلنا نستخدم <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML)</font></font> لكن كل ما هنالك أنه لن يكون بإمكانك مشاهدة تأثيرها إلا إذا استخدمت المتصفح المناسب. <br /> <div align="center"><font size="+1"> إذن لكي تبدأ اختر المتصفح <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تريده<br /> لتنتقل مباشرة إلى وسومه المخصصة. </font></div> <table border="0" cellpadding="10"><tbody><tr align="center"> <td><font face="Times New Roman"><font size="4">MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 1</font></font></td> <td><font face="Times New Roman"><font size="4">Netscape Navigator </font></font></td> </tr> <tr align="center"><td><font face="Times New Roman"><font size="4">MS <a href="http://www.hikm4.com/vb/tags.php?tag=explorer" > explorer </a> 2</font></font></td> <td><br /> </td></tr></tbody></table><b><font size="5"><font color="Red">الويب واللغة العربية<br /> الويب ... بتتكلم عربي<br /> </font></font></b><blockquote> أهلاً وسهلاً بك إلى الدرس السابع عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML.</font></font> والذي سندخل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلاله إلى أحد المواضيع الهامة التي يُعنى بها كل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> يريد أن يكون للغة العربية وجود على الإنترنت. سوف نقوم بمناقشة الكيفية التي يمكن لنا كمستخدمين عرب إنشاء صفحات ويب بلغتنا الأم على هذه الشبكة العالمية. <br /> <b><font size="+1">فذلكة تاريخية</font> </b><br /> نحن نعرف أن بدايات اللغة العربية على الإنترنت اقتصرت على أسلوب قد نعتبره الآن بدائياً، لكن لا نستطيع إنكار فعاليته <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ذلك الوقت. (لا تعتمد كثيراً على عبارة <i>"في ذلك الوقت"</i> فمن المحتمل أن يكون هناك مواقع لا زالت تعتمد هذا الأسلوب لعرض محتوياتها حتى هذه اللحظة)، وهو أسلوب النص المصور. أي النص المسحوب على جهاز <font face="Times New Roman"><font size="4">Scanner</font></font> والمعروض على الإنترنت كصورة. وكانت هذه هي الطريقة التي نَفذ منها أصحاب المواقع المعربة للدخول إلى عالم الإنترنت. لكن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الواضح أنها لم تكن بالطريقة الفعالة أو العملية، لعدة أسباب أهمها:<br /> بالنسبة للمصمم: كانت عملية إنشاء الصفحة تعني كتابتها وتنسيقها وطباعتها ومن ثم مسحها على <font face="Times New Roman"><font size="4">Scanner</font></font> فإذا أراد فيما بعد إجراء أي عملية تعديل مهما كانت بسيطة فذلك يعني إعادة تحريرها وسحبها، مكلفة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ذلك الوقت والجهد وربما المال.<br /> أما بالنسبة للزائر فذلك يعني إضاعة وقت أطول <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عرض هذه النصوص -الصور- أضعافاً مضاعفة مما لو كانت نصوصاً بحتة. بالإضافة إلى استحالة إجراء عمليات البحث المعتادة سواءً كانت خارجية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال محركات بحث الإنترنت، أو داخلية ضمن الصفحة نفسها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال أمر البحث الموجود <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفح. وأحياناً قد يواجه مشكلة رداءة الصورة وبالتالي عدم إمكانية إخراجها بشكل واضح وسليم على الطابعة. <br /> لكن دعنا لا نلم هؤلاء الرواد الذين اتبعوا هذه الطريقة. فكما يقال (مكره أخاك لا بطل) وعذرهم هو عدم وجود متصفحات تستطيع عرض النصوص العربية بطريقة صحيحة. إلى أن قامت شركة صخر بإطلاق متصفحها سندباد <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> جاء معرباً لـ <font face="Times New Roman"><font size="4">Netscape</font></font> وشركة مايكروسوفت التي أطلقت <font face="Times New Roman"><font size="4">MS <a href="http://www.hikm4.com/vb/tags.php?tag=Internet" > Internet </a> Explorer</font></font> ليكونا فاتحة خير بالنسبة لنا كمستخدمين عرب للإنترنت، ولا نستطيع إلا أن نكنّ لهما كل التقدير. فهانحن كما ترى نبحر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت ولغتنا العربية تزداد انتشاراً فيها يوماً بعد يوم. <br /> <hr align="CENTER" size="4" width="60%"> <br /> حسناً، لا تظن أننا سنحتاج إلى إعدادات معينة أو أننا سنتعامل مع وسوم إضافية غير عادية عندما نتحدث عن صفحات ويب باللغة العربية... إطلاقاً، فالواقع أنك تستطيع اعتبار هذا الدرس مجرد دردشة عادية عن الويب واللغة العربية. ولن يكون هناك إلا وسم <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF" > جديد </a> واحد سيتم التعرض له بشكل مقتضب بما يهمنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> موضوع اللغة العربية هنا على أن نناقشه بالتفصيل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> درس لاحق. <br /> <b> <font size="+1">ولنبدأ الآن...</font></b><br /> لنقم بداية بتعريف صفحة ويب عادية كما إعتدنا: <br /> <font face="Arial"><font size="2"> <HTML> <br /> <HEAD> <br /> <TITLE> ... <‎/TITLE><br /> <‎/HEAD><br /> <br /> <BODY><br /> ....<br /> <‎/BODY><br /> <‎/HTML> </font></font><br /> ومن ثم سنقوم بإضافة هذه الشيفرة لها <br /> <font face="Arial"><font size="2"> ‎<**** HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎ <br /> </font></font> وذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> القسم الأعلى أي ضمن الوسمين <font face="Times New Roman"><font size="4"><HEAD> ... <‎/HEAD> </font></font> ويفضل أن تكتبها بعد وسوم العنوان <font face="Times New Roman"><font size="4"><TITLE> ... <‎/TITLE> </font></font> <br /> <font face="Arial"><font size="2"> <HTML> <br /> <HEAD> <br /> <TITLE> ... <‎/TITLE><br /> ‎<**** HTTP-EQUIV="Content-Type" CONTENT="text/html; <font color="#FF0000">charset=windows-1256</font> ">‎ <br /> <‎/HEAD><br /> <br /> <BODY><br /> ....<br /> <‎/BODY><br /> <‎/HTML> </font></font><br /> قم بكتابة هذه الشيفرة كما هي نصاً وحرفاً. وما يعنينا فيها الآن هي العبارة <br /> <font face="Times New Roman"><font size="4"> charset=windows-1256 </font></font><br /> فهي لب موضوعنا. أما باقي الشيفرة فسوف نقوم بمناقشتها إن شاء <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%E1%E5" > الله </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> درس لاحق عند الحديث عن الوسوم المتقدمة. <br /> فما <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تعنيه العبارة السابقة؟؟ بإختصار شديد، هي تحدد قائمة الترميز العربية <font face="Times New Roman"><font size="4">Code Page</font></font> التي سيتم عرض صفحتنا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلالها. أو لنقل أنها تحدد أسلوب التشفير <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> سيستخدمه المتصفح لعرض الأحرف. <br /> <hr align="CENTER" size="4" width="40%"> <br /> حسناً، يبدو أننا سنعود ثانية للفذلكة التاريخية. وهذه المرة إلى بدايات اللغة العربية مع الحاسوب الشخصي نفسه وليس مع الإنترنت فقط:-<br /> إذا كنت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> مستخدمي الحاسوب القدامى ... وبالتحديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أيام نظام التشغيل <font face="Times New Roman"><font size="4">DOS</font></font> وتطبيقاته (أي قبل أن يكون هناك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%ED%E4%CF%E6%D2" > ويندوز </a> المعرّب) فلا بد أنك تعرف، وربما تعاملت مع <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> التعريب القديمة التي واكبت تلك الفترة كبرنامج النافذة وريم ونظم صخر ... إلخ. حيث أنه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تلك الفترة كانت هناك عدة جهات أخذت على عاتقها مهمة تعريب الحاسوب وأنظمة تشغيله. لكن المشكلة كانت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> في غياب التنسيق بين هذه الجهات. وكانت النتيجة هي إصدار العشرات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> التعريب التي تختلف عن بعضها البعض <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <b> طريقة ترتيب قائمة الرموز والحروف</b> وبالتالي اختلف أسلوب تشفير النصوص وعرضها. بمعنى أن النص المكتوب <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> "النافذة" سوف يبدو كمجموعة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحروف والكلمات المبهمة وكأنها مكتوبة بلغة أخرى باستخدام <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> آخر مثل "ريم". <br /> ولتوضيح الفكرة السابقة (على الأقل كما أفهمها أنا!!!) إليك هذا المثال.<br /> لنفرض أن هناك قائمة ترميز رتّبت فيها الحروف بالشكل التالي: <br /> <center> <table bgcolor="#FFFFFF" border="2"> <tbody><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> </tbody></table> </center> وأننا أردنا كتابة كلمة "سندباد" <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلالها... <br /> ثمّ لنفرض الآن أننا قمنا باستعراض الكلمة باستخدام <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> يتعامل مع قائمة ترميز مختلفة وبالترتيب التالي: <br /> <center> <table bgcolor="#FFFFFF" border="2"> <tbody><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> </tbody></table> </center> بالمقارنة بين النظامين سوف نشاهد أن كلمة "سندباد" <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النطام الأول قد أصبحت "ضظفجدف"!!! <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النظام الثاني <br /> <center> <table bgcolor="#FFFFFF" border="2"> <tbody><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> </tbody></table> </center> <br /> إذن تعدد نظم التشفير لم يكن لصالح المستخدم العربي أبداً، إذ أنها أوقعته <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> إشكالات أقلها عدم التوافق بين التطبيقات التي يتم العمل عليها. ولا شك أن ظهور نظام <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%ED%E4%CF%E6%D2" > ويندوز </a> وانتشاره بين المستخدمين العرب بصورة كبيرة قد حدّ <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه المشكلة بشكل فعّال. <br /> <hr align="CENTER" size="4" width="40%"> <br /> والآن عودة إلى الإنترنت... لقد ألقت المشكلة سالفة الذكر بظلالها على نظم إنترنت ومتصفحاتها المعرّبة (وإن كان ذلك بصورة أقل تأثيراً عمّا سبق). لذلك تجد أن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الميزات التي تحرص شركات صخر وميكروسوفت على إضافتها للمتصفحات هي ميزة تعدد قوائم الترميز التي يستطيع المتصفح دعمها. ومن الأمثلة على هذه القوائم: <font face="Times New Roman"><font size="4">Windows-1256, DOS-720, ISO-8859-6</font></font> وأكثرها استخداماً وانتشاراً هي <font face="Times New Roman"><font size="4">Windows-1256.</font></font> وعادة تملك المتصفحات القدرة على اكتشاف قائمة الترميز المطبقة على الصفحة بصورة تلقائية. لكن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحكمة أن نقوم نحن دائماً بتحديد هذه القائمة ليس بسبب قلة الثقة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفحات وإنما <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> باب الإحتياط الواجب دائماً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عالم الإنترنت وتصميم الصفحات...<br /> إذن، هل عرفت الآن السبب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> إضافة الشيفرة <font face="Times New Roman"><font size="4">charset=windows-1256</font></font> إلى بداية الصفحة؟ <br /> <hr align="CENTER" size="4" width="60%"> <br /> لكن ماذا سيحدث لو دخلت إلى إحدى الصفحات ولم تكن تتضمن الشيفرة الخاصة بقائمة الترميز؟ حسناً، هناك إحتمال <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> إثنين: إما أن يكون المتصفح قد اكتشفها بصورة تلقائية واستخدم الإعدادات الإفتراضية وبالتالي تم عرض الصفحة بالشكل الصحيح وبذلك حلّت المشكلة قبل أن تبدأ. أو تستطيع أنت أن تحل المشكلة بنفسك ، كيف؟؟ إليك الطريقة:<br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفح <font face="Times New Roman"><font size="4">MS Explorer</font></font> تجد أيقونة صغيرة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الزاوية اليمنى السفلى لنافذة المتصفح. فإذا قمت بالنقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> ستظهر قائمة بأسماء قوائم الترميز التي يدعمها.<br /> <center><a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="http://www.khayma.com/hpinarabic/images/msiecode.gif" border="0" alt="دروس لغة الهتمل HTML" /></a></center> وما عليك الآن إلا أن تختار القائمة التي تعتقد أنها المناسبة وإذا أخطأت قم باختيار قائمة أخرى وهكذا. <br /> أما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> سندباد فتستطيع أداء هذه المهمة باختيار الأمر "خيارات صفحة الويب الحالية" <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قائمة "خيارات سندباد" حيث يظهر بضمنها صندوق حوار خاص بقوائم الترميز. <br /> وبالمناسبة، هل أخبرتك أن باستطاعتك رؤية النص العربي حتى لو كنت تستخدم متصفحاً غير معرب؟ كيف ذلك؟! كل ما عليك فعله هو تغيير إعدادات الخطوط الإفتراضية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفح واختيار خطوط عربية بدلاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الخطوط المحددة أصلاً. هذه هي الحكاية فقط لكنها ليست الحل!!. إذ سرعان ما ستكتشف أن النص غير مرتب والأسطر والفقرات متداخلة بطريقة غير منطقية خاصة إذا احتوت الصفحة على كلمات أجنبية. فعلى سبيل المثال إذا كانت هناك كلمة أجنبية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> منتصف أحد الأسطر فسوف تلاحظ أن الكلمات التي تليها على اليسار قد أصبحت على اليمين والعكس صحيح. وبذلك سيكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصعب عليك متابعة هذه الفقرات. (وعلى أية حال لو كان هذا هو الحل لما وجدنا شركات مثل صخر وميكروسوفت تضيعان وقتهما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> إيجاد متصفحات معربة). إذن الحل السابق هو مجرد حل مؤقت لمشكلة ظهور النص العربي فقط <a href="http://www.hikm4.com/vb/tags.php?tag=%E6%E1%DF%E4%E5" > ولكنه </a> لم يحل أبداً مشكلة كون اللغتين العربية والإنجليزية تكتبان بإتجاهين مختلفين وبشكل يحتاج إلى حل جذري بإيجاد المتصفحات المعربة ثنائية الإتجاه <font face="Times New Roman"><font size="4">Bi-Directional</font></font> أو <font face="Times New Roman"><font size="4">(BiDi)</font></font>. <br /> <hr align="CENTER" size="4" width="60%"> <br /> لا يخلو الموضوع هنا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحديث عن الإختلافات بين المتصفحات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> التعامل مع صفحات اللغة العربية. (عدنا ثانية للحديث عن الوسوم والخصائص الخاصة بكل متصفح). ولنبدأ بمناقشة تلك الخاصة بالمتصفح ميكروسوفت إكسبلورر:- <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الرابع تطرقنا إلى وسم الفقرات <font face="Times New Roman"><font size="4"><P>.</font></font> وقلنا أن إحدى خصائص هذا الوسم هي الخاصية <font face="Times New Roman"><font size="4">DIR</font></font> التي تحدد إتجاه النص <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال القيم <font face="Times New Roman"><font size="4">rtl</font></font> و <font face="Times New Roman"><font size="4">ltr.</font></font> (وقد طلبت منك أن تبقى متذكراً لها لأننا سنتطرق إليها عند الحديث عن اللغة العربية.) إذن لقد حان الوقت!!. يدعم إكسبلورر هذه الخاصية بشكل كبير، ذلك لأن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ميزاته أنه لا يتعامل مع الصفحة والفقرات المكونة لها كوحدة واحدة بل أنه يتعامل مع كل فقرة على حدة. ويتطلب هذا أن تقوم بتكرار الإعدادات التي تريدها مع كل فقرة بحد ذاتها. <br /> وعلى سبيل المثال، سوف تجد أن كل فقرة عربية <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل صفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الموقع محاطة بالوسوم <br /> <font face="Arial"><font size="2"><P DIR="rtl" ALIGN="right"> ... <‎/P> </font></font><br /> وأن كل فقرة إنجليزية محاطة بالوسوم<br /> <font face="Arial"><font size="2"><P DIR="ltr" ALIGN="left"> ... <‎/P> </font></font><br /> وذلك ليس لسبب إلا لضمان ظهورها بالشكل المناسب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفح إكسبلورر. ولاحظ أنني <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحالتين أقوم بتحديد إتجاه النص جنباً إلى جنب مع المحاذاة المطلوبة. وفي الحقيقة أن هذه الخاصية <font face="Times New Roman"><font size="4">DIR</font></font> تستخدم ليس فقط مع وسوم الفقرات بل مع أي وسوم أخرى نستخدم معها الخاصية <font face="Times New Roman"><font size="4">ALIGN</font></font> وبشكل خاص مع الجداول. <br /> نأتي الآن إلى المتصفح سندباد... كما تعلم فإن هذا المتصفح هو <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> مضاف <font face="Times New Roman"><font size="4">Plugin</font></font> لتعريب المتصفح <font face="Times New Roman"><font size="4">Netscape</font></font> بإصداراته المختلفة. لذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> البديهي أن يرث خصائصه المختلفة، إبتداءاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الواجهة التطبيقية للبرنامج وإنتهاءاً بالوسوم الخاصة التي يدعمها. لذلك فعند الحديث عن أحدهما نستطيع القول بأننا نتحدث عن الآخر بدون أدنى اختلاف.<br /> ما يهمنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا المقام هو أن سندباد يتعامل مع الصفحة التي يعرضها كوحدة واحدة، وذلك على خلاف إكسبلورر. بمعنى أنه لا يدعم الخاصية <font face="Times New Roman"><font size="4">DIR.</font></font> لذلك نرى أن سندباد يحتوي على زر خاص بتحويل إتجاه الصفحة يميناً أو يساراً، وهو الزر الموجود <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أعلى نافذته ويكون على شكل سهم. <br /> إذن بشكل عام، طالما كانت الصفحة موحدة اللغة (سواءاً كانت هذه اللغة عربية أو إنجليزية) وبالتالي كانت تحتوي على فقرات موحدة الإتجاه (يميناً أو يساراً) فمن غير الضروري أن نقوم بتحديد المحاذاة لكل فقرة على حدة، فالأصل أن نقوم بذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال زر تحديد الإتجاه. لكن عندما تحتوي صفحتنا العربية على فقرة إنجليزية (أو العكس) فهنا لا بد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> استخدام وسم الفقرات وتحديد المحاذاة المطلوبة لهذه الفقرة فقط، ومن ثم المتابعة مع باقي الفقرات العربية بشكل طبيعي كالسابق. ونكرر العملية مع أي فقرة إنجليزية لاحقة. وهنا عند الضغط على زر تحديد الإتجاه ستجد أنه يغير إتجاه جميع الفقرات فالعربية ستحول إلى اليسار والإنجليزية إلى اليمين والعكس بالعكس. <br /> السؤال الآن، أي <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الطرق نستخدمها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحاتنا؟ هل نعتمد على الخاصية التي يدعمها إكسبلورر أو على الزر <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يتضمنه سندباد؟ <br /> الجواب عموماً هو أن نتبع الطريقة التي تضمن أكبر قدر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> التوافق <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مظهر الصفحات فوجود الخاصية <font face="Times New Roman"><font size="4">DIR</font></font> لن يضر بصحة المتصفح سندباد. لكن غيابها هو ما سيجعل إكسبلورر هزيلاً. إذن لنستخدمها دائماً ومع كل فقرة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> فقرات صفحتنا. <br /> <hr align="CENTER" size="4" width="60%"> <br /> خلاصة القول أضعها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> النقاط التالية، وكما يقال: <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإعادة إفادة! <br /> <center> <table align="center" bgcolor="#FFFFFF" border="5" cellpadding="3" width="80%"><tbody><tr><td> <br /> <ol style="list-style-type: decimal"><li> <b>في بداية الصفحة ضع الشيفرة التالية كما هي نصاً وحرفاً</b> <br /> <font face="Arial"><font size="2"> ‎<**** HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎ <br /> </font></font></li> <li><b>قم بإحاطة كل فقرة عربية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> فقرات صفحتك بالوسوم التالية:</b><br /> <font face="Arial"><font size="2"><P DIR="rtl" ALIGN="right"> ... <‎/P> </font></font></li> <li><b>إذا أردت إدراج فقرات إنجليزية فقم بإحاطة كل منها بالوسوم</b><br /> <font face="Arial"><font size="2"><P DIR="ltr" ALIGN="left"> ... <‎/P> </font></font></li> <li><b> تستطيع استخدام الوسوم السابقة مع الجداول أيضاً </b></li> </ol> </td></tr></tbody></table> </center> <br /> <hr align="CENTER" size="4" width="60%"> <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأيام الأولى لإنشاء هذا الموقع، وبالذات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس الأول، واجهت إشكالاً معيناً وذلك عندما كنت أقوم بكتابة <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المصطلحات الإنجليزية وبضمنها رموز خاصة أو أرقام. فقد كانت هذه الرموز تظهر بصورة معكوسة عندما يتم عرضها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المتصفح سندباد. مثال ذلك: أن الإشارة / الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> وسوم النهاية كانت تظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> آخر الوسم (أي إلى اليمين) بدلا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أن تظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بدايته. كذلك عند الحديث عن الرموز الخاصة كالفراغات كانت إشارة (&) تظهر على اليسار وإشارة (<a href="http://www.hikm4.com/vb/showthread.php?t=8438" ><img src="images/smilies/wink.gif" border="0" alt="دروس لغة الهتمل HTML" title="Wink" class="inlineimg" /></a> تظهر على اليمين، أي انهما تظهران بشكل معاكس لما يجب أن يكونا عليه. <br /> وبصراحة مطلقة فقد سببت لي هذه المشكلة كابوساً على مدى عدة أيام متلاحقة، حاولت خلالها تجربة العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الحلول. كان <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ضمنها أن أقوم بكتابة هذه الرموز بصورة معاكسة علّها تعود إلى رشدها. لكن للسخرية كانت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الحالة المعكوسة تبقى كما هي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مكانها. وأخيراً جاء الحل السحري بعد أن أرسلت إلى شركة صخر أستفسر عن هذه المشكلة. وكان هذا الحل بكتابة رمز يسمى <font face="Times New Roman"><font size="4">OXFD</font></font> وهو رمز الفراغ باللاتيني، وتتم كتابته بالضغط على المفتاح <font face="Times New Roman"><font size="4">ALT</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> لوحة المفاتيح مع الأرقام (من اليسار إلى اليمين) <font face="Times New Roman"><font size="4">0253</font></font> وذلك قبل أي رمز "مشاغب" لا يظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مكانه الصحيح. وبذلك تم حل كل الإشكالات التي واجهتها مع هذه الرموز. <br /> إذن أستطيع الآن أن أضيف نقطة خامسة إلى النقاط السابقة: <br /> <center> <table align="center" bgcolor="#FFFFFF" border="5" cellpadding="3" width="80%"><tbody><tr><td> <b>استخدم <font face="Times New Roman"><font size="4">ALT+0253</font></font> قبل الرموز أو الحروف الإنجليزية التي لا تظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مكانها الصحيح عند عرضها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال المتصفحات </b><br /> </td></tr></tbody></table> </center> <hr align="CENTER" size="4" width="60%"> <br /> وعند هذه النقطة نكون قد وصلنا إلى نهاية هذا الدرس والذي لن يكون بالطبع هو نهاية المطاف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> إتش.بي بالعربية. فما زال هناك ما يقال، ألقاك على خير <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس التالي. <br /> </blockquote><b><font size="5"><font color="Red"> وسوم </font></font><font face="Times New Roman"><font size="5"><font color="Red">****</font></font></font><font size="5"><font color="Red"> ومحركات البحث<br /> كيف تجعلهم يجدون موقعك..؟! </font></font></b></blockquote><blockquote> أهلاً وسهلاً بك إلى الدرس الثامن عشر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%CF%D1%E6%D3" > دروس </a> <font face="Times New Roman"><font size="4">HTML...</font></font> <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المحتمل أن يكون عنوان هذا الدرس غريباً <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> الشيء بالنسبة لك. وأنه قد أثار لديك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> التساؤلات عن فحوى هذه الوسوم وعن الهدف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذا الدرس بشكل عام... ولكي لا تطول تساؤلاتك دعني أوضحها لك كما يلي:- <br /> لقد تابعنا معا <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال الدروس السابقة مفردات <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> خطوة بخطوة. ومن المحتمل أنك قمت بتطبيق هذه الدروس بصورة عملية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال صفحات وهمية قمت أنت بإنشائها. (حسناً فعلت!!! - لأنه <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الصعب استيعاب أي موضوع <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF" > جديد </a> دون القيام بالتطبيق العملي له، وخصوصاً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مجال <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%DF%E3%C8%ED%E6%CA%D1" > الكمبيوتر </a> عموماً ولغاته بشكل خاص). والآن أنت تعتقد أنه حان الوقت للعمل الجدي، فلديك فكرة لموضوع ما، وتريد طرحها على الإنترنت. وأنك تفكر بإنشاء موقعك الخاص لتعرض هذا الموضوع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلاله. وتؤمن أن هذه الدروس التي تتابعها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الموقع قد كوّنت لديك المعرفة الكافية للقيام بتصميم موقعك بنفسك (كما أتمنى)... وبذلك تجد نفسك جاهزاً للانطلاق <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> رحاب الإنترنت ولتقول بكل فخر: "لدي موقع على الإنترنت". لكنك أيضا قد تتوقف لتفكر للحظات… فأنت تعرف والجميع يعرف أنه يوجد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت حالياً الملايين <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواقع! وربما تتساءل: كيف لي أن أنشئ موقعي <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الخضم الهائل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المواقع؟! وكيف <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%E1%E4%C7%D3" > للناس </a> أن يجدوا طريقهم إلى هذه الزاوية الصغيرة التي أنشأتها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الكيان اللامحدود؟ وإذا كنت <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النوع المتشائم فربما ستتراجع عن هذه الفكرة (فكرة الموقع) قبل أن تبدأها... حسناً، لا أريدك أن تشعر بالإحباط. فالطبع لو أن كل واحد منّا يفكر بالجدوى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> إنشاء موقع إنترنت خاص به بهذه الطريقة لما وجدت كل هذه المواقع ولما تكونت الإنترنت أصلاً، أليس كذلك؟ <br /> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> بدايات الإنترنت، كانت هناك عبارة دارجة تقول <br /> <center><font face="Times New Roman"><font size="4">Build it, and they will come</font></font> </center> <i>أي أنشيء موقعك، وسوف يأتون إليه.</i> ولا أعرف إلى أي مدى كان صدق هذه العبارة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تلك الأيام. فأنا لا أستطيع تخيل أي موقعِ على الويب تهلّ إليه جحافل الزوار بمجرد افتتاحه مهما كانت طبيعة هذا الموقع أو موضوعه أو التقنيات المستخدمه فيه. لكن ما أعرفه حالياً أن تسويق الموقع <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> متاهات الويب يعد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أهم وأصعب المهمات التي تواجه أصحابه. بل وربما أصعب <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> عملية إنشاء الموقع نفسها.<br /> السؤال الآن ... ما هي الطريقة المثلى للوصول إلى شيء ما عندما تحتاجه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت؟ والجواب بديهي، إنها محركات البحث. لذلك لا نبالغ إذا قلنا أن الموقع <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> يدرج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> محركات البحث وبالذات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الصفحات الأولى منها وفي أعلى مستويات هذه الصفحات هو موقع ناجح يستطيع أن يضمن وصول أكبر عدد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الزوار إليه.<br /> <center><b>إذن فمحركات البحث هي الخطوة الأولى</b></center> لكن كيف نصل أصلاً إلى محركات البحث هذه؟ (وأعني هنا كيف نتوصل إلى إدراج موقعنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> قوائم هذه المحركات؟) وهو ما سنحاول الإجابة عليه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس. <br /> حسناً... قد تقول: نحن هنا نناقش <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> فما دخل محركات البحث بهذا الموضوع؟ بالطبع فإن الهدف <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذا الدرس هو إكمال ما بدأناه <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدروس السابقة حول <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> أي أننا سوف نناقش وسوماً <a href="http://www.hikm4.com/vb/tags.php?tag=%CC%CF%ED%CF%C9" > جديدة </a> لهذه اللغة. لكن بما أن هذه الوسوم تتعلق بمحركات البحث. فقد وجدت أنه <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المحتم توضيح العديد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> النقاط حول هذه المحركات. وعلى أية حال فالمزيد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المعرفة لن يضر أحداً. <br /> إذن فما ستجده هنا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذا الدرس لن يكون فقط وسوم <font face="Times New Roman"><font size="4">HTML</font></font> بل أيضاً <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المعلومات والأفكار حول محركات البحث، ولن يعنينا هنا كيفية استخدامها للبحث بل ما سيعنينا هو كيفية إدراج المواقع ضمنها... أي أنك لن تكون هنا باحثاً عن المعلومة، بل ستكون ناشراً لها. وأتمنى أن تكون هذه الأفكار عوناً لك على ذلك. <br /> <center><table bgcolor="#FFFFFF" border="5" width="80%"><tbody><tr><td><center><font size="5">كيف لك أن تجعل الناس يأتون إلى موقعك، وأن يجدوا طريقهم إليه بسهولة ويسر؟ وبشكل أعمّ ... كيف تستطيع أن تسوّق موقعك؟؟؟<br /> <b> هذا هو السؤال</b></font> </center> </td></tr></tbody></table> </center> هنا لن أتكلم معك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أمور بديهية وأقول لك إن الفكرة الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> موقعك والموضوع المطروح فيه لهما أثر واضح <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> جذب الزوار إليه. ولن أقول لك بأن طريقة تنظيمه وتنسيقه تسهل عليهم التجول فيه، وبالتالي لن يجدوا صعوبة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> إيجاد ما يبحثون عنه. كذلك لن أذكّرك بأن التجديد المستمر لمحتوياته يجعل زوارك يحرصون على العودة مرة بعد مرة… طبعا لن أقول لك كل ذلك!!!! <br /> <br /> لا أعرف مدى استخدامك لمحركات البحث للوصول إلى ما تريده <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت! ولا أعرف أيضاً إن كان استخدامها قد أثار لديك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> التساؤلات! على سبيل المثال: <br /> <ul><li> ما الفرق بين <font face="Times New Roman"><font size="4">Yahoo</font></font> و <font face="Times New Roman"><font size="4">Altavista؟</font></font></li> <li> ما السبب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تباين النتائج التي تظهر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> موقع لآخر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث العدد والمحتوى؟</li> <li> لماذا يوجد وصلات تشعبية لا تعمل <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> المحركات أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> غيرها؟</li> </ul> عند الحديث عن مواقع البحث <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت، <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الضروري أن نميز بين محركات البحث <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> جهة والفهارس (أو أدلة البحث) <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> جهة أخرى، وذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث المفهوم والخصائص وأسلوب العمل. <br /> <dl><dt> <b><i>محركات البحث <font face="Times New Roman"><font size="4"> Search Engines</font></font> </i></b><br /> </dt><dd> يعتبر محرك <font face="Times New Roman"><font size="4">Altavista</font></font> <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أوضح الأمثلة على محركات البحث. وهي تسمى أيضاً بالزواحف <font face="Times New Roman"><font size="4">Crawlers</font></font> أو العناكب <font face="Times New Roman"><font size="4">Spiders</font></font> ومردّ هذه التسميات إلى الطريقة التي يتبعها المحرك لإيجاد المواقع وتصنيفها حيث تقوم الروبوتات الخاصة به (برامج خاصة بالبحث وتتميز بالذكاء …الإصطناعي طبعاً) بالزحف <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الإنترنت بحثاً عن المواقع الجديدة وعندما تجد أحدها تقوم بفهرسة وتصنيف كل كلمة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الكلمات الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات هذا الموقع ضمن قاعدة البيانات الهائلة الخاصة بالمحرك، حيث تستخدم هذه البيانات لتكوّن نتائج البحث التي يطرحها زوار المحرك فيما بعد. وتقوم الروبوتات أيضاً <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حين لآخر بإعادة زيارة المواقع السابقة بعد مدة قد تطول أو تقصر (أسبوع أو شهر) تبعاً لطبيعة المواقع نفسها وعدد الزوار اليوميين وكبر الحجم وذلك بهدف تحديث المعلومات عن هذه المواقع وإعادة تصنيف أي إضافات أو إلغاءات طرأت عليها. وكل ذلك يجرى بصورة أتوماتيكية <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال هذه الروبوتات. ونستطيع القول أن التصنيفات الموجودة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> مثل هذه المحركات تكون إلى حد ما حديثة. <br /> </dd><dt><b><i>الفهارس أو أدلة البحث <font face="Times New Roman"><font size="4">Directories</font></font> </i></b> </dt><dd> ولعل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> أبرز الأمثلة <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> هو الفهرس <font face="Times New Roman"><font size="4">Yahoo</font></font> وفي هذا النوع <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> طرق البحث يتم تصنيف المواقع ضمن قوائم متدرجة ومتشعبة عن بعضها البعض بحيث يبدأ بالمفتاح الأساسي العام ثم يتدرج إلى الأكثر تحديداً وهكذا. ويقوم بعملية التصنيف هذه طاقم يعمل خصيصاً <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> البحث عن المواقع. (أي طاقم بشري، وذلك على خلاف المحركات) كما يعتمد على المعلومات التي يقوم أصحاب المواقع بإرسالها إلى الفهرس عندما يقومون بتحميل المعلومات الخاصة بموقعهم إليه. لذلك نجد أن كمية المعلومات المصنفة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الأدلة أقل منها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> محركات البحث وأحياناً أقل حداثة. <br /> </dd></dl> ولكي أوضح لك الفرق بين كلا الموقعين إليك المثال العملي التالي: <br /> عندما قمت بالبحث عن المواقع الخاصة بمدينتي نابلس باستخدام <font face="Times New Roman"><font size="4">Yahoo</font></font> كانت نتيجة البحث ثلاثة مواقع فقط، وكانت إحدى النتائج كما يلي:<br /> <font face="Arial"><font size="2">Regional: Regions: Middle East: Countries and Regions: Palestinian Authority: Cities and Regions: Nablus </font></font> <br /> وكما ترى فإن تسلسل البحث انتقل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> <font face="Times New Roman"><font size="4">Regional</font></font> إلى <font face="Times New Roman"><font size="4">Region</font></font> إلى <font face="Times New Roman"><font size="4">Middle East</font></font> وهكذا نزولاً إلى أن وصل إلى نابلس <br /> أما باستخدام <font face="Times New Roman"><font size="4">Altavista</font></font> فكانت النتيجة حوالي 4218 موقع، حيث تمّ سرد المواقع تباعاً ودون أي تصنيف أو ترتيب محدد. والحقيقة أن هناك صفحات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> نفس الموقع تكرر ظهورها ضمن نتائج البحث، والسبب <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ذلك فقط لأن كلمة نابلس تكررت <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل صفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صفحات الموقع.<br /> وطبعاً كما تلاحظ فإن هناك فرقاً شاسعاً بين النتائج التي تم الحصول <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> ومردّه كما أسلفت إلى طريقة العمل والتصنيف المتبعة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المحركين. <br /> <hr align="CENTER" size="4" width="80%"> <br /> والآن لنبدأ حديثناً عن وسوم <font face="Times New Roman"><font size="4">****</font></font> فما هي هذه الوسوم ؟؟؟<br /> باختصار شديد، هي وسوم تدرج ضمن صفحات الويب، وبالتحديد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> أعلاها وضمن المقطع <font face="Times New Roman"><font size="4"><HEAD> ... <‎/HEAD> </font></font> وتستخدم لوصف الصفحة أو الموقع بشكل عام، <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> حيث المحتويات والكلمات الرئيسية أو المفتاحية والمؤلف وغيرها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المعلومات التي قد نعتبرها توثيقية. كما أنها تفيد <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عملية التصنيف التي تجرى <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> قبل محركات البحث. (ولاحظ أنّي قلت محركات البحث ولم أقل أدلة البحث) فالحقيقة أن محركات البحث مثل <font face="Times New Roman"><font size="4">Altavista, Hotbot, Infoseek </font></font> هي التي تستفيد فقط <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> هذه الوسوم وتلجأ إليها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> عملية تصنيف الموقع ولا تستفيد منها الأدلة. أي أن <font face="Times New Roman"><font size="4">Yahoo</font></font> لا يتعامل معها أبداً. ومع ذلك فإن نشرك لصفحاتك على الإنترنت دون وضع هذه الوسوم ضمنها يعتبر إغفالاً لجانب مهم <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> جوانب إنشاء المواقع على الويب. <b><u>ولكن ...</u></b> (عادة عندما تظهر "لكن" <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> منتصف الحديث، فإن هناك أخباراً غير سارة <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الطريق) لا تعتبر هذه الوسوم حلاً سحرياً لمسألة محركات البحث، صحيح أنها تزيد <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> إحتمالات إدراج موقعك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> هذه المحركات، وأنها تساعد المحركات على تصنيف صفحاتك بالطريقة التي تراها أنت مناسبة. لكن سيبقى أمامك خطوات أخرى لإكمال هذه المهمة. <br /> <hr align="CENTER" size="4" width="80%"> لقد حان الوقت للتّكلم بلغة <font face="Times New Roman"><font size="4">HTML... </font></font> وأبدأ بالقول إن الوسم <font face="Times New Roman"><font size="4"><****></font></font> هو وسم مفرد. وهو يأخذ الخصائص التالية: <br /> <dl> <br /> <dt><font face="Times New Roman"><font size="4">HTTP-EQUIV</font></font> </dt><dd>تعتبر هذه الخاصية مكافئةً للوسم <font face="Times New Roman"><font size="4"><HEAD></font></font> الذي يعرف الصفحة ككل. (والحقيقة أن اسمها يدل على ذلك) وبدون الدخول <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تفاصيل جانبية، نستطيع أن نقول أنها تحدد خصائص الصفحة ككل. وإذا كانت لديك ذاكرة قوية فسوف تدرك أننا قمنا بالفعل باستخدام هذه الوسوم مسبقاً!! وكان ذلك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدرس السابق عندما حددنا صفحة الترميز العربية التي سيتم عرض الصفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلالها وكان ذلك بالشكل التالي: <br /> <font face="Arial"><font size="2"> ‎<**** HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎ <br /> </font></font> <br /> </dd><dt><font face="Times New Roman"><font size="4">NAME</font></font> </dt><dd>نقوم <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> خلال هذه الخاصية بتحديد اسم (أو لنقل عنوان) وحدة البيانات التي نريد تعيين قيمها <br /> </dd><dt><font face="Times New Roman"><font size="4">CONTENT</font></font> </dt><dd>تحدد المحتويات أو البيانات التي نريد إسنادها للخاصيتين السابقتين </dd></dl> <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> واقع الأمر فإن لهذه الخصائص الكثير <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> القيم. لكنها بكل بساطة لا تعنينا <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> شيء، فمعظم هذه القيم توصف بأنها <font face="Times New Roman"><font size="4">Server Side</font></font> أي يتم التعامل معها على مستوى المزود وليس على مستوى جهاز المستخدم <font face="Times New Roman"><font size="4">Client Side</font></font> ولا تهم مصممي صفحات بسطاء مثلنا. وما يعنينا بالدرجة الأولى هي القيم التالية: <br /> <ul><li>مع الخاصية <font face="Times New Roman"><font size="4">HTTP-EQUIV...</font></font><br /> القيمة <font face="Times New Roman"><font size="4">Content-Type</font></font> والتي تعني نوعية المحتويات. وأذكرك مرة أخرى أننا تعاملنا معها مسبقاً ... ثم باستخدام الخاصية <font face="Times New Roman"><font size="4">Content</font></font> قمنا بتحديد طبيعة هذه المحتويات على أنها <font face="Times New Roman"><font size="4">text/html</font></font> أي نصوص <a href="http://www.hikm4.com/vb/tags.php?tag=%E1%DB%C9" > لغة </a> <font face="Times New Roman"><font size="4">HTML</font></font> وأن صفحة ترميزها هي <font face="Times New Roman"><font size="4">Windows-1256</font></font> ...ولن نحتاج أكثر <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> ذلك مع هذه الخاصية.</li> <li> مع الخاصية <font face="Times New Roman"><font size="4">NAME...</font></font> نستخدم <br /> <ul><li> القيمة <font face="Times New Roman"><font size="4">keywords</font></font> لتحديد الكلمات المفتاحية للصفحة. <br /> <font face="Arial"><font size="2">‎<**** NAME="keywords" ... >‎</font></font><br /> ثم نستخدم الخاصية <font face="Times New Roman"><font size="4">Content</font></font> لتحديد هذه الكلمات. وعلى سبيل المثال إليك الشيفرة التالية التي أستخدمها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> صفحات هذا الموقع <br /> <font face="Arial"><font size="2">‎<**** NAME="keywords"CONTENT="html,webpage design,psp,paint shop pro,arabic site">‎</font></font><br /> ولا ضرر <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> تكرار <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%DA%D6" > بعض </a> أو كل الكلمات المفتاحية لثلاث أو أربع مرات للتأكيد <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> <br /> <font face="Arial"><font size="2"> ‎<**** NAME="keywords"CONTENT="html,html,html,html, webpage design,psp,paint shop pro,arabic site">‎</font></font></li> <li> القيمة <font face="Times New Roman"><font size="4">description</font></font> لتوصيف الصفحة، وذلك بعبارات قصيرة تلخص محتويات الصفحة والهدف منها. <br /> <div align="left"><font face="Arial"><font size="2"> ‎<**** NAME="description" CONTENT="Html and Paint Shop Pro tutorials in Arabic,learning web page design in Arabic">‎</font></font> </div></li> <li> القيمة <font face="Times New Roman"><font size="4">author</font></font> لتوثيق اسم المؤلف أو صاحب الموقع <br /> <div align="left"><font face="Arial"><font size="2"> ‎<**** NAME="author" CONTENT="Abu Al-Abed">‎</font></font> </div></li> <li> القيمة <font face="Times New Roman"><font size="4">copyright</font></font> لسرد حقوق النشر الخاصة بالصفحة<br /> <div align="left"><font face="Arial"><font size="2"> ‎<**** NAME="copyright" CONTENT="....">‎</font></font> </div></li> </ul> </li> </ul> <hr align="CENTER" size="4" width="80%"> <br /> هذه هي وسوم <font face="Times New Roman"><font size="4">****</font></font> التي تهمنا. وسوف أقوم الآن بإجمالها لك <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> شيفرة واحدة مع باقي الوسوم <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> ترويسة الصفحة بحيث يمكنك قصها ولصقها <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> كل صفحة <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> صفحاتك. وعليك طبعا كتابة القيم والبيانات التي تريدها فيما بعد حسب عنوان صفحتك والكلمات المفتاحية والوصف <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%D0%ED" > الذي </a> تريده (لا تتوقع مني أن أقوم أيضاً بكتابه هذه القيم لك). كذلك لا تنس تحديد صفحة الترميز إن كانت مختلفة أو حذف الوسم الخاص بها إن كانت صفحتك باللغة الإنجليزية. <br /> <div align="left"><font face="Arial"><font size="2"><HEAD><br /> <TITLE> ... <‎/TITLE><br /> ‎<**** HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">‎<br /> ‎<**** NAME="keywords" CONTENT=" ... ">‎<br /> ‎<**** NAME="description" CONTENT=" ... ">‎<br /> ‎<**** NAME="author" CONTENT=" ... ">‎<br /> ‎<**** NAME="copyright" CONTENT=" ... ">‎<br /> <‎/HEAD><br /> </font></font></div> <hr align="CENTER" size="4" width="80%"> <br /> هل هذا يكفي؟ وأعني هل تكفي هذه الوسوم لتكون <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الأوائل دائماً على صفحات محركات البحث؟ كما أسلفت هناك دائماً جهود إضافية يجب عليك بذلها. وهذه المرة عليك التوجه إلى هذه المحركات والبحث عن الوصلات التشعبية الخاصة بإضافة المواقع الجديدة. <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">Altavista</font></font> ستجد أنها تسمى <font face="Times New Roman"><font size="4"><b><i>Add Page</i></b>.</font></font> وفي <font face="Times New Roman"><font size="4">Infoseek</font></font> و <font face="Times New Roman"><font size="4">Excite</font></font> و <font face="Times New Roman"><font size="4">HotBot</font></font> ستجدها <font face="Times New Roman"><font size="4"><i><b>Add URL</b></i></font></font> أما <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> <font face="Times New Roman"><font size="4">Yahoo</font></font> فهي <font face="Times New Roman"><font size="4"><b><i>How To Suggest a Site?</i></b></font></font> كذلك ستجد مثل هذه الوصلات <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> المواقع العربية وعادة تعرف بـِ <b><i>أضف موقعك.</i></b> <br /> على أية حال قم بالنقر <a href="http://www.hikm4.com/vb/tags.php?tag=%DA%E1%ED%E5%C7" > عليها </a> لكي تقودك إلى نموذج بسيط عليك ملؤه ببعض المعلومات عن موقعك (لا تخف فإن طريقة التعامل مع هذه النماذج هي أبسط مما تتصور). لكن لا تتوقع أن ترى موقعك وقد تمت إضافته <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> الدقائق التالية لهذه العملية، فهذا يحتاج <a href="http://www.hikm4.com/vb/tags.php?tag=%DD%ED" > في </a> معظم الأحوال إلى عدة أيام. <br /> أعرف أنك ستقول عن هذه العملية بأنها صعبة وشاقة... لذلك سوف أدلك على طريقة أسهل وأسرع بكثير. هناك <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%C7%E3%CC" > برامج </a> خاصة لإدراج المعلومات عن المواقع والصفحات بحيث تقوم بملء نموذج خاص لمرة واحدة فقط بكل ما تريده <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> معلومات ثم يقوم هذا <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%E4%C7%E3%CC" > البرنامج </a> بإرسالها إلى المئات <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> محركات وأدلة البحث... هكذا ببساطة وبدقائق معدودة. ومن هذه <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> <a href="http://www.hikm4.com/vb/tags.php?tag=%C8%D1%E4%C7%E3%CC" > برنامج </a> <font face="Times New Roman"><font size="4">AddWeb</font></font> وبرنامج <font face="Times New Roman"><font size="4">Submission Wizard</font></font> لكن <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المؤسف أن النسخ المشتركة لهذه <a href="http://www.hikm4.com/vb/tags.php?tag=%C7%E1%C8%D1%C7%E3%CC" > البرامج </a> أو مثيلاتها، تكون محدودة الفعالية أي تتعامل مع عدد محدود <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> المحركات والأدلة وليس كلها إلا إذا قمت بشراء هذه البرامج. ...لكن لا بأس <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> تجربتها على الإطلاق. <br /> وأخيراً ما رأيك بارسال عنوان موقعك إليّ وسوف أقوم بكل سرور بإضافته إلى صفحة الوصلات التشعبية الخاصة بهذا الموقع. <br /> <form method="POST" action="mailto:yahya@palnet. com" enctype="application/x-www-form-urlencoded"> <center> <table dir="rtl" border="0"> <tbody><tr> <td>اسم الموقع</td> <td><input name="NAME" size="50" type="TEXT"></td> </tr> <tr> <td>العنوان</td> <td><input name="URL" size="50" type="TEXT"></td> </tr> </tbody></table> </center> <center> </center> <input type="hidden" value="guest" name="securitytoken" /></form> نكون الآن قد وصلنا إلى نهاية هذا الدرس، مع أصدق تمنياتي بأن يكون موقعك دائما على الصفحة الأولى لمحركات البحث. <br /> <br /> <br /> <br /> جميع هذه الدروس تم تجميعها <a href="http://www.hikm4.com/vb/tags.php?tag=%E3%E4" > من </a> الموقع التالي<br /> <a href="http://www.khayma.com/hpinarabic/htmintro.html" target="_blank">http://www.khayma.com/hpinarabic/htmintro.html</a><br /> <br /> </blockquote></blockquote> </div></blockquote> </blockquote></blockquote></blockquote></div><p> <!-- www.hikm4.com --> <div align="center"> <p align="center" class="smallfont"><b>المصدر : <a href="showthread.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&t=8438"> http://www.hikm4.com/vb/showthread.php?t=8438</a></b></p> <!-- www.hikm4.com --> </div> <div class="clr"></div> <div class="clr"></div> <table border="0" width="100%" cellspacing="0" cellpadding="0" dir="rtl" style="margin-top:12px;"> <tr> <td style="width:30%" align="right"> <table border="0" width="170px" cellspacing="0" cellpadding="0" align="right"> </table> </td> <td style="width:80px" align="right"><iframe src="http://www.facebook.com/widgets/like.php?href=http://www.hikm4.com/vb/showthread.phps=c0ea1fdc0d465bd7c8ad606be877ee63&?p=24692&show_faces=false}&layout=button_count&show_faces=true&width=100&action=like&font=tahoma&align=right;" scrolling="no" frameborder="0" allowTransparency="true" style="border:medium none; overflow:hidden;no-repeat right top; float:right; width:100px; height:22px" name="facebook" align="top"></iframe></td> <td style="width:80px" align="right"><g:plusone size="small"></g:plusone></td> <td style="width:80px" align="right"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td> <td style="width:60%"> <div align="left" style="margin:0;padding:0;"> </div> </td> </tr> </table> </td> </tr> </table> </div> <!-- / developed by : Tar3q.com --> </div> </div> </div> </div> <!-- / close content container --> <!-- / post #24692 --><div id="lastpost"></div></div> <!-- start content table --> <!-- open content container --> <div align="center"> <div class="page" style="width:100%; text-align:right"> <div style="padding:0px" align="right"> <!-- / start content table --> <!-- controls below postbits --> <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-top:2px"> <tr valign="top"> </tr> </table> <!-- / controls below postbits --> <br /> <!-- thread tags --> <table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center"> <tr> <td class="tcat"> <a name="taglist"></a> <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63">العلامات</a> </td> </tr> <tr> <td class="alt1 smallfont" id="tag_list_cell"><a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=2010">2010</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=2011">2011</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E1%E1%E3%E4%D4%CF">للمنشد</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E1%E1%D4%ED%CE">للشيخ</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E1%E1%E4%C7%D3">للناس</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=activated">activated</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=adobe">adobe</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E3%CA%D1%CC%E3%C9">مترجمة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E3%CD%E3%CF">محمد</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C3%CF%E6%C7%CA">أدوات</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E1%ED%E6%E4%DF%D3">ليونكس</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=alive">alive</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=all">all</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E3%D1%F0">مرً</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=antivirus">antivirus</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E1%DA%C8%C9">لعبة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E1%DA%C8%E5">لعبه</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=august">august</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E3%E4">من</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C3%E4%D4%E6%CF%C9">أنشودة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=build">build</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%E1%E5">الله</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%D0%ED">الذي</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%C8%E1%C7%DF">البلاك</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%C8%D1%C7%E3%CC">البرامج</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%C8%D1%E4%C7%E3%CC">البرنامج</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%CA%D5%E3%ED%E3">التصميم</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%EC">الى</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%CD%E3%C7%ED%C9">الحماية</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%CD%E1%DE%C9">الحلقة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%CC%E6%C7%E1">الجوال</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%D4%ED%CE">الشيخ</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%DA%C7%E1%E3">العالم</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%DA%C7%C8">العاب</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%DF%E3%C8%ED%E6%CA%D1">الكمبيوتر</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E1%DF%CA%C8">الكتب</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%CD%E3%CF">احمد</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%D3%E1%C7%E3%EC">اسلامى</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%D3%E1%C7%E3%ED%C9">اسلامية</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%D3%CA%E3%C7%DA">استماع</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%D3%CA%E3%DA">استمع</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=converter">converter</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=crack">crack</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=cs5">cs5</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%E4%D4%E6%CF%C9">انشودة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C7%DF%C8%D1">اكبر</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=download">download</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=Dvd">Dvd</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=edition">edition</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CA%CD%E3%ED%E1">تحميل</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C8%CD%CC%E3">بحجم</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CA%CF%D1%ED">تدري</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C8%D1%C7%E3%CC">برامج</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=enterprise">enterprise</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C8%D1%E4%C7%E3%CC">برنامج</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CA%D5%E3%ED%E3">تصميم</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C8%D5%ED%DB%C9">بصيغة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C8%DA%D6">بعض</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=explorer">explorer</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CA%DD%D3%ED%D1">تفسير</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%C8%E4%D1">بنر</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CA%E4%D2%ED%E1">تنزيل</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=facebook">facebook</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=final">final</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=firefox">firefox</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=for">for</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=full">full</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=google">google</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=hotfile">hotfile</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=http">http</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CD%E3%E1">حمل</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CD%E3%C7%ED%C9">حماية</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CD%E3%C7%ED%E5">حمايه</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CC%CF%C7">جدا</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CC%CF%ED%CF">جديد</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CC%CF%ED%CF%C9">جديدة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=incl">incl</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=Internet">Internet</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CD%D5%D1%ED%C7">حصريا</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%CC%E6%C7%E1">جوال</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=kaspersky">kaspersky</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=key">key</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=keygen">keygen</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=keys">keys</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=live">live</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=mac">mac</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=macosx">macosx</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=manager">manager</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=megaupload">megaupload</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=Microsoft">Microsoft</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=mozilla">mozilla</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=mp3">mp3</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=multi">multi</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=multilanguage">multilanguage</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=multilingual">multilingual</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=Office">Office</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%D5%CD%C9+.%E3%E6%D6%E6%DA+.%C7%CC%DA%E1+70..+%C3%E1%DD+.%E3%E1%DF+.%ED%D5%E1%E6%E4+.%DA%E1%ED%DF+.%E6%C5%D0%C7+.%E3%CA+.%CA%E3%E6%CA+.%D4%E5%ED%CF%C7">صحة .موضوع .اجعل 70.. ألف .ملك .يصلون .عليك .وإذا .مت .تموت .شهيدا</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=opera">opera</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=os">os</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%D4%E5%D1">شهر</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=programs">programs</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=twitter">twitter</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%DA%E1%C7%DE%C9">علاقة</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%DA%E1%ED%E5%C7">عليها</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=video">video</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=windows">windows</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=www.hikm4.com">www.hikm4.com</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%DD%ED">في</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=youtube">youtube</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%DD%E5%E1">فهل</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E6%E1%DF%E4%E5">ولكنه</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E6%ED%E4%CF%E6%D2">ويندوز</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%E4%E6%DF%ED%C7">نوكيا</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%DF%E3%C8%ED%E6%CA%D1">كمبيوتر</a>, <a href="tags.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&tag=%DF%CA%C7%C8">كتاب</a> <img src="tar3q/misc/11x11progress.gif" id="tag_form_progress" class="inlineimg" style="display:none" alt="" /></td> </tr> </table> <script type="text/javascript" src="clientscript/vbulletin_ajax_taglist.js?v=385"></script> <script type="text/javascript" src="clientscript/vbulletin_ajax_tagsugg.js?v=385"></script> <!-- / thread tags --> <!-- quick reply --> <br /> <script type="text/javascript" src="clientscript/vbulletin_quick_reply.js?v=385"></script> <form action="newreply.php?do=postreply&t=8438" method="post" name="vbform" onsubmit="return qr_prepare_submit(this, 1);" id="qrform"> <table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center"> <thead> <tr> </tr> </thead> <tbody id="qr_error_tbody" style="display:none"> <tr> <td class="thead">خطأ عند الإرسال</td> </tr> <tr> <td class="alt1" id="qr_error_td"></td> </tr> <tr> <td class="tfoot" align="center"><span class="smallfont"><a href="#" onclick="return qr_hide_errors()">نجحت</a></span></td> </tr> </tbody> <tbody id="collapseobj_quickreply" style=""> <tr> <td class="panelsurround" align="center"> <div class="panel"> <div align="right" style="max-width:90%; width:auto !important; width:90%"> <div id="" class="vBulletin_editor"></div> </div> <div style="margin-top:6px"> <input type="hidden" name="fromquickreply" value="1" /> <input type="hidden" name="s" value="c0ea1fdc0d465bd7c8ad606be877ee63" /> <input type="hidden" name="securitytoken" value="guest" /> <input type="hidden" name="do" value="postreply" /> <input type="hidden" name="t" value="8438" id="qr_threadid" /> <input type="hidden" name="p" value="" id="qr_postid" /> <input type="hidden" name="specifiedpost" value="0" id="qr_specifiedpost" /> <input type="hidden" name="parseurl" value="1" /> <input type="hidden" name="loggedinuser" value="0" /> <input type="submit" class="button" value="أضغط هنا لإضافة رد على الموضوع" accesskey="x" title="أضغط هنا للمشاركة في الموضوع " name="preview" tabindex="3" id="qr_preview" onclick="clickedelm = this.value" /> </div> <table width="90%" cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td><p class="font_xx">للحصول على عضوية في الموقع مجاناً ،، اضغط على زر التسجيل الآن وشكراً</p></td> <td><p class="SignUpButton" style="text-align:center;margin:5px auto;float: none;"><a style="color:#fff" title="حتى تتمكن من مشاهدة هذه الصفحة يجب أن تكون عضواً في الموقع !!" href="register.php?s=c0ea1fdc0d465bd7c8ad606be877ee63&do=signup">التسجيل الآن !</a></p></td> </tr> </table> <div align="center" id="qr_posting_msg" style="display:none; margin-top:3px"> <img style="vertical-align: middle;" src="tar3q/misc/progress.gif" alt="اضافة الرد السريع إلى المشاركة قيد التنفيذ - يرجى الإنتظار..." /> <strong>اضافة الرد السريع إلى المشاركة قيد التنفيذ - يرجى الإنتظار...</strong> </div> </td> </tr> </tbody> </table> </form> <script type="text/javascript"> <!-- // initialize quick reply qr_init(); //--> </script> <!-- / quick reply --> <!-- show latest active threads - Develop By hikm4.com --> <br /> <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center"> <tbody><tr><td class="tcat"> <a style="float:left; color:#FFCC33; text-decoration:none" href="#top" onclick="return toggle_collapse('forumhome_external')"></a> <b> <a style="float:left" href="#top" onclick="return toggle_collapse('forumhome_external')"> <font size="4" color="#800080"><img id="collapseimg_forumhome_external" src="tar3q/buttons/collapse_tcat.gif" alt="" border="0" /></font></a><font size="4"><font color="#800080"> </font> </font></b> <a href="forumdisplay.php?f=7"><font color="#FFFFFF">جديد الساحة الأولى</font></a><font color="#FFFFFF"> </font> </td></tr></tbody> <tbody id="collapseobj_forumhome_external" style=""> <tr><td class="alt1" width="100%" valign="top"> <div class="smallfont"> <script type="text/javascript" src="external.php?forumids=7,-1&type=js"></script> <script language="" type="text/javascript"> <!-- for (var x in threads) { document.writeln("<a href=\"showthread.php?t="+threads[x].threadid+"&goto=newpost\"><img class=\"inlineimg\" src=\"tar3q/buttons/firstnew.gif\" alt=\"\" border=\"0\" /></a> <a href=\"showthread.php?t="+threads[x].threadid+"\">"+threads[x].title+"</a> <br />"); } //--> </script> </div> </td> </tr></tbody> </table> <!-- / show latest active threads - Develop By hikm4.com--> <!-- forum rules and admin links --> <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr valign="bottom"> <td class="smallfont" align="left"> <table cellpadding="0" cellspacing="0" border="0"> </table> </td> </tr> </table> <!-- /forum rules and admin links --> <br /> </div> </div> </div> <!-- / close content container --> <!-- /content area table --> </div></td></tr></table> <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="background-image:url(tar3q/misc/footbg.jpg)"><tr><td align="left" valign="top"><a href="#top"><img src="tar3q/misc/footleft.jpg" border="0" alt=""/></a></td><td align="right" valign="bottom"><img src="tar3q/misc/footright.jpg" alt="" /></td></tr></table> <div id="footer"> <div class="container"> <div class="auxlinks"> <ul class="col3 fav"> <li class="first last"> <p><strong>تنويه</strong></p></li> <li><b><font size="4"> <a href="./">الموقع بإشراف المكتب التعاوني للدعوة والإرشاد وتوعية الجاليات بالفقارة بمحافظة الدوادمي برئاسة الشيخ عبدالله بن رجا الروقي</a></font></b></li></ul> <ul class="col3 fav"> <li class="first last"> <p><strong>مواقع مفيدة</strong></p></li> <li class="first"> <a target="_blank" href="http://www.yesquran.com" title="قرآن يتلى آناء الليل و اطراف النهار">القرآن الكريم بأكثر من 20 لغةً</a></li> <li><a target="_blank" href="http://www.binbaz.org.sa">موقع الشيخ عبد العزيز بن باز</a></li> <li><a target="_blank" href="http://www.ih4all.com">الإستضافة الإسلامية</a></li> <li><a target="_blank" href="http://tabalkhater.barzan.ws/">مجلة طاب الخاطر</a></li> <li> <a target="_blank" title="أكبر موقع للبحث في الأحاديث" href="http://www.dorar.net">الدرر السنية</a></li> <li><a target="_blank" href="http://saaid.net">صيد الفوائد</a></li> </ul> <ul class="col3 siteinfo" dir="ltr"> <li class="first last"><p><strong style="font:normal 142% verdana;">About This Website</strong></p></li> <li class="first last"> <div class="validation"> <a onclick="window.open(this.href,'_blank');return false;" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hikm4.com%2Fvb%2F" rel="nofollow"><img src="tar3q/misc/icon_xhtml.png" alt="XHTML Validated" /></a> <a onclick="window.open(this.href,'_blank');return false;" href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.hikm4.com/vb/tar3q/css.css" rel="nofollow"><img src="tar3q/misc/icon_css.png" alt="CSS Validated" /></a> <p style="text-align:left;">This website was developed by <a title="Tar3Q" onclick="window.open(this.href,'_blank');return false;" href="http://www.tar3q.com">Tar3Q</a> <br />using PHP, XHTML, CSS and JavaScript<br /> Powered by vBulletin©<br />Hosting by <a title="Hosting by AraServ" onclick="window.open(this.href,'_blank');return false;" href="http://araserv.com">AraServ</a><br /><a target="_self" href="archive/index.php">نسخة الجوال</a> ,<span lang="en-us"> <a href="external.php?type=RSS2"> RSS</a></span> , <a href="sitemap.html">sitemap</a></p> </div> </li> </ul> </div> </div> </div> <script type="text/javascript"> <!-- // Main vBulletin Javascript Initialization vBulletin_init(); //--> </script> <script type="text/javascript"> <!-- $(document).ready(function() { $("#topnav li").prepend("<span><\/span>"); $("#topnav li").each(function() { var linkText = $(this).find("a").html(); $(this).find("span").show().html(linkText); }); $("#topnav li").hover(function() { $(this).find("span").stop().animate({marginTop: "-40" }, 250); } , function() { $(this).find("span").stop().animate({marginTop: "0" }, 250); }); }); // --> </script> <script type="text/javascript"> <!-- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-17036311-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); // --> </script> <script type="text/javascript"> <!-- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-17036311-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); // --> </script> </body> </html>