اليوم نبدأ مع أحد المواقع العربية وهو شبكة البرامج العربية والمعربة وقد استئذنت من صاحبه أن أكتب عنه وتقبل ذلك بروح رياضية وهذا أمر طيب.
الموقع يقدم فائدة وهو متخصص في البرامج العربية والمعربة، لكنه يعاني أيضاً من التشتت سواء في التخصص أو التصميم، وهذه مشاكل أراها في الموقع:
هذه بعض الخصائص في css تتيح لك التحكم بأجزاء من النص لا يمكنك الوصول إليها عادة.
قبل قراءة هذا المقال، إن لم تكن تعرف معنى class وid فسيساعدك هذا الدرس. بعد قراءته سنكمل معاً.
لنفرض أن لديك هذا الكود:
تصميم صفحات الويب أصبح في الوقت الحالي ليس مجرد كتابة شيفرات برمجية، بل تعدى هذا المعنى بكثير وأصبح فن بحد ذاته، من اختيار العناصر المناسبة التي لها مدلوليتها في المكان المناسب، كاستخدام <p> للفقرات، <h1> للعناوين المهمة، إلى اختيار الهيكلة المناسبة لمحركات البحث، وضع المحتوى مثلا في المقدمة قبل قائمة التصفح.
كتابة CSS قد يكون كابوساً لمن ﻻ يعرف الأساسيات من ناحية تموضع العناصر، الفرق بين عناصر HTML المختلفة. في هذا المقال سأحاول تلخيص 10 نصائح لكتابة CSS بشكل أحسن وأرتب.
قبل البدء، سيكون من الجيد لك أن تعرف الفرق بين مصطلحي (element) ووسم (Tag) في HTML.
ينقسم العنصر في لغة HTML/XHTML إلى نوعين هما:
العنصر من هذا النوع هو العنصر الذي يظهر في سطر جديد دائماً عند عرضه في المتصفح، حتى لو كان وسط الكلام..
بعد أن عرفنا أن الموقع يتكون من المحتوى والتصميم، سنناقش في هذه المقالة فكرة الفصل بين المحتوى والتصميم.
الفصل بين المحتوى والتصميم الذي نتحدث عنه هو من جهة المصمم -أو المطور- وليس من جهة زوار الموقع، كما قد يتبادر إلى الأذهان. حيث يكون هذا الفصل -تحديداً- بين هيكل الصفحة المتمثل في XHTML وطريقة عرض أو تقديم الصفحة المتمثل -بشكل أساسي- في CSS.
يتكون أي موقع إلكتروني من المحتوى والتصميم.
هو المعلومات المتوفرة لزوار الموقع بجميع أشكالها من نصوص وصور وأفلام وغير ذلك. ويعتبر المحتوى الجزء الأهم في تكوين الموقع، حيث يمكن تكوين موقع بدون تصميم بينما العكس غير صحيح. ولذلك فإن الخطوة الأولى في تصميم أي موقع تبدأ من محتواه، وذلك بإعادة صياغته إلى لغة تفهمها متصفحات المواقع.
يعتبر نموذج الصندوق في CSS أو Box Model من أهم المبادئ الأساسية التي يجب أن يبدأ بها من يريد أن يحترف لغة الأنماط الإنسيابية CSS، ولدى منظمة الويب العالمية مقال مطول في هذا المجال لمن يريد أن يستفيد أكثر. في درسي هذا سأحاول تلخيص أهم هذه المبادئ وبعد انتهائك من هذا الدرس سوف تتعلم الفرق بين عناصر الكتلة وعناصر السرد، وظائف وخصائص كل من padding، margin، border، background.
من أهم المفاهيم التي يجب أن تعرفها وتحفظها عن ظهر غيب هي أن كل عنصر في HTML عبارة عن صندوق، ولكن الاختلاف هو نوعية هذا الصندوق أو العنصر، حسنا للتوضيح أكثر أنظر إلى الصورة التالية:
