في هذه التدوينة المرئية، سأقوم بشرح كيفية تقطيع الصورة خطوة بخطوة، إلى موقع متكامل باستخدام CSS وXHTML.
هذا الدرس مدته ساعة وربع الساعة تقريباً 1:16:00، وقد حرصت بما أستطيع على أن يكون سهلاً ومفهوماً، سواء للمبتدئين أو للمحترفين.
كلنا يتذكر عندما بدأ محرر الثعلب في الظهور، كيف بدأت مواقعنا العربية تتكسر واجهاتها إمام هذا المتصفح مما كون فكرة لذى العديد، أن الثعلب فاشل ولا يراعي مشاعرهم، فعادوا وتواصوا فيما بينهم أن متصفح مايكروسوفت سياسته الدبلوماسية مع المواقع العربية راقية لأنه يقدم لهم واجهة الموقع كما يشتهون. و هناك من اتهم الثعلب المسكين انه عميل ما جاء الا ليفضح المواقع العربية، فجأتهم أنباء إن صفحاتهم لا تخضع للمعايير القياسية، فقالو ومن تكون هذه المعايير؟
منظمة عالمية اتفقت معها شركات عالمية بما فيهم مايكروسوفت ان تكون الصفحات وفق قياس واحد
فقالو فاشلون كان عليهم ان يضعو تلك القياسات وفق FrontPage.
قبل البدء، سيكون من الجيد لك أن تعرف الفرق بين مصطلحي (element) ووسم (Tag) في HTML.
ينقسم العنصر في لغة HTML/XHTML إلى نوعين هما:
العنصر من هذا النوع هو العنصر الذي يظهر في سطر جديد دائماً عند عرضه في المتصفح، حتى لو كان وسط الكلام..
بعد أن عرفنا أن الموقع يتكون من المحتوى والتصميم، سنناقش في هذه المقالة فكرة الفصل بين المحتوى والتصميم.
الفصل بين المحتوى والتصميم الذي نتحدث عنه هو من جهة المصمم -أو المطور- وليس من جهة زوار الموقع، كما قد يتبادر إلى الأذهان. حيث يكون هذا الفصل -تحديداً- بين هيكل الصفحة المتمثل في XHTML وطريقة عرض أو تقديم الصفحة المتمثل -بشكل أساسي- في CSS.
يتكون أي موقع إلكتروني من المحتوى والتصميم.
هو المعلومات المتوفرة لزوار الموقع بجميع أشكالها من نصوص وصور وأفلام وغير ذلك. ويعتبر المحتوى الجزء الأهم في تكوين الموقع، حيث يمكن تكوين موقع بدون تصميم بينما العكس غير صحيح. ولذلك فإن الخطوة الأولى في تصميم أي موقع تبدأ من محتواه، وذلك بإعادة صياغته إلى لغة تفهمها متصفحات المواقع.
تحدثنا في أول جزئين من هذه السلسلة عن أفضل الطرق التي عليك اتباعها للربط بين الصفحات و لكننا لم نذكر حتى الآن الفوائد العملية التي ستجنيها من هذا.
في متصفح الديناصور المنقرض -المنقرض هو المتصفح و ليس الديناصور- Mozilla و ابتداءً من الإصدار الأول فيه كان يفهم هذا الربط ليترجمه من خلال شريط أدوات فعال اسمه تصفح الموقع Site Navigation Tool Bar (و يمكن الوصول إليه من القائمة View ثم Show/Hide) و كان متصفح Opera يفهم هذه العلاقات ابتداءً من نسخته السابعة بشريط شبيه بذلك.
تحدثنا في الجزء الأول عن الوسم <a> و استخدامه لبيان معنى الرابط و ليس لمجرد بيان العنوان، سنكمل الآن الحديث عن الربط في XHTML، سنبدأ بالوسم <link> ثم سنعرض بعض القيم التي اقترحتها منظمة W3C من أجل بيان العلاقة بين المستندات.
يستخدم الوسم <a> لنقل المستخدم من صفحة إلى أخرى عند الضغط عليه، و أما الوسم <link> فله استخدام مختلف تماماً، فهو يربط مستند XHTML بملف، مثلاً ربط صفحة XHTML بملف CSS، مما يؤدي إلى تطبيقه فيها.
