أحدث المواضيع

مرات مشاهدة الصفحة في الشهر الماضي

خبراتي فى لغات البرمجه

85% HTML
90% CSS
85% Web-Design

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

الاثنين، 16 مايو 2016

الدرس (17) تعلم html : الجداول ( الجزء الثالث )

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


درس اليوم إن شاء الله  بيكون خاتمة لسلسلة دروس الجداول في لغة html و سيكون فيه عرض مفاهيم مهمة في
بناء الجداول 
سنتعرف على أول مفهوم إلا وهو (colspan) , ما هو و ماذا يفيد ؟؟ 
يفيد هذا الشيء في تلخيص و منع من تكرار نفس العبارة لمقصد واحد , فمثلاً في هاتين الصورتين مقدمة لما سوف نشرحه 



الفرق بين الاولى و الثانية في أن الأولى في الصف الأول كانت تحتوي على أربعة أعمدة و الصورة الثاني اصبحت في عامودين
فما قلنا منعنا من تكرار نفس العبارة ووضعنا نفس العبارة في عامدو واحد أو خلية واحدة لأن المعلومات تحت كلمة computer (1) المكررة هم لكلا العبارة المكررة او العمود المكرر فعملنا على الاختصار في العمودين إلى عامود واحد و فعلنا ذلك بإضافة كود 
colspan="2"
إلى العامود الأول الصف الأول و قمنا بحذف العامود الثاني في الصف الاول ليصبح الجدول على هذا الشكل 
فجدول كان على هذا الشكل 

فالأختلاف الحاصل بين الجدولين السابقين بالتحديد ان قمنا بحذف المحدد باللون الاحمر في النص التالي المأخوذ من الجدول الثاني مع العلم اني حذفت العامود الرابع من الصف الأول ايضاً لنفس السبب الذي هو لإختصار التكرار من (computer (2 
<td>Computer (1)</td>
<td>Computer (1)</td>
<td>Computer (2)</td>
<td>Computer (2)</td>
و قمنا بإضافة الكود الذي هو يأخذ عامودين من الصف الأول 
<td colspan="2">Computer (1)</td>
<td colspan="2">Computer (2)</td> 
في الذي سبق اخذنا عامودين لكل من 
Computer (1)
و
Computer (2)
و الرقم الذي باللون الأزرق هو يعني بأن أخذنا عامودين وهو الرقم 2 
................................................................................................
نأتي الآن إلى شيء مماثل للذي سبق لكن الإختلاف في اختصار صفين الذين يقعان في العامود الواحد , كيف ذلك ؟؟؟ 
أنظر إلى الصورتين التاليتين لتفهم الفرق



لتكن الاكواد المستعملة في الصور على الشكل التالي 
الصورة الأولى أكوادها هن
الصورة الثانية أكوادها هن

كما سبق فقد حذفت العامود الأول في الصف الثاني , وفي الصورة الأولى كانت اكواد الصف الثاني على الشكل التالي 
<td>Computer (2)</td>
<td>ram 2GB</td>
<td>OS (M)</td>
فحذفت العبارة الملونة باللون الأحمر ليصبح في الصورة الثانية على الشكل التالي 
<td>Crom 64GB</td>

<td>OS (W)</td>
ومن ثم نضيف في الصف الأول العامود الأول عبارة 
rowspan="2"
لتتغير وسوم الصف الأول العامود الأول من 
<td>Computer (1)</td>
إلى 

<td rowspan="2">Computer (1)</td>

وكلما نزيد من الرقم 2 كلما حجزنا اكثر من الصفوف في نفس العامود

نأتي في آخر جزء من درسنا هو ان ننسق الجدول نستعمل في هذا الشيء عدة وسوم , الوسم الأب فيه هو

<colgroup></colgroup>

 نضع هذين الوسمين اسفل الوسم <table> مباشرةً

ويكون داخل هذين الوسمين الجزء المسؤول أو وسوم تنسيق الجدول

فمثلاً نريد تغيير لون أعمدة معينة على كل الصفوف 
انظر على الشكل التالي


هذا هوا الجدول

وهذه هي الأعمدة 

في الصورة السابقة استعملنا لتلوين الأعمدة بهذا الشكل هذه الوسوم 
<col span="2" style="background:#E5E5F1;">
<col span="1" style="background:#C0C0EA;">
في السطر الأول الذي فيه رقم 2 باللون الأحمر كنا نعني من الرقم 2 ان أول عامودين اعطي خلفيتهم لون معين ف style تعني الشكل و 
background

 تعني خلفية اي خلفية العامود  




#E5E5F1

تعني كود اللون الذي استخدمته في تلوين أول عامودين 

في السطر الثاني الذي فيه الرقم 1 الملون باللون الأحمر







كنت اعني من الرقم 1 أن أول عامود بعد العامودين في السطر الأول لونهم بلون معين 

انظر ما بعد style هذا ينتمي للغة css و لكن المطلوب منك معرفة شكل الوسم ككل

السطرين السابقين  

<col span="2style="background:#E5E5F1;">
<col span="1style="background:#C0C0EA;">
يضعان كما قلنا بين الوسمين 
<colgroup></colgroup>
ملحوظة : ترتيب التلوين في الاعمدة يمكنك تعديله فيمكنك القول ان أول عامود يلون بلون و بعدها ثاني عامودين يلونون بلون معين تختاره
ففي النهاية أعرض لكم الوسوم التي استخدمناها قبل قليل لتنسيق الجدول مع وسوم الجدول 

وبهذا نكون قد انتهينا من سلسلة تعلم كيفية انشاء الجداول في لغة html

السلام عليكم و رحمة الله و بركاته
اقرأ تكملة الموضع

الخميس، 12 مايو 2016

الدرس (16) تعلم html : الجداول ( الجزء الثاني )

 بسم الله الرحمن الرحيم
تعلمنا في الدرس السابق الأساسيات في بناء الجداول بلغة html لكن يوجد بعض الأضافات في بناء الجداول سنتعرف على بعضها في هذا الدرس
الجدول يمكن تقسيمه إلى ثالث اجزاء وهم الجزء العلوي (thead) و الصفوف التي تقع في المنتصف او ما تسمى جسم الجدول (tbody) و اخر شيء الجزء السفلي (tfoot)
هذه التقسيمات تفيدنا عند تنسيق شكل الجدول عن طريق لغة css وهذه اللغة ان شاء الله سأضع دروس لها على هذا الموقع بعد الأنتهاء من دروس html 
بداية نتعرف اين سنضع thead 
نضعه على شكل وسمين وسم بداية و وسم نهاية على شكل التالي 
<thead></thead>
لكن كيف نضعه في الجدول , نضعه بأن يكون الصف الأول من الجدول داخل هذين الوسمين على الشكل التالي 
                                        

ويمكن تنسيق هذا الصف بلغة css عن طريق كتابة اكواد css ونضع التوجيه لهذا ال الصف على الشكل التالي 
<style type="text/css">
thead td{background:#ccc; }
</style>
فتكون النتيجة على الشكل التالي
مع العلم انا قد وضعت حدود لجدول هذا و ضبطت عرضه
و أكواد ال css ال style وضعتها في الجزء head من الصفحة 
الأكواد التي استعملتها في بناء هذا الجدول هي 
نأتي الآن إلى جسم الجدول وهي الصفوف التي تقع ما بين أول صف و أخر صف 
والوسوم الذي نحتاجه هو 
<tbody></tbody>
نضع ما بين هذين الوسمين الصفوف المختارة من الجدول والتي تكون ما بين الصف الأول و الأخير مثل الشكل التالي 
ويمكن تنسيق هذه الصفوف مثل هذا الشكل 
<style type="text/css">
tbody td{background:#e0e0e0}

</style>
لتكون النتيجة على الشكل التالي 
ويمكنك دمج المثال السابق مع هذا المثال ليكون الشكل على التالي 
الأكواد التي أستعملتها ليصبح الشكل كالصورة السابقة

الآن نصل إلى آخر جزأ وهو الجزء السفلي من الجدول والتي وسومه هي 
<tfoot></tfoot>
نضع ما بين الوسمين السابقين آخر صف من الجدول و يمكنك تنسيقه بلغة css كما نسقنا جسم الجدول و رأس الجدول 
مثلاً لقد اعددت جدول مؤلف من أجزائه كلها و الأكواد هي 
ليصبح الجدول على الشكل التالي
و بهذا نكون قد انتهينا من درس اليوم و إلى اللقاء في الجزء القادم من تعلم الجداول في لغة html 
السلام عليكم و رحمة الله و بركاته

اقرأ تكملة الموضع

معرفة كلمة السر لشبكة الانترنت (wi-fi) المتصلة على الحاسب

السلام عليكم و رحمة الله و بركاته

في كثير من الاحيان تنسى كلمة المرور الخاصة بشبكة ال wi-fi و نكون محتاجين لها فيمكنك من خلال حاسبك المسجل في هذه الشبكة ان تجلب
كلمة المرور و لمعرفة هذه الطريقة تابع هذا الشرح


اقرأ تكملة الموضع

الثلاثاء، 10 مايو 2016

معرفة اين الخلل عند عدم فتح المتصفح لشبكة الأنترنت

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

هذا الشرح يساعد في تحديد اين المشكلة عند عدم دخول المتصفح لشبكة الويب 

والفيديو التالي يبين ما كيفية تحديد المشكلة


اقرأ تكملة الموضع

الحصول على ip الراوتر للدخول للراوتر - Get ip router to access the router

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

درس اليوم هو عن كيفية الحصول على ip الراوتر للدخول على اعداداته في المتصفح 


الشرح في هذا الفيديو


اقرأ تكملة الموضع

تطبيق موقع أسامة الموسى

كتاب : تعلم (html) من البداية حتى الإحتراف تأليف اسامة الموسى

Translate

للمتابعة على مواقع التواصل الاجتماعي

جميع الحقوق محفوظة © أسامة الموسى