اخبار توب ماين: html

الصفحة الرئيسية

‏إظهار الرسائل ذات التسميات html. إظهار كافة الرسائل

الدرس العاشر : الجداول و تنسيقها (2) ( دورة ال html )

الخميس، 24 مارس 2011 |

Posted by kamannana

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

..

درست اخي في الدرس الماضي كيف تضع جدول في لغة الـ html و كيف تنسقه ..

أنا فصلت الدرسين عشان اسهل لاني أدري أن هذيله الدرسين معقدات شوي ..

اليوم درسنا راح يركز على شيئين :

الاول : دمج الخلايا باستخدام الامرين colspan و rowspan

الثاني : الخلايا و تنسيقها

و راح نبدي بالثاني ..

بسم الله ..

أولاً : الخلايا و تنسقها

مثل ما عرفنا في الدرس الاول من دروس الجداول أنه عدد الخلايا يتحدد بعدد تكرار الامر

كود PHP:

<td>

و لكن السؤال الان : هل من الممكن أن تضيف عناصر html داخل الامر

كود PHP:

<td>

؟؟ الاجابه : اوف كورس ممكن ممكن تضيف أي حاجه سواء كلام أو صوره .. الخ

تنسيق الخلايا مثل تنسيق الجداول فيه خصائص .. بس الفرق بينهم انه الاول يعمم على الجدول ككل بينما الثاني يعمم على خليه وحده بس .. الخليه ممكن تكون صف أو عمود ..

بداية الخصائص الي ممكن تضيفها لــ الخلايا :

1/ خاصية المحاذاه الافقيه

و تستخدم لمحاذاة الكائنات التي داخل الامر

كود PHP:

<td>

محاذاة أفقياً

و تستخدم كالتالي :

كود PHP:

<td align="xxxxx">

طبعا مع الالتزام بتغيير المتغير xxx الى احد القيم التاليه :

center = الوسط

left = اليسار

right = لليمين

2/ خاصية المحاذاه الرأسيه

و تستخدم لمحاذاة الكائنات التي داخل امر الخليه محاذاه رأسيه

و تستخدم كالتالي :

كود PHP:

<td align="yyyyy">

طبعا مع الالتزام بتغيير المتغير yyyyy الى احد القيم التاليه :

bottom = القاع

middle = الوسط

top = الاعلى

baseline = تبعاً للخط الاساسي او خط القاعده

3/ خاصية الطول width

و تستخدم كالتالي : لا لا مب كل حاجه أنا بشرحها ..

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

تستخدمها مثل لما تستخدمها مع الجداول .. اذا ما تعرف كيف تستخدمها ارجع للدرس الماضي ..

4/ خاصية العرض height

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

5/ خاصية لون الخلفيه

ههه لا تخافوا هالمره أنا بشرح ..

و نستخدمها كالتالي :

كود PHP:

<td bgcolor="ccccc">

طبعا مع الالتزام بتغيير المتغير cccc الى أحد اكواد الالوان ..

معلومات على الطاير :

1- تتكرر بعض الخصائص مع بعض الاوامر .. ما القصد من الجمله الماضيه ؟؟ القصد أوضحلك أنه اذا ما حطيت الخاصيه bgcolor لــ امر الخليه فــ انه الخليه تلقائيا راح تاخذ اللون الي انته حطيت لما نسقت الصفحه أو تحديداً الي موجود فـ الامر

كود PHP:

<body>

2- من الممكن أنك تلاحظ حاجه لما تحط .. في بعض الكمبيوترات فيها عدة مستعرضات للانترنت ممكن أنك تلاحظ أنه قياس الجدول في المستعرض الاول يختلف عن المستعرض الثاني .. و ذلك لاختلاف التعامل مع الخاصيتين width و height و أيضا لاختلاف طريقة ترجمة شفرة الــ html من مستعرض لاخر .. و بالنسبه لهذا الامر فــ أنا من وجهة نظري أنك أفضل طريقه عشان تحل هذا النزاع تحط الخصائص width و height مع امر الجدول

كود PHP:

<table>

ثانياً : خاصية دمج الخلايا

البعض الحين داخل نفسه يقول : أني أنا خرفت ليش حطيت هذي الخاصيه في جزء لوحدها من الدرس مع أنه ما في فرق بينها و بين الخصائص الثانيه ؟؟ الفرق أنه هذي الخاصيه معقده أكثر من الباقي .. شو يعني معقده ؟ الحين بنشوف

أولاً : دمج الصفوف .. او الدمج الافقي ..

و نستخدم فيه الامر colspan لكن كيف نحدد عدد الخلايا الي ندمجهم ؟؟ و هل بيكون الدمج كذيه فوضه ؟؟

نحدد عدد الخلايا عن طريق تحديد المتغير الذي يتعلق بالخاصيه colspan

اما بالنسبه للدمج فيكون بشكل منتظم .. يعني انته اذا سويت للخليه هذي دمج راح تندمج مع الي جنبها ..

و تستخدم هذي الخاصيه كالتالي :

كود PHP:

<td colspan="n">

مع الالتزام بتغيير الــ n الى عدد الخلايا التي تريد أن تدمجها مع الخليه التي وضعت معها هذي الخاصيه .. طبعاً لا تنسى انه احنا نشتغل الحين أفقياً ..

ثانياً : دمج الاعمده .. او الدمج العمودي

و نستخدم معاه الخاصيه rowspan و يطابق في مواصفاته الامر colspan

و يستخدم كالتالي :

كود PHP:

<td rowspan="n">

مثل ما اتفقنا نغير الــ n الى عدد الخلايا الي تريد تدمجهم مع الخليه الي احنا قاعدين نشتغل عليها .. طبعاً رأسياً ..

ملاحظه : الدمج الرأسي أو العمودي يكون للاسفل يعني اذا انته حطيت دمج رأسي فــ وحده من الخلايا راح تندمج تلقائي مع الي تحتها ..

آخيرا و ليس آخراً .. تطبيق عملي على كل هذا الكلام ..

كود PHP:

<html>

[right]<head> [/right]
 
[right]<title> الجداول </title> [/right]
 
[right]</head> [/right] 
[right]<table border="3" width="300" height="200"> [/right] 
[right]<tr> [/right] 
<td colspan="3" bgcolor="ffffff#"> خليه 1 </td> [right]</tr><tr> <td> خليه 2 </td> <td> خليه 2 </td> </tr> <tr> <td rospan="2"> خليه 3 </td> </tr></table> </body> </html>[/right]

أسئلة الدرس ..

- هل يمكن اضافة علامات تنسيق الفقرات و العناوين الى احدى خلايا الجدول ؟؟

تطبيقات الدرس ..

- غير طول الجدول الي فالتطبيق الى 500

- و أيضاً غير محتوى الخليه 1 .. و اعمل داخلها قائمه عدديه راح يكون مكتوب فالقائمه التالي :

1- سلطنة عمان

2- الامارات العربيه المتحده

3- السعوديه

- و غير حجم الحدود و خليه 2

*انتهى*

بهذا الدرس انتهت الدورة بالتوفيق

اقرأ المزيد

الدرس التاسع : الجداول و تنسيقها (1) ( دورة ال html )

|

Posted by kamannana

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

الجداول أصعب شي لكنها مفيده واجد بالاخص لما تسوي ستايل لمنتدى أو مجله ..
تابعوا عندي خطوه خطوه عشان تفهموا زين .. أولاً : الاوامر الاساسيه لادراج جدول
شوفوا هالشفره ..

كود PHP:

<html>

<head>

<title> الجداول </title>

</head>

<body>

<table>

<tr>

<td> خليه </td> <td> خليه </td>

</tr>

<tr>

<td> خليه </td> <td> خليه </td>

</tr>

</table>

</body>

</html>

انسخ الشفره الى المفكره و من ثم استعرضها في المستعرض وشوف النتيجة

شرح الشفره ..
شوفوا في ثلاث أوامر أساسيه عند وضع أي جدول الي هي ..

كود PHP:

<table>

= الامر الاساسي في ادراج الجداول و تندرج تحته باقي الاوامر

كود PHP:

<tr>

= أمر اضافة عمود و تندرج تحته أوامر الصفوف و الخلايا

كود PHP:

<td>

= امر اضافة الصف أو الخليه
ثانياً : الخصائص التي تستخدم في تنسيق (( الجدول ))
و راح نعددها واحد واحد و بعدين راح أعطيكم مثال يوضحها كلها ان شاء الله ,,
1/ الخاصية border
و هي لاضافة حدود للجدول .. و نستخدمها على هذا الشكل ..

كود PHP:

<table border="x">

طبعا مع تغيير المتغير x الى الرقم الذي يمثل حجم الحدود الذي تريدها للجدول ..
و هذا يعني أن حجم الحد سيكون 4 .. ولكن اذا كنا نريد نحط ما فيه حد شو نسوي ؟؟ الجواب : نحط بدل x الرقم 0
2/ خاصية العرض width
و تستخدم كالتالي :

كود PHP:

<table width="xxx">

و ممكن نغير الــ xxx الى حاجتين ..
الاولى :متغير يكون رقم كالتالي :

كود PHP:

<table width="400">

الثانيه : متغير يكون نسبه مئويه ..
<table width="75%">
2/ خاصية الارتفاع height
حالها حال خاصية العرض ممكن بالنسبه المئويه و ممكن بالارقام ..
ملاحظه : جميع القياسات التي تضعها في كل من خاصية الطول و العرض و الارتفاع و غيرها بالبكسل و ليست بالسنتي متر ..
نرجع لخاصيتنا ..
لاحظ كيف نكتبها ..

كود PHP:

<table height="100">

او

كود PHP:

<table height="20%">

الحين اخر حاجه ..
تطبيق عملي على كل الي قلناه اليوم ..

كود PHP:

<html>

<head>

<title> الجداول </title>

</head>

<body>

<table border="3" width="300" height="75%">

<tr>

<td> خليه </td> <td> خليه </td>

</tr>

<tr>

<td> خليه </td> <td> خليه </td>

</tr>

</table>

</body>

</html>

و مثل ما تعودنا لازم تكون نتيجة الكود بعد نسخه الى المفكره و تغيير امتداده و تشغيله بالمستعرض جاهزة

*انتهى*

اقرأ المزيد

الدرس الثامن : القوائم في لغة الــ html ( دورة ال html )

|

Posted by kamannana

بسم الله الرحمن الرحيم
اليوم راح نتبع طريقه جديده للشرح ..
فالبدايه راح اعطيكم مثال يتضمن جميع ما في الدرس و بعدها راح نبدي نشرح المثال شوي شوي أو مثل ما يقولوا الهنود ( توره توره)

لاحظ عندي ..

كود PHP:

<html>

<head>

<title> القوائم </title>

</head>

<body>

<ol>

<li> مسقط <li> الدوحه <li> الرياض <li> أبو ظبي <li> القاهره<li> الدار البيضاء </ol>

<br>

<ul>

<li> بغداد<li> المنامه  <li> الكويت <li> دمشق</ul>

</body>

</html>

نحول امتدادها الى htm

نشرح
في البدايه الامر

كود:

 <br>

لا يحتاج لشرح والي ما يعرف الشرح يرجع للدرس الثالث
بسم الله نبدأ نشرح المثال اولاً : الامر <ol>
هذا الامر يستخدم لوضع قائمه متسلسله أو بالارقام ثانيا : الامر

كود:

 <ul>

هذا الامر يستخدم لوضع قائمه غير رقميه أو عدديه مجرد نقاط فقط ثالثاً : الامر

كود:

<li>

وهذا الامر بخليكم تكتشفوا الي يسويه بنفسكم ..
نبدي نتعمق شوي .. أولاً : القوائم العدديه
توجد للقوائم العددية عدة أنواع .. تقريباً أربعه أو المهمه أربعه
بس السؤال كيف نحدد نوع القائمه هذي ؟
سؤال حله مب صعب ..
شوف حبيبي لما تريد تحدد نوع القائمه تستخدم الخاصيه type
و في ما يلي الانواع الاربعه الي تكلمت عنها :
-

كود:

<ol type="I">

و هذه تعني انك تريد تخلي نوع القائمه حروف لاتينيه كبيره ( كبيتل)
-

كود:

<ol type="i">

و هذه يعني انك تريد تخلي نوع القائمه حروف لاتينيه صغيره (سمول)
-

كود:

<ol type="a">

هذي يعني أنك تريد تحط حروف انجليزيه سمول
-

كود:

<ol type="A">

هذي يعني أنك تريد تحط حروف انجليزيه كبيره كبيتل
ثانياً : القوائم الغير عدديه
و تعمل على شكلين هما :

كود:

<ul type="circle">

هذا يعني دائره شكل النقاط راح يكون

كود:

<ul type="square">

هذا يعني مربعات راح تكون اشكال النقاط
أخر حاجه في درس القوائم قــوائــ التعريف ـم
قوائم التعريف تختلف كثيراً عن القوائم العاديه
كيف يعني ؟
بنشوف
لاحظ عندي في هذا المثال البسيط

كود PHP:

<html>

<head>

<title> قوائم التعريف </title>

</head>

<body>

<dl>

<dt> مسقط <dd> عاصمة سلطنة عمان <dt> الرياض <dd> عاصمة المملكه العربيه السعوديه <dt> أبو ظبي <dd> عاصمة الامارات العربيه المتحده<dt> مدونة توب ماين <dd> عاصمة دورات بلوجر </dl>

</body>

</html>

انسخ الكود و حوله الى امتداد htm

نبدأ شرح المثال : أولاً : الامر

كود:

<dl>

و يستعمل لتحديد بداية القائمه و نهايتها ثانياً : الامر

كود:

 <dt>

و يستعمل لتحديد بداية النقطه أو الجزئيه من القائمه .. و هو أمر مفرد يعني مب لازم يكون له أمر نهايه ثالثا : الامر

كود:

 <dd>

و يستعمل لتحديد بداية شرح النقطه .. و هو أيضاً امر مفرد
فكر في هذا السؤال بعد الانتهاء من تنفيذ الدرس : هل يجب وضع الخاصيه type عند علامة نهاية أمر القائمه سواء كانت قائمه عدديه أم غير عدديه ؟؟
و فكر ايضاً :
كيف تستطيع أن تعمل تنسيق لخط القائمه ؟؟
تطبيق عملي على الدرس :
اعمل صفحة html و ليكن العنوان " البلدان العربيه "
اكتب التالي مع مراعاة التنسيقات المكتوبه بين الاقواس :
البلدان العربيه و عواصمها (( اعمله خط عريض و خلي حجم الخط 3 و كمان محاذاه لليمين و خليه العنوان الاول))
((اعمل خط أفقي حجمه 3 و لونه أزرق ))
(( اعمل قائمة تعريف غير عدديه و اكتب فيها التالي مع الاخذ بعين الاعتبار أن العبارات المكتوبه بين القوسين هي الشرح و الكلمات في البدايه هي النقاط الاساسيه ))
سلطنة عمان .. (( عاصمتها مسقط ))
الامارات (( عاصمتها ابو ظبي))
مصر (( القاهره))
تونس (( تونس ))

*انتهى*

اقرأ المزيد

اخبار توب ماين

المتابعون

الدرس العاشر : الجداول و تنسيقها (2) ( دورة ال html )

الدرس التاسع : الجداول و تنسيقها (1) ( دورة ال html )

الدرس الثامن : القوائم في لغة الــ html ( دورة ال html )

التسميات

المشاركات الشائعة