دورة للمبتدئين والمحترفين في لغة HTML

بسم الله الرحمن الرحيم

مرحبا بكم في مدونة الخبير.

نواصل في الدورة المتقدمة لتعلم لغة البرمجة "HTML"
الدرس الثالث:مهم جدا جدا.

تنظيم الـمـحتوى

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

يمكنك عمل القائم المرتبه باستخدام الوسم ol والغير مرتبة ul بحيث توضع البنود بينهما وكل بند يحدد بالوسم li، ويمكنك تحديد نوع الترقيم في القوائم المرتبة بالحروف أو بالأقام العربية أو الرومانية وغيرها عبر الخاصية type وتأخذ أحد القيم التالية :

1 : 1, 2, 3, 4, ..

a : a, b, c, d, ..

A : A, B, C, D, ..

i : i, ii, iii, iv, ..

I : I, II, III, IV, ..

وفي القوائم الغير مرتبة :

· circle :

· square :

· disc :

ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية.


Pepsi


Crash


7 Up


Windows (85%)


Linux (10%)


Mac (3%)


Other (2%)

  
American Companies

    
Microsoft

    
General Motors

  
German Companies

    
Dubian

BMW

        
6 Class

        
7 Class

الجداول

تعتبر الجداول من أهم مكونات صفحات HTML، وجميع التصاميم الإحترافية تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها وتشكيلها في القالب الذي يريدونه، يتم إدراج الجدول بالوسم table وداخل الجدول يجب إدراج صفوف tr وداخل الصفوف توجد البيانات td، يمكن وضع إطار للجدول بالخاصية border حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار، القيمة الإفتراضية للإطار هي 0.

                                                                   First Row - First Data

                                                                 First Row - Secound Data

                                                                 Secound Raw - First Data

                                                               Secound Raw - Secound Data

يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية cellspacing، والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطة الخاصية cellpadding.

                                                                          First Cell

                                                                        Secound Cell

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

                                                      First Cell

                                                   Secound Cell

                                                      First Cell

                                                   Secound Cell

يمكن التحكم بلون خلفية الجدول بالخاصية bgcolor ويمكن تعيين صورة في الخلفية بالخاصية background، يمكن استعمال هذه الخواص في الخلايا td أيضا، وعند تعيين قيمة bgcolor للجدول مختلفة عن قيمة أحد الخلايا فإن لون الخلية سيطغى على لون الجدول في تلك الخلية، لأن الخلية موجودة فوق الجدول في ترتيب الطبقات.

                                                              First Cell

                                                                             Secound Cell

يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية align ورأسيا بالخاصية valign، في الخاصية align القيمة left تعني محاذاة لليسار و rigth لليمين و center بالمنتصف و justify للضبط الكلي تجعل الأسطر مساوية في الطول، أما الخاصية valign فتأخد القيمة top للأعلى، bottom للأسفل middle للمنتصف.

                                                 First Cell

                                                   Secound Cell

يمكن أيضا وضع جدول داخل جدول، عن طريق وضع الجدول في أحد الخلايا td، وهنا يحسب عرض الجدول الداخلي النسبي بالنسبة لعرض الخلية التي تحتويه والموجودة في الجدول الخارجي.

                                                                 First Table - First Cell

                                                               Secound Table - First Cell

                                                             Secound Table - Secound Cell

                                                                 Third Table - First Cell

                                                               Third Table - Secound Cell

                                                                First Table - Fourth Cell

يمكن أيض دمج الخلايا رأسيا بالخاصيةrawspan وأفقيا بالخاصية colspan، حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخلية الحالية، وتستخدم هذه الخصائص في الخلايا td.

                                                       First Cell

                                                                             Secound Cell

                                                                               Third Cell

                                                                  Fourth Cell

                                                                   Fifth Cell

                                                                               Sixth Cell

                                                                             Seventh Cell

                                                                              Eighth Cell

                                                                              Nineth Cell

الأطر

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

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

أول وسوم الإطارات هو الوسم frameset الذي يفتح مجموعة الإطارات، وفي هذه المجموعة يوجد عدد من وسوم الإطار frame المفردة ونضع فيها مصدر الصفحة في الخاصية src أو يمكننا وضع frameset أخرى داخل الـ frameset الأولى، ويوضع الوسم frameset خارج منطقة الجسم body دائما، نحدد في الوسم frameset إذا كنا سنقسم الصفحة أفقيا أو رأسيا، ونحدد حجم كل إطار، إذا كنا نريد تقسيم الصفحة رأسيا على شكل أعمدة نستخدم الخاصية cols ونضع فيها عرض كل إطار بحيث يفصل بين كل إطار والآخر فاصلة ( , ) وهذه الحجوم قد تكون نسبية أو مطلقة وتختلف في احتواء النسبية على علامة النسبة المؤوية، وإذا أردنا تقسيم الصفحة أفقيا نقوم بعمل نفس الشيء ولكن باستخدام الخاصية rows بدلا من cols، مثلا إذا أردنا تقسيم الصفحة رأسيا إلى ثلاثة أعمدة الأول بعرض 100 بكسل والثاني بعرض 10% من الشاشة والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا :

وكما ذكرنا يمكنك وضع frameset آخر بدلا من أحد الإطارات frame

يمكنك وضع أو إزالة الإطار الذي يظهر حول الألواح باستخدام الخاصية frameborder إذا ضبتها عند القيمة 0 لن يظهر الإطار و 1 يظهر الإطار، يمكنك التحكم بحجم الإطار عن طريق زيادة أو إنقاص المسافة بين الألواح وذلك عبر الخاصية framespacing فتضع فيها القيمة التي تريدها، يمكنك ضبط الخاصيتان السابقتان عند 0 لمنع المستخدم من تغيير حجم الألواح.

يمكنك التحكم في ظهور أشرطة التمرير Scroll Bars في كل إطار من الإطارات عن طريق الخاصية scrolling وهي تأخذ القيمة yes لإظهار أشرطة التمرير دائما، والقيمة no لمنع ظهورها دائما، و auto لإظهارها وقت الحاجة إليها فقط.

لكي تستطيع أن ترسل أوامرك ووصلاتك من لوح إلى آخر، يجب أن تقوم بتسمية أو عنونة الألواح بواسطة الخاصية name، وبعد ذلك لعمل وصلة بواسطة الوسم a استخدم الخاصية target لتحديد وجهة الوصلة، يمكنك فتح الوصلة في شاشة متصفح جديدة _blank أو فتحها في الشاشة الحالية فوق مجموعة الألواح _top أو فتحها في اللوح الحالي _self أو فتحها في اللوح الأب (في حالة ألواح داخل ألواح) _parent أو فتحها في أي لوح بوضع إسم اللوح.

                                                               target="_blank">Page 1

                                                                 target="_top">Page 3

                                                                     target="main">Page 2

                                                                     target="main">Page 4

إضافة إلى ما سبق، يوجد أيضا إطار من نوع خاص يكون عائما في المستند مثل الصورة، يتم إدراج هذا الإطار في أي مكان بالمستند تحت القسم body، ويقوم بعمل إطار ليعرض صفحة HTML خارجية، ووسمه هو iframe وأهم خصائصه الخاصية src التي تحدد المستند المصدر الذي يجب عرضه في الإطار، يمكنك أيضا عنونه بالخاصية name وعمل وصلات موجهة إليه تماما مثل الإطار العادي، وفيما بقي فهو مثل الإطار

يمتلك أيضا خاصية width و height لتحديد حجمة.............
ونوااااااااصل.

لاتنسي اذا اعجبك هذا الدرس اضافة تعليك او اقتراح,مشاركة.
والسلام.