الدليل الشامل الى لغة html

achraf.mouni

  • Hero Member
  • *****
    • مشاركة: 2439
    • مشاهدة الملف الشخصي
    • البريد الالكتروني
في: كانون الأول 31, 2008, 10:28:09 صباحاً
     مقدمة في لغة      HTML      
 
إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار  لـ Hyper Text Markup  Language).
وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة  الأخرى كلغة C
فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام  هذه الجمل يجب تضمين شيفرات
من لغات أخرى كـ Java,  XXXXXXXXXX, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به
Compiler . وهي غير مرتبطة  بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح
الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً،  وسهلة الفهم والتعلم
ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة  فيها.
بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب  الأفكار
تتكون مفردات لغة Html  من شيفرات تسمى TAGS أي الوسوم
وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى  اليمين) :-
فعلى سبيل المثال الوسم يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:
Text  <‎/B>
وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم  نهاية السطر

أو قد  تستخدم بكلتا الحالتين مثل وسم الفقرة

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

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

والآن... لنبدأ
الدرس الاول
الاساسيات
أهلاً وسهلاً بك إلى الدرس الأول من دروس HTML. سوف أقوم في هذا الدرس بسرد الوسوم  الأساسية لصفحة الويب
ومناقشتها معك واحداً تلو الآخر. لنصل في النهاية إلى  إنشاء صفحة ويب بسيطة.
لنأخذ الوسوم التالية:
    وسم البداية وسم النهاية   <‎/HTML>   <‎/HEAD>  </span></span> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><‎/TITLE></span></span>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY></span></span> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><‎/BODY></span></span> <div align="center">ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم  البداية، والآخر وسم النهاية</div> <div align="center"> ويتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي،  فهو يعطي فكرة عن تركيب ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Html</span></span> </div> <div align="center"><img src="http://www.khayma.com/hpinarabic/images/htsketsh.gif" alt="" class="bbc_img" /></div> <div align="center"><span style="font-family: Wingdings;" class="bbc_font"><span style="font-size: 2em;" class="bbc_size">E</span></span> إذن فملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Html</span></span> يبدأ دائماً بالوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><HTML></span></span> وينتهي بالوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><‎/HTML>.</span></span> لا تنسى ذلك! </div> <div align="center">أما الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><HEAD></span></span> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة  بتعريف الصفحة.</div> <div align="center">كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان  بدوره يحتاج لأن يوضع بين الوسمين: <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TITLE> … <‎/TITLE></span></span></div> <div align="center">وبالطبع يجب كتابة الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><‎/HEAD></span></span> لكي ننهي هذا المقطع. </div> <div align="center">نأتي إلى الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY></span></span> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى  إدراج الصور </div> <div align="center">والجداول وباقي محتويات الصفحة.</div> <div align="center"> وهو أيضاً يحتاج إلى وسم الإنهاء <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><‎/BODY></span></span> </div> <div align="center">ما رأيك لو نبدأ بتطبيق هذه المعلومات بصورة عمليه؟ هيا…  قم بفتح برنامج المفكرة واكتب ما يلي</div> <div align="center"><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> </div> <div align="center"> والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره</div> <div align="center">ولا تنسى أن الامتداد المستخدم في أسماء ملفات <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> هو <em><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">htm.</span></span></em> أو <em><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">html.</span></span></em></div> <div align="center">مثلاً أنا اخترت الاسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎1st_file.htm</span></span> ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص </div> <div align="center">الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها  للعرض</div> <div align="center">أو التحديث وليكن هذا المجلد مثلاً بالاسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">C:\htmfiles</span></span> (أو بأي اسم يحلو لك). </div> <div align="center">حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل  متصفح الإنترنت الذي تستخدمه</div> <div align="center"> فإذا كان <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Netscape  Navigator</span></span> اختر الأمر <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Open  File…</span></span> من قائمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">File.</span></span> أ</div> <div align="center">ما في <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">MS Internet  Explorer</span></span> فاختر الأمر <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Open</span></span></div> <div align="center">من قائمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">File.</span></span> ثم حدد المسار الذي يوجد به الملف. أنا شخصياً قمت بتحديد  المسار التالي</div> <div align="center"><span style="font-family: Times New Roman;" class="bbc_font">C:\htmfiles\1st_file.htm</span></div> <div align="center">وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين  الملف. وهذا ما حصلت عليه:</div> <div align="center"><img src="http://www.khayma.com/hpinarabic/images/webpage1.gif" alt="" class="bbc_img" /></div> <div align="center">وماذا عنك؟ هل حصلت على نفس النتيجة؟ إذن مبروك <span style="font-family: Wingdings;" class="bbc_font"><span style="font-size: 2em;" class="bbc_size">J</span></span> لقد قمت بإنشاء أول صفحة ويب خاصة بك</div> <div align="center">وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة  صفحات الويب: </div> <div align="center"> </div> <div align="center">لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">UPPERCASE</span></span> أو الأحرف الصغيرة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">lowercase</span></span></div> <div align="center">إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو  إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><em>Enter</em>)</span></span> </div> <div align="center">التي تجدها هذه المتصفحات في ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Html.</span></span> وبعبارة أخرى فإن باستطاعتك كتابة ملفك  السابق بالشكل التالي: </div> <div align="center"> </div> <div align="center"><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>  </span></span></div> <div align="center">أو حتى بهذا الشكل: </div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div align="center"><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></div>[/SIZE][/FONT] <div align="center">وفي كل الحالات ستحصل على نفس النتيجة. وإذا كنت من تلك  النوعية من الناس </div> <div align="center">التي لا تصدق كل ما يقال… تستطيع أن تجرب ذلك بنفسك!!! هيا  جرب.</div> <div align="center"> </div> <div align="center">لكن هذا لا يعني أن الفقرة المكونة مثلاً من عشرة أسطر  ستمتد إلى عدة أمتار بعرض الشاشة. كلا بالطبع </div> <div align="center">لأن المتصفح سيقوم بعمل التفاف تلقائي لها بحسب عرض  الشاشة، مهما كان مقدار هذا العرض. </div> <div align="center"> </div> <div align="center">والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب  في كل سطر وكيف يمكن تحديد نهاية </div> <div align="center">الفقرة وبداية الفقرة التي تليها؟ سؤال وجيه!!! والإجابة  عليه هي: </div> <div align="center">سوف نستخدم الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BR></span></span> لتحديد النهاية للسطر. والبدء بسطر جديد </div> <div align="center">(لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية). </div> <div align="center">ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل  التالي </div>  <div align="center"><HTML><br /><HEAD><br /><TITLE> <br />This  is a test Webpage<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br /></div> <div align="center">Wow, <span style="color: #ff0000;" class="bbc_color"><BR></span> I'm writing  my <span style="color: #ff0000;" class="bbc_color"><BR>‎<br /></span>first  webpage<br /><‎/BODY><br /><‎/HTML> </div> <div align="center"><img src="http://www.khayma.com/hpinarabic/images/webpage2.gif" alt="" class="bbc_img" /> </div> <div align="center">وهناك أيضا الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><P></span></span> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي  السطر أو الفقرة ويبدأ بسطر جديد لكن </div> <div align="center">مع إضافة سطر إضافي فارغ بين الفقرات.</div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><HTML><br /><HEAD><br /><TITLE> <br />This is a test  Webpage<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />Wow, <span style="color: #ff0000;" class="bbc_color"><P></span> I'm writing my <span style="color: #ff0000;" class="bbc_color"><P>‎</span><br />first  webpage<br /><‎/BODY><br /><‎/HTML></span></span></div> <img src="http://www.khayma.com/hpinarabic/images/webpage3.gif" alt="" class="bbc_img" />   أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا  باستخدام الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎ ‎</span></span>  (والأحرف هي اختصار للعبارة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Non  Breakable Space).</span></span> وإذا أردت إدخال عدة فراغات بين نص  وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب.  كما يجب عليك التقيد بالأحرف الصغيرة هنا.<br />  إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي:   <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><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 /></span></span><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><‎/HTML>  </span></span></div> <div align="center"><img src="http://www.khayma.com/hpinarabic/images/webpage4.gif" alt="" class="bbc_img" /> <br /></div></div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_187911"> </div> <div class="smalltext reportlinks"> </div> </div> <br class="clear"> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg187912"></a> <div class="windowbg2"> <span class="topslice"><span></span></span> <div class="post_wrapper phoneVflow"> <div class="poster"> <div class="avatar"> <a href="#"> <img src="https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar.png" class="avatar sr_switchable" width="110" height="110"/> </a> </div> <h4> <a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722" title="مشاهدة الملف الشخصي لـ achraf.mouni">achraf.mouni</a> </h4> <ul class="reset smalltext" id="msg_187912_extra_info"> <li class="postgroup" >Hero Member</li> <li class="stars"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /></li><ul class="greezeInsider"> <li class="postcount"><i class="fas fa-comments"></i> <strong class="sr_hidden">مشاركة:</strong> 2439</li></ul> <li class="profile"> <ul> <li><a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/icons/profile_sm.gif" alt="مشاهدة الملف الشخصي" title="مشاهدة الملف الشخصي" class="tooltip"/></a></li> <li><a href="https://www.ingdz.net/forum/index.php?action=emailuser;sa=email;msg=187912" rel="nofollow"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/email_sm.gif" alt="البريد الالكتروني" title="البريد الالكتروني" class="tooltip"/></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden phoneVflow"> <div class="keyinfo"> <h5 id="subject_187912" style="display:none;"> <a href="https://www.ingdz.net/forum/index.php?topic=27040.msg187912#msg187912" rel="nofollow">الدليل الشامل الى لغة html</a> </h5> <div class="time_posted"><strong>رد #1 في:</strong> كانون الأول 31, 2008, 10:30:26 صباحاً </div><div id="msg_187912_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_187912"><div align="center"><strong><span style="font-size: 2.65em;" class="bbc_size">الدرس الثاني</span></strong></div> <div align="center"><strong><span style="font-size: 2.65em;" class="bbc_size">الالوان</span></strong></div> <div align="center"> <br /></div> <div align="center">أهلاً وسهلاً بك إلى الدرس الثاني من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> سوف نقوم في هذا الدرس بالتعرف على  الخصائص التي </div> <div align="center"> يمكن إضافتها إلى الوسم <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY></span></span> من أجل التحكم بالشكل العام للصفحة، وخصوصا فيما يتعلق  بالألوان</div> <div align="center">طبعاً أنت لا زلت تذكر الصفحة التي قمنا بكتابتها في الدرس  الأول. صفحة بسيطة بخلفية رمادية وخط صغير نسبياً لونه أسود.</div> <div align="center">وهذه هي الإعدادات الإفتراضية التي يعتمدها المتصفح عندما  لا نقوم نحن بتحديد إعدادات أخرى.</div> <div align="center">(ربما تقول: أهذه صفحة إنترنت! أين الألوان والرسومات  والخطوط الجميلة والتنسيقات التي نراها </div> <div align="center">في صفحات الإنترنت؟ معك حق لكن مهلاً فما زلنا في  البداية). </div> <div align="center">سوف نستمر باستخدام صفحتنا هذه لتوضيح أمثلة هذا الدرس  أيضاً، لكن لن أقوم بتكرار كتابة وسوم البداية</div> <div align="center">طالما أن عملنا يتركز في الجزء المخصص لمحتويات الصفحة  نفسها أي ضمن الوسمين <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY> ...  <‎/BODY>.</span></span><br /></div> <div align="center">إذن لنبدأ العمل!</div> <div align="center"> </div> <div align="center">نطلق كلمة خاصية <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">(Attribute)</span></span> على التعابير التي تضاف إلى الوسوم، من أجل تحديد  الكيفية أو الشكل الذي تعمل بها هذه الوسوم.</div> <div align="center">وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي  يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل</div> <div style="text-align: right;">تأمل الشيفرة التالية: </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<BODY  BGCOLOR=FFFFFF">‎<br />...<br /><‎/BODY></span></span></div> <div align="center">لقد قمت بإضافة الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BGCOLOR</span></span> إلى الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY></span></span> ، وهي تقوم بتحديد لون الخلفية للصفحة</div> <div align="center"> أما <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FFFFFF</span></span>  فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين  إشارتي " " ) </div> <div align="center">ولو أردت تمثيل اللون الأسود لكتبت الرمز <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">000000.</span></span> أو الرمز <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">6699CC</span></span> للون الأزرق الفاتح......</div> <div align="center">فمن أين جاءت هذه القيم، وكيف؟... تابع القراءة وسوف  تعرف </div> <div align="center"> </div> <div align="center"><span style="font-size: 2.65em;" class="bbc_size"><strong>القليل عن  الألوان...</strong> </span></div>  <br /> <div align="center">تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة  التالية:- </div> <div align="center"><img src="http://www.khayma.com/hpinarabic/images/rrggbb.gif" alt="" class="bbc_img" /></div> <div align="center">هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها  يوجد 256 درجة لونية ويعبر </div> <div align="center">عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه  الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى. </div>     <span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">* إن أي لون هو مزيج -وبنسبة  معينة من الدرجات- من هذه الألوان الثلاثة *  </span></span> <div align="center">فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون  الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة </div> <div align="center"> من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255  للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق</div> <div align="center"> وهكذا بنفس الطريقة يتم تكوين باقي الألوان</div> <div align="center">وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد  الألوان </div> <div align="center">التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو  16777216 بالضبط. </div> <div align="center"> </div> <div align="center">حسنا، لكن من أي جاءت الرموز <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FFFFFF</span></span> والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام</div> <div align="center">مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16  ويعبر عنه باستخدام الأرقام العادية </div> <div align="center">من 0 إلى 9 والرموز <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">A,B,C,D,E,F</span></span> ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FF</span></span> بالنظام السداس عشري</div> <div align="center">إذن فالرقم السداس عشري <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FF</span></span> على اليسار يمثل الدرجة 255 للون الأحمر. والرقم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FF </span></span>في </div> <div align="center">الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FF</span></span> على اليمين يمثل الدرجة 255 من اللون  الأزرق</div> <div align="center">وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم  السداس عشري</div> <div align="center"> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">6699CC</span></span> أما  اللون الأسود فرقمه هو <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">000000</span></span></div> <div align="center">وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس  عشري</div> <div align="center"> </div> <div align="center">      ABCDEF   FFFF00    FEDCBA   336699    773466   112233    FF1122   666666    0033FF   663333    AABBAA   00FF00    800800   FF6600    008008   993366    020769   123456    111111   654321</div> <div align="center">أما كيف تعرف الرمز الخاص باللون الذي تريد اختياره، فيوجد  برامج خاصة تستطيع من خلالها دمج</div> <div align="center">الألوان الثلاثة بنسب مختلفة، ومن ثم يقوم البرنامج بتوليد  الرمز السداس عشري المكافئ للون الناتج</div> <div align="center">    <span style="font-size: 1.45em;" class="bbc_size">ملاحظة مهمة:<br />بعض المتصفحات لا تتعرف على رموز  الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها  دائماً.<br /></span></div> <div align="center">وبالنسبة لبعض الألوان الأساسية والدارجة، من الممكن  استخدام أسماء هذه الألوان مباشرة بدلاً من</div> <div align="center"> الأرقام السداس عشرية. وهذا جدول يوضح هذه الألوان  ومسمياتها: </div> <div align="center">    <br />Black   White    Red   Green    Marron   Purple    Navy   Blue    Teal   Lime    Gray   Silver    Olive   Aqua    Fuchsia   Yellow</div> <div align="center">ونعود إلى الوسوم و خصائصها ... </div> <div align="center"> </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<BODY BGCOLOR="#FFFFFF"  BACKGROUND="image.jpg">‎<br />...<br /><‎/BODY></span></span></div> <div align="center">تقوم الخاصية <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BACKGROUND </span></span>بتحديد صورة كخلفية (ورق جدران) للصفحة وقد استخدمت  الصورة التالية:</div> <div align="center"><img src="http://www.khayma.com/hpinarabic/images/image.jpg" alt="" class="bbc_img" /></div> <div align="center">والمسماة <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">image.jpg</span></span> في صفحتي وكانت هذه النتيجة </div> <div align="center"><img src="http://www.khayma.com/hpinarabic/images/webback.gif" alt="" class="bbc_img" /></div> <div align="center">تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب  وأنها أصبحت تغطي كل الشاشة.</div> <div align="center"> بحيث حجبت أيضاً اللون الأبيض الذي حددناه كلون الخلفية  (من خلال الخاصية <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BGCOLOR)</span></span> </div> <div align="center">والحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة  ما كخلفية.</div> <div align="center"> ومع ذلك يفضل تحديده إحتياطاً خاصة وأن بعض المتصفحات  القديمة توصف </div> <div align="center">بأنها متصفحات نصية <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Text-Based Browsers</span></span> (أي ليس بإمكانها عرض الصور).</div> <div align="center"> أو ربما هناك بعض المستخدمين الذين قاموا بإلغاء خيار عرض  الصور تلقائياً</div> <div align="center"> من متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة بعض  الألوان إن لم يستطيعوا مشاهدة الصور. </div> <div align="center">إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً  كخلفيات للصفحة، </div> <div align="center">والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في </div> <div align="center">وضع التجانب مما يعطي الانطباع بأنها صورة كبيرة. وإليك  بعض الأمثلة:<br /></div> <div align="center"><a href="http://"http://www.khayma.com/hpinarabic/examples/bground1.html" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/back1.jpg" alt="" class="bbc_img" /></a></div>  <div align="center"><a href="http://www.khayma.com/hpinarabic/examples/bground2.html" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/back2.jpg" alt="" class="bbc_img" /></a></div>  <div align="center"><a href="http://www.khayma.com/hpinarabic/examples/bground3.html" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/back3.jpg" alt="" class="bbc_img" /></a></div>  <div align="center"><a href="http://www.khayma.com/hpinarabic/examples/bground4.html" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/back4.jpg" alt="" class="bbc_img" /></a></div>  <br /> <div align="center"> </div> <div align="center">ولنكمل مع باقي الخصائص في وسم <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY>:</span></span> ربما لاحظت خلال </div> <div align="center">استخدامك للإنترنت أن معظم الوصلات التشعبية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">(Links)</span></span> التي تنقر عليها لتنقلك إلى صفحات  أو</div> <div align="center"> مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرق،  وأن الوصلات التي قمت بزيارتها فعلاً قد تحو</div> <div align="center">ل لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية  التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك </div> <div align="center">وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون  أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء</div> <div align="center"> هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟  <br />إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص: </div>     <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎TEXT=#rrggbb"‎</span></span>  <span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">تحديد لون النص  الأساسي للصفحة </span></span>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎LINK="#rrggbb"‎</span></span>  <span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">تحديد لون الوصلات  التشعبية</span></span>   <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎VLINK="#rrggbb"‎</span></span>  <span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">تحديد لون الوصلات  التشعبية التي تمت زيارتها visited links</span></span>   <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎ALINK="#rrggbb"‎</span></span>  <span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">تحديد لون الوصلة  التشعبية الفعالة أي عندما يتم النقر عليها active links</span></span>   <div align="center">والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف  أكتب الرموز الخاصة بالألوان بنفس تلك الألوان </div> <div align="center">التي تمثلها. وألفت نظرك إلى أنه لا أهمية للترتيب في  كتابة هذه الخصائص داخل العبارة. </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<BODY  BACKGROUND="backimag.jpg"‎<br />BGCOLOR="<span style="color: #ffff00;" class="bbc_color">#ffff00</span>"‎<br />TEXT="<span style="color: #000066;" class="bbc_color">#000066</span>"‎<br />LINK="<span style="color: #00ff00;" class="bbc_color">#00ff00</span>"‎<br />VLINK="<span style="color: #ff0000;" class="bbc_color">#ff0000</span>"‎<br />ALINK="<span style="color: #999999;" class="bbc_color">#999999</span>">‎<br /></span></span></div> <div align="center">حاول أن تحللها! هل استنتجت أنني قد حددت الصورة <span style="font-family: times new roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">backimag.jpg</span></span> كخلفية للصفحة؟ وأنني اخترت  اللون ا</div> <div align="center">لأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟  وان النص سيظهر باللون الأزرق الغامق؟ أما </div> <div align="center">الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها  ستظهر باللون الأحمر. أما تلك الوصلة</div> <div align="center"> الفعالة فستظهر باللون الرمادي في لحظة النقر عليها  بالفأرة.<br /> <br />إذا كانت هذه هي استنتاجاتك... فمبروك، لقد نجحت. </div> <div align="center">وكل ما أتمناه أن تكون قد قضيت وقتاً ملوناً وزاهياً مع  هذا الدرس. </div> <div align="center"><br /><strong><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color">الدرس الرابع<br />الفقرات  والقوائم</span></span></strong></div> <div align="center"></div> <div align="center"></div> <div align="center">أهلاً وسهلاً بك إلى الدرس الرابع من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> في هذا الدرس سوف نناقش الوسوم الخاصة  بالفقرات بشكل خاص وترتيب الصفحات وتنسيقها بشكل عام.<br />صحيح أن استخدامك للألوان  والرسومات في الصفحة يضفي عليها نوعاً من الحيوية، وأن الخطوط تعطي صفحتك رونقاً  وجمالاً. لكنك إن لم تهتم بترتيب صفحتك أو تقضي بعض الوقت في تنسيق هيكلها العام  وتنظيم فقراتها وقوائمها، فإنه من الصعب عليك الحصول على صفحة ويب ناجحة. فالترتيب  هو الخطوة الأولى لجذب اهتمام الزائر أو القارئ لصفحتك وتسهل عليه فهم الخطوط  العريضة للصفحة. </div> <div align="center">لقد قمت في <a href="http://"http://www.khayma.com/hpinarabic/htutor01.html" class="bbc_link" target="_blank">الدرس  الأول</a> بإيضاح بعض الوسوم الخاصة بالفقرات. ولا بأس من تذكيرك بها. فالوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><P> </span></span>يقوم بإنهاء الفقرة. والوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BR></span></span> ينهي السطر الحالي وينقل النص إلى  سطر جديد. والوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎ ‎</span></span> يقوم بإضافة  الفراغات، ويجب تكرار كتابته بنفس عدد الفراغات المطلوب.<br />ونتابع في هذا الدرس مع  هذه الوسوم وغيرها. </div> <div align="center">لقد قلت إن الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><P></span></span> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><P> ... <‎/P></span></span> وفي هذه الحالة  يمكّننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALIGN, DIR.</span></span> </div> <div align="center">فالخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALIGN</span></span> تحدد محاذاة الفقرة وهي تأخذ القيم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Left, Center, Right</span></span> وأوضحها بالأمثلة  التالية:</div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><P Align=left"> This is a  left-aligned paragraph <‎/P> </span></span></div> <div align="center"><span style="color: #ff0000;" class="bbc_color">This is left-aligned paragraph</span></div> <div align="center">  </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><P Align="right"> This is  right-aligned paragraph</P> </span></span></div> <div align="center"><span style="color: #ff0000;" class="bbc_color">This is a right-aligned paragraph</span></div> <div align="center">  </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><P Align="center"> This is  a centered paragraph</P></span></span></div> <div align="center"><span style="color: #ff0000;" class="bbc_color">This is a centered paragraph</span></div> <div align="center">  </div> <div align="center">كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة  نستطيع استخدام الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><CENTER> ...  </CENTER> </span></span></div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><CENTER> This is a  centered text </CENTER> </span></span></div> <div align="center"><span style="color: #ff0000;" class="bbc_color">This is a centered text</span> </div> <div align="center"> <br /></div> <div align="center">أما الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">DIR</span></span> والتي نستخدمها أيضاً مع <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><P></span></span> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم </div> <div align="center">    <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">LTR</span></span>  <span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">إتجاه النص من اليسار إلى اليمين <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">(Left To Right)</span></span> </span></span>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">RTL</span></span>  <span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">إتجاه النص من اليمين إلى اليسار <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">(Right To Left)</span></span>  </span></span></div> <div align="center">(تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة  العربية) </div> <div align="center">  </div> <div align="center"> <br />ولتنسيق الفقرات أيضاً يوجد الوسوم<br /><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BLOCKQUOTE> ... <‎/BLOCKQUOTE></span></span>  أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على  الهامشين الأيمن والأيسر لها. أنظر إلى الفقرة التالية التي قمت (باقتباسها) من  إحدى صفحات هذا الموقع. ومن ثم وضعتها ضمن <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BLOCKQUOTE> ... <‎/BLOCKQUOTE></span></span> </div>     <div align="center">وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي  لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت  بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع  التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول  على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب ....  </div> <div align="center">والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج  هوامش أكبر. كما في المثال التالي: </div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div align="center"><BLOCKQUOTE><br /><BLOCKQUOTE><br /></div> <div align="center">وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي  لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت  بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع  التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول  على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب .... </div> <div align="center"><‎/BLOCKQUOTE><br /><‎/BLOCKQUOTE><br /></div>[/SIZE][/FONT] <div align="center">وتكون النتيجة:</div>         <div align="center">وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي  لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت  بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع  التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول  على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب ....  </div> <div align="center">وبالطبع ليس شرطاً أن تستخدم هذا الوسوم مع الفقرات  المقتبسة فقط. فأنا مثلاً أضعها في بداية ونهاية كل صفحة من صفحات هذا الموقع.  وبالتالي يظهر النص بعيداً قليلاً عن حاشية الصفحة فهذا أفضل من أن يكون ملاصقاً  لها وأجمل. (مجرد وجهة نظر) </div> <div align="center">  </div> <div align="center"> <br />والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت  بإعداده...!؟ </div> <div align="center">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 /></div> <div align="center">ربما توصلت إلى أني استخدمت عدداً كبيراً من وسوم الفراغات  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎ ‎</span></span> ونهاية السطر <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BR>.</span></span> حسناً، إستنتاجك لا بأس به ولكنه  ليس دقيقاً فأنا لم أستخدم أياً من هذه الوسوم هنا. بل كل ما فعلته بعد إعداد هذا  الشكل هو وضعه ضمن: </div> <div align="center"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><PRE> ...  </PRE> </span></span></div> <div align="center">وهما اختصار لكلمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Preformated</span></span> أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسيق  المسبق الذي تم إعداده به. لكن تم تحويل الخط إلى خط موحد المسافات (راجع <a href="http://"http://www.khayma.com/hpinarabic/htutor03.html#monospace" class="bbc_link" target="_blank">الدرس السابق</a>) ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة  كالتالي:<br /> <br />A B C D E F G H I J K L M N O P Q R S T </div> <div align="center">لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها  إلى تنسيقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط  والتنسيقات.</div> <div align="center">  </div> <div align="center"> <br /><span style="font-size: 2.65em;" class="bbc_size"><strong>القوائم</strong></span></div> <div align="center">تحتوي لغة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم  وباستخدام عدة خيارات. وهناك نوعين من القوائم:<br />أولهما المتسلسلة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Ordered Lists.</span></span> واليك المثال التالي عليها  </div> <div align="center"><em>أسماء بعض المدن الفلسطينية</em></div> <div align="center"> </div><br /><ul class="bbc_list" style="list-style-type: decimal;"><li type="disc"> <div align="center">القدس </div></li><li type="disc"> <div align="center">نابلس </div></li><li type="disc"> <div align="center">رام الله </div></li><li type="disc"> <div align="center">الخليل </div></li><li type="disc"> <div align="center">جنين </div></li><li type="disc"> <div align="center">طولكرم </div></li></ul><div align="center">وثانيهما القوائم غير المتسلسلة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Unordered Lists</span></span> وهذا مثال عليها </div> <div align="center"><em>أسماء بعض الجامعات الفلسطينية</em> </div> <div align="center"> </div><br /><ul class="bbc_list"><li type="disc"> <div align="center">جامعة النجاح </div></li><li type="disc"> <div align="center">جامعة القدس المفتوحة </div></li><li type="disc"> <div align="center">جامعة بيرزيت </div></li><li type="disc"> <div align="center">جامعة الخليل </div></li></ul><div align="center">عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة  بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة.<br />بالنسبة للقوائم  المتسلسلة نستخدم الوسوم </div> <div align="center"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><OL> ...  <‎/OL> </span></span></div> <div align="center"></div> <div align="center">أما بالنسبة للقوائم غير المتسلسلة فنستخدم </div> <div align="center"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><UL> ...  <‎/UL> </span></span></div> <div align="center"></div> <div align="center">ولتعيين كل بند من بنود القائمة نستخدم الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><LI></span></span> وهو وسم مفرد يكتب في بداية السطر  الخاص بكل بند <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">List Item.</span></span> </div> <div align="center">إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة  التالية: </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><OL><br /><LI>القدس<br /><LI>نابلس<br /><LI>رام  الله<br /><LI>الخليل<br /><LI>جنين<br /><LI>طولكرم<br /><‎/OL><br /></span></span></div> <div align="center"> </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><UL><br /><LI>جامعة  النجاح<br /><LI>جامعة القدس المفتوحة<br /><LI>جامعة  بيرزيت<br /><LI>جامعة الخليل<br /><‎/UL><br /></span></span></div> <div align="center">والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">TYPE</span></span> ووظيفتها تحديد شكل الرمز الظاهر مع  بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><UL></span></span> أو <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><OL></span></span> وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع  استخدامها أيضاً مع وسم البنود <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><LI></span></span> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز  مختلف لكل بند. </div> <div align="center">فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">A, a, I, i</span></span> التي تغير رموز الترقيم من  الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية  الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى في الجدول التالي:</div> <div align="center">    <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<OL TYPE=A">‎ </span></span> <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<OL TYPE="a">‎ </span></span> <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<OL TYPE="I">‎ </span></span> <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<OL TYPE="i">‎ </span></span>   <br /><ul class="bbc_list" style="list-style-type: decimal;"><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li></ul>  <br /><ul class="bbc_list" style="list-style-type: decimal;"><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li></ul>  <br /><ul class="bbc_list" style="list-style-type: decimal;"><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li></ul>  <br /><ul class="bbc_list" style="list-style-type: decimal;"><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li><li type="disc"></li></ul></div> <div align="center">والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة  في لغة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> وهي مسألة الوسوم والخصائص  المحددة بمتصفح معين دون غيره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غيره.  (للمزيد عن هذا الموضوع رجاءً انقر <a href="http://"http://www.khayma.com/hpinarabic/htutor16.html" class="bbc_link" target="_blank">هنا</a>)</div> <div align="center">والسبب في ذلك أن هذه الخاصية تستخدم أيضاً مع القوائم غير  المتسلسلة، لكن ليس بصورة مطلقة...كيف؟ أنت ترى أن الرمز الموجود عند كل بند في  القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Disc</span></span> وهي المعرفة ضمناً في خاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">TYPE.</span></span> لكن هناك رموز أخرى يمكن إظهارها وهي المربع <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">square,</span></span> والدائرة المفرغة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">circle</span></span> وتعرف بالشكل التالي: </div> <div align="center"><span style="font-family: ARIAL;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<UL  TYPE="square">‎<br />‎<UL TYPE="circle">‎ </span></span></div> <div align="center">ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع  متصفح نيتسكيب وليس مع مايكروسوفت إكسبلورر الذي يتعامل فقط مع القيمة الإفتراضية  للخاصية. (رجاءً لا يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص التي لا  يستطيع نيتسكيب عرضها أيضاً).<br />ولإتمام الحديث عن القوائم، أذكر لك أن هناك  وسوماً أخرى تستخدم لإنشاء القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><UL>...<‎/UL></span></span> وهذه الوسوم  هي: </div> <div align="center"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><DIR> ...  <‎/DIR><br /><MENU> ... <‎/MENU><br /></span></span></div> <div align="center">  </div> <div align="center"> </div> <div align="center">هناك نوع خاص من القوائم يدعى قوائم الشرح أو التعريفات  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Definition Lists </span></span>وكما يدل الإسم  تستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد منها شرح أو تعليق. </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span></div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">HTML </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">Hyper Text Markup Language </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">WWW </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">World Wide Web </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">FTP </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">File Transfer Protocol </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">GIF </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">Graphical Interchange Format </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">JPG, JPEG </span></span></div>  <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">Joint Photographic Experts Group </span></span></div>  <div align="center">ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:<br />الأول <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><DL> ... <‎/DL> </span></span>لتعريف بداية  ونهاية القائمة.<br />والثاني <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><DT>  </span></span>ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد. <br />أما الثالث فهو <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><DD> </span></span>وهو وسم الشرح أو التعليق وهو  أيضا مفرد. ولنقم الآن بكتابة شيفرة القائمة السابقة </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<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 /></span></span></div> <div align="center">وصلنا الآن إلى نهاية هذا الدرس، والذي ناقشنا فيه ترتيب  الصفحات والفقرات والقوائم. أتمنى لك صفحات مرتبة دائماً.</div> <div align="center"></div></div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_187912"> </div> <div class="smalltext reportlinks"> </div> </div> <br class="clear"> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg187916"></a> <div class="windowbg"> <span class="topslice"><span></span></span> <div class="post_wrapper phoneVflow"> <div class="poster"> <div class="avatar"> <a href="#"> <img src="https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar.png" class="avatar sr_switchable" width="110" height="110"/> </a> </div> <h4> <a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722" title="مشاهدة الملف الشخصي لـ achraf.mouni">achraf.mouni</a> </h4> <ul class="reset smalltext" id="msg_187916_extra_info"> <li class="postgroup" >Hero Member</li> <li class="stars"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /></li><ul class="greezeInsider"> <li class="postcount"><i class="fas fa-comments"></i> <strong class="sr_hidden">مشاركة:</strong> 2439</li></ul> <li class="profile"> <ul> <li><a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/icons/profile_sm.gif" alt="مشاهدة الملف الشخصي" title="مشاهدة الملف الشخصي" class="tooltip"/></a></li> <li><a href="https://www.ingdz.net/forum/index.php?action=emailuser;sa=email;msg=187916" rel="nofollow"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/email_sm.gif" alt="البريد الالكتروني" title="البريد الالكتروني" class="tooltip"/></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden phoneVflow"> <div class="keyinfo"> <h5 id="subject_187916" style="display:none;"> <a href="https://www.ingdz.net/forum/index.php?topic=27040.msg187916#msg187916" rel="nofollow">الدليل الشامل الى لغة html</a> </h5> <div class="time_posted"><strong>رد #2 في:</strong> كانون الأول 31, 2008, 10:34:58 صباحاً </div><div id="msg_187916_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_187916"><div align="center"><strong><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color">الدرس الخامس<br />الصور  والرسومات</span></span></strong></div> <div align="center"></div> <div align="center"> </div>     <div style="text-align: right;">أهلاً وسهلاً بك في الدرس الخامس من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> في هذا الدرس سوف أقوم بالحديث عن  الصور والرسومات وما يتعلق بالتعامل معها، بالإضافة إلى التعريف بأنواع الملفات  الرسومية الدارجة في الإنترنت. </div> <div style="text-align: right;">لقد اقتصر حديثنا عن الصور حتى الآن على إضافة خلفيات  للصفحات، وكان ذلك في <a href="http://www.khayma.com/hpinarabic/htutor02.html" class="bbc_link" target="_blank">الدرس الثاني </a>أما إدراج الصور ضمن الصفحات نفسها فله حكاية أخرى،  أبدأ بروايتها لك الآن. </div> <div style="text-align: right;">إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><IMG></span></span> وهو وسم مفرد. لكن هل يكفي  هذا لإدراج صورة؟ كلا، بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية  له <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">SRC</span></span> لتحديد موقع واسم  الصورة.<br /></div> <div style="text-align: right;">الصورة التالية إسمها <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">thedome.jpg</span></span> وعندما قمت بإدراجها. كانت الشيفرة الخاصة بذلك هي </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC=thedome.jpg">‎  </span></span></div> <img src="http://www.khayma.com/hpinarabic/images/thedome.jpg" alt="" class="bbc_img" />  <br /><div style="text-align: right;">والصيغة هذه تفترض أن الصورة موجودة في <em><strong>نفس  الدليل الفرعي أو المجلد</strong></em> حيث يتواجد ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> الذي أعمل عليه، وقمت باستدعاء الصورة من خلاله. لكن ماذا لو  كانت الصورة في مجلد فرعي آخر؟ حسنا سوف اناقش معك حالتين لهذه المسألة. </div> <div style="text-align: right;"><em>الحالة الأولى</em> أن تكون الصورة موجودة في مجلد متفرع  عن المجلد الموجود به ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> حسب  الشكل التالي: </div> <img src="http://www.khayma.com/hpinarabic/images/src1.gif" alt="" class="bbc_img" /><br /><div style="text-align: right;">نقوم في هذه الحالة بكتابة إسم هذا المجلد تتبعه إشارة / ثم  اسم الصورة. </div>    <br /><div style="text-align: right;"><em>الحالة الثانية:</em> أن يكون ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> موجوداً في مجلد ما وتكون الصورة موجودة  في مجلد آخر بنفس المستوى. أي أنهما مجلدين متجاورين وليسا متفرعين أحدهما عن  الآخر. </div> <img src="http://www.khayma.com/hpinarabic/images/src2.gif" alt="" class="bbc_img" /><br /><div style="text-align: right;">وفي هذه الحالة نكتب .. (نقطتين) لتوجيه المتصفح للخروج من  المجلد الفرعي الحالي (حيث يوجد ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HT‎ML)</span></span> ومن ثم الدخول إلى المجلد <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">images</span></span> حيث توجد الصورة. <br /><br />وبشكل عام، مهما كانت مواقع تواجد الملفات فإن عملية تحديد  مواقعها والوصول إليها لا تخرج عن نطاق هذا النمط من الشيفرة. أي كتابة النقطتين  للخروج من مجلد فرعي، وكتابة اسم المجلد الذي يجب الدخول إليه. </div>    <br /><div style="text-align: right;">إن الأبعاد الأساسية لهذه الصورة هي 200×145 بيكسل <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Pixel</span></span> (تابع القراءة حتى نهاية هذا الدرس  وأعدك أن أوضح لك ما هي وحدة البيكسل إذا كانت هذه أول مرة تتعرف فيها على هذه  الوحدة) وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد. ومع ذلك فنحن  نستطيع التحكم أيضاً بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم. كيف؟  بإضافة الخصائص <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HEIGHT, WIDTH</span></span> متبوعة  بأرقام تمثل الإرتفاع والعرض المطلوبين. </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="thedome.jpg"  HEIGHT="70" WIDTH="120">‎ </span></span></div> <img src="http://www.khayma.com/hpinarabic/images/thedome.jpg" alt="" class="bbc_img" />     <br /><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="thedome.jpg"  HEIGHT="300" WIDTH="500">‎ </span></span></div> <img src="http://www.khayma.com/hpinarabic/images/thedome.jpg" alt="" class="bbc_img" />     <br /><div style="text-align: right;">الخاصية التالية التي تستخدم مع <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><IMG></span></span> هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALT</span></span> وفيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ  خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح. كما تستطيع  ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل. </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="thedome.jpg"  ALT="The Dome Of The Rock">‎ </span></span></div>    <br /><div style="text-align: right;">عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظهورها يتحدد  بالطبع حسب ترتيب ورودها في الفقرة، مثلها مثل أي كلمة أو عبارة أخرى. ونستخدم  الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALIGN</span></span> لتحديد محاذاة الصورة مع  النص المرافق لها أو لنقل بعبارة أخرى: <em><strong>تحديد موقع النص الذي يليها بالنسبة  لها</strong></em> وهي تأخذ القيم: <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BOTTOM, TOP,  MIDDLE, LEFT, RIGHT</span></span> وأوضح لك تأثير كل قيمة كما يلي: </div>      <span style="font-size: 1.45em;" class="bbc_size">في الحالة العادية <img src="http://www.khayma.com/hpinarabic/images/down.jpg" alt="" class="bbc_img" /> (مثل  هذه) وعندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي الصورة يظهر بمحاذاة  الحافة السفلى لها. وهذه هي الحالة الإفتراضية لظهور الصور والتي تمثلها القيمة  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BOTTOM</span></span> </span> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="image.jpg"  ALIGN="BOTTOM">‎</span></span>       <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><span class="bbc_u">TOP</span></span></span><br /><br /><span style="font-size: 1.45em;" class="bbc_size"><img src="http://www.khayma.com/hpinarabic/images/up.jpg" alt="" class="bbc_img" /> وعند تحديد هذه القيمة فإن السطر الأول من النص الذي يلي الصورة يقع  بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها. </span> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="image.jpg" ALIGN="TOP">‎</span></span>        <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><span class="bbc_u">MIDDLE</span></span></span><br /><br /><span style="font-size: 1.45em;" class="bbc_size"><img src="http://www.khayma.com/hpinarabic/images/stop.jpg" alt="" class="bbc_img" /> أما عند تحديد هذه القيمة فإن السطر الأول من النص يقع بمحاذاة منتصف  الصورة. كذلك فإن باقي النص يمتد أسفلها. </span><br /><br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="image.jpg"  ALIGN="MIDDLE">‎</span></span>       <span style="font-size: 1.45em;" class="bbc_size"><span class="bbc_u"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">LEFT</span></span></span><br /><br /><img src="http://www.khayma.com/hpinarabic/images/left.jpg" alt="" class="bbc_img" /> هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي  يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة. </span><br /><br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="image.jpg"  ALIGN="LEFT">‎</span></span>      <span style="font-size: 1.45em;" class="bbc_size"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><span class="bbc_u">RIGHT</span></span></span><br /><br /><img src="http://www.khayma.com/hpinarabic/images/right.jpg" alt="" class="bbc_img" /> أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص  الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. </span><br /><br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="image.jpg"  ALIGN="RIGHT">‎</span></span>   <br />   <br /><div style="text-align: right;">والآن بعد أن قمنا بتحديد محاذاة الصورة نحتاج إلى تحديد  المسافة الفاصلة بينها وبين النص الذي يجاورها. ونستخدم لذلك الخصائص  التالية:<br /><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">VSPACE:</span></span> لتحديد المسافة  العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.<br /><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HSPACE:</span></span> لتحديد المسافة الأفقية الفاصلة بين  النص والحافتين اليمنى واليسرى للصورة.<br /> <br />مثال:<br /></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC="image.jpg"  ALIGN="RIGHT" VSPACE="20" HSPACE="20">‎</span></span></div>      <img src="http://www.khayma.com/hpinarabic/images/right.jpg" alt="" class="bbc_img" />  <span style="font-size: 1.45em;" class="bbc_size">النتيجة: هذه الشيفرة ستدرج الصورة المسماه <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">image.jpg</span></span> مع محاذاتها ليمين الصفحة وإضافة  مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة. (قارن بين هذا الإطار والإطار  السابق الذي وضحت فيه خاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALIGN</span></span> مع  القيمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">RIGHT.</span></span> ولاحظ المسافة بين  الصورة والنص المرافق لها.) </span><br />  <br />   <br /><div style="text-align: right;">الخاصية الأخيرة والتي تستخدم مع الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><IMG></span></span> هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BORDER</span></span> ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية  تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. (أنظر<a href="http://"http://www.khayma.com/hpinarabic/htutor06.html" class="bbc_link" target="_blank">الدرس  السادس</a>) ويتم التحكم بالسُمك من خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة  الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة.<br />مثلاٌ لإضافة إطار سُمكه 5  بيكسل نكتب الشيفرة التالية: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<IMG SRC=image.jpg"  BORDER="5">‎</span></span></div>    <br /><div style="text-align: right;">والآن حان الوقت لكي نناقش معاً بعض الأمور التي تتعلق  بالصور والرسومات بشكل عام. <br /> <br />* هل حاولت أن تتعرف على أنواع الملفات  الرسومية التي تقوم بتحميلها خلال تصفحك لمواقع الإنترنت؟<br />يزخر عالم الكمبيوتر  بالعشرات من أنواع الملفات الرسومية وتنسيقات الصور. وكل منها يختلف عن غيره من عدة  نواح، أذكر لك منها: الدقة، وعدد الألوان التي يستوعبها، والحجم التخزيني للملف.  لكن هناك نوعين فقط من هذه الملفات يتم تداولهما حالياً في الإنترنت وهما:<br /></div> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">JPG,  JPEG</span></span><br />إختصار لـِ <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><span class="bbc_u">J</span>oint  <span class="bbc_u">P</span>hotographic <span class="bbc_u">E</span>xperts <span class="bbc_u">G</span>roup.</span></span> ويدعم هذا التنسيق صوراً  بعيار 24 بت (أي 16.7 مليون لون). وميزة هذا التنسيق تتمثل في إمكانية ضغط الصور  بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم نسبياً.(أعني هنا حجم  التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما إزدادت نسبة الضغط  وصغر حجم الملف كان ذلك على حساب الجودة والوضوح. </div> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">GIF</span></span><br />إختصار  لـِ <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><span class="bbc_u">G</span>raphical <span class="bbc_u">I</span>nterchange  <span class="bbc_u">F</span>ormat</span></span> وأقصى عدد للألوان في هذا التنسيق هو 265 لون. ومع ذلك فإن  أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">JPG.</span></span> لكن هناك مزايا رائعة ينفرد بها تنسيق <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">GIF</span></span> مما يستدعي استخدامه في صفحات الويب،  أولها القدرة على تخزين صور بخلفيات شفافة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Transparent Images</span></span> وثانيها الصور المتحركة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Animated Gifs</span></span><br />وتجد معلومات وافية ودروساً  مفصلة حول هذه المواضيع ضمن دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Paint Shop  Pro.</span></span> </div> <div style="text-align: right;">والآن قد تسأل، أي من هذين التنسيقين أستخدم في صفحاتي؟! لا  يوجد جواب قطعي لهذا السؤال لكن إليك هاتين المعادلتين: </div> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">JPG=</span></span> الصور  الحقيقية ذات العدد الكبير من الألوان، وذات الأبعاد الكبيرة <br /><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">GIF=</span></span> الصور قليلة الألوان وصغيرة الأبعاد مثل  الأزرار. </div>    <br /><div style="text-align: right;">* ما هي درجة إستبانة شاشتك <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Resolution?</span></span> إذا كنت لا تعرف الجواب قم بفتح تطبيق لوحة التحكم في  ويندوز 95 وإختر أيقونة(العرض) ثم اختر التبويب (إعدادات) وهناك سوف تشاهد "مساحة  سطح المكتب" الذي يدل على درجة إستبانة الشاشة، وعلى الأغلب ستكون 640×480 أو  800×600، وهناك درجات أعلى تعتمد على قدرة محول العرض. كذلك سوف تشاهد "لوح  الألوان" الذي يدل على عدد الألوان التي يمكن عرضها بالإعدادات الحالية  للشاشة.<br />أما في ويندوز 3.11 أو 3.1 فاختر أيقونة برنامج إعداد <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Windows</span></span> من لوحة التحكم فتظهر لك قائمة تجد  بضمنها نوع وإستبانة الشاشة. <br /> <br />هذا الحديث يقودني إلى وحدة البيكسل <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Pixel </span></span>(ألم أعدك مسبقاً بتوضيحها). وهي  اختصار لـِ <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Picture Element.</span></span> إذا كانت  شاشتك بإستبانة 640×480 فهذا يعني أنها مقسمة(نظرياً) إلى شبكة من 640 عمود و480  سطر. <em>وبمنتهى البساطة، إن كل خلية من هذه الشبكة تمثل بيكسل</em> وبالطبع كلما  زادت الإستبانة كلما صغر حجم وحدة البيكسل. </div>    <br /><div style="text-align: right;">* هل سبق لك وأن سمعت بمصطلح <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Thumbnail</span></span> ضمن مصطلحات الإنترنت؟ حسناً، لا تلتفت إلى الترجمة  الحرفية لهذه الكلمة، والتي تعني "ظفر الإبهام". فالمقصود حقيقةً بها هي تلك الصورة  الصغيرة جداً التي تقوم بالنقر عليها فتؤدي إلى عرض صورة بحجم أكبر. لذلك قد يكون  المصطلح الأنسب لوصفها هو "العيّنة".<br />(وإذا كنت قد زرت أحد المواقع الإخبارية  لرأيت كيف يتم عرض عينات وصور مصغرة للقطات الأحداث وعند النقر على العينة تظهر  الصورة الأصلية. إذن أنت لست مجبراً على الإنتظار لوقت طويل لحين ظهور صورة ذات حجم  كبير للقطة لست معنياً بها). <br /> <br />ومن الواضح أن استخدام العينات مفيد وعملي  جداً وأن وضعها في المواقع التي تحتوي على العديد من الصور يؤدي إلى تقليل الزمن  اللازم لتحميل الصفحات وتجنب ضياع الوقت بانتظار ظهور الصور الأصلية كبيرة الحجم.  لأنها تعطي الزائر الحرية في النقر عليها إذا رغب في رؤية الأصل أو تجاهلها. أما  كيف يتم عمل هذه العينات؟ فذلك باستخدام أحد برامج معالجة الرسوم كبرنامج <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Paint Shop Pro.</span></span> من خلال تصغير أبعاد الصور  الأصلية إلى النسبة المطلوبة. <br /> <br />أعرف ماذا ستسأل الآن، ستقول ألم نتعلم قبل  قليل كيفية عرض الصور مع التحكم بأبعادها؟ ألا يؤدي استخدام الخصائص <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">WIDTH, HEIGHT</span></span> إلى التحكم بحجم الصور وعرضها  بنسب مصغرة حسب ما هو مطلوب؟<br />إن استخدامك لهذه الخصائص يؤدي إلى إظهار الصورة  بحيث <span class="bbc_u"><strong>تبدو</strong></span> مصغرة، لكنك فعلياً قمت بإجبار متصفح الزائر على تحميل  الصورة بالحجم والأبعاد الأصلية ثم عرضها بالحجم المصغر أي أنك في النهاية لم تحقق  الغاية من وجود هذه العينات. </div> <div style="text-align: right;">وصلنا إلى نهاية هذا الدرس. هل أصبحت الآن تعرف كيف تدرج  الصور في صفحتك؟ رائع، إذن إليك هذه المكافأة. أنقر على الصور المصغرة لتشاهد  مدينتي... نابلس.<br /> <br /></div><a href="http://"http://www.khayma.com/hpinarabic/images/nablus1.jpg" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/nablus_1.jpg" alt="" class="bbc_img" /></a>   <a href="http://www.khayma.com/hpinarabic/images/nablus2.jpg" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/nablus_2.jpg" alt="" class="bbc_img" /></a>   <a href="http://www.khayma.com/hpinarabic/images/nablus3.jpg" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/nablus_3.jpg" alt="" class="bbc_img" /></a>    <br /><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"><strong>الدرس  السادس</strong></span></span><strong><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"> <br />الوصلات  التشعبية</span></span></strong>   <br />  <br /><span style="font-size: 1.45em;" class="bbc_size"> <br /></span>      <div style="text-align: right;">أهلاً وسهلاً بك إلى الدرس السادس من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> <br /> <br />كيف وصلت إلى هذه الصفحة؟!  ربما تعتبر هذا سؤالاً سخيفاً، وأن الإجابة عليه هي من البديهيات ... وهذا صحيح! من  المؤكد أنك قمت بالإنتقال إلى هنا من خلال إحدى صفحات هذا الموقع، أو من خلال أحد  محركات التفتيش، أو من خلال أحد المواقع التي قمت بزيارتها مؤخراً ... وفي كل  الأحوال قمت بالنقر على وصلة تشعبية ما. <br /><br /><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Links...</span></span> أو الوصلات التشعبية هي  روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه الوصلات هي  الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من مواقعها. تنقر على  وصلة ما فتنقلك إلى صفحة أخرى في نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلياً  إلى أحد المواقع في الجانب الآخر من العالم... وصلة تجعلك تحمّل ملفاً وأخرى تجعلك  تشغّل مقطعا موسيقياً وثالثة تعرض لك صورة... <br />حسناً، من المؤكد أنك استنتجت  الآن من هذه المقدمة أنك بصدد تعلم كيفية إدراج الوصلات التشعبية في صفحاتك... لقد  صدق استنتاجك لذلك هيا إلى العمل... </div> <div style="text-align: right;">هناك عدة خيارات للوصلات التشعبية، منها أن تكون الوصلة  لموقع آخر، أو أن تكون لصفحة أخرى داخل الموقع نفسه، ومنها أن تكون لمكان آخر في  نفس الصفحة (إلى أعلى أو أسفل على سبيل المثال) أو أن تكون وصلة لعنوان بريد  إلكتروني <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">E-mail</span></span> وفي جميع الحالات فإن  المبدأ واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك كل حالة على حدة وبالتفصيل.  </div> <div style="text-align: right;">نستخدم الوسوم</div> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><A> ... <‎/A></span></span>  <br /><div style="text-align: right;">كوسوم أساسية لإدراج الوصلات التشعبية، وهي اختصار لكلمة  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Anchor.</span></span> وهي لا تعمل لوحدها بل تتطلب  إضافة خصائص معينة أولها وأهمها الخاصية </div> <div align="center"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HREF </span></span></div> <div style="text-align: right;">التي نحدد من خلالها الموقع الذي نريد الدلالة عليه، ويجب  أن يكتب عنوان الموقع كاملاً. </div> <div style="text-align: right;">الحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع  خارجي.<br />لنقم بإدراج وصلة تشعبية إلى أحد المواقع العربية الرائدة والرائعة، وهو  موقع شركة صخر. وعنوانه <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><a href="http://www.sakhr.com" class="bbc_link" target="_blank">http://www.sakhr.com</a></span></span> في هذه الحالة يتم كتابة الشيفرة بالشكل  التالي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF=http://www.sakhr.com"> <‎/A> </span></span></div> <div style="text-align: right;">لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر  عليها لتشغيل الوصلة، وهذه يجب أن توضع بين الوسمين <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><A> ... <‎/A>.</span></span> أي لكي تكتمل الوصلة السابقة يجب أن نكتب  معها أي عبارة نريدها، لكي ينقر عليها الزائر فتنقله إلى العنوان المطلوب. ما رأيك  بعبارة: <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Go To SAKHR</span></span> والتي تصبح  الشيفرة معها بالشكل التالي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF="<a href="http://www.sakhr.com" class="bbc_link" target="_blank">http://www.sakhr.com</a>">Go To SAKHR<‎/A> </span></span></div> <div style="text-align: right;">وتظهر الوصلة كما يلي:</div> <div align="center"><a href="http://"http://www.sakhr.com/" class="bbc_link" target="_blank"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Go To SAKHR</span></span></a> </div> <div style="text-align: right;">لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده  كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">SAKH‎R</span></span> هي فقط العنوان لهذه الوصلة. </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎Go To <A  HREF=http://www.sakhr.com">SAKHR<‎/A>‎ </span></span></div> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Go To <a href="http://"http://www.sakhr.com/" class="bbc_link" target="_blank">SAKHR</a></span></span> <div style="text-align: right;">بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما  تشاهد في الكثير من المواقع- وكل ما عليك فعله في هذه الحالة هو كتابة الوسم الخاص  بإدراج الصورة بين الوسمين <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><A> ...  <‎/A></span></span> بالشكل التالي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF=http://www.sakhr.com"><IMG SRC="sakhrlgo.gif">‎<‎/A>  </span></span></div> <div style="text-align: right;">والذي يؤدي إلى ظهور الصورة التالية كوصلة تشعبية لموقع  صخر</div> <a href="http://"http://www.sakhr.com/" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/sakhrlgo.gif" alt="" class="bbc_img" /></a><br /><div style="text-align: right;">وبشكل عام فإن أي شيء يوضع بين الوسمين <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><A> ... <‎/A></span></span> سوف يكون الوسيلة  أو العنوان الذي ينقلنا إلى الموقع المشار إليه في الوصلة التشعبية، سواءً كان هذا  الشيء نصاً أو صورة أو كلاهما معاً. </div> <div style="text-align: right;">والآن هل تلاحظ الإطار الظاهر حول الصورة؟ وهل تذكر متى  قمنا بالحديث عن هذا النوع من الإطارات؟ نعم، في <a href="http://www.khayma.com/hpinarabic/htutor05.html" class="bbc_link" target="_blank">الدرس  السابق.</a> عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل وهذه هي  الحالة الإفتراضية. وبالطبع نستطيع إزالته بكتابة الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BORDER=0"‎</span></span> ضمن وسم الصورة. </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF="<a href="http://www.sakhr.com" class="bbc_link" target="_blank">http://www.sakhr.com</a>"><IMG SRC="sakhrlgo.gif"  BORDER="0"><‎/A> </span></span></div> <a href="http://"http://www.sakhr.com/" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/sakhrlgo.gif" alt="" class="bbc_img" /></a>   <div style="text-align: right;">أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية. </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF=http://www.sakhr.com"><IMG SRC="sakhrlgo.gif"  BORDER="6"><‎/A> </span></span></div> <a href="http://"http://www.sakhr.com/" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/sakhrlgo.gif" alt="" class="bbc_img" /></a>      <br /><div style="text-align: right;">ننتقل الآن إلى الحالة الثانية، وهي أن تشير الوصلة  التشعبية إلى ملف موجود في نفس الموقع (أي ملف محلي) سواءً كان ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> أو صورة أو غير ذلك. وفي هذه الحالة فإن  ما يكتب مع الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HREF</span></span> هو اسم هذا  الملف المطلوب الوصول إليه.<br /> <br />لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة  الرئيسية لهذا الموقع وبالمناسبة فإن الملف الذي يحتويها اسمه <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">index.html</span></span> ، والشيفرة الخاصة بذلك هي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A HREF=index.html">Main  Page<‎/A> </span></span></div> <a href="http://"http://www.khayma.com/hpinarabic/index.html" class="bbc_link" target="_blank">Main  Page</a> <div style="text-align: right;">وأذكرك بأنك تستطيع إدراج صورة هنا أيضاً كعنوان للوصلة  التشعبية وذلك بنفس التفاصيل التي شرحتها في الحالة السابقة. </div> <div style="text-align: right;">هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية.  </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF=nablus1.jpg"><IMG SRC="nablus_1.jpg" BORDER="0"><‎/A>  </span></span></div> <div style="text-align: right;">في هذا المثال قمت بتحديد الصورة المصغرة المسماه <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">nablus_1.jpg</span></span> كوصلة تشعبية تصلنا إلى الصورة  الأصلية المسماه <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">nablus1.jpg</span></span> </div> <a href="http://"http://www.khayma.com/hpinarabic/images/nablus1.jpg" class="bbc_link" target="_blank"><img src="http://www.khayma.com/hpinarabic/images/nablus_1.jpg" alt="" class="bbc_img" /></a> <div style="text-align: right;">لكن إنتبه <span style="font-family: wingdings;" class="bbc_font"><span style="font-size: 2em;" class="bbc_size">I</span></span> إذا كان  الملف المطلوب والذي تريد الإشارة إليه موجوداً في مجلد مختلف عن المجلد الذي يوجد  به الملف الحالي، فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة التي  ناقشناها في الدرس السابق عندما قمنا يإدراج الصور. </div>    <br /><div style="text-align: right;">الحالة الثالثة هي أن نقوم بالإشارة إلى مكان آخر داخل نفس  الصفحة، إلى <a href="http://www.khayma.com/hpinarabic/htutor06.html#begin" class="bbc_link" target="_blank">أولها</a> مثلاً أو إلى <a href="http://www.khayma.com/hpinarabic/htutor06.html#end" class="bbc_link" target="_blank">آخرها</a>  أو أي مكان آخر نريده...<br />طبعاً مهما بلغت درجة الذكاء والألمعية التي يتصف بها  الكمبيوتر ومتصفح الإنترنت، فهما لا يستطيعان معرفة ما يدور بفكرك وبالتالي لا  يستطيعان معرفة المكان الموجود في نفس الصفحة والذي تريد نقل زائرك إليه من خلال  الوصلة التشعبية. لذلك يجب أن تقوم أنت بتحديده.<br /> <br />والمبدأ هنا هو أن تقوم  بتعريف أو تسمية هذا المكان بإسم معين سوف تقوم لاحقا باستخدامه في الوصلة  التشعبية. وفي هذه الحالة يتحتم عليك استخدام الخاصية الثانية للوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><A></span></span> وهي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NAME</span></span> </div> <div style="text-align: right;">لنقم معاً بإدراج وصلة تشعبية داخل هذه الصفحة تقوم بنقل  الزائر من مكان وجود هذه الوصلة إلى الفقرة الثالثة من هذه الصفحة والتي بدأنا فيها  الحديث عن الوصلات التشعبية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Links</span></span>  <br /> <br />أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها  داخل الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><A> ... <‎/A></span></span>  </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A>LINKS<‎/A>  </span></span></div> <div style="text-align: right;">والآن حان الوقت لاستخدام الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NAME</span></span> فالخطوة الثانية هي تعريف هذه الكلمة  بأي اسم نريده (المهم أن نبقى متذكرين له). سوف أقوم بإعطاء الاسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">attrib1</span></span> </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  NAME=attrib1">LINKS<‎/A> </span></span></div>         <div style="text-align: right;"><em><strong>لقد أصبحت هذه الفقرة جاهزة لكي نقوم بإدراج وصلات  تشعبية إليها من أي مكان في هذا الملف، بل ومن أي ملف آخر ... وأكثر من ذلك أنه إذا  أراد أحد ما في أحد المواقع الأخرى أن يضع وصلة تشعبية لها من موقعه فإن باستطاعته  ذلك شرط أن يعرف الإسم الذي عرّفناها به وهذا ليس صعباً بالطبع.  </strong></em></div> <div style="text-align: right;">الخطوة الثالثة هي إدراج الوصلة التشعبية لهذه الفقرة.  <br />ويلزمنا هنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي هذا الملف الذي نعمل  به) واسمه <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">htutor06.html</span></span> لأنه سيشكل  المدخل الأساسي للوصول إلى الفقرة المحددة. وتكون شيفرة الوصول إلى هذه الفقرة هي  كالتالي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF="htutor06.html#attrib1">3rd Paragraph<‎/A> </span></span></div> <a href="http://"http://www.khayma.com/hpinarabic/htutor06.html#attrib1" class="bbc_link" target="_blank">‎3rd Paragraph</a><br /><div style="text-align: right;">لاحظ أننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب أن تقرن  باسم الملف الأب الذي يتضمنها من خلال إشارة # </div>    <br /><div style="text-align: right;">أما الحالة الأخيرة والتي نقوم فيها بإدراج وصلة تشعبية  لعنوان بريد إلكتروني، يؤدي النقر عليها إلى إطلاق برنامج البريد الإلكتروني للزائر  بشكل تلقائي. فالإختلاف الوحيد الذي يطرأ هنا هو كتابة كلمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">MAILTO</span></span> بعد خاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HREF</span></span> لكي تدل على أن العنوان الذي يلي هو  عنوان <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">EMAIL</span></span> وليس أي عنوان آخر </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF=MAILTO:yahya@palnet.com"> Email Me <‎/A> </span></span></div> <a href="mailto:"yahya@palnet.com" class="bbc_email">Email Me </a>   <br />   <br /><div style="text-align: right;">والآن بعد أن انتهيت من سرد أساسيات استخدام الوصلات  التشعبية وإدراجها في صفحات الويب بقي هناك بعض التوضيحات والملاحظات التي أجد أن  من المهم ذكرها لك.<br /> <br />عندما قمنا بالتوصيل إلى عنوان خارجي، سواء كان لموقع  ويب أو عنوان <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Email</span></span> لاحظنا أننا  استخدمنا كلمات مفتاحية ميزت طبيعة هذا العنوان، وأعطت المتصفح فكرة عن طبيعة  التعامل مع هذا العنوان وطريقة الاتصال به. فعندما أردنا التشعب إلى موقع الويب  كتبنا كلمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTTP</span></span> والتي تدل على نوع  البروتوكول المستخدم في الاتصال بهذا الموقع، وهو بروتوكول نقل النصوص المتشعبة  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HyperText Transfer Protocol</span></span> وعندما  كتبنا عنوان <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Email</span></span> استخدمنا كلمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">MAILTO</span></span> قبل هذا العنوان. وبالتالي قمنا  بالإيعاز للمتصفح بفتح برنامج البريد الإلكتروني الافتراضي وتجهيزه لإرسال رسالة  إلى العنوان المدرج. وحتماً لقد صادفت مثل هذه الحالة كثيراً خلال تجولك في مواقع  الويب. <br /> <br />لكن هنا مجالات أخرى لاستخدام الإنترنت ولكل منها بروتوكوله الخاص.  فمثلاً هناك الآلاف من المزودات المنتشرة عبر الإنترنت والتي تحتوي على أعداد هائلة  لا تحصى من الملفات والبرامج الجاهزة للتحميل ويتم الوصول إليها عبر بروتوكول خاص  لنقل الملفات يدعى <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FTP (File Transfer  Protocol)‎.</span></span> ومن هذه المجالات أيضاً والتي لا تقل أهمية عن الويب أو البريد  الإلكتروني المجموعات الإخبارية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">News  Groups</span></span> أو مجموعات النقاش التي تختص كل منها بمناقشة موضوع معين. وهذه تعمل  من خلال بروتوكول <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NNTP (Network News Transfer  Protocol)‎.</span></span> </div>      <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">إن تعدد مجالات إستخدام الإنترنت وتعدد  البروتوكولات فيها لا يعني أنك تحتاج لأن يكتظ سطح مكتبك بالعديد من البرامج  للتعامل معها. فمعظم المتصفحات التي نستخدمها تحتوي على برامج خاصة تدعم هذه  الخدمات.<br />فمثلاً عند النقر على عنوان مزود <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FTP</span></span> يتم الدخول إليه مثله مثل أي موقع ويب عادي وتظهر قائمة المجلدات  والملفات فيه بشكل مشابه للمستكشف في <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Windows95.</span></span> أما النقر على عنوان إحدى المجموعات الإخبارية فيؤدي إلى  سلوك مشابه للنقر على عناوين البريد الإلكتروني، أي إطلاق برنامج تصفح خاص  بالمجموعات الإخبارية يكون مدمجاً ضمن حزمة المتصفح الأصلي.  </span></div>  <br /><div style="text-align: right;">والآن... أعتقد أنه ليس من الصعب عليك استنتاج الكيفية التي  نضيف بها وصلات تشعبية لمزود <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FTP.</span></span><br />إليك هذا العنوان لأحد المزودات التي يحتوي على الكثير من  البرامج المجانية أو المشتركة </div> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><a href="ftp://ftp.simtel.net/pub/simtelnet/win95/" class="bbc_ftp new_win" target="_blank">ftp://ftp.simtel.net/pub/simtelnet/win95/</a>‎ </span></span>  <br /><div style="text-align: right;">وكل ما عليك فعله هو كتابة الشيفرة التالية: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF=ftp://ftp.simtel.net/pub/simtelnet/win95/">Simtel FTP Server<‎/A>  </span></span></div><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"> <a href="http://"ftp://ftp.simtel.net/pub/simtelnet/win95/" class="bbc_link" target="_blank">Simtel  FTP Server</a></span></span> <div style="text-align: right;">أما بالنسبة للمجموعات الإخبارية فتكتب الوصلات التشعبية  لها باستخدام الكلمة المفتاحية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NEWS.</span></span>  فعلى سبيل المثال، لوضع وصلة تشعبية لمجموعة النقاش <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">alt.html</span></span> الخاصة بمناقشة لغة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> نكتب الشيفرة التالية: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A  HREF=news:alt.html">Alt.Html<‎/A> </span></span></div><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"> <a href="http://"news:alt.html" class="bbc_link" target="_blank">Alt.Html</a></span></span>  <br />   <br /><div style="text-align: right;">أتمنى لك قضاء أسعد الأوقات مع مواقع الإنترنت ووصلاتها  التشعبية، وأراك في الدرس التالي إن شاء الله. </div> <br /><strong><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color">الدرس السابع<br />الجداول  (1)</span></span></strong><br />  <br />     <div align="center">أهلاً وسهلاً بك إلى الدرس السابع من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> هذا الدرس سيكون الأول من درسين حول  الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول  واحتمالات استخدامها في صفحات الويب.</div> <div align="center">تعد الجداول من أقوى الأدوات التي تتضمنها لغة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> وأكاد أجزم بأنه لا يوجد موقع في  الإنترنت إلا ويستخدمها بصورة أو بأخرى. والحقيقة أن وضع الجداول في صفحات الويب لا  يقتصر على تلك القوائم من البيانات التي نحتاج لترتيبها في صفوف وأعمدة، بل يتعدى  ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها، والتحكم بمظهرها بصورة قوية  وفعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق الصفحات. </div> <div align="center">إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً  مثله مثل أي أداة من أدوات <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> لكنه  قد يبدو لك مربكاً بعض الشيء وخاصة في البداية، وذلك لتعدد الخصائص التي تستعمل  معها وتعدد الأوجه التي نستطيع التصرف بها. لكن لا تقلق فكل شيء يبدو صعباً في  بدايته ولكن سرعان ما يصبح سهلاً.<br /><br />هل أنت مستعد؟ إذن هيّا بنا… </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br />بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة  بالجداول </div>     <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TABLE>...<‎/TABLE></span></span> <span style="font-size: 1.45em;" class="bbc_size">وسوم تعريف الجدول</span>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TR>...<‎/TR>  </span></span> <span style="font-size: 1.45em;" class="bbc_size"> </span><div style="text-align: right;">Table Row وسوم تعريف الصف في الجدول</div>[/SIZE]  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TD> <em>Cell Data</em>  <‎/TD></span></span> <span style="font-size: 1.45em;" class="bbc_size"> </span><div style="text-align: right;">Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل  خلية </div>[/SIZE] <div align="center"> <br />والآن لنتكلم بصورة أكثر دقة وتفصيلاً:<br /><br />هذه هي  الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان  </div> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TABLE> ...  <‎/TABLE></span></span> <div align="center"> <br />والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة  عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس،  قم بإضافة الوسوم </div> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TR> ...  <‎/TR></span></span> <div align="center"> <br />بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.  </div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div align="center"><TABLE></div>    <span style="color: #ff0000;" class="bbc_color"> </span><div align="center"><TR> <br /><‎/TR><br /><br /><TR>  <br /><‎/TR><br /><br /><TR>  <br /><‎/TR><br /><br /></div>[/COLOR] <div align="center"><‎/TABLE> </div>[/SIZE][/FONT] <div align="center">والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي  نريدها في كل صف؟<br />وهنا نضيف الوسوم </div> <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TD> ...  <‎/TD></span></span> <div align="center"> <br />بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين  الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TR> ... <‎/TR></span></span>  طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك  يجب تكرار كتابتها مرتين لكل صف.<br />وأذكرك أن النص الذي نريد إدراجه في الخلية  يكتب ضمن هذين الوسمين. </div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div align="center"><TABLE></div>    <span style="color: #ff0000;" class="bbc_color"> </span><div align="center"><TR></div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div align="center"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD></div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div align="center"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div align="center"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD> </div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div align="center"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div align="center"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD> </div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div align="center"><‎/TR></div>[/COLOR] <div align="center"><‎/TABLE></div>[/SIZE][/FONT] <div align="center">هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا  عليها. </div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center">هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف  الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن  أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم  على ثلاثة مستويات:</div> <div align="center"> </div><br /><ul class="bbc_list"><li type="disc"> <div align="center">مستوى الجدول ككل </div></li><li type="disc"> <div align="center">مستوى الصفوف ككل أو كل واحد على حده </div></li><li type="disc"> <div align="center">مستوى الخلايا ككل أو كل واحدة على حده. </div></li></ul><div align="center">ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك  خصائص مشتركة تستخدم مع كل الوسوم.</div> <div align="center">  </div> <div align="center"> <br />نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TABLE> ... <‎/TABLE> </span></span>وسأقوم  أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها. </div> <div align="center"> </div>     <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BORDER</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">تقوم هذه الخاصية بإضافة حدود للجدول وتحديد  سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE  BORDER=5">‎<br />‎<TABLE BORDER="0">‎ </span></span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">WIDTH</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">نستخدم هذه الخاصية لتحديد عرض الجدول ككل.  وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة.  والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض  الجدول سيختلف باختلاف عرض نافذة المتصفح). </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE  WIDTH="600">‎<br />‎<TABLE WIDTH="80%">‎ </span></span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HEIGHT</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">لتحديد ارتفاع الجدول، ويكون تحديد هذا  الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع  الجدول بالنسبة لإرتفاع صفحة المتصفح </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE  HEIGHT="500">‎<br />‎<TABLE HEIGHT="100%">‎ </span></span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">CELLSPACING</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">لتحديد المسافة بين كل خلية من خلايا الجدول  </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE CELLSPACING="10">‎  </span></span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">CELLPADDING</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">لتحديد المسافة الفاصلة بين الحدود وبداية  النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول. </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE  CELLPADDING="10">‎<br /></span></span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALIGN</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">لتحديد محاذاة الجدول أفقياً على الصفحة  يميناً أو يساراً. وهو يأخذ القيم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">right,  left</span></span> </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE  ALIGN="Left">‎<br />‎<TABLE ALIGN="Right">‎ </span></span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BGCOLOR</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">ويستخدم لتحديد لون الخلفية للجدول  </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BGCOLOR="#00FFFF">‎  </span></span></div> <div align="center"> </div> <div align="center">هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها  على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم  فهي نفسها: </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE  BORDER="5">‎<br /></span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  CELLPADDING="5">‎ </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  CELLPADDING="5" CELLSPACING="10">‎ </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  CELLPADDING="5" CELLSPACING="10"‎<br />BGCOLOR="#FFFF00">‎ </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  CELLPADDING="5" CELLSPACING="10"‎<br />BGCOLOR="#FFFF00" HEIGHT="300">‎  </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  CELLPADDING="5" CELLSPACING="10"‎<br />BGCOLOR="#FFFF00" HEIGHT="300"  WIDTH="75%">‎ </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center"> <br />  </div> <div align="center"> </div> <div align="center">ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TR> ... <‎/TR></span></span> ولا بأس من  تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف  لهذا الوسم فهي: </div>     <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALIGN</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">لتحديد محاذاة النص أفقياً داخل الخلايا التي  يتكون منها الصف، والقيم المحتملة لها هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Right, Left, Center</span></span> والقيمة الإفتراضية هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Center</span></span> </span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">VALIGN</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">لتحديد المحاذاة العمودية للنص داخل خلايا  الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية.  وقيمها على التوالي هي: <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Top, Bottom, Middle,  Baseline</span></span> </span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BGCOLOR</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">لتحديد لون الخلفية للخلايا التي يتكون منها  الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TABLE></span></span> ويتم تطبيق اللون المحدد  هنا.</span></div> <div align="center">ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من  خلال الأمثلة التالية: </div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  HEIGHT="300">‎<br /><span style="color: #ff0000;" class="bbc_color">‎<TR ALIGN="Left">‎  </span><br /><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR ALIGN="Right">‎<br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em> <‎/TD><br /><TD> <em>Data</em>  <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR  ALIGN="Center">‎ <br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em>  <‎/TD><br /><TD> <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /></span><‎/TABLE> </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  HEIGHT="300">‎<br /><span style="color: #ff0000;" class="bbc_color">‎<TR VALIGN="Top">‎  </span><br /><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR VALIGN="Bottom">‎<br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em> <‎/TD><br /><TD> <em>Data</em>  <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR  VALIGN="Baseline">‎ <br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em>  <‎/TD><br /><TD> <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR> </span><br /><‎/TABLE> </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="5"  HEIGHT="300" BGCOLOR="#FFFFFF">‎<br /><span style="color: #ff0000;" class="bbc_color">‎<TR  BGCOLOR="#808080">‎ </span><br /><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em>  <‎/TD><br /><TD> <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR BGCOLOR="#C0C0C0">‎<br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em> <‎/TD><br /><TD> <em>Data</em>  <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR>‎  <br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR>  </span><br /><‎/TABLE> </span></span></div> <div align="center">    Data  Data   Data  Data   Data  Data </div> <div align="center"> </div> <div align="center">  </div> <div align="center"> <br /><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TABLE BORDER="0"  HEIGHT="100%" WIDTH="100%">‎<br /><span style="color: #ff0000;" class="bbc_color">‎<TR  BGCOLOR="#808080">‎ </span><br /><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em>  <‎/TD><br /><TD> <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR BGCOLOR="#C0C0C0">‎<br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em> <‎/TD><br /><TD> <em>Data</em>  <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR><br /><br />‎<TR  BGCOLOR="#FFFFFF">‎ <br /></span><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em>  <‎/TD><br /><TD> <em>Data</em> <‎/TD><br /></span><span style="color: #ff0000;" class="bbc_color"><‎/TR> </span><br /></span></span></div> <div align="center"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><‎/TABLE>  </span></span></div> <br />      <br /> <div align="center"><span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"><strong>الدرس الثامن<br />الجداول (2)<br /></strong></span></span></span></div>   <br />  <div style="text-align: right;">أهلاً وسهلاً بك إلى الدرس الثامن من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> نتابع معاً في هذا الدرس الحديث عن  الجداول. وأنا أفترض أنك قد أنهيت الدرس السابق بنجاح، وأن لديك الآن فكرة جيدة  جداً عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل  الآن من حيث توقفنا، أي مع خصائص الخلايا. </div> <div style="text-align: right;">هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد  الخلايا المطلوب يتحدد من خلال كتابة الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TD> ... <‎/TD></span></span> مرات بنفس العدد المطلوب. ومن الممكن أن  تحتوي الخلية على أي عنصر من عناصر لغة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> : نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم،  تستطيع إدراج جدول داخل جدول آخر)<br /> <br />لنسترجع معا المثال الذي قمنا بالتدرب  عليه في الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف  وعمودين (أي خليتين في كل صف). </div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><TABLE></span></span></div>     <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"> </span></span></span><div style="text-align: left;"><TR></div>[/COLOR] [/SIZE][/FONT]   <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><span style="color: #008000;" class="bbc_color"> </span></span></span><div style="text-align: left;"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD></div>[/COLOR][/SIZE][/FONT]<span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"> </span></span></span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR] [/SIZE][/FONT]   <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><span style="color: #008000;" class="bbc_color"> </span></span></span><div style="text-align: left;"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD> </div>[/COLOR][/SIZE][/FONT]<span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"> </span></span></span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR] [/SIZE][/FONT]   <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><span style="color: #008000;" class="bbc_color"> </span></span></span><div style="text-align: left;"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD> </div>[/COLOR][/SIZE][/FONT]<span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"> </span></span></span><div style="text-align: left;"><‎/TR></div>[/COLOR][/SIZE][/FONT] <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><‎/TABLE></span></span></div> <span style="font-size: 1.45em;" class="bbc_size"><br /> </span> <div style="text-align: right;">أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها: </div>     <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ALIGN</span></span> <span style="font-size: 1.45em;" class="bbc_size"> </span><div style="text-align: right;">تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم  المستخدمة هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Left, Center, Right</span></span>  </div>[/SIZE]  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">VALIGN</span></span> <span style="font-size: 1.45em;" class="bbc_size"> </span><div style="text-align: right;">تحدد المحاذاة العمودية للنص، وهو يأخذ القيم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Top, Middle, Bottom, Baseline</span></span>  </div>[/SIZE]  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">WIDTH</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة  للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض  للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف.  </span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HEIGHT</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">تحدد الإرتفاع المطلوب للخلية في الصف، وذلك  بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى  تطبيقه على كل الخلايا فيه. </span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BGCOLOR</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">تحدد لون خلفية الخلية </span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">COLSPAN</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يقوم بدمج الخلية الحالية مع العدد المطلوب من  الخلايا التي تليها أفقياً </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TD COLSPAN="n">‎</span></span>  </div> <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">حيث n هو عدد الخلايا التي سيتم دمجها  </span></div>  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ROWSPAN</span></span>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يقوم بدمج الخلية الحالية مع العدد المطلوب من  الخلايا التي تليها عمودياً (أي أسفلها). </span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<TD ROWSPAN="n">‎</span></span>  </div> <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">وبالطبع n هو عدد الخلايا التي سيتم دمجها  </span></div> <br /> <br /><div style="text-align: right;">وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي  ينبغي ذكرها: </div>  <br /><ul class="bbc_list"><li type="disc"> <div style="text-align: right;">كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً  الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BGCOLOR.</span></span> كيف يتم التعامل معها  إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم  يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم  الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY>.</span></span> </div></li><li type="disc"> <div style="text-align: right;">الملاحظة الثانية تتعلق بالخصائص <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">WIDTH, HEIGHT.</span></span> يختلف أسلوب التعامل مع هذه  الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً  فيما يتعلق بالنسب المئوية. (راجع الموضوع: <a href="http://"http://www.khayma.com/hpinarabic/htutor16.html" class="bbc_link" target="_blank">الوسوم الخاصة  والمتصفحات</a> ).<br />وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى  المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه  الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال  الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TABLE>.</span></span> ثم استخدام هذه  الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول،  والارتفاع المطلوب لكل صف في الجدول.<br />وهذه برأيي أفضل طريقة تضمن بها أفضل  مشاهدة للجدول لجميع زوار موقعك.</div></li><li type="disc"> <div style="text-align: right;">إذا أردت أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا  أقل من باقي الصفوف، فلا يكفي أن تقوم بحذف وسوم الخلايا منها. (كما ترى في الشيفرة  التالية:)</div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div style="text-align: left;"><TABLE BORDER=5"></div>    <span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><TR></div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><span style="color: #008000;" class="bbc_color"><TD> <em>Data</em>  <‎/TD><br /></span></div><span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD> </div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><TD> <em>Data</em>  <‎/TD><br /></div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR></div>[/COLOR] <div style="text-align: left;"><‎/TABLE></div>[/SIZE][/FONT]  <br /><div style="text-align: right;">لأن هذا ما ستحصل عليه: </div>     Data   Data  Data   Data <br /> <div style="text-align: right;">لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم  تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية  الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم  <span class="bbc_u"><strong><em>بدمج</em></strong></span> الخلايا معاً وذلك باستخدام الخصائص <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">COLSPAN, ROWSPAN.</span></span> </div></li></ul><div style="text-align: right;">إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه  الخصائص: </div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div style="text-align: left;">‎<TABLE BORDER="5">‎</div>    <span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><TR></div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><span style="color: #008000;" class="bbc_color"><TD COLSPAN="2"> <em>Data</em>  <‎/TD><br /></span></div><span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><TD> <em>Data</em> <‎/TD><br /><TD>  <em>Data</em> <‎/TD> </div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><TD COLSPAN="2"> <em>Data</em>  <‎/TD><br /></div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR></div>[/COLOR] <div style="text-align: left;"><‎/TABLE></div>[/SIZE][/FONT]     Data   Data  Data   Data <br /> <div style="text-align: right;">لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ  أيضاً انني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن  قمنا بالدمج. <strong>وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم  التعريف الخاصة بها. ما عدا تعريف الخلية الأساسية بالطبع. </strong></div> <div style="text-align: right;">مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول  </div><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"> </span></span><div style="text-align: left;">‎<TABLE BORDER="5">‎</div>    <span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><TR></div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><span style="color: #008000;" class="bbc_color"><TD ROWSPAN="3"> <em>Data</em>  <‎/TD><br /><TD> <em>Data</em>  <‎/TD><br /></span></div><span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><TD> <em>Data</em>  <‎/TD><br /></div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR><br /><br /><TR> </div>[/COLOR]    <span style="color: #008000;" class="bbc_color"> </span><div style="text-align: left;"><TD> <em>Data</em>  <‎/TD><br /></div>[/COLOR]<span style="color: #ff0000;" class="bbc_color"> </span><div style="text-align: left;"><‎/TR></div>[/COLOR] <div style="text-align: left;"><‎/TABLE></div>[/SIZE][/FONT] <div style="text-align: right;">ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف  الخلايا المدموجة من الصف الثاني والثالث. وهذا هو الجدول الناتج. </div>     Data  Data   Data   Data <br />    <br /><div style="text-align: right;">هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TH> ... <‎/TH></span></span> وهي  اختصار <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Table Header</span></span> أي ترويسة  الجدول.<br />والفرق الوحيد بينها وبين <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><TD> ... <‎/TD></span></span> هو أن النص الذي تحتويه يظهر بخط أسود  عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)،  خاصة وأن </div></div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_187916"> </div> <div class="smalltext reportlinks"> </div> </div> <br class="clear"> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg187919"></a> <div class="windowbg2"> <span class="topslice"><span></span></span> <div class="post_wrapper phoneVflow"> <div class="poster"> <div class="avatar"> <a href="#"> <img src="https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar.png" class="avatar sr_switchable" width="110" height="110"/> </a> </div> <h4> <a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722" title="مشاهدة الملف الشخصي لـ achraf.mouni">achraf.mouni</a> </h4> <ul class="reset smalltext" id="msg_187919_extra_info"> <li class="postgroup" >Hero Member</li> <li class="stars"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /></li><ul class="greezeInsider"> <li class="postcount"><i class="fas fa-comments"></i> <strong class="sr_hidden">مشاركة:</strong> 2439</li></ul> <li class="profile"> <ul> <li><a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/icons/profile_sm.gif" alt="مشاهدة الملف الشخصي" title="مشاهدة الملف الشخصي" class="tooltip"/></a></li> <li><a href="https://www.ingdz.net/forum/index.php?action=emailuser;sa=email;msg=187919" rel="nofollow"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/email_sm.gif" alt="البريد الالكتروني" title="البريد الالكتروني" class="tooltip"/></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden phoneVflow"> <div class="keyinfo"> <h5 id="subject_187919" style="display:none;"> <a href="https://www.ingdz.net/forum/index.php?topic=27040.msg187919#msg187919" rel="nofollow">الدليل الشامل الى لغة html</a> </h5> <div class="time_posted"><strong>رد #3 في:</strong> كانون الأول 31, 2008, 10:38:40 صباحاً </div><div id="msg_187919_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_187919"><div align="center"></div> <div align="center"><span style="font-family: Arabic Transparent;" class="bbc_font"><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color"><strong>الدرس التاسع<br />الإطارات (1)<br /></strong></span></span></span></div> <div align="center"> </div> <div align="center"></div> <div style="text-align: right;">أهلاً وسهلاً بك إلى الدرس التاسع من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> في هذا الدرس والدرسين التاليين سوف  نقوم بالتعرف على الإطارات <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Frames</span></span>  وطريقة عرض صفحات الويب باستخدامها…</div> <div style="text-align: right;">فهل تعرف ما هي الإطارات؟ حسنا، سأوضحها لك… هل سبق لك وأن  زرت إحدى الصفحات لتشاهد أنها مقسمة إلى عدة أقسام بحيث يظهر في كل منها صفحة  مستقلة، وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما تكون قد قمت بالنقر على إحدى  الوصلات التشعبية الموجودة في أحد الأقسام لتظهر الصفحة المتعلقة بها في القسم  الآخر. <br />إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك  وإلا قم بالنقر <a href="http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster.html" class="bbc_link" target="_blank">هنا</a> لتشاهد مثالاً على صفحة ذات إطارات (ولا تنسى العودة لكي تتابع  الدرس معا). </div> <div style="text-align: right;">كما شاهدت، فإن الصفحة مكونة من ثلاثة أقسام: علوي وأيسر  وأيمن… والحقيقة أن كل قسم منها هو عبارة عن ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Html</span></span> كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن  تلك التي تعلمت إنشاءها في الدروس السابقة، ولا علاقة لكل منها بالصفحات الأخرى من  حيث التركيب والتعريف.<br />أما كيف تم جمعها معا لتظهر بالشكل الذي شاهدته؟ فهنا بيت  القصيد. فبالإضافة إلى الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم  إنشاؤه خصيصا لتعريف صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن المعادلة تتلخص  بـِ:<br /> <br /><em><strong>مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف  الأساسي الذي يجمعها. </strong></em><br /> <br />أي أنني في المثال السابق إحتجت فعلياً إلى  أربعة ملفات لتكوين الصفحة. </div> <div style="text-align: right;">وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد في هذا  الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة  أو استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت  بإنشاء ملفات على النمط التالي (وهي التي استخدمتها في المثال) وأسميتها <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">frame1.html, frame2.html, frame3.html</span></span> </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><HTML><br /><HEAD><br /><TITLE>Frame1<‎/TITLE><br /><‎/HEAD><br /><BODY><br />Frame  1<br /><‎/BODY><br /><‎/HTML><br /></span></span></div> <div style="text-align: right;">ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات  والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم  </div><div align="center"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET> ...  <‎/FRAMESET> </span></span></div> <div style="text-align: right;">بدلاً من الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY> ... <‎/BODY> </span></span></div> <div align="center">((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BODY</span></span> )) </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><HTML><br /><HEAD><br /><TITLE>Master  File<‎/TITLE><br /><‎/HEAD><br /> <br /><FRAMESET><br /><‎/FRAMESET><br /> <br /><‎/HTML><br /></span></span></div> <div style="text-align: right;">نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه  الوسوم هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">COLS</span></span> وهي تعرّف عدد وأحجام  الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما  الطريقة المباشرة والطريقة النسبية...أو كلاهما معا. </div> <div style="text-align: right;">والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت  نظرك إلى أن قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال  بصورة عملية <span class="bbc_u"><strong>لكن إنتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن  يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات </strong></span>حيث ينقصها وسوم أخرى خاصة بمصدر  الملفات الظاهرة داخل الإطارات، وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. لذلك  أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص  المهمة لاحقاً. </div>      <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=50%,50%">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_1.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد إطارين عموديين حجم كل منهما 50% من حجم  الشاشة </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=20%,50%,30%">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_2.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد ثلاثة إطارات أحجامها 20% و 50% و 30%  على التوالي من حجم الشاشة </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=200,300,*">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_3.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد ثلاثة إطارات عمودية الأول حجمه 200  بيكسل، والثاني 300 بيكسل، <br />أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون  بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر  الموقع) </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=200,*,15%,20%">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_4.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد أربعة إطارات حجم الأول هو 200 بيكسل،  والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما  تبقى من الشاشة. </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=150,*,2*">‎<br /><‎/FRAMESET><br /> <br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_5.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد ثلاثة إطارات الأول حجمه 150 بيكسل....  أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم  الإطار الثاني (*) </span></div> <div style="text-align: right;">أما الخاصية الثانية فهي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">ROWS</span></span> وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات  الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما  باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك  ثانية أن هذه الأمثلة غير مكتملة): </div>      <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  ROWS=50%,50%">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_6.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد إطارين أفقيين ارتفاع كل منهما 50% من  ارتفاع الشاشة </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  ROWS=20%,50%,30%">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_7.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50%  و 30% على التوالي من ارتفاع الشاشة </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  ROWS=50,120,*">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_8.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50  بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة  </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  ROWS=50,*,15%,20%">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_9.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد أربعة إطارات أفقية ارتفاع الأول هو 50  بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني  فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة. </span></div>   <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=*,2*">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster_0.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>  <div style="text-align: right;"><span style="font-size: 1.45em;" class="bbc_size">يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول  </span></div> <div style="text-align: right;">لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET></span></span> فلا زال هناك الكثير. ولكن  من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطاً  وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه، وهي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> فما هو عمل هذا الوسم؟ </div> <div style="text-align: right;">حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات  وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا  مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY></span></span> دون أن يعني ذلك تحديد محتويات  هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎<IMG SRC=imagname.ext">‎</span></span> </div> <div style="text-align: right;">وفي حالة الإطارات فإننا نستخدم الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> وهو وسم مفرد أي ليس له وسم  نهاية تماماً مثل <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><IMG></span></span>. وفيه  نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا  الوسم مرات بنفس عدد الإطارات المذكورة داخل <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET>.</span></span> وسوف أقوم مباشرة باستخدام الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">SRC</span></span> لتحديد مصدر الملف. </div> <div style="text-align: right;">دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة  أعلاه. ونبدأ بالمثال الأول: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS="50%,50%">‎<br />    ‎<FRAME SRC="frame1.html">‎<br />    ‎<FRAME  SRC="frame2.html">‎<br /><‎/FRAMESET><br /></span></span></div> <div align="center">الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.</div> <div style="text-align: right;">مثال آخر:</div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS="200,400,*">‎<br />    ‎<FRAME SRC="frame1.html">‎<br />    ‎<FRAME  SRC="frame2.html">‎<br />    ‎<FRAME  SRC="frame3.html">‎<br /><‎/FRAMESET><br /></span></span></div> <div style="text-align: right;">مثال ثالث:</div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<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 /></span></span></div> <div style="text-align: right;">ورابع:</div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS="*,2*">‎<br />    ‎<FRAME SRC="frame1.html">‎<br />    ‎<FRAME  SRC="frame2.html">‎<br /><‎/FRAMESET><br /></span></span></div>   <div style="text-align: right;">وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل  الإطار وباستخدام <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME SRC></span></span>  تماماً كما ندرجها باستخدام <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><IMG  SRC></span></span> وإليك هذا المثال: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS="50%,50%">‎<br />    ‎<FRAME SRC="frame1.html">‎<br />    ‎<FRAME  SRC="thedome.jpg">‎<br /><‎/FRAMESET><br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmastimag.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>    <br /><div style="text-align: right;">والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة  الذكر وتلخيصها؟ وهذه هي:- </div>     <br /><ul class="bbc_list"><li type="disc"><span style="font-size: 1.45em;" class="bbc_size"></span><span style="font-size: 1.45em;" class="bbc_size"><br /><ul class="bbc_list"><li type="disc">لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه  الإطارات.</li><li type="disc">الملف الرئيسي هو ملف <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> إعتيادي  غير أننا نكتب الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET>  ...<‎/FRAMESET></span></span> بدلاً من <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY> ...</BODY>.</span></span> وبالتالي فهو يحتوي على الخصائص التي  نريدها للإطارات وتعريفاتها.<br /></li><li type="disc">نستخدم الخصائص <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">COLS, ROWS</span></span> لتحديد  عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها.<br /></li><li type="disc">الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في  الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة.</li><li type="disc">نستخدم الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> داخل  الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">SRC.</span></span> بالإضافة إلى استخدامه لتحديد باقي  الخصائص .[/SIZE]<br /></li></ul></span><div style="text-align: right;">كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي:  </div> <img src="http://www.khayma.com/hpinarabic/images/frameset.gif" alt="" class="bbc_img" /> <br />   <br /><div style="text-align: right;">هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... <br />حتى الآن  قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية  إدراج كلاهما في الصفحة. كما في الأمثلة التالية: </div> <br /><ul class="bbc_list"><li type="disc"> <div style="text-align: right;">صفحة مكونة من صفين، الثاني منهما مقسم بدوره إلى عمودين <a href="http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmaster.html" class="bbc_link" target="_blank">  *  </a> </div></li><li type="disc"> <div style="text-align: right;">صفحة مكونة من عمودين، الثاني منهما مقسم بدوره إلى صفين <a href="http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmasterc.html" class="bbc_link" target="_blank">  *  </a> </div></li></ul><div style="text-align: right;">لنبدأ بالمثال الأول:<br />بما أن الصفحة تحتوي على صفين نقوم  بتعريفهما أولاً حسب الإرتفاعات المرغوب بها: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  ROWS=100,*">‎<br />    ‎<FRAME SRC="frame1.html">‎<br />    ‎<FRAME  SRC="frame2.html">‎<br /><‎/FRAMESET><br /> <br /></span></span></div> <div style="text-align: right;">لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> وكأنه صفحة إطارات جديدة لذلك لا  نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات! أي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET></span></span> مرة أخرى. </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  ROWS="100,*">‎<br />    ‎<FRAME  SRC="frame1.html">‎<br /> <br />    <FRAMESET><br />    <‎/FRAMESET><br /> <br /><‎/FRAMESET><br /> <br /></span></span></div> <div style="text-align: right;">وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى  عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية  كالتالي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<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 /></span></span></div> <div style="text-align: right;">ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما  إذا أردت إختصار هذه المهمة <a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fframcode.html" class="bbc_link" target="_blank">فهذه  هي</a> </div>   <div style="text-align: right;">لنقم الآن بإدراج مثال آخر وتحليله: أنقر <a href="http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmasterc2.html" class="bbc_link" target="_blank">هنا</a> لمشاهدته ثم عد إلى هنا لنناقشه معاً </div> <div style="text-align: right;">يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة  إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب  رغبتي وتستطيع أنت اختيار الأحجام التي تريدها). </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=100,*,100">‎<br />    ‎<FRAME SRC="frame1.html">‎<br />    ‎<FRAME  SRC="frame2.html">‎<br />    ‎<FRAME  SRC="frame3.html">‎<br /><‎/FRAMESET><br /> <br /></span></span></div> <div style="text-align: right;">العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل  تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة) </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  ROWS="80,*">‎<br />    ‎<FRAME SRC="frame2.html">‎<br />    ‎<FRAME  SRC="frame4.html">‎<br /><‎/FRAMESET><br /> <br /></span></span></div> <div style="text-align: right;">وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة  النهائية: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<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 /></span></span></div> <div style="text-align: right;">وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة  أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا </div> <div style="text-align: right;">المجال.</div> <div align="center"></div> <div align="center"><strong><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color">الدرس  العاشر<br />الإطارات (2)</span></span></strong><br /></div> <div align="center"></div> <div style="text-align: right;">أهلاً وسهلاً بك إلى الدرس العاشر من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> والذي لا زلنا نناقش موضوع الإطارات  فيه. لقد تعرفت في الدرس السابق على الأساسيات في هذا الموضوع، وتعلمت كيفية إنشاء  صفحة ويب باستخدام مبدأ الإطارات. ونتابع معاً التعرف على باقي الخصائص والتحديدات  المتعلقة بها.</div> <div style="text-align: right;">بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين  للإطارات واللذين ندرجهما في الملف الأساسي، وهما <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET></span></span> والذي يوضع بدلاً من <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><BODY></span></span> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة  وخصائص هذه المجموعة ككل. و <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر  لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن  لا نخلط بينهما. </div> <div style="text-align: right;">وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة  التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع  المتصفحات المختلفة (والتي قمت بتوضيحها <a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fhtutor16.html" class="bbc_link" target="_blank">هنا</a>).  فمثلاً لدينا أربع خصائص للوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET></span></span> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين  الرئيسيين <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Netscape, MS Explorer.</span></span> وكما  إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها  وأترك لك حرية تجربتها إن أردت. </div> <div style="text-align: right;">أولى هذه الخصائص هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FRAMEBORDER</span></span> وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات  وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<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 /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmasterfb.html" class="bbc_link" target="_blank">  *  </a> </span></span></div> <div style="text-align: right;">أما الخصائص الثلاث الأخرى فهي:  </div><br /><ul class="bbc_list"><li type="disc"> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BORDER: </span></span>تحدد  سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">(‎BORDER=n"‎)</span></span> وتعمل فقط مع <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Netscape</span></span> <br /></div></li><li type="disc"> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BORDERCOLOR:  </span></span>لإضافة لون للحدود <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">(‎BORDERCOLOR="rrggbb"‎)</span></span>  وتعمل مع <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Netscape</span></span> أيضاً. <br /></div></li><li type="disc"> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FRAMESPACING:  </span></span>لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">(FRAMESPACING="n"‎)</span></span> وهي تعمل مع <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">MS Explorer.</span></span> </div></li></ul><div style="text-align: right;">أما الخصائص المستخدمة مع الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> فهي كالتالي: </div> <br /><ul class="bbc_list"><li type="disc"> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">MARGINHEIGHT:  </span></span>تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار  (بالبيكسل).  </div><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎MARGINHEIGHT="n"‎</span></span></div></li><li type="disc"> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">MARGINWIDTH:  </span></span>تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار  (بالبيكسل).  </div><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎MARGINWIDTH="n"‎</span></span></div></li><li type="disc"> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">SCROLLING:  </span></span>تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو  أسفل الإطار. وتأخذ القيم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">yes</span></span> للظهور.  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">no</span></span> لعدم الظهور. و <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">auto</span></span> التي تحدد ظهور الأشرطة أو عدمه  تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Windows</span></span>  </div><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">SCROLLING="yes"‎<br />SCROLLING="no"‎<br />SCROLLING="auto"‎<br /></span></span></div></li><li type="disc"> <div style="text-align: right;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NORESIZE</span></span> عند  إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال  السحب والإفلات. وهي لا تأخذ أي قيم. </div></li></ul><div style="text-align: right;">ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم  باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال  لتوضيحها). ولكي أذكرك به رجاءً أنقر <a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmastimag.html" class="bbc_link" target="_blank">هنا.</a> وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن  الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد  ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NORESIZE</span></span> </div>    <br /><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=50%,50%">‎<br />‎<FRAME SRC="thedome.jpg"  MARGINHEIGHT="40">‎<br />‎<FRAME  SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmsmarghg.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>    <br /><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=50%,50%">‎<br />‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40"  MARGINWIDTH="30">‎<br />‎<FRAME  SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmsmargwd.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>    <br /><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=50%,50%">‎<br />‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40"  MARGINWIDTH="30" SCROLLING="yes">‎<br />‎<FRAME  SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmsscroll.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>    <br /><div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<FRAMESET  COLS=50%,50%">‎<br />‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40"  MARGINWIDTH="30" SCROLLING="yes" NORESIZE>‎<br />‎<FRAME  SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmsnorsiz.html" class="bbc_link" target="_blank">  *  </a> </span></span></div>   <br />   <br /><div style="text-align: right;">كذلك هناك الخصائص <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR</span></span> التي تستخدم مع هذا  الوسم وبنفس التفاصيل التي ذكرت مع <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAMESET>.</span></span> لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة  الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها. </div> <div style="text-align: right;">بقي لدينا الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NAME</span></span> والتي تعتبر أهم خاصية لهذا الوسم، فهي التي تحدد طريقة تنسيق  العمل بين الإطارات والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعاً خاصاً  وبصورة مستقلة عن باقي الخصائص، وذلك في الدرس التالي إن شاء الله.</div>   <div style="text-align: right;">هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف  الرئيسي وعادة في النهاية وهو: </div> <div align="center"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><NOFRAMES> ...  <‎/NOFRAMES> </span></span></div> <div style="text-align: right;">يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في  حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة  فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">Netscape, MS Explorer)</span></span> لكنك حتماً تستطيع  مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي إصدارات حديثة نسبياً  وتدعم الإطارات. </div> <div style="text-align: right;">فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحاً  حديثاً فرصة مشاهدة موقعك، فكل ما عليك فعله هو إدراج هذا الوسم في نهاية الملف  الرئيسي للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية. </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><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 /></span></span></div> <div align="center">أكتب صفحتك<br />بالصورة<br />الإعتيادية هنا </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><‎/BODY><br /><‎/NOFRAMES><br /> <br /><‎/HTML><br /></span></span></div> <div style="text-align: right;">أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى  للموقع بدونها، فلم لا تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بأن الموقع  يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (على الأقل لكي تخفف عنه  الصدمة)!! </div>   <div style="text-align: right;">وماذا بعد...؟ لم يبق أي شيء ليذكر في هذا الدرس فقد قمنا  بمناقشة جميع خصائص الإطارات عدا الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NAME.</span></span> ما رأيك لو قمنا بالتدرب على إنشاء نسخة من هذا الموقع  باستخدام الإطارات في الدرس التالي؟ فكر في هذا الموضوع وتخيّل تصميماً معيناً تحب  أن تراه في هذا الموقع (أو بالأحرى تحب أن ترى الموقع فيه)</div> <div align="center"></div> <div align="center"><strong><span style="font-size: 2.65em;" class="bbc_size"><span style="color: #ff0000;" class="bbc_color">الدرس الحادي  عشر<br />الإطارات (3)</span></span></strong><br /></div> <div align="center"></div> <div align="center"> </div>    <div style="text-align: right;">أهلاً وسهلاً بك إلى الدرس الحادي عشر من دروس <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML.</span></span> كما ترى من العنوان لا زلنا نتابع في  موضوع الإطارات، وفي القسم الثالث منه. وذلك لأهمية هذا الموضوع وتشابك خطوطه.  وخصوصاً لأننا نحتاج إلى التعامل مع أكثر من وسم في نفس الوقت وداخل أكثر من ملف.  مما يستدعي التركيز والتروي عندما نريد إنشاء صفحة إطارات. </div> <div style="text-align: right;">لقد أنهينا في الدرسين الماضيين شرح كافة الوسوم والخصائص  التي تتعلق بالإطارات، عدا واحدة هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NAME</span></span> ووعدتك أن أقوم بشرحها بصورة وافية في درس مستقل. كما وعدتك أن  نقوم بإجمال موضوع الإطارات والتدرب عليها من خلال مثال واقعي يتمثل بإنشاء صفحة  إطارات لهذا الموقع وهاأنا ذا أفي بوعدي. </div> <div style="text-align: right;">لقد قلت إن هذه الخاصية تعتبر من أهم خصائص الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> لأنها تحدد طريقة تنسيق العمل  بين الإطارات والصفحات وأسلوب عرضها. <strong>لنعتبر هذا تعريفاً مبدئياً.</strong> ولكي أوضح  لك الهدف من هذه الخاصية، قم باستعراض المثال <a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmainfile.html" class="bbc_link" target="_blank">التالي</a> ... الذي قمت فيه بتمثيل بعض الأجزاء من هذا الموقع (لنترك  تلك الأمثلة المملة التي كنا نعمل عليها في هذا الدرسين السابقين ولنبدأ بالعمل  الجدي). وأنقر على أزرار الوصلات التشعبية الموجودة في الإطار الأيسر ......وبالطبع  لا تنسى النقر على زر <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">BACK</span></span> الموجود في  متصفحك للعودة إلى هذه الصفحة. وقد تحتاج إلى نقره عدة مرات بحسب عدد المرات التي  تنقلت فيها في صفحات الإطار. <br /> <br />ماذا وجدت؟!؟ إن الصفحات تظهر في نفس الإطار  (أعرف أنك كنت تتوقع ظهورها في الإطار الآخر... فهل خيبت ظنّك؟). حسناً، لا زالت  هذه الإطارات تحتاج إلى القليل من العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن  تتمعن في الشيفرات التالية، وهي في الواقع الشيفرات الخاصة بالملفات المستخدمة في  هذا المثال. وأرجو أن تقوم بدراستها جيداً، على الأقل لكي تكون متأكداً من فهمك لكل  الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي. </div>   <div style="text-align: right;">شيفرة الملف الرئيسي الذي أسميته <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">mainfile.html</span></span> </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><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 /></span></span></div>   <div style="text-align: right;">شيفرة الملف العلوي (الترويسة) الذي أسميته <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fheader.html" class="bbc_link" target="_blank">header.html</a></span></span> </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><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 /></span></span></div>   <div style="text-align: right;">شيفرة الملف الذي يحتوي على الأزرار والوصلات التشعبية  والذي أسميته <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Flftframe.html" class="bbc_link" target="_blank">lftframe.html</a></span></span> </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><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 /></span></span></div>    <br /><div style="text-align: right;">وبالطبع بقي لدينا الإطار الأكبر وهو لا يحتوي على ملف خاص  لأنه الإطار العام الذي نريد إظهار الملفات فيه. ولن يتم إجراء أي تعديل على تلك  الملفات. وبصورة مبدئية لقد شاهدت أنه يحتوى على صفحة المقدمة والمسماه <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">htmintro.html</span></span> </div>    <br /><div style="text-align: right;">وهنا يأتي دور الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NAME</span></span> والتي نقوم من خلالها بتعيين اسم ما للإطار <strong>-أي الإطار الذي  نرغب أن تظهر به الملفات عندما نقوم بالنقر على الوصلات التشعبية-</strong> حيث سيتم  فيما بعد استخدام هذا الإسم من أجل استهداف هذا الإطار من قبل الوصلات التشعبية في  الإطارات الأخرى أو حتى في الصفحات الأخرى.<br />وبالمناسبة فقد حان الآن ذكر خاصية  جديدة من خصائص الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><A> ...  <‎/A></span></span> ( وهو وسم الوصلات التشعبية كما عرفت في <a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fhtutor06.html" class="bbc_link" target="_blank">الدرس  السادس.</a>) وهذه الخاصية هي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">TARGET.</span></span>  (انتظر قليلاً وستعرف لماذا) </div> <div style="text-align: right;">دعنا نقوم بترتيب الأمور بصورة أكثر وضوحاً  وتسلسلاً:<br />برأيك بأي من الملفات الثلاثة السابقة يجب أن نضع الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">NAME?</span></span> سؤال سخيف! أليس كذلك؟ طالما أنها إحدى  خصائص الوسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> إذن من  البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط في الملف الرئيسي إذن هي توضع  في الملف الرئيسي... هذه أصبحت واضحة‍! لكن مع أي وسم من وسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"><FRAME></span></span> الموجودة في الملف الرئيسي؟؟  بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافه، وكذلك الأمر  بالنسبة لتعريف ملف الوصلات التشعبية الذي لا نريد استهدافه أيضاً. إذن لم يبق  لدينا إلا الوسم الخاص بتعريف الإطار العام الذي ستظهر به الملفات. وبافتراض أننا  نريد تسمية هذا الإطار بالاسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">mainwindow.</span></span> وهو اسم اختلقته أنا حسب ما أريد وأستطيع إعطاءه أي اسم  آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص مثل /؟#$%^ (عدا الرمز _  الذي يستخدم في حالات خاصة سأذكرها لك لاحقاً في هذا الدرس). <br /> <br />إذن تصبح  شيفرة الملف الأساسي هي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><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"  <strong>NAME="mainwindow"</strong>>‎<br /><‎/FRAMESET><br /><‎/FRAMESET><br /><‎/HTML><br /></span></span></div> <div style="text-align: right;">وبهذا نكون قد إنتهينا من إعداد الملف الرئيسي ليكون ملف  إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك الإطار من أي مكان باستخدام  الإسم الذي عرفناه به. </div> <div style="text-align: right;">المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل  الملفات المتعلقة بهذه الوصلات تظهر في الإطار المحدد. وهنا يأتي دور الخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">TARGET</span></span> سالفة الذكر لكي تقوم على الرحب  والسعة بأداء هذه الوظيفة. وسوف نعمل الآن على الملف المسمى <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">lftframe.html.</span></span> أليس هو الملف الذي يحتوي على  الوصلات التشعبية؟! ليصبح بالشكل التالي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><HTML><br /><HEAD><br /><TITLE>Buttons<‎/TITLE><br /><‎/HEAD><br />‎<BODY  BGCOLOR="#BCD8EB">‎<br />‎<A HREF="htutor01.html"  <strong>TARGET="mainwindow"</strong>><IMG  SRC="lesson1.jpg"></A><BR>‎<br />‎<A HREF="htutor02.html"  <strong>TARGET="mainwindow"</strong>><IMG  SRC="lesson2.jpg"></A><BR>‎<br />‎<A HREF="htutor03.html"  <strong>TARGET="mainwindow"</strong>><IMG  SRC="lesson3.jpg"></A><BR>‎<br />‎<A HREF="htutor04.html"  <strong>TARGET="mainwindow"</strong>><IMG  SRC="lesson4.jpg"></A><BR>‎<br />‎<A HREF="htutor05.html"  <strong>TARGET="mainwindow"</strong>><IMG  SRC="lesson5.jpg"></A><BR>‎<br /><‎/BODY><br /><‎/HTML><br /></span></span></div> <div style="text-align: right;">والآن حان وقت العرض، أنقر <a href="http://"http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmainfil2.html" class="bbc_link" target="_blank">هنا</a> لنشاهد صفحة الإطارات بعد التعديل: </div> <div align="center"><span style="font-family: andalus,tahoma;" class="bbc_font"><span style="font-size: 2.65em;" class="bbc_size">لقد نجحنا... أليس  كذلك</span></span> </div> <div style="text-align: right;">الحقيقة أننا لم ننجح بصورة مطلقة، بل إلى حد ما... وأعتذر  لك لأني نغصت عليك هذا النجاح. لكن طالما أننا نريد الوصول إلى أفضل مستوى وأعلى  أداء لموقعنا فيجب علينا دائماً تطبيق القواعد التي تضمن ذلك. ولكي أوضح لك السبب  الذي يجعلني أتكلم كالفلاسفة سوف أطلب منك العودة إلى الصفحة الرئيسية للإطارات بعد  أن قمت بإضافة وصلات تشعبية إضافية لها، واحدة خاصة بالإنتقال إلى ... صفحة  الإطارات نفسها، أي إعادة تحميل الصفحة على الشاشة. والثانية للإنتقال من طريقة  العرض بالإطارات إلى العرض بدون إطارات. لذلك أنقر <a href="http://www.ingdz.com/vb/redirector.php?url=http%3A%2F%2Fwww.khayma.com%2Fhpinarabic%2Fexamples%2Fmainfil3.html" class="bbc_link" target="_blank">هنا</a> رجاءً. وقم بتجربة النقر على هذه الوصلات الجديدة. </div> <div style="text-align: right;">مشكلة جديدة، أليس كذلك؟ ففي الحالة الأولى تم تحميل الصفحة  داخل الإطار نفسه، وبذلك أصبحت الصفحات متداخلة في ما بينها، وكذلك الأمر في الحالة  الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل:</div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A HREF="filename.html"  <strong>TARGET="mainwindow"</strong>> ... </A> </span></span></div> <div style="text-align: right;">كما لا نستطيع كتابته بالشكل التالي: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size"><A HREF="filename.html"> ...  </A> </span></span></div> <div style="text-align: right;">وطبعاً أنت تعرف السبب في كلتا الحالتين. </div> <div style="text-align: right;">لقد وقعنا في مصيدة الإطارات. إذن فما الحل؟ الحل توفره لغة  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> نفسها من خلال وضع قيمة معينة  للخاصية <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">TARGET</span></span> وهي <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">"‎_top"</span></span> لتخبر المتصفح أن يقوم بتحميل الصفحة  في <strong>المستوى الأعلى</strong> من الشاشة. أي ان يقوم بإلغاء أي إطارات أو صفحات عادية  موجودة أصلاً وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق في لغة  <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> وليست من عندي كما في الإسم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">mainwindow.</span></span> </div> <div style="text-align: right;">والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎_top</span></span> معرفة بشكل مسبق في لغة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">HTML</span></span> لتحدد موقع ظهور الصفحة المعنية. ويجب  أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">lowercase.</span></span> فإذا كتبت بالأحرف الكبيرة فلن تحصل على النتيجة التي  تريدها لأنها ستعتبر في هذه الحالة وكأنها أسماء عادية. وهذه هي القيم الأربعة:  </div>        <br /> <div style="text-align: left;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎_top</span></span></div>  <div style="text-align: right;">تحمل الصفحة في أعلى مستوى للشاشة أي تلغي الإطارات  الموجودة أصلاً</div> <img src="http://www.khayma.com/hpinarabic/images/top.gif" alt="" class="bbc_img" />    <div style="text-align: left;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎_blank</span></span></div>  <div style="text-align: right;">تقوم بفتح شاشة جديدة وفارغة للمتصفح وتعرض الصفحة المحملة  فيه</div> <img src="http://www.khayma.com/hpinarabic/images/blank.gif" alt="" class="bbc_img" />    <div style="text-align: left;"><span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size">‎_self</span></span></div>  <div style="text-align: right;">(الحالة الإفتراضية) تقوم بتحميل الصفحة في نفس الإطار الذي  توجد به الوصلة التشعبية التي تم النقر عليها، (وبالطبع هذا ما يحدث دائما دون وجود  هذه القيمة، أليس كذلك؟) </div> <img src="http://www.khayma.com/hpinarabic/images/self.gif" alt="" class="bbc_img" />    <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.45em;" class="bbc_size"> </span></span><div style="text-align: left;">‎_parent</div>[/SIZE][/FONT]  <div style="text-align: right;">تقوم بعرض الإطار المحمل مكان الإطار الأب،<br />وتأمل الشكل  التالي الذي يمثل صفحة إطارات مركبة.  </div><img src="http://www.khayma.com/hpinarabic/images/parent.gif" alt="" class="bbc_img" /> <div style="text-align: right;">أنت تعرف أننا نحتاج إلى ثلاثة أزواج من الوسوم <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.35em;" class="bbc_size"><FRAMESET> ... <‎/FRAMESET></span></span>  لإخراج مثل هذه الصفحة. </div> <br /><ul class="bbc_list"><li type="disc"> <div style="text-align: right;">الأول لتحديد الصفحة ككل </div></li><li type="disc"> <div style="text-align: right;">الثاني لتحديد الإطارين 2 و 3 المتفرعين من الصفحة الرئيسية  </div></li><li type="disc"> <div style="text-align: right;">الثالث لتحديد الإطارين 4 و 5 المتفرعين من الإطار 3  </div></li></ul><div style="text-align: right;">وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا  أردت) للإطارين 2 و 3 وأن الإطار 3 هو الأب للإطارين 4 و 5. وعلى سبيل المثال إذا  احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.35em;" class="bbc_size">‎_parent</span></span> لتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين  1 و 2 بمقابل الصفحة الرئيسية.<br />وللتمييز بين هذه القيمة والقيمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.35em;" class="bbc_size">‎_top </span></span>فإن القيمة <span style="font-family: Times New Roman;" class="bbc_font"><span style="font-size: 1.35em;" class="bbc_size">‎_top</span></span> تقوم بالتحميل في المستوى الأول  (الأعلى) دائماً وبغض النظر عن موقع الوصلة التشعبية. </div>  <div style="text-align: right;">ونعود الآن إلى صفحتنا. فلو أضفنا السطرين التاليين إلى ملف  الوصلات التشعبية: </div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<A HREF="mainfile.html"  <strong>TARGET="_top"</strong>><IMG  SRC="mainpage.jpg"></A><BR>‎<br /></span></span></div> <div style="text-align: left;"><span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">‎<A HREF="htmintro.html"  <strong>TARGET="_top"</strong>><IMG  SRC="noframes.jpg"></A><BR>‎</span></span></div>    <div align="center"></div> <div align="center">انتهت الدروس<br />اتمنى ان تجد من يستفيد بها<br />والسلام  عليكم</div>   <span style="font-family: Arial;" class="bbc_font"><span style="font-size: 1em;" class="bbc_size">  </span></span><div align="center"></div> <div align="center">الدروس مقتبسة من احد المواقع</div>[/SIZE][/FONT]</li></ul></div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_187919"> </div> <div class="smalltext reportlinks"> </div> </div> <br class="clear"> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg188002"></a> <div class="windowbg"> <span class="topslice"><span></span></span> <div class="post_wrapper phoneVflow"> <div class="poster"> <div class="avatar"> <a href="#"> <img src="https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar.png" class="avatar sr_switchable" width="110" height="110"/> </a> </div> <h4> <a href="https://www.ingdz.net/forum/index.php?action=profile;u=70416" title="مشاهدة الملف الشخصي لـ monarque">monarque</a> </h4> <ul class="reset smalltext" id="msg_188002_extra_info"> <li class="postgroup" >Hero Member</li> <li class="stars"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /></li><ul class="greezeInsider"> <li class="postcount"><i class="fas fa-comments"></i> <strong class="sr_hidden">مشاركة:</strong> 1238</li></ul> <li class="profile"> <ul> <li><a href="https://www.ingdz.net/forum/index.php?action=profile;u=70416"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/icons/profile_sm.gif" alt="مشاهدة الملف الشخصي" title="مشاهدة الملف الشخصي" class="tooltip"/></a></li> <li><a href="http://monarqueinfo.site50.net/" title="http://monarqueinfo.site50.net/" target="_blank" class="new_win tooltip"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/www_sm.gif" alt="http://monarqueinfo.site50.net/" /></a></li> <li><a href="https://www.ingdz.net/forum/index.php?action=emailuser;sa=email;msg=188002" rel="nofollow"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/email_sm.gif" alt="البريد الالكتروني" title="البريد الالكتروني" class="tooltip"/></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden phoneVflow"> <div class="keyinfo"> <h5 id="subject_188002" style="display:none;"> <a href="https://www.ingdz.net/forum/index.php?topic=27040.msg188002#msg188002" rel="nofollow">الدليل الشامل الى لغة html</a> </h5> <div class="time_posted"><strong>رد #4 في:</strong> كانون الأول 31, 2008, 12:07:13 مسائاً </div><div id="msg_188002_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_188002">شكرا أخ أشرف على هذا التميز..</div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_188002"> </div> <div class="smalltext reportlinks"> </div> </div> <br class="clear"> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg188361"></a> <div class="windowbg2"> <span class="topslice"><span></span></span> <div class="post_wrapper phoneVflow"> <div class="poster"> <div class="avatar"> <a href="#"> <img src="https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar.png" class="avatar sr_switchable" width="110" height="110"/> </a> </div> <h4> <a href="https://www.ingdz.net/forum/index.php?action=profile;u=36817" title="مشاهدة الملف الشخصي لـ يوسف الضادي">يوسف الضادي</a> </h4> <ul class="reset smalltext" id="msg_188361_extra_info"> <li class="postgroup" >Hero Member</li> <li class="stars"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /></li><ul class="greezeInsider"> <li class="postcount"><i class="fas fa-comments"></i> <strong class="sr_hidden">مشاركة:</strong> 5333</li></ul> <li class="profile"> <ul> <li><a href="https://www.ingdz.net/forum/index.php?action=profile;u=36817"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/icons/profile_sm.gif" alt="مشاهدة الملف الشخصي" title="مشاهدة الملف الشخصي" class="tooltip"/></a></li> <li><a href="http://www.sou9dz.com" title="http://www.sou9dz.com" target="_blank" class="new_win tooltip"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/www_sm.gif" alt="http://www.sou9dz.com" /></a></li> <li><a href="https://www.ingdz.net/forum/index.php?action=emailuser;sa=email;msg=188361" rel="nofollow"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/email_sm.gif" alt="البريد الالكتروني" title="البريد الالكتروني" class="tooltip"/></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden phoneVflow"> <div class="keyinfo"> <h5 id="subject_188361" style="display:none;"> <a href="https://www.ingdz.net/forum/index.php?topic=27040.msg188361#msg188361" rel="nofollow">الدليل الشامل الى لغة html</a> </h5> <div class="time_posted"><strong>رد #5 في:</strong> كانون الأول 31, 2008, 06:07:59 مسائاً </div><div id="msg_188361_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_188361">بارك الله فيك</div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_188361"> </div> <div class="smalltext reportlinks"> </div> </div> <br class="clear"> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg188373"></a> <div class="windowbg"> <span class="topslice"><span></span></span> <div class="post_wrapper phoneVflow"> <div class="poster"> <div class="avatar"> <a href="#"> <img src="https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar.png" class="avatar sr_switchable" width="110" height="110"/> </a> </div> <h4> <a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722" title="مشاهدة الملف الشخصي لـ achraf.mouni">achraf.mouni</a> </h4> <ul class="reset smalltext" id="msg_188373_extra_info"> <li class="postgroup" >Hero Member</li> <li class="stars"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/star.gif" alt="*" /></li><ul class="greezeInsider"> <li class="postcount"><i class="fas fa-comments"></i> <strong class="sr_hidden">مشاركة:</strong> 2439</li></ul> <li class="profile"> <ul> <li><a href="https://www.ingdz.net/forum/index.php?action=profile;u=41722"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/icons/profile_sm.gif" alt="مشاهدة الملف الشخصي" title="مشاهدة الملف الشخصي" class="tooltip"/></a></li> <li><a href="https://www.ingdz.net/forum/index.php?action=emailuser;sa=email;msg=188373" rel="nofollow"><img src="https://www.ingdz.net/forum/Themes/sunrise16/images/email_sm.gif" alt="البريد الالكتروني" title="البريد الالكتروني" class="tooltip"/></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden phoneVflow"> <div class="keyinfo"> <h5 id="subject_188373" style="display:none;"> <a href="https://www.ingdz.net/forum/index.php?topic=27040.msg188373#msg188373" rel="nofollow">الدليل الشامل الى لغة html</a> </h5> <div class="time_posted"><strong>رد #6 في:</strong> كانون الأول 31, 2008, 06:22:16 مسائاً </div><div id="msg_188373_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_188373">وفيك بركة    ........شكرا لمرورك</div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_188373"> </div> <div class="smalltext reportlinks"> </div> </div> <br class="clear"> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> </form> </div> <a id="lastPost"></a> <div class="pagesection"> <div class="specialBL buttonlist floatright"> <ul> <li><a title="طباعة" class="tooltip button_strip_print" href="https://www.ingdz.net/forum/index.php?action=printpage;topic=27040.0" rel="new_win nofollow"><span class="last">طباعة</span></a></li> </ul> </div> <div id="moderationbuttons"></div> <div class="pagelinks floatleft">صفحات: <strong class='navPages active'>1</strong> </div> </div> <div class="navigate_section"> <ul> <li> <a href="https://www.ingdz.net/forum/index.php"><span>Forum de l'Ingénieur</span></a> » </li> <li> <a href="https://www.ingdz.net/forum/index.php#c225"><span>قسم الرياضيات والإعــلام الآلي</span></a> » </li> <li> <a href="https://www.ingdz.net/forum/index.php?board=236.0"><span>منتــدى البرمجــة العـــام</span></a> » </li> <li> <a href="https://www.ingdz.net/forum/index.php?board=231.0"><span>برمجة المواقع وقواعد البيانات</span></a> » </li> <li class="last"> <a href="https://www.ingdz.net/forum/index.php?topic=27040.0"><span>الدليل الشامل الى لغة html</span></a> </li> </ul> </div> <div class="plainbox" id="display_jump_to"> </div> <br class="clear" /> <script type="text/javascript" src="https://www.ingdz.net/forum/Themes/default/scripts/topic.js"></script> <script type="text/javascript"><!-- // --><![CDATA[ var oQuickReply = new QuickReply({ bDefaultCollapsed: true, iTopicId: 27040, iStart: 0, sScriptUrl: smf_scripturl, sImagesUrl: "https://www.ingdz.net/forum/Themes/sunrise16/images", sContainerId: "quickReplyOptions", sImageId: "quickReplyExpand", sImageCollapsed: "collapse.gif", sImageExpanded: "expand.gif", sJumpAnchor: "quickreply" }); if ('XMLHttpRequest' in window) { var oQuickModify = new QuickModify({ sScriptUrl: smf_scripturl, bShowModify: true, iTopicId: 27040, sTemplateBodyEdit: '\n\t\t\t\t\t\t\t\t<div id="quick_edit_body_container" style="width: 90%">\n\t\t\t\t\t\t\t\t\t<div id="error_box" style="padding: 4px;" class="error"><' + '/div>\n\t\t\t\t\t\t\t\t\t<textarea class="editor" name="message" rows="12" style="width: 100%; margin-bottom: 10px;" tabindex="1">%body%<' + '/textarea><br />\n\t\t\t\t\t\t\t\t\t<input type="hidden" name="cd2a398a8" value="c20d2fcb7621835083ad6df25d599bf9" />\n\t\t\t\t\t\t\t\t\t<input type="hidden" name="topic" value="27040" />\n\t\t\t\t\t\t\t\t\t<input type="hidden" name="msg" value="%msg_id%" />\n\t\t\t\t\t\t\t\t\t<div class="righttext">\n\t\t\t\t\t\t\t\t\t\t<input type="submit" name="post" value="حفظ" tabindex="2" onclick="return oQuickModify.modifySave(\'c20d2fcb7621835083ad6df25d599bf9\', \'cd2a398a8\');" accesskey="s" class="button_submit" />  <input type="submit" name="cancel" value="إلغاء" tabindex="3" onclick="return oQuickModify.modifyCancel();" class="button_submit" />\n\t\t\t\t\t\t\t\t\t<' + '/div>\n\t\t\t\t\t\t\t\t<' + '/div>', sTemplateSubjectEdit: '<input type="text" style="width: 90%;" name="subject" value="%subject%" size="80" maxlength="80" tabindex="4" class="input_text" />', sTemplateBodyNormal: '%body%', sTemplateSubjectNormal: '<a hr'+'ef="https://www.ingdz.net/forum/index.php'+'?topic=27040.msg%msg_id%#msg%msg_id%" rel="nofollow">%subject%<' + '/a>', sTemplateTopSubject: 'موضوع: %subject%  (زيارة 4647 مرات)', sErrorBorderStyle: '1px solid red' }); aJumpTo[aJumpTo.length] = new JumpTo({ sContainerId: "display_jump_to", sJumpToTemplate: "<label class=\"smalltext\" for=\"%select_id%\">انتقل إلى:<" + "/label> %dropdown_list%", iCurBoardId: 231, iCurBoardChildLevel: 1, sCurBoardName: "برمجة المواقع وقواعد البيانات", sBoardChildLevelIndicator: "==", sBoardPrefix: "=> ", sCatSeparator: "-----------------------------", sCatPrefix: "", sGoButtonLabel: "اذهب" }); aIconLists[aIconLists.length] = new IconList({ sBackReference: "aIconLists[" + aIconLists.length + "]", sIconIdPrefix: "msg_icon_", sScriptUrl: smf_scripturl, bShowModify: true, iBoardId: 231, iTopicId: 27040, sSessionId: "c20d2fcb7621835083ad6df25d599bf9", sSessionVar: "cd2a398a8", sLabelIconList: "ايقونة الرسالة", sBoxBackground: "transparent", sBoxBackgroundHover: "#ffffff", iBoxBorderWidthHover: 1, sBoxBorderColorHover: "#adadad" , sContainerBackground: "#ffffff", sContainerBorder: "1px solid #adadad", sItemBorder: "1px solid #ffffff", sItemBorderHover: "1px dotted gray", sItemBackground: "transparent", sItemBackgroundHover: "#e0e0f0" }); } // ]]></script> <script> jq(document).ready(function () { jq("label.container").each(function() { jq(this).append("<span class='checkmark'></span>"); }); // Display jq(".checkmark").hover(function (){ if(jq("#oInTopicModeration_remove_button").text().indexOf("[0]") !== -1) jq(".buttonlist.specialBL li a[onclick=\"return oInTopicModeration.handleSubmit('remove')\"]").css("display", "none"); else jq(".buttonlist.specialBL li a[onclick=\"return oInTopicModeration.handleSubmit('remove')\"]").css("display", "inherit"); }); jq(window).resize(papaQuickButans); papaQuickButans(); }); </script> </div> </div></div> <footer> <div class="frame"> <div class="wrapper" style="width:90%"> <a href="#top_section" class="buttonLike toTopSR phoneNone"><i class="fas fa-arrow-up"></i></a> <ul class="reset"> <li></li> <li class="copyright"> <span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;"><a href="https://www.ingdz.net/forum/index.php?action=credits" title="Simple Machines Forum" target="_blank" class="new_win">SMF 2.0.15</a> | <a href="http://www.simplemachines.org/about/smf/license.php" title="License" target="_blank" class="new_win">SMF © 2016</a>, <a href="http://www.simplemachines.org" title="Simple Machines" target="_blank" class="new_win">Simple Machines</a> </span><br />Designed with <i class="fas fa-heart" style="color:red"></i> by <a href="http://sycho.22web.org/?ref=https://www.ingdz.net/forum" target="_blank" class="tooltip" title="Portfolio">SychO</a></li> <li class="social_media"> <!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --></li> </ul> </div> </div> </footer><div class="fullscreen searchBar" style="display:none;"> <div class="fsClose buttonLike icon_style"><i class="fas fa-times-circle"></i></div> <div class="fsInner"> <form id="search_form" action="https://www.ingdz.net/forum/index.php?action=search2" method="post" accept-charset="UTF-8"> <div class="inGroup" style="margin-top: 25px;"> <input type="text" name="search" value="" class="input_text" required/> <span class="highlight"></span> <span class="bar"></span> <label>Search </label> </div> <input type="submit" name="submit" value="بحث" class="button_submit" /> <input type="hidden" name="advanced" value="0" /> <input type="hidden" name="topic" value="27040" /></form> </div> </div> <div class="fullscreen loginBar" style="display:none;"> <div class="fsClose buttonLike icon_style"><i class="fas fa-times-circle"></i></div> <div class="fsInner"> <script src="https://www.ingdz.net/forum/Themes/default/scripts/sha1.js"></script> <form id="guest_form" action="https://www.ingdz.net/forum/index.php?action=login2" method="post" accept-charset="UTF-8" onsubmit="hashLoginPassword(this, 'c20d2fcb7621835083ad6df25d599bf9');" autocomplete="off" > <input autocomplete="false" name="hidden" type="text" style="display:none;"> <div class="inGroup griny" style="margin-top: 25px;"> <input type="text" name="user" size="10" class="input_text" autocomplete="off" required/> <span class="highlight"></span> <span class="bar"></span> <label>اسم المستخدم</label> </div> <div class="inGroup griny"> <input type="password" name="passwrd" size="10" class="input_password" autocomplete="nope" required/> <span class="highlight"></span> <span class="bar"></span> <label>كلمة المرور</label> </div> <label class="container checkmall">البقاء متصل دوما <input type="checkbox" name="cookieneverexp" class="input_check" /> <span class="checkmark"></span> </label> <div class="downer"> <input type="submit" value="دخول" class="button_submit" /> <a href="https://www.ingdz.net/forum/index.php?action=reminder">هل نسيت كلمة المرور؟</a> </div> <input type="hidden" name="hash_passwrd" value="" /><input type="hidden" name="cd2a398a8" value="c20d2fcb7621835083ad6df25d599bf9" /> </form> </div> </div> <script> jq(document).ready(function () { jq(".fsOpen").click(function () { jq("input:text:visible:first").focus(); jq("body").css("overflow", "hidden"); }); jq(".searchButton").click(function () { jq(".fullscreen.searchBar").css("display", "block"); }); jq(".loginOpen").click(function () { jq(".fullscreen.loginBar").css("display", "block"); }); jq(".fullscreen .fsClose").click(function () { jq(".fullscreen").css("display", "none"); jq("body").css("overflow", "auto"); }); }); // Cookies jq(".sr_modeSwitcher").click( function() { var sr_value = getCookie("sr_mode"); if (sr_value == "") { var ava = "https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar_midnight.png"; var sr_fa = "sun"; var sr_link = "<link class=\"tobeswitched\" rel=\"stylesheet\" type=\"text/css\" href=\"https://www.ingdz.net/forum/Themes/sunrise16/css/midnight.css?fin20\" />"; setCookie("sr_mode", 1, 30); } else { if(sr_value == 1) { var sr_fa = "moon"; var ava = "https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar.png"; var sr_val = 0; var sr_link = "<link class=\"tobeswitched\" rel=\"stylesheet\" type=\"text/css\" href=\"https://www.ingdz.net/forum/Themes/sunrise16/css/sunrise.css?fin20\" />"; } else { var sr_fa = "sun"; var ava = "https://www.ingdz.net/forum/Themes/sunrise16/images/default_avatar_midnight.png"; var sr_val = 1; var sr_link = "<link class=\"tobeswitched\" rel=\"stylesheet\" type=\"text/css\" href=\"https://www.ingdz.net/forum/Themes/sunrise16/css/midnight.css?fin20\" />"; } setCookie("sr_mode", sr_val, 30); } // Fade body out jq("body").fadeOut(); // Switch the stylesheet jq(".sr_modeSwitcher").html("<i class='fas fa-"+sr_fa+"'></i>"); setTimeout(function() { jq(".tobeswitched").remove(); jq("head").append(sr_link); jq(".avatar.sr_switchable").attr("src", ava); if(sr_fa=="moon") jq(".sunmoon").removeClass("midnight"); else jq(".sunmoon").removeClass("sunrise"); }, 400); // Fade back in jq("body").fadeIn(); setTimeout(function() { if(sr_fa=="moon") jq(".sunmoon").addClass("sunrise"); else jq(".sunmoon").addClass("midnight"); }, 500); } ); </script> <div class="sampleClass"></div> </body></html>