قبل البدء، سيكون من الجيد لك أن تعرف الفرق بين مصطلحي (element) ووسم (Tag) في HTML.
ينقسم العنصر في لغة HTML/XHTML إلى نوعين هما:
العنصر من هذا النوع هو العنصر الذي يظهر في سطر جديد دائماً عند عرضه في المتصفح، حتى لو كان وسط الكلام..
بعد أن عرفنا أن الموقع يتكون من المحتوى والتصميم، سنناقش في هذه المقالة فكرة الفصل بين المحتوى والتصميم.
الفصل بين المحتوى والتصميم الذي نتحدث عنه هو من جهة المصمم -أو المطور- وليس من جهة زوار الموقع، كما قد يتبادر إلى الأذهان. حيث يكون هذا الفصل -تحديداً- بين هيكل الصفحة المتمثل في XHTML وطريقة عرض أو تقديم الصفحة المتمثل -بشكل أساسي- في CSS.
يتكون أي موقع إلكتروني من المحتوى والتصميم.
هو المعلومات المتوفرة لزوار الموقع بجميع أشكالها من نصوص وصور وأفلام وغير ذلك. ويعتبر المحتوى الجزء الأهم في تكوين الموقع، حيث يمكن تكوين موقع بدون تصميم بينما العكس غير صحيح. ولذلك فإن الخطوة الأولى في تصميم أي موقع تبدأ من محتواه، وذلك بإعادة صياغته إلى لغة تفهمها متصفحات المواقع.
يعتبر نموذج الصندوق في CSS أو Box Model من أهم المبادئ الأساسية التي يجب أن يبدأ بها من يريد أن يحترف لغة الأنماط الإنسيابية CSS، ولدى منظمة الويب العالمية مقال مطول في هذا المجال لمن يريد أن يستفيد أكثر. في درسي هذا سأحاول تلخيص أهم هذه المبادئ وبعد انتهائك من هذا الدرس سوف تتعلم الفرق بين عناصر الكتلة وعناصر السرد، وظائف وخصائص كل من padding، margin، border، background.
من أهم المفاهيم التي يجب أن تعرفها وتحفظها عن ظهر غيب هي أن كل عنصر في HTML عبارة عن صندوق، ولكن الاختلاف هو نوعية هذا الصندوق أو العنصر، حسنا للتوضيح أكثر أنظر إلى الصورة التالية:
أخي المطور،
إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم سأتحدث عن كيفية التحكم بالخط بالـ css وسأشرح لك أشهر أوامره.
بإمكانك التحكم بنوع الخط بواسطة القيمة font-family.
مثال:
body { font-family: Arial, Helvetica, Tahoma; }
CSS 3، الهدف الذي تبذل الجهود من أجل إنجازه، رغم أن CSS2 -و التي طرحت قبل حوالي 9 سنوات- لم تلق الدعم الكامل من قبل أي متصفح حتى اليوم، و من الطريف أن هناك بعض المتصفحات التي تواجه بعض المشاكل في التعامل مع بعض خصائص الـCSS 1، و للمهتمين بمعرفة جديد الـCSS3 يمكنهم زيارة صفحة CSS في منظمة W3C.
قراءة سريعة في هذه التقنية الجديدة تخبرك أنه سيتم تقسيم مواصفات الـCSS3 إلى واحدات مما سيسهل التعامل مع كل وظيفة.
لم أرغب في إضافة المزيد من تقنيات CSS، لأن الدروس هذه كان هدفها لفت نظر المصممين إلى الأسلوب الجديد في التصميم، بكل تأكيد تصاميم CSS تختلف عن التصاميم العادية التي يستخدم فيها الجداول، ربما تكون تصاميم CSS بسيطة وأقل جمالاً، لكنها أكثر فعالية وفائدة على المدى الطويل، لذلك عليك أن تفكر أخي المصمم أن تتبنى هذه التقنية لتصميم المواقع، خصوصاً مواقع المؤسسات الحكومية والخاصة، كذلك المواقع المتخصصة، وكل موقع يهتم بالمحتويات في المقام الأول عليه أن يصمم الموقع بتقنية CSS، أما المواقع الشخصية والفنية فالمجال أمامها مفتوح لتبني أي تقنية.
