بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله وبركاته
لا شك أن كل ما تعلمناه في الدروس الماضية يعتبر لاشيء بدون تدريب وأمثلة عملية كثيرة وتمرن على كتابة الأكواد بكثرة تعودك عليها فيسهل بالتالي حفظها ، لأننا ابتداءا من هذا الدرس سنرفع المستوى قليلا ، وسيكون ما تعلمته في الدروس الماضية ضروريا في الدروس اللاحقة.
التعليقات في لغة html
صيغة كتابة التعليق:
فائدة التعليق:
أول شيء ينبغي معرفته هو أن التعليقات لا تظهر في المتصفح ، ولا تملك أية وظيفة تقوم بها في مستند html ، وليس لديها أي تأثير على بقية الأكواد.
تكمن فائدة التعليقات في شيئين أساسيين:
أولا : يكتبها المصمم قبل أو بعد كود معين ليتذكر فائدة هذا الكود إذا عاد وفتح الملف بعد مدة طويلة ، أو ليبين لمصصم أو مطور آخر لماذا كتب ذلك الكود.
ثانيا:إذا أراد المصمم تعطيل كود معين لم يعد يحتاجه وربما عاد واحتاجه فيما بعد يضعه ضمن تعليق.
وهذه بعض الأمثلة:
الجداول
تبنى الجداول باستخدام العلامة الزوجية table ، وننشئ صفوفه بالعلامة الزوجية tr ومحتوى خلاياه نضعه ضمن العلامة الزوجية td ، هكذا يبنى الجدول في أبسط حالاته ، أنظر الصورة :
لاحظ ، الصف الأول tr يحتوي على ثلاث خلايا td (القسم ، الوصف ، الرابط )، وهكذا يتضح الفرق بين tr و td .
tr هي اختصار ل table row
td هي اختصار ل table data
كان بإمكاني إنشاء صفوف كثيرة ولكن حتى لايطول الكود وحتى ألتقط صورة واضحة ، وبإمكانك أنت نسخ ولصق الكود من فتحة tr حتى قفلتها وتكرره وتضع به محتوى جديد.
وبما أن الصف الأول عبارة عن ترويسة للجدول والتفاصيل في باقي الصفوف فبإمكاننا استخدام العلامة th مكان td فقط في الصف الأول ، أنظر الصورة:
وهكذا فهم المتصفح أنها ترويسات فأظهرها بالبند العريض وجعلها في منتصف الخلية بدون حاجة مني لاستخدام خاصية align=center التي سأتكلم عنها بعد قليل.
لكن كما ترى الجدول لا حدود له لذا سنضع الخاصية border للعلامة table وهذه الخاصية تأخذ قيم ابتداءا من 1 ، أنظر الصورة:
إذا زدت في القيمة يزيد سمك الحد.
ومن الخصائص التي تستخدم مع الجداول خاصيتي width و height المعروفة ، ويمكن بهما التحكم في عرض وارتفاع الجدول ككل إذا وضعت للعلامة table ، ويمكن وضعها للعلامة td للتحكم في أبعاد الخلية.
ومنها أيضا خاصية align وتأخذ إحدى القيم right أو left أو center ، توضع للعلامة tr للتحكم في كل خلاياه أو توضع لكل td على حدا، وهذا مثال عملي:
ويمكنك تجربة الخصائص والتلاعب بالقيم والملاحظة.
ومن الخصائص التي توضع للعلامة table :
cellpadding وتمثل مقدار الإزاحة بين محتوى الخلية والحد.
cellspacing وتمثل مقدار الإزاحة بين خلية وأخرى.
وهذا مثال عملي:
كما ترى الحدود دخلت في بعضها لأننا ألغينا cellspacing بإعطائه القيمة 0 ، والخلية نفسها كبرت لأننا زدنا من مقدار الإزاحة بين المحتوى والحد.
بقيت خاصيتان هما colspan و rowspan ، وهذا مثال على colspan :
كما ترى لدينا أربع خلايا في كل صف باستثناء الصف الأخير الذي هو عبارة عن خلية واحدة فقط ، لذلك اضطررنا أن نستخدم معه خاصية colspan وأعطيناها القيمة 4 ، بمعنى أننا قلنا للخلية احتلي مكان أربع خلايا ، والنتيجة:
أما rowspan فلها نفس فكرة colspan ولكن عموديا:
وكما ترى جعلنا الخلية 1 تحتل مكان 3 خلايا عموديا ، يمكنك التلاعب بالقيم والتجربة ، فالأمثلة الكثيرة ستفيدك.
نكتفي بهذا القدر ، موعدنا في الدرس القادم إن شاء الله مع الجزء الأول من الفورمز.
دمتم في رعاية المولى عز وجل.