اكيد معظمنا او كلنا سمع عن ال XHTML وممكن في ناس كتير مش عارفه بالضبط ايه هي و ايه الفرق بينها و بين لغة HTML
الغرض من الموضوع ده هو توضيح كيفية نقل الموقع من استخدامHTML الى استخدام XHTML بس في الاول لازم نعرف ايه هي اصلا ال XHTML و ايه الاختلاف بينها وبين HTML
وده كلام نظري وهوضحه باختصار و بالنسبة للفروق بالاخص هتوضح بشكل كبير لما نيجي نشوف ازاي ننقل او نحول الموقع لل XHTML.
XHTML متعتبرش لغة مستقلة في حد ذاتها زي مثلا لغة HTML او CSS او PHP او غيرهم، هي تعتبر مشتقة من الHTML وبتعتبر خليط منها و من لفة XML، وهي بتختوي على معظم تاجات HTML "وكل تاجات HTML 4" في الشكل او في اطار لغة XML، لكن عشان تقدر تحول الموقع ليها او تستخدمها مش مطلوب انك تكون عارف xml لكن مهم تكون بتجيد ال html و css وهنشوف ليه مطلوب اجادة ال css لما نشوف الفروق او خطوات التغيير.
وببساطة ممكن نعتبر ال xhtml النسخة المنظمة و المرتبه والصارمة من ال html.
واحب اضيف حاجة برضه وهي ان لو اي حد مش عارف او شايف ان الXHTML معقدة او مش ماشية معاه مش شرط انه يستخدمها لان ده شيء غير الزامي بس من الافضل فهمها لان معضم المواقع دلوقتي بتتحول ليها.
واحنا ان شاء الله هنا هنشوف كيفية تحويل الموقع لل XHTML والباب مفتوح لاي استفتسار عن ال XHTML واي شيء يتعلق بيها.
هنشوف دلوقتي ازاي هننقل الموقع من ال HTML الي ال XHTML و بعد الخطوات دي الفروق بينهم هما الاتنين هتكون واضحة و مش محتاجة كتابه.
1- اول حاجة اننا لازم نضيف ال DTD او ال"" وده لازم و بنضع التاج ده في اعلى الصفحة وفوق تاج html الرئيسي بتاع الصفحة،وده شكل التاج و نقدر ننسخه زي ماهو كده بالضبط ونحطه :
- الكود:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
وعامة لما تفتح صفحة HTML بالدريمويفر الكود ده بيوضع تلقائيا في مكانه في اعلى الصفحة.
2- لازم اننا نكتب كل حروف التاجات بالحروف الضغيرة lower case و الكلام ده لكل التاجات اللي في الصفحة.
- الكود:
-
<BODY BGCOLOR="BLUE">
وده هيكون شكل التاج الصحيح:
- الكود:
-
<body bgcolor="blue">
3- لازم نكتب القيم بتاعت الخصائص بين كوتيشن " " و ده توضيح لشكل التاج الغلط اللي تجاهل حجم الحروف و الكوتيشن الخاصة بالقيم:
- الكود:
-
<body bgcolor=blue>
وده هيكون شكل التاج الصحيح:
- الكود:
-
<body bgcolor="blue">
4- لازم كل التاجات القصيرة او الفراغة "زي
" تتقفل ولازم يكون في مسافة كمان بين شرطة الاغلاق و بين الحروف وه هيكون شكلها:
- الكود:
-
<br />
5- الصور مينفعش تتكتب image وتتكتب img ودي غلطة بيقع فيها ناس كتير، كمان لازم يكون في تعليق خاص بكل صورة وكمان لازم نقفل تاج الصورة ، وده شكل تاج الصورة الصحيح :
- الكود:
-
<img src="selver.gif" alt="selverTeam" />
6- الاعتماد على ال CSS في تحديد العرض و الطول للكائنات كلها خاصة العرض بالنسبة للبودي و الطول بالنسبة للجدول، وافضل حاجة اننا نعمل كل العرض و الطول لاي كائن بيها من الاول.
كمان في خصائص يفضل عملها بلغة CSS برضه زي border, align و في كل الاحوال استخدام CSS في وضع الخصائص افضل بكتير جدا حتى ولو مش عايزين XHTML.
7- اختصار بعض الخواص زي checked, disabled, selected ممنوع في ال XHTML ، يعني عشان نوضح النقطة دي مينفعش الكود يكون بالشكل ده مثلا:
- الكود:
-
<input type="button" disabled>
لكن المفروض يكون كده:
- الكود:
-
<input type="button" disabled="disabled">
8- عند تحديد اللغة في اي تاج لازم نحدد برضه لغة XML اللي هي " xml:lang" وهي بتاخد نفس اللغة المعطاه لخاصية اللغة "lang"، وده هيكون شكل الكود:
- الكود:
-
<p lang="en-US" xml:lang="en-US"> Mohammed Ezz </p>
9- في غلطة بيقع فيها ناس كتير وهي تحديد لغة الاسكربت عن طريق الخاصية "lang" وده غلط و المفروض يتم تحديدها عن طريق الخاصية "type" ،بالشكل ده:
- الكود:
-
******** type="text/javascript">
10- لازم كل التاجات او العناصر تكون متعششة بدقة Nested ودي من اهم الخصائص اللي بتميز لغة ال XML في الاساس و اكتسبتها اللغة دي منها، والمقصود بموضوع انها تتعشش بدقة باختصار يعني لو في عنصر بيحتوي على عنصر اخر لازم العنصر الداخلي يتقفل قبل الخارجي و يكون تاج الاغلاق داخله.
فالشكل ده مثلا مرفوض :
- الكود:
-
<p>I'm <em>mrocain</p></em>
والشكل الصحيح بيكون كده:
- الكود:
-
<p>I'm <em>Marocain</em></p>
11- بيتم استبدال ال Name بالاي دي ID في تعريف العناصر بشكل رئيسي، فمعتش يجب استخدام الاسم غير فقط في النماذج Forms لكن مع اي عنصر او كائن تاني بيتم اسخدام الاي دي ID كبديل للاسم ويمكن اضافة اسم مع الاي دي لكن الاعتماد بيكون على الاي دي.
12- لما بنيجي نعمل اي اسكربت بالجافاسكربت مثلا لازم نحط الاسكربت دخل جزء ال CDATA character data""
وبحيث يكون جميع الاسكربتات داخل ال CDATA بالشكل ده:
- الكود:
-
<script type="type/javascript">
// <![CDATA[
document.write(" ");
// ]]>
</script>
13- اخر خطوة هي مراجعة الشغل بتاعنا و تصحيحه و اكتشاف الاخطاء "Validation" وده عن طريق وضع اللينك بتاع الصفحه في الرابط ده.
فوائد استخدام لغة XHTML بدل HTML :
اكيد في مزايا او فوائد لاستبدال ال HTML ب XHTML واللي بيتطلب مجهود ووقت و ودي اهم المزايا الخاصة باستخدام XHTML:
- اعتمادها على لغة XML واللي بتتميز بالدقة في التنسيق و الصرامة و ده اللي اكتسبته لغة XHTML و بيها الصفحات بتكون منظمة ومنسقة اكتر من ناحية التكويد.
- تنسيق و دقة تكويد الصفحة بيجعل قرائها اسهل واسرع بالنسبة للمتصفح.
- جعل الصفحات اكتر تنسيقا هيسهل مهمة محركات البحث Search Engines و تكون ارشفتها اسهل واسرع.
- عرض الصفحات و سرعة قرائتها بتكون افضل من غيرها على اجهزة الموبايل لان برمجتها بتعمد بشكل كبير على لغة XML .
- لغة XHTML هي لغة المستقبل بالنسبة لبناء المواقع و يتوقع انها في الفترة القادمة هتغطي بشكل كبير على ال HTML فعشان كده يفضل معرفتها و تطبيقها الان.
موضوع: HTML & XHTML And How to Transfer your Site to XHTML 