سلسلة دروس html- الدرس الرابع
نبدأ باذن الله الدرس الرابع من لغة تأشيرالنص التشعبي
و هذه روابط للدروس السابقة لمن يحب قرائتها:
==============================
التعامل مع تصميم الصفحة
يتكون هذا الدرس من الجداول و الاطارت
# الجداول #
بالاضافة الى كونها وسيلة لتنظيم المعطيات فان الجداول يمكن ان تعطى حدودا غير مرئية وتستخدم لتقسيم الصفحة الى مناطق متعددة حيث يمكن لهذه المناطق ان تحمل صورا و نصا او يمكن ان تترك فارغة لتفصل بين العناصر
* الجداول البسيطة :
يتكون الجدول من صفوف و اعمدة تتقاطع مشكلة خلايا تبدا الشفرة التي تنشىء جدولا باستخدام الوسم<...table> ثم يتم تعريف صفوف الجدول واحدا تلو الاخر باستخدام الوسم<..tr> و يتم بعد ذلك حشر الاعمدة من اليسار الى اليمين باستخدام <...td> و يتم اغلاق الوسم بــ<table/>
و هذا مثال :
<html> <head><title>الجداول</title></head> <body> <center> جدول بسيط <p> <table> <tr> <td>top left</td> <td>top right</td> </tr> <tr> <td>bottom left</td> <td> bottom right</td> </tr> </table> </center> </body> </html>
و لتوضيح ما يجري نقوم باعداد سماكة border للحد ضمن الوسم <...table> كما يلي :
<TABLE BORDER=2>
ليتم رسم حدود داخلية بين الخلايا و حول محيط الجدول
يتم عرض الحدود الخارجية للجدول عادة من المتصفحات بشكل ثلاثي الابعاد
يمكنك استخدام الوسمين <caption> و <caption/> عندما تريد اضافة تعليق الى جدولك لكي تقدم شرحاً عنه فهما يرصفان النص بتمركز فوق الجدول او تحته اذا قمت باعداد الخيار algin=bottom ضمن الوسم الاول.
مثال شامل :
<html> <haed><title>منتديات الفريق العربي للبرمجة</title></head> <body> جدول بسيط:<br> <table> <tr> <td>top left</td> <td>top right</td> </tr> <tr> <td> bottom left</td> <td> bottom right</td> </tr> </table> <p> <table border=2> <caption algin="bottom">و كما ترى.النتيجة a botoom-algined caption </caption> <tr> <td>top left</td> <td>topright</td> </tr> <tr> <td>bottom left</td> <td>bottom right</td> </tr> </table> </body> </head> </html>
* تنسيق الجداول :
هذه بعض الخيارت التي يمكن وضعها في الوسم <table> :
@widht : يقوم باعداد عرض الجدول مقدراً بالبكسل او كنسبة مئوية من نافذة المتصفح.
@algin : يمكن رصف الجدول في الوسط او اليمين او اليسار
@bgcolor :يقوم باعداد لون خلفية للجدول.
@background :يمكنك استخدام صورة كخلفية للجدول
@cellspacing :يقوم باعداد المسافة بين الصفوف و كذلك بين الاعمدة
@cellpadding :يقوم باعداد المسافة بين كل خلية و محتوياتها
مثال:
<body> <table border=10 background="red" width=95% cellpadding=15 cellsoacing=10% cols=3> <tr> <td></td> <td><b>منتدى</b></td> <td><b>الفريق العربي</b></td> </tr> <tr> <td><b>dark blood</td> <td><b>no red blood</td> <td><img src="blood.gif"> <b> الدماء </b></td> </tr> <tr> <td><b>لا أعرف ما اكتب</b></td> <td><b>كنت امزح</b><td> </table> </body>
* تنسيق الخلايا :
يتم رصف محتويات الخلايا الى اليسار و في الوسط اقتراضيا و يمكننا تغيير ذلك بواسطة الخيار algin و valign
مثال:
<td algin = right valgin = bottom>
و يمكن ان تغير لون خلفية الخلية باستخدام bgcolor , background كما يلي :
<td background=اسم الصورة مع الامتداد>
او
<td bgcolor=red>
* تنسيق النص داخل الجدول :
لا يمكنك اعداد لون النص لجدول بشكل كامل فهو يتبع لون النص الي تم اعداده في الوسم body و كذلك بالنسبة للحجم لذلك نستخدم الوسم <...font> و ذلك ضمن زوج الوسم <td> لكل خلية
مثال :
<body> <font face=arial> <table border=2> <tr> <td><font color=red size=6>big red text</font></td> <td>هذا الخط الافتراضي </td> </tr> </table> </body>
* حجم الخلية :
يتحدد حجم الخلية بشكل افتراضي بحسب حجم محتوياتها و يمكن تغيير حجمها بواسطة الخيار widht و هذا مثال :
<td widht =90%>
هذه الخلية طويلة.............
</td>
>>>>>>>>>>
^ الجداول المتقدمة :
^<<<<<<<<<
يمكن تقسيم الجدول الى مجموعات من الصفوف و الأعمدة ليتم تطبيق لتنسيق على جميع الخلايا ضمن المجموعة
* مجموعات الصفوف :
يمكن تقسيم الجدول الى ثلاثة اجزاء الراس و المتن و الذييل حيث يمكن تنسيق جميع الخلايا الواقعة ضمن الاجزاء في الوقت نفسه.
في الواقع ان الفكرة الحقيقية التي تكمن وراء التجميع هي ان البرامج المستقبلية ستكون قادرة على تفسير الجداول بشكل صحيح و ذلك بتحويل المعلومات الى تنسيق قواعد البيانات على سبيل المثال او الطباعة للجداول الضخمة سوف نحتاج للوسوم التالية :
<thead> من اجل الصفوف التي تشكل راس الجدول
<tfoot> من اجل تذييل الجدول
<tbody> من اجل المتن
يتم اتباع كل من هؤلاء الوسوم بالوسمين tr و /tr اللذين يعرفان الخلايا و هذا مثال :
<BODY> <TABLE BORDER=1> <THEAD ALGIN=CENTER BGCOLOR=RED VALIGN=BOTTOM> <TR> <TD>TITLE</TD> <TD>ORDER<BR>CODE</TD> </TD> <TFOOT ALGIN=RIGHT BGCOLOR=BLUE> <TR> <TD COLSPAN=2>STATE CD,VINYL OR DVD IN YOUR ORDER</TD> </TR> <TBODY BGCOLOR=GREEN> <TR> <TD>NICE DAY THE ORGENAL ALBUOM </TD> <TD>KAD/2005</TD> </TR> <TBBODY BGCOLOR=YELLOW> <TR> <TD>KADMIUM IS A HEAVY METAL</TD> <TD>KAD/2002</TD> </TR> </BODY>
* مجموعات الاعمدة :
يمكن تجميع العمدة معا و تنسيقها باستخدام الوسم<COLGROUP>حيث يتم وضعه خلف الوسم<TABLE>و هو ياخذ خياران فقط
*SPAN :يحدد عدد الاعمدة التي تحتويها المجموعة
*WIHTH :يقوم باعداد العرض الافتراضي لكل عامود من المجموعة.
و هذا مثال :
<TABLE>
<COLGROUP WIDTH=200>
<COLGROUP SPAN=5 WIDTH=10%>
<THEAD>
<TR>.......
حيث يقوم هذا المثال باعداد 6 اعمدة العمود الاول عرضه200 بيكسل و باقي الاعمدة تكون بعرض 10% من نافذة المتصفح
* الاعمدة المستقلة :
يمكنك القيام بتنسيق أعمدة مستقلة ضمن مجموعة ما من الاعمدة و ذلك باستخدام الوسم <col>بدون ان تزعج نفسك في وضعهما داخل مجموعة فيما بعد و يمكنك رسم حدود حول مجموعات الاعمدة و الصفوف كما يمكنك أيضاً احاطة مجموعة من الاعمدة بحد خارجي و لكن قم بتغيير الخلفية للتمييز بين الاعمدة المستقلة
- عندما يتم الحاق الوسم <colgroup> باحد الوسوم <col> فانه سيتم تجاهل الخيار span ليتم اخذ الوسوم <col>
مثال :
<body> <table border=5> <col grup algin-left span=2> <col bgcolor=navy width=40%> <col bgcolor= olive width=10%> <colgroup algin=middle bgcolor=maroon span=3 width=50%> <col> <col bgcolor=blue> <col> <colgroup bgcolor=purple width=50> <thead algin middle bgcolor=red valign=top> <tr> <td algin=middle rowspan=2>title</td> <td algin=middle rowspan=2>order code</td> <td colspan=3>available on</td> <td colsapn=2>price</td> <tr> <td>cd</td><td>vinly</td><td>dvd</td> <tfoot> <tr> <td algin=middle bgcolor=red colspan=6>plz specify which format when ordering </td> </tr> <tbody> <tr> <td>ignation rocks</td> .......
* الحدود الخارجية و الداخلية :
يقوم الخيار BORDER باعداد السماكة الخارجية و يوجد خيارين اضافيين هما FRAME يحدد الاطار الخارجي و RULES يحدد الحدود بين الخلايا.
الخيار FRAME :
يوجد 7 طرق لاعداد هذا النمط :
-VOID:بدون حد
-ABOVE:حد علوي فقط
-BELOW:حد سفلي فقط
-HSIDES:حد سلفي و علوي
-VSIDES:حد يمني و يساري
-RHS : حد يميني فقط
- LHS:حد يساري فقط
و يكتب الكود على الشكل التالي :
<TABLE BORDER=10 FRAME=HSIDES>
الخيار RULES :
يوجد 5 خيارات له :
-none بدون حدود داخلية
-groups الحدود تكون بين مجموعة الصفوف و مجموعة الاعمدة
-rows بين الصفوف فقط
-cols بين الاعمدة فقط
-all بين كل الخلايا
و هكذا نكون قد انتهينا من الجزء الاول لتصميم الصفحة و في الجزء الثاني سوف نتحدث عن الاطارات.