1– الفرق بين html و xhtml
سنحاول أن نلخص الاختلافات الموجودة في نقاط سريعة :
* بداية االصفحات : حيث تتمثل بداية صفحة html عادية هكذا :
كود :
<html>
<body>
<head>
معلومات الرأس
</head>
</body><body>
هنا محتوى الصفحة
</body>
</html>
أما صفحة 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" xml:lang="en" >
<head>
هنا معلومات الرأس
</head>
<body>
هنا محتوى الصفحة
</body>
</html>
و نلاحظ زيادة سطرين في xhtml و هما خاصان بتحديد بنية الصفحة :
كود :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
هنا نحدد أن الصفحة عبارة عن xhtml و ليست html ، وهي من نوع Transitional
اما السطر الثاني وهو :
كود :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>
فهنا نحدد اللغة التي ستبنى عليها الصفحة وهي في المثال en اي انجليزية
امكانية اضافة اللغة لكل عنصر من عناصر الصفحة في xhtml :
حيث لو أردنا أن يكون عنصرا ما داخل الصفحة بلغة أخرى ، يمكننا اعطاؤه قيمة اللغة الملائمة مثلا داخل صفحة انجليزية يمكنني تحديد عنصر عربي هكذا :
كود :
<span xml:lang="ar">عنصر عربى</span>
في xhtml فإن الأكواد حساسة لحالة الأحرف ، و تكتب دائما صغيرة ( small ) و ليس كبيرة ( capital ) ، مثلا :
كود :
<div>Fez-Soft</div>
صحيحة و :
كود :
<DIV>Fez-Soft</DIV>
<Div>Fez-Soft</Div>
خاطئة مائة بالمائة
في XHTML كل الأوسمة يجب غلقها بلا استثناء مثال :
كود :
<div><p>Fez-Soft</p></div>
حيث أن ما فتحته لابد من اغلاقه ، حتى العناصر التي من نوع self close التي لا تغلق في html لابد من غلقها في xhtml ، مثل img و br و input و link و **************** يتم غلقها بإضافة مسافة و / في آخرها قبل اغلاقها ، امثلة من دون ترتيب :
كود :
<img src="#" alt="صورة" />
<br />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<**************** name="generator" content="WordPress 2.7.1" />
<input type="submit" value="submit" />
في html تكتب هكذا من غير غلق :
كود :
<img src="#" alt="صورة"/>
<br />
وعدم غلقها خطأ في المعايير القياسية
في xhtml جميع الخصائص لابد ان تكون داخل علامتي تنصيص
كود :
<a href="http://www.fez-soft.net">fez-soft</a>
اما كتابتها كما في html هكذا يعد خطآ في المعايير :
كود :
<a href=http://www.fez-soft.net >fez-soft</a>
في xhtml يجب مراعاة ترتيب الفتح و الاغلاق للأوسمة :
كود :
<div><p><a href="http://www.fez-soft.net">fez-soft</a></p></div>
بدأت بـ div و بعدها p و بعدها a ، فلابجد ان اغلق كل واحد على حدا و بالترتيب ، اغلق a و بعدها p و بعدها div اما تجاهل الترتيب فيعد خطأ في xhtml و ان كان يتجاهل في html مثلا :
كود :
<div><p><a href="http://www.fez-soft.net">fez-soft</a></p></div>
في xhtml لابد من احترام ترتيب العناصر الكبيرة و الصغيرة ، من حيث نوعها ، فكما تعلمون فإن العناصر نوعين في html
block & inline
block : و هي التي تضم بداخلها أنواع block و inline
inline : و هي التي لا تضم بداخلها الا أنواع inline
أنواع block مثل : div , p , table
انواع inline مثل : a , img , span , small
لذلك فإن الكتابة التالية صحيحة :
كود :
<div><p><a href="http://www.fez-soft.net"><span>fez-soft</span></a></p></div>
لكن هذه خاطئة لعدم احترام هذا الشرط :
كود :
<p><a href="http://www.fez-soft.net"><div><span>fez-soft</span></div></a></p>
*
حيث أن a من نوع inline هنا احتوت على div و هي من انواع block
2 – الفوائد
* xhtml اكثر تركيزا و تدقيقا في الأكواد من html
* xhtml مختزل و سلس و مفهوم لكل المتصفحات و محركات البحث
* xhtml من مميزات جيل الويب 2.0
ليست هناك تعليقات :
إرسال تعليق