شرح وتخليص إنشاء الجداول في لغة HTML
الفكرة الرئيسة :
ُستخدم الجداول في عرض البيانات على شكل صفوف واعمدة، فضلاً عن استخدامها في تصميم وتنظيم صفحات الويب.
نتاجات التعلم
في نهاية هـذا الدرس سأكون قادرا على أن :
1 -اُنشئ جداول في صفحات الويب.
2 -أستخدم الجداول لتنظيم البيانات
النصية.
3-أفهم خصائص الجداول المستخدمة
في صفحات الويب.
4-أفهم الارتباطات التشعبية وطرائق
استخدامها.
المفردات:
الجداول
Tables
الارتباطات التشعبية
Hyperlinks
ما أهمية الجداول؟
تُعد الجداول من الأدوات المهمة في لغة HTML وعادة ماتستخدم في عمل قوائم من البيانات وترتيبها في صفوف وأعمدة، وتنسيق صفحات الويب وتنظيمها.الجداول هي شبكة من الصفوف والاعمدة التي تتقاطع فيما بينها لتشكل الخلايا Cells .كل خلية عبارة عن منطقة محددة يمكن أن نضع فيها بيانات نصية او صوراً او غير ذلك من المحتويات.
كيف يمكن إنشاء جدول بسيط؟
داخل الوسم الأساسي للجدول<table> يمكن إضافة واحد أو أكثر من الوسوم<tr >الخاصة بإنشاء الصفوف، داخل وسوم الصفوف هذه يمكن إضافة واحد أو اكثر من الوسم<td >الخاصة بإنشاء الخلايا كما موضح في أدناه :
<table>
<tr>
<td >/خلية 1<td>
<td >/خلية 2<td>
<tr>/
<tr>
<td >/خلية 3<td>
<td >/خلية 4<td>
<tr>/
<table>/
كيف يمكن ضبط إعدادات الجداول؟
لتصميم اي جدول نحتاج إلى تحديد حجمه ومكانه ولون خلفيته وغيرها من الإعدادات، توجد العديد من الخصائص لضبط اعدادات الجداول، من أهما:
1 -خاصية حدود الجدول Border :
تقوم هذه الخاصية بإضافة حدود للجداول وتحديد سماكتها، وتقبل ارقاماً صحيحة تمثل قياس الإطار الذي يُحيط بالجدول بوحدة البكسل.لإضافة حدود للجدول السابق يتم كتابة الخاصية border داخل الوسم <table ُ>مع تحديد قيمة معينة لسمك حدود الجدول.
<1= border table>
<tr >
<td</خلية 1> td >
<td</خلية 2> td >
<tr >/
<tr >
<td</خلية 3> td >
<td</خلية 4> td >
<tr >
</tabl>
2- خواص تحديد أبعاد الجداول :
ستخدم الخاصية width والخاصية height لتحديد عرض ض وارتفاع الجدول ككل وهناك أسلوبان لتحديد العرض او الارتفاع: كتابة الرقم بوحدة البكسل لتمثيل العرض او كتابة نسبة مئوية لتحديد عرض الجدول بحسب عرض نافذة المتصفح (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح).
3 -الخاصية align:
ُستخدم هذه الخاصية لتحديد محاذاة الجدول أفقياعلى الصفحة يميناأو يسارا
أو في الوسط.
4 -الخاصية bgcolor :
ُستخدم هذه الخاصية لتحديد لون الخلفية للجدول، وتقبل هذه الخاصية قيم الألوان
بالنظام السادس عشر Hexadecimal( كما تعلمنا في الدرس السابق).
5- الخاصية cellspacing:
ستخدم هذه الخاصية لتحديد المسافة بين كل خلية من خاليا الجدول بوحدة البكسل.
ما أهمية دمج خلايا الجدول ؟
يمكن دمج اثنين او اكثر من الخلايا المتجاورة، اي ان الخلية الواحدة تمتد لتشمل عددًا من الصفوف و/أو الاعمدة . خاصية دمج الخلايا تعد مفيدة في توسيط النص فوق عدد من الاعمدة كما موضح في الشكل في أدناه :
تم توسيط النص فوق العمود الاول والعمود الثاني في الجدول
كيف يتم استخدام الجداول في تنسيق صفحات الويب Layout Page Web ؟
تُعد الجداول من الأدوات المهمة في تنسيق صفحات الويب فضال عن استخدامها في عمل قوائم من البيانات وترتيبها في صفوف وأعمدة. عند استخدام الجدول في تنسيق صفحة الويب، فان خاليا الجدول تعمل
كمساحات مستقلة يمكن من خاللها عرض اي محتوى نرغب فيه مثل نصوص أو صور أو جدول آخر وغير ذلك من المحتويات.
بعض مصممي المواقع يستخدمون الجدول لتنسيق صفحة الويب بشكل كامل وذلك بواسطة الاعتماد على خاصية دمج الخلايا للتحكم في الشكل النهائي للصفحة. اما بعضهم الآخر فيفضلون استخدام الجدول في عرض محتوى معين فقط ويتركون بقية محتويات الصفحة تعرض خارج الجدول.
اكتب الوسوم اللازمة لإنشاء صفحة ويب معتمدة في تنسيقها على استخدام خلايا جدول يتكون من صفين، في الصف الأول خلية واحد وفي الصف الثاني ثلاث خلايا كما في الشكل الآتي :
في الشكل السابق :
1 -استخدام الوسم <table >وبداخله مجموعة من الخصائص المتعلقة باعدادات الجدول.
2 -استخدام الوسم <tr > لإنشاء الصف الأول في الجدول، هذا الصف يضم خلية واحدة تعرض محتوى في صفحة الويب.
3 -استخدام الوسم <tr >النشاء الصف الثاني في الجدول، هذا الصف يضم ثلاث خلايا تعرض كل منها محتوى نصياً فضلاً عن محتوى صوري باستخدام الوسم الخاص بادراج الصورة <...SRC IMG>
ما الفائدة من استخدام االرتباطات التشعبية Hyperlinks ؟
ان مواقع الويب هي مجموعة من الصفحات المرتبطة بعضها مع بعض عبر الارتباطات التشعبية Hyperlinks التي هي عبارة عن نصوص او رسوم عند النقر عليها يتم الانتقال من صفحة الويب الحالية
إلى صفحة اخرى في نفس الموقع او إلى صفحة خارجية في موقع آخر. كما يمكن استخدام الارتباطات التشعبية لتحميل ملف او لتشغيل ملف فيديوي وغير ذلك من الاستخدامات .
الوسم <a>هو أساس لإدراج الارتباطات التشعبية، اذ يتطلب استخدام الخاصية href التي تاخذ الموقع الذي نريد الانتقال اليه كقيمة لها. سنتعلم حالتين لاستخدام الارتباطات التشعبية كما موضح في الآتي :
١- ارتباط تشعبي خارجي.
الخاصية href تأخذ مايسمى بالمسار المطلق path absolute كقيمة لها، وهو عبارة عن عنوان لموقع أو صفحة تقع خارج موقع الويب الحالي.
٢-ارتباط تشعبي محلي.
الخاصية href تاخذ مايسمى بالمسار القريب path relative كقيمة لها، وهو عبارة عن اسم لمستند صفحة ويب يقع في نفس المجلد الذي يضم مستند HTML الحالي.
نشاط
صمم موقع لمدرستك يضم الصفحة الرئيسة (html.index)التي يوجد فيها ارتباطان تشعبيان الأول ارتباط خارجي للانتقال إلى موقع وزارة التربية والثاني ارتباط محلي للانتقال إلى الصفحة الخاصة بقوائم الطلبة (html.Table1) صفحة قوائم الطلبة Table1 يوجد فيها ارتباط تشعبي محلي
عند النقر عليه نعود إلى الصفحة الرئيسة لموقع المدرسة index.
اختبر معلوماتي
الفكرة الرئيسة
1.عرف الجدول في لغة HTML ،واكتب الوسم الخاص بانشائه.
2.اكتب الوسوم اللازمة لانشاء جدول يضم ست خلايا صفين وثالثة اعمدة.
تفكير ناقد
1.اذا فرضنا انه تم استخدام خاصية تحديد اللون لجعل خلفية الجدول باللون الأحمر ، وبعدها استخدمنا خاصية تحديد اللون لجعل خلفية الخلية الأولى في نفس الجدول باللون الأخضر . هل يظهر لون خلفية
الخلية ؟ أو يعد هذا خطأ يجب اجتنابه؟
2.هل يمكن ادراج ارتباط تشعبي إلى صفحة معينة عند النقر عليه ينقلنا إلى نفس الصفحة؟ اذا كان الجواب نعم كيف يمكن تحقيق ذلك؟