مجلة المطور

أساسيات كتابة أكواد ال xhtml بشكل سليم

يوليو 4th, 2009

في هذا المقال أقدم لك قائمة أساسية لكيفية كتابة أكواد xhtml بشكل سليم من خلال قواعد ضرورية يجب مراعاتهـا في صفحتك.

XHTML سليم يعني أن صفحتك يجب أن تحتوي على رموز XHTML فقط, ويجب عدم كتابة وسوم بلا معنى , أو وسوم لم يتم غلقهـا بشكل جيد.لكن هل هنـاك طريقة لمعرفة أن الأكواد الموجودة بصفحتي سليمة؟..

الجواب نعم, تستطيع التحقق من أن صفحتك تحتوي على أكواد xhtml سليمة عن طريق رفعـهـا الى موقعك و الذهاب الى http://validator.w3.org ثم ضع رابطهـا في الحقل واضغط submit , خلال ثواني سيتم تقديم قائمة مفصلة لأخطاء صفحتك أو ستظهر لك رسالة أن صفحتك تحتوي على رموز XHTML صحيحة “This Page Is Valid XHTML!”كمـا بالصورة في الأسفل أيضا تستطيع التحقق من رموز CSS أيضاً بنفس الطريفة في http://jigsaw.w3.org/css-validator .

حسنـا إذا كانت لديك أخطاء في صفحتك , فهذا سيكون سببه أنك لم تقم بكتابة أكواد xhtml جيداً وكمـا يفترض فيهـا أن تكتب.

لهذا أقدم لك قائمة كاملـة اساسية لقواعد كتابة أكواد XHTML نظيفة:

تعريف DOCTYPE للمتصفح : ال DOCTYPE يتم وضعهـا قبل وسم HTML في أعلى الصفحة. ووضيفته تقوم بإخبار برنامج المتصفح طبيعة الأكواد الموجودة في الصفحة سواء XHTML, HTML أو خليط بينهمـا, ذالك حتى يتمكن من فهم الرموز وعرضهـا بشكل منسق للمستخدم. هنـاك 3 DOCTYPE أساسيون التي تسمح لبرنامج المتصفح بمعرفة طبيعة الأكواد:

Strict: كل الأكواد عبارة عن رموز XHTML.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
Transitional: ويعني في هذه الحالة أن أكواد الصفحة عبارة عن خليط من HTML و XHTML. العديد من المواقع تستعمل هذا الخيار, وذالك حتى تعمل أكواد HTML القديمة بدون مشاكل.
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
```
Frameset: هذا الخيار مثله مثل خيار transitional ولكنه خيار خاص يستخدم في حالة الإحتواء على وسم <framset> بدل وسم <body> العادي.
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
```
عند عدم وجود DOCTYPE العديد من برامج المتصفحـات تقوم بالعودة الى ما يسمى ب Quirks mode, وهي خاصية خلفية تقوم على ان يتظاهر برنامج المتصفح على أنه لم يسمع بمعايير الويب من قبل.

لبعض الأسباب الغريبة, وسم DOCTYPE لا يحتاج إلى غلقه بعلامة “/” وكلمة DOCTYPE تكون دائماً بحروف كبيرة.
تعريف XML namespace. ملاحظة هذا السطر هو وسم html الجديد الذي سوف تستعمله دائماً. هذا مثال:
```
<html xmlns="http://www.w3.org/1999/xhtml" lang="ar" xml:lang="ar">
```
خاصية مكملة لل DOCTYPE..
باختصار, تعريف الDOCTYPE و namespace تقوم بالتأكد من أن برنامج لمتصفح يقوم بقراءة رموز xhtml ويعرضهـا كمـا تريد.
تعريف نوع محتويات الصفحة. تعريف محتويات الصفحة يتم وضعهـا في رأس الصفحة. وحدهـا مع أي من وسوم الميتا تاغ الأخرى التي تريد إظافتهـا طبعاً. مثال:
```
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
```
هذا الميتا يقوم بتعريف ترميز الحروف الموجود في الصفحة حتى يستطيع المستخدم قرائتهـا بسهولة.. بالنسبة للعربية فإنه يتم وضع الكود WINDOWS-1256 أمام charset= , أمـا بخصوص الحروف اللاتينية فإنه يتم وضع الرمز iso-8859-1 .
لكن من خاصيات الويب 2.0 هو أن تكون الصفحة بترميز utf-8 الذي يسمح بقراءة المحتويات كمـا هي بمختلف الأجهزة دون الحاجة لمعرف ترميز اللغة التي تريد.. لكن لعمل هذا سيتوجب على ملف الصفحة أن تكون بترميز utf-8 يستطيع اي برنامج صغير مثل notepad2 تحويل ترميز الملف الى utf-8 بكل سهولة.
غلق جميع الوسوم سواء كانت فارغة أو لها مقابل للغلق: تكلمنأ عن هذه الخاصية في المقال السابق .
كل الوسوم يجب أن يتم كتابتهـا بشكل مرتب, مثال:
```
<p>إنه <strong>من المهم جداً</strong> كتابة الوسوم بالترتيب.</p>
```
هنـا, الوسم strong تم وضعه بشكل سليم بعد وسم <p> وتم غلق ه أيضاً قبل غلق الوسم </p>. عدم احترام هذا الترتيب يؤدي إلى عدم عرض الصفحة بشكل جيد

هذا مثال لترتيب خاطء
```
<p>إن طريقة كتابة هذا الكود <strong>خاطئة<p>تماماً</strong>
```
إذا كانت لديك عدة عناصر فتستطيع تجمعهـا بين وسم , مثال: إذا كانت لديك قائمة مكونة من عدة عناصر تستطيع وضع هذه القائمة li داخل وسم واحد ul أو ol مثل:
```
<ul>
   <li>العنصر 1</li>
   <li>العنصر 2</li>
   <li>العنصر 3</li>
</ul>
```
وسوم ال inline لا يمكن وضعهـا داخل وسوم block. أعرف أن هذه الجملة غير مفهومة جيداً.. لكننـا سنتحدث عنهـا لاحقاً.
فقط عليك تذكر أنه لا يمكنك وضع وسم <p> مثلاً داخل وسم <a> مثلاً. فهذا لن يجعل أكوادك ذات منطق لبرنامج المتصفح.
سيتوجب عليك كتابة الوسوم بحروف صغيرة, بمعنى لا يمكنك وضع وسم <P> فهذا لن يعمل, بل يجب وضع وسم <p> صغير هكذا.
كل الصفات يجب أن تملك قيمة, بعض صفات الوسوم لا تحتاج الى أن تكون لديهـا فيمة في ال html, لكن في xhtml جميع الصفات يجب أن تكون لديهـا قيمة.
مثلاً إذا استعملت وسم select لإنشاء قائمة سفلية في ال html وأردت إختيار عنصر لكي يظهر أولاً, فربمـا يكون لديك كود مثل هذا:
```
<SELECT NAME=حيوانات>
<OPTION VALUE=قطط>قطط</OPTION>
<OPTION VALUE=كلاب SELECTED>كلاب</OPTION>
</SELECT>
```
النتيجة أن سيعطيك قائمة مع عرض خيار “كلاب” تلقائياً

كود XHTML السليم والصحيح والموافق للكود بالأعلى هو
```
<select name="حيوانات">
<option value="قطط">قطط</option>
<option value="كلاب" selected="selected">كلاب</option>
</select>
```