Xhtml

تعريف الصفحة في لغة XHTML و أستخدامها و تركيبتها

سجين القدر
اخر تحديث :

تعريف الصفحة في لغة XHTML


وسم تعريف الصفحة <!DOCTYPE> اجباري


تتألف صفحة XHTML من ثلاث أقسام رئيسية :

  • تعريف وتحديد نوع الصفحة DOCTYPE

  • قسم <head>

  • قسم <body>

بنية الصفحة البسيطة في XHTML هي :
<!DOCTYPE>
		  <html>
		  <head>
		  <title>... </title>
		  </head>
		  <body> ... </body>
		  </html>

ملاحظة : يرمز وسم <!DOCTYPE> الى Document Type Definition (DTD) أي تحديد نوع الصفحة . يحدد نوع الصفحة قواعد لغة الترميز التشعبية وبذلك يعرف المتصفح ماهية المحتوى بشكل جيد .



مثال عن صفحة XHTML


يظهر المثال التالي صفحة XHTML بأقل عدد وسوم ممكنة وهي :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		  <html xmlns="http://www.w3.org/1999/xhtml">
		  <head>
		  <title>عنوان الصفحة</title>
		  </head>
		  <body>
		  </body>
		  </html>





صفحة XHTML 1.0 بنوع متغير Transitional


تحتوي DTD على جميع وسوم XHTML ولواحقهم و تتضمن وسوم حساسة أو منتهية الصلاحية (مثل font و center) كما أن نوع اضافة الإطارات frames غير مسموحة بهذا النوع كما يجب كتابة وسوم XHTML بشكل صحيح ومرتب كما في XML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




صفحة XHTML 1.0 بنوع اطارات Frameset


هذا النوع من DTD مشابه الى النوع المتغير الا أنه يسمح باضافة الإطارات frames إلى المحتوى
		  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">




صفحة XHTML 1.1


ان تعريف الصفحة DTD مشابه للنوع XHTML 1.0 الثابت ولكن تسمح لك باضافة تركيبات أخرى (مثل دعم اللغات شرق آسيا) .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">




كيف تستخدم XHTML بشكل صحيح ؟؟!


يمكنك اتباع هذه الخطوات لتتعلم كيفية تحويل صفحة HTML الى XHTML من خلال 6 خطوات بسيطة :

1. أضف تعريف الصفحة <!DOCTYPE>


أضف تعريف صفحة XHTML وهو <!DOCTYPE> في بداية كل صفحة :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ملاحظة : يجب اضافة تعريف الصفحة <!DOCTYPE> ان أردت أن تكون صفحاتك فعالة مع لغة XHTML



2. أضف اللاحقة xmlns


قم بإضافة اللاحقة xmlns اى عناصر html لكل صفحة ويب :


		  <html xmlns="http://www.w3.org/1999/xhtml">


ملاحظة : تحدد اللاحقة xmlns الاسم المثالي في xml لصفحة الويب والتي تتطلب حصرياً صفحة XHTML



3. قم بتغيير اسماء الوسوم واللواحق الى أحرف صغيرة Lowercase


ان وجود خاصية "ايجاد واستبدال" مفيدة جداً لتحويل جميع أسماء الوسوم من أحرف كبيرة الى صغيرة كما يمكن فعل نفس الشيء مع اسماء اللواحق .



4. ضع جميع قيم اللواحق ضمن أقواس الاقتباس


قم بفحص كل صفحة للتأكد بأن جميع القيم تم وضعهم ضمن أقواس الاقتباس .



5. قم بإغلاق جميع الوسوم الفارغة


لاتقبل الوسوم الفارغة في XHTML . يجب استبدال الوسوم <hr> و <br> بوسوم مغلقة
مثل <br />و <hr /> .ان وجود خاصية "ايجاد واستبدال" مفيدة جداً لتبديل تلك الوسوم بأخرى مثيلة مغلقة .

قم بإغلاق وسم الصور <img> من خلال اضافة "/" في نهايتها مثل <img src=”#” />



6. قم بفحص صفحتك الويب من خلال الفاحص التابع لمنظمة الويب W3C


قبل فحص صفحتك XHTML يجب اضافة تعريف صفحة صحيح DTD في أول سطر لكل صفحة ويب .

يمكن التأكد من صحة وفعالية صفحنك من خلال الرابط التالي :

		  http://validator.w3.org
		  يمكن تصحيح الأخطاء (إن وجدت) .

أيهما أستخدم HTML أو XHTML ؟



تعتبر لغة XHTML أوضح نسخة من لغة HTML



ماهي لغة XHTML


  • هي اختصار EXtensible HyperText Markup Language أي لغة الترميز التشعبية الموسّعة .

  • تعتبر لغة XHTML مشابهة للغة HTML 4.01

  • تعتبر لغة XHTML أوضح نسخة من لغة HTML

  • ان لغة XHTML هي نفسها لغة HTML ولكن محددة مع تطبيقات XML .

  • تم اطلاق XHTML من خلال منظمة الويب العالمية W3C في كانون الثاني 2000 .

  • تعتبر لغة XHTML مدعومة من خلال جميع المتصفحات الرئيسية .



لماذا XHTML ؟


العديد من صفحات الويب تحتوي على لغة HTML سيئة .
يعتبر الكود في المثال التالي صحيحاً ولكن لايتبع قواعد HTML الرئيسية .
		  <html>
		  <head>
		  <title>هذا استخدام سيء للغة HTML</title>
		  <body>
		  <h1>استخدام سيء
		  <p>هذه فقرة صغيرة

		  </body>



ان لغة XHTML هي نفسها لغة HTML 4.01 ولكن معاد تصميمها كلغة XML .
ان لغة XML هي لغة ترميز تشعبية حيث يجب أن تكون الصفحة مرمّزة بشكل صحيح ومكتوبة بأكواد صحيحة .
تتكون أسواق اليوم من تقنيات المتصفحات المختلفة . بعض المتصفحات تستخدم على الحاسوب والبعض الآخر تستخدم الهاتف المحمول أو أجهزة أخرى صغيرة . غالباً ماتفقد الأجهزة الصغيرة المصادر أو القوة لإنشاء لغة ترميز سيئة .
ولهذا تم تطوير و الجمع بين اللغات HTML و XHTML و XML .


الاختلاف الرئيسية مع لغة HTML


  • يجب ترتيب عناصر XHTML بشكل صحيح

  • يجب اغلاق جميع الوسوم في XHTML .

  • يجب أن تكون الوسوم في XHTML مكتوبة بأحرف صغيرة lowercase

  • يجب ان تحتوي صفحة XHTML على عنصر جذري واحد .



يجب ترتيب عناصر XHTML بشكل صحيح


في لغة HTML يمكن ترتيب العناصر بشكل خاطئ ضمن بعضهم البعض مثل هذا :

		  <b><i>هذا النص غامق ومائل</b></i>


ولكن في لغة XHTML يجب على جميع العناصر / الوسوم أن تكون مرتبة بشكل صحيح مع بعضهم مثل :

		  <b><i>هذا النص غامق ومائل</i></b>


ملاحظة : ان الخطأ الشائع في استخدام ترتيب الوسوم بشكل صحيح هو نسيان أن استخدام قائمة بداخل قائمة اخرى يجب أن تكون القائمة ضمن وسم

هذا المثال خاطئ :

		  <ul>
		  <li>القهوة</li>
		  <li>الشاي
		  <ul>
		  <li>شاي أسود</li>
		  <li>شاي أخضر</li>
		  </ul>
		  <li>الحليب</li>
		  </ul>


هذا المثال صحيح :

		  <ul>
		  <li>القهوة</li>
		  <li>الشاي
		  <ul>
		  <li>شاي أسود</li>
		  <li>شاي أخضر</li>
		  </ul>
		  </li>
		  <li>الحليب</li>
		  </ul>


لاحظ بأننا وضعنا وسم </li> بعد وسم </ul> في المثال الصحيح السابق .



يجب اغلاق جميع الوسوم في XHTML
يجب أن تغلق جميع الوسوم باستئناء الوسوم الفارغة  .

هذا المثال خاطئ :

		  <p>هذه فقرة
		  <p>هذه فقرة أخرى


هذا المثال صحيح :

		  <p>هذه فقرة</p>
		  <p>هذه فقرة أخرى</p>




يجب اغلاق الوسوم الفارغة


على الرغم من أن الوسوم الفارغة لاتحتوي على وسم لإغلاقها الا أنه يمكن اغلاقها من خلال اضافة "/" في آخر الوسم .

هذا المثال خاطئ :

		  سطر جديد <br>
		  خط فاصل <hr>
		  صورة <img src="happy.gif" alt="وجه ضاحك">


هذا المثال صحيح :

		  سطر جديد <br/ >
		  خط فاصل <hr />
		  صورة <img src="happy.gif" alt="وجه ضاحك" />




يجب أن تكون الوسوم في XHTML بأحرف صغيرة Lower Case


يجب أن تكون الوسوم واللواحق بأحرف انكليزية صغيرة .

هذا المثال خاطئ :

		  <BODY>
		  <P>هذه فقرة</P>
		  </BODY>


هذا المثال صحيح :
		  <body>
		  <p>هذه فقرة</p>
		  </body>




يجب أن تحتوي الصفحة على عنصر جدر واحد فقط في XHTML


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

		  <html>
		  <head> ... </head>
		  <body> ... </body>
		  </html>



تركيبة XHTML


قواعد أخرى لتركيبة XHTML


  • يجب أن تكون اسماء اللواحق بأحرف صغيرة lower case

  • يجب ان تكون اللواحق ضمن اشارات الاقتباس

  • ممنوع استخدام الاختصارات مع اللواحق

  • تعتبر وسوم XHTML اجبارية حسب تعريف صفحة الويب DTD




يجب أن تكون اللواحق بأحرف صغيرة Lower Case


مثال خاطئ :

		  <table WIDTH="100%">


مثال صحيح
		  <table width="100%">


يجب أن يكون قيم اللواحق ضمن أقواس الاقتباس


مثال خاطئ :
		  <table width=100%">


مثال صحيح
<table width="100%">



ممنوع استخدام الاختصارات مع اللواحق


مثال خاطئ :
		  <input checked>
		  <input readonly>
		  <input disabled>
		  <option selected>
		  <frame noresize>


مثال صحيح
		  <input checked="checked" />
		  <input readonly="readonly" />
		  <input disabled="disabled" />
		  <option selected="selected" />




لاحقة اللغة


تستخدم لاحقة اللغة مع في كل وسم XHTML حيث تحدد لغة المحتوى الموجود ضمن وسوم XHTML .
ان قمت باستخدام لاحقة اللغة في XHTML يجب أيضاً اضافة اللاحقة xml:lang كالتالي :

		  <div lang="Ar" xml:lang="Ar">مرحباً بكم</div>




تعتبر وسوم XHTML اجبارية حسب تعريف صفحة الويب DTD


يجب أن تحتوي صفحة XHTML على تحديد نوع الصفحة DOCTYPE كما يجب على الوسوم html , head , body أن تكون موجودة .


تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات