الجداول Tables

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

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

مثال: قم بإضافة جدول مكون من ثلاث صفوف وعمودين.

الحل: لكي نكون الجدول نقوم بإدراج وسم الجدول ثم نضيف وسم الصف ثلاث مرات وبداخل كل صف نضيف وسم الخلية مرتين.

طريقة التعامل مع الجداول:
إن طريقة التعامل مع الجداول تتم على ثلاث مستويات هي:
مستوى الجدول ككل.
مستوى الصفوف ككل أو كل واحدة على حده.
مستوى الخلايا ككل أو كل واحدة على حده.

ملاحظات:
· من الممكن أن تحتوي خلايا الجدول على أي عنصر من عناصر لغة HTML: نصوص، رسوم، قوائم، وصلات تشعبية، جداول.
· هناك بعض الخصائص التي تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR والسؤال هنا هو كيف يتم التعامل مع هذه الخاصية إذا ما كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول.
· يختلف أسلوب التعامل مع كل من خاصية WIDTH,HEIGHT من متصفح لآخر، وأفضل طريقة للتعامل مع هذه الخصائص هي بتحديد العرض والارتفاع للجدول ككل من خلال وسم الجدول . ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
· هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم والفرق الوحيد بينها وبين هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة افتراضية والخصائص المستخدمة معها هي نفس خصائص .

دمج الخلايا:
إذا أردنا أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف، فلا يكفي أن نقوم بحذف وسوم الخلايا منها بل يجب أن نقوم بدمج الخلايا معاً وذلك باستخدام الخصائص ROWSPAN,COLSPAN.
كقاعدة أساسية كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها ما عدا تعريف الخلية الأساسية بالطبع.
مثال: قم بتكوين الجدول التالي:

الحل: نقوم بإدراج جدول مكون من ثلاث صفوف
· في الصف الأول نقوم بوضع خلية واحدة ( الخلية المرقمة برقم 1 )ومعها الخاصية " Colspan="2 وقمنا بوضع رقم 2 لأنه عدد الخلايا المدمجة معاً.
· في الصف الثاني نقوم بوضع خليتين، نضيف الخاصية "Rowspan="2 في الخلية الأولى (الخلية رقم 2)وذلك لدمج الخلية الحالية مع الخلية التي أسفلها عمودياً، أما الخلية الثانية(الخلية رقم 3) فنضعها كما هي.
· في الصف الثالث نقوم بوضع خلية واحدة فقط (الخلية رقم 4).

الأوسمة الخاصة بعنوان الجدول:

لوسم المزدوج وهو يستخدم مع الجداول ووظيفته إضافة عنوان رئيسي للجدول ككل ويتم وضعه مباشرة بعد وسم الجدول وبصورة مستقلة وليس ضمن الصفوف أو الخلايا.

الروابط التشعبية

تعريف الروابط التشعبية:
الوصلات التشعبية LINKS هي روح الإنترنت، وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه الوصلات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من مواقعها.

الأوسمة الخاصة بالروابط التشعبية.
يستخدم الوسم

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

أنواع الروابط التشعبية:
الحالة الأولى:- إدراج وصلة تشعبية تشير إلى موقع خارجي.
فمثلاً:لإدراج وصلة تشعبية إلى أحد المواقع العربية وهو موقع كتب وعنوانه http://www.kutub.com/

في هذه الحالة يتم كتابة الشفرة بالشكل التالي:


ولكي تكتمل الوصلة السابقة يجب أن يكتب معها أي عبارة نريدها لكي ينقر عليها الزائر فتنقله إلى العنوان المطلوب مثل عبارة "اذهب إلى موقع كتب" والتي تصبح بالشكل التالي:

يمكن كذلك إدراج صورة أو زر كبديل عن الكلمات وذلك بكتابة الوسم الخاص بإدراج الصورة بين الوسمين بالشكل التالي:



والذي يؤدي إلى ظهور الصورة كوصلة تشعبية لموقع كتب.

وبشكل عام فإن أي شيء يوضع بين الوسمين

سوف يكون الوسيلة أو العنوان الذي ينقلنا إلى الموقع المشار إليه في الوصلة التشعبية.

ملاحظة:-
نلاحظ إنه عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية، نستطيع إزالة الإطار بكتابة الخاصية border="0" ضمن وسم الصورة.

الحالة الثانية: إدراج وصلة تشعبية إلى ملف موجود في نفس الموقع (أي الملف محلي) سواء كان ملف HTML أو صورة أو غير ذلك .
وفي هذه الحالة فإن ما يكتب مع الخاصية HREF هو اسم هذا الملف المطلوب الوصول إليه.

وبالإمكان إدراج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية.

ملاحظة: إذا كان الملف المطلوب والذي تريد الإشارة إليه موجودا في مجلد مختلف عن المجلد الذي يوجد به الملف الحالي فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة المتبعة مع إدراج الصور

الحالة الثالثة: هي أن نقوم بلإشارة إلى مكان آخر داخل نفس الصفحة إلى أولها مثلاً أو إلى آخرها أو أي مكان آخر نريده.
والمبدأ هنا هو أن نقوم بتعريف أو تسمية هذا المكان باسم معين سوف نقوم لاحقاً باستخدامه في الوصلة التشعبية باستخدام خاصية NAME .

الحالة الراابعة: إدراج وصلة تشعبية لفقرة ويلزمنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي هذا الملف الذي نعمل به) مثلاُ يكون اسمه () لأنه سيشكل المدخل الأساسي للوصول إلى الفقرة المحددة.

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





سوف نقوم بتعريف كل فقرة باسم معين باستخدام الحالة الثالثة وذلك في المكان المشار إليه بالرقم 1 بالشكل التالي:

ثم نقوم بإنشاء الرابط في المكان المشار إليه برقم 2 ،الذي سينقلنا إلى الفقرة التي سبق تعريفها في الرقم 1 بالشكل التالي: لا حظ أننا لم نكتف اسم الفقرة لوحدها بل يجب أن تقرن باسم الملف الأب الذي يتضمنها من خلال إشارة #.

الحالة الأخيرة: إدراج وصلة تشعبية لعنوان بريد إلكتروني، يؤدي النقر عليها إلى برنامج البريد ىالالكتروني للزائر بشكل تلقائي الاختلاف الوحيد هنا هو كتابة كلمة MAILTO بعد خاصية HREF لكي تدل على إن العنوان الذي يلي هو عنوان E_Mail وليس أي عنوان آخر.

ملاحظات هامة:
عند التوصيل إلى أي عنوان خارجي سواء كان لموقع ويب أو عنوان E_Mail نستخدم كلمات مفتاحية لتمييز طبيعة هذا العنوان وتعطي المتصفح فكرة عن طبيعة التعامل مع هذا العنوان وطريقة الأتصال به.

تمرين 6:

قومي بتصميم صفحة بلغة HTML تحتوي على التالي:
· اتجاه الصفحة من اليمين إلى اليسار
· عنوان الصفحة "الصفحة الرئيسية".
· اضافة صورة كخلفية للصفحة.
· تغيير حجم ولون الخط.
· وضع صورة لاسم وشعار الموقع في أعلى الصفحة بعرض الصفحة.
· اضافة نص متحرك به جملة ترحيبية باستخدام الوسم التالي :

· اضافة روابط تشعبية للصفحات التالية
Adkar.html وكلمة الرابط "أذكار".

fruit.html وكلمة الرابط "الفواكه".
info.html وكلمة الرابط "هل تعلم".
· اضافة صورة زهور من مجلد الصور.
· اضافة رابط للصفحة الرئيسية في كل من المستندات التالية (adkar.html,info.html,fruit.html).
· حفظ المستند باسم "index.html".

حل مثال أركان الاسلام

انقر هنا

حل التمرين 6:

انقر هنا