الانتقال إلى XHTML

قبل أن نبدأ، قبل أن ننتقل إلى xhtml لا بد أن تعرف HTML، وإن كنت لا تعرف HTML فالأفضل لك أن تتعلم XHTML مباشرة، لكن هذه المقالة لن تشرح XHTML بل ستشرح كيفية الانتقال إليها من html وستشرح فوائدها ومميزاتها.

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

ومن العادات السيئة الأخرى عدم الترتيب المنطقي للأوامر:

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

XHTML جاءت لتزيل هذه العادات السيئة، ولتجعل كتابة وتطوير المواقع أكثر سهولة، وكذلك لتكون خطوة انتقالية نحو XML.

قواعد XHTML

لنشرح أولاً قواعد كتابة أوامر XHTML وهي سهلة:

إبدأ بكتابة أمر DOCTYPE، و DOCTYPE تعني document type وبترجمة حرفية تعني نوع الوثيقة، وهذا الأمر يخبر المتصفح كيف يتعامل مع الصفحة، ويخبر المتصفح إذا كانت الصفحة تستخدم XHTML أم HTML، ويجب كتابة كلمة DOCTYPE بالأحرف الكبيرة دائماً لماذا؟ لا أدري! المهم أن تكتب الأمر، وهناك ثلاث أنواع من DOCTYPE يجب أن تختار المناسب منها، ولكل نوع وظيفة مختلفة:

• Transilional: إذا كنت تستخدم بعض أوامر xhtml لإضافة بعض التنسيق إلى الصفحة فعليك باختيار هذا النوع، إذا أردت مثلاً اختيار لون ما كخلفية لموقعك، أو أردت أن تجعل كل الروابط الخارجية تفتح في نافذة جديدة، فعليك أن تستخدم هذا الأمر، لأنه مصمم في الأصل لكي يكون مرناً، وهو الأنسب لمعظم احتياجات المواقع.
• Strict: هذا الأمر يعني صارم أو دقيق، إذا وضعت بعض أوامر xhtml لتنسيق شكل الصفحة قد يتجاهلها المتصفح إذا اخترت هذا الأمر، لذلك يستخدم هذا الأمر لإنشاء صفحات xhtml خالية تماماً من أي أوامر لتنسيق البيانات، فقط ستجد محتويات خالية من أي تنسيق، أم التصميم والتنسيق فهو مهمة CSS هنا.
• Frameset: إذا أردت استخدام الإطارات في موقعك، فعليك باستخدام هذا الأمر.

لا تقلق، لست بحاجة إلى كتابة أمر DOCTYPE بنفسك، فهو طويل وصعب الحفظ، قم بنسخه فقط وضعه في أول سطر من صفحات موقعك، وإليك الأمر بأنواعه الثلاث:

عدل أمر HTML، في html كان من الطبيعي أن تبدأ الملفات بأمر html مجرد من أي شيء، في XHTML الوضع اختلف قليلاً، يجب أن تكتب ما يلي ضمن الأمر html:

الإضافات تعني أن الصفحة كتبت باللغة العربية “ar” واتجاه الصفحة هو من اليمين إلى اليسار “rtl” وهو اتجاه اللغة العربية، قم فقط بنسخ الأوامر كما هي وضعها في ملفاتك.

لا تنسى صفحة المحارفوهذا أمر مهم، يخبر المتصفح عن نوعية المحارف المستخدمة في الصفحة، إذا لم تضعه ستظهر حروف المحتويات بشكل غريب في بعض المتصفحات، ويضطر وقتها المستخدم إلى اختيار صفحة المحارف من المتصفح نفسه، وصفحة المحارف الأكثر استخداماً في المواقع العربية هي windows-1256 وبعض المواقع تستخدم صفحة محارف يونيكود وهي UTF-8، عليك أن تضع هذا الأمر في كل صفحات موقعك:

لنضع كل ما سبق في قالب واحد:

هكذا تكون لدينا صفحة فارغة ومكتوبة بلغة XHTML، بإمكانك نسخها واعتمادها في إنشاء صفحات موقعك.

اكتب دائماً بالحروف الصغيرة، وهذة قاعدة أساسية، دائماً وأبداً أكتب بالحروف الصغيرة، لا تكتب TITLE أو Title بل اكتب title.

ضع علامات الاقتباس دائماً، مثلاً dir="rtl" أو class="classname" وليس dir=rtl أو class=classname، أعتقد أن هذه القاعدة واضحة.

أغلق جميع الأوامر، من الخطأ أن تكتب أمراً ولا تكتب إغلاق هذا الأمر:

يجب عليك أن تغلق جميع الأوامر

الأوامر img و meta و br لها وضع مختلف قليلاً، في html ستكون بهذا الشكل:

أما في XHTML:

أضفنا في النهاية مسافة وشرطة مائلة، ويجب عليك أن تضيف المسافة والشرطة المائلة لكل أمر لا يلزمه أمر إغلاق مثل meta.

إذا كنت تكتب بعض الرموز التي تستخدم في html مثل علامة (أصغر من) < في محتوياتك فقم باستبدالها بهذا الرمز &lt; حيث أن المتصفحات فد لا تعرض صفحات موقعك بشكل صحيح، أما علامة (أكبر من) > فبإمكانك أن تكتبها كما هي، وإذا كنت تفضل أن تستبدلها فاكتب &gt;، أما الحرف & فيجب عليك أن تستبدله بالرمز &amp; سواء كان ذلك في روابط أو في محتويات موقعك.

فوائد XHTML

• الانتقال إلى تقنية متقدمة أكثر دون صعوبات وتتوافق مع المتصفحات والأجهزة القديمة.
• أكثر تنظيماً ومنطقية، حيث كل أوامر XHTML يجب أن تكون مرتبة بأسلوب ما، وباستخدام تقنية css للتصميم، ستكون الصفحات خالية من أي أوامر غير ضرورية للتحكم بالتصميم، وستبقى المحتويات فقط.
• قابلية استخدام أوسع، حيث سيتمكن أصحاب الحواسيب الكفية، والهواتف النقالة والمتصفحات النصية وغيرها من الأجهزة، من تصفح المواقع المكتوبة بلغة XHTML بسهولة، خصوصاً إن تم فصل التصميم عن المحتويات باستخدام تقنية CSS.

نصائح مهمة

• رتب محتويات موقعك منطقياً، أي يجب عليك أن تضع أولاً شعار الموقع، ثم الروابط الرئيسية، ثم المحتويات الرئيسية، ثم المحتويات الجانبية، ثم تذييل الصفحة، عليك أن تكتب محتويات موقعك بهذا الترتيب، وإذا قمت بتصميم موقعك عن طريق CSS يمكنك التحكم بالتصميم كما تشاء، وإذا زار موقعك شخص لا يستخدم تقنية css في متصفحه أو جهازه فبإمكانه أن يرى المحتويات مرتبة ويمكن قرائتها.
• لا تستخدم أوامر XHTML لتنسيق المحتويات، استخدم CSS لهذه المهمة، ويمكن أن تنسق محتويات موقعك من خلال XHTML ويبقى موقعك متوافقاً مع المعايير القياسية، إلا أنك ستفقد أبرز الفوائد التي توفرها لك تقنية CSS وهي فصل التصميم عن المحتويات، حيث يمكنك التحكم بالتصميم دون التأثير على المحتويات أو العكس، وقد لا يظهر موقعك بشكل صحيح في الأجهزة الكفية والهواتف النقالة.
• استخدم الأوامر بشكل صحيح، فأمر p لإنشاء الفقرات، وh1 إلى h6 للعناوين، أما ul و li لإنشاء قوائم بنقاط متعددة، ولا تحاول أن تفصل بين الفقرات باستخدام الأمر br أو تستخدم div لإنشاء العناوين أو تستخدم أي أمر في غير موضعه.

اختبر XHTML

قبل أن تضع محتويات موقعك على الشبكة العالمية، قم باختبار موقعك لتتأكد أن الصفحات كتبت بشكل صحيح باستخدام XHTML:

• قم بزيارة قسم MarkUp Validation Service.
• بإمكانك أن تختبر موقعك مباشرة، وإذا لم يكن على الشبكة العالمية بإمكانك أن تحمل ملفات موقعك.
• إذا كانت صفحتك خالية من الأخطاء فستظهر لك رسالة تبين ذلك، أما إذا كان يحوي بعض الأخطاء سيظهر لك محرك الاختبار عدد الأخطاء وفي أي سطر هي.
• قم بتصحيح الأخطاء وكرر العملية إلى أن تصبح صفحات موقعك خالية من الأخطاء تماماً.
• محرك الاختبار ليس كاملاً، في بعض الأحيان سيظهر لك مكان الخطأ بشكل غير صحيح، لذلك عليك أن تدقق جيداً لمعرفة مكان الخطأ.

في الختام

حاولت بقدر الإمكان تغطية كافة الجوانب المهمة لعملية التحول من html إلى XHTML، إذا وجدت أي خطأ أو أردت إضافة أي شيء أرجو مراسلتي لكي أقوم بتعديل المقالة.