salima
11-01-2013, بتوقيت غرينيتش 03:37 PM
http://www.dzbatna.com/images/icons/iconrote.gif ظ…ط§ ظ‡ظˆ xhtml طں ظˆظƒظٹظپ طھطµط*ط* طµظپط*ط§طھظƒ ظˆطھطµط§ظ…ظٹظ…ظƒ طں (http://www.dzbatna.com/t1541984/)
بسم الله الرحمن الرحيم ...
أولا هذا الشرح طريقة اهداء للأخت عراقية وافتخر لما طلبت :
http://dzbatna.net/vb/showthread.php?t=1541660
ولأني استفدت منها الكثير في مواضيعها في SEO حبيت أقدم هالدرس مفصل كــ شكر لها ...
ولا أسمح بأي شخص بالنقل ...
أولا ما هو XHTML ?
هي لغة HTML نفسها لكن مصححة وخالية من جميع الأخطاء ...
طبعا ما أحب أكثر الهرج والبربرة بالكلام النظري ويهمنا العملي ...
وهي عبارة ومكونة من HTML و XML
طبعا لماذا XHTML بالذات .!
الكثير من يجهل بأن العالم بالكامل يستخدمون متصفحات أخرى أيضا أنظمة أخرى فأغلب المتصفحات تعتمد في قراءتها للصفحة على XHTML و ليس HTML ... بل أن البعض يتصفح من خلال جوال ويرى لخبطة الصفحة ... وهذا جدا مهم للمواقع الكبرى وما بين توافق التصميم للمقاييس المعيارية والي هي XHTML
طبعا تختلف XHTML عن HTML :
1- بأن يجب اغلاق كل الأوسمة وعدم تركها مثل HTML
2- كتابة الأوسمة بالحروف السمول وليس الكابتال ... يعني <p> وليس <P>
3- يجب ترتيب الأوسمة وعدم لخبطتها ...
ولنبدأ بمشاهدة الأمثلة ...
نأخذ أول كود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <b><i>This text is bold and italic</b></i>
</code> </code>
هذا كود code HTML راح يقوم بتحويل الكلام الي مكتوب بداخل الوسم الى خط عريض وخط ايطالي مائل ...
لكن وفقا لــ XHTML هناك خطأ وهو أنه لم يتم ترتيب الأوسمة هنا ... والتصحيح يكون هكذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <b><i>This text is bold and italic</i></b>
</code> </code>
يجب حين البدأ بوسم أن لا تنتقل الى وسم اخر قبل اغلاق الأول واقفاله ...
شاهدوا أيضا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
</code> </code>
هنا نسى الكود codeر أن يغلق وسم <li> بوسم </li>
والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</code> </code>
أيضا نأخذ كود code اخر
نشاهد هنا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <p>This is a paragraph
<p>This is another paragraph
</code> </code>
لم يتم اغلاق وسم <p> بوسم </p> والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <p>This is a paragraph</p>
<p>This is another paragraph</p>
</code> </code>
أيضا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
</code> </code>
يجب اغلاق كل الأوسمة بــ </> وعدم تركها فاضية كذا ... التصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
</code> </code>
مثال اخر على الحروف الكبيرة هالكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <BODY>
<P>This is a paragraph</P>
</BODY>
</code> </code>
نشاهد مكتوبة الأوسمة بحروف كبيرة والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <body>
<p>This is a paragraph</p>
</body>
</code> </code>
أيضا خطأ اخر هنا :
رمز PHP:
<code style="white-space:nowrap"> <code> <table WIDTH="100%">
</code> </code>
والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <table width="100%">
</code> </code>
أيضا هنا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <table width=100%>
</code> </code>
نشاهد بأنه لم يغلق بعلامتي تنصيص الرقم .! والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <table width="100%">
</code> </code>
كمثال لصفحة مكتوبة بــ XHTML من دون أي أخطاء :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
</code> </code>
وهنا مرجع للأوسمة :
http://www.w3schools.com/tags/default.asp
بالنسبة لمن أراد تعديل صفحة بالفرونت بيج وفقا لــ XHTML يتفضل هـالشرح طريقة :
http://www.w-dev.com/My_Lap/About_XH..._Frontpage.rar (http://www.w-dev.com/My_Lap/About_XHTML_In_Frontpage.rar)
ملاحظة : استخدم الفرونت بيج اخر اصدار فــ هناك تحديث updateات في اللغة تجنبك في الكثير من الأخطاء في الاصدارات القديمة ...
والله أعلم اذا فيه برامج أخرى مساعدة .!
للتأكد من الصفحات ان كانت مطابقة للمعايير من هنا :
http://validator.w3.org/check?uri=http://www.w-dev.com/
فقط استبدل رابط موقعي برابط موقعك ... وسوف يتم اعطائك الأخطاء التي في الصفحة وكيفية تصحيحها ...
في خيارات الموقع أيضا اذا تريد رفع صفحة للتأكد من الأخطاء راح تشاهدها في نفس المربع ...
بالتوفيق وما أسمح لأحد ينقل موضوعي من غير ذكر المصدر ...
المصدر :
http://www.w-dev.com/showthread.php?p=334
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم ...
أولا هذا الشرح طريقة اهداء للأخت عراقية وافتخر لما طلبت :
http://dzbatna.net/vb/showthread.php?t=1541660
ولأني استفدت منها الكثير في مواضيعها في SEO حبيت أقدم هالدرس مفصل كــ شكر لها ...
ولا أسمح بأي شخص بالنقل ...
أولا ما هو XHTML ?
هي لغة HTML نفسها لكن مصححة وخالية من جميع الأخطاء ...
طبعا ما أحب أكثر الهرج والبربرة بالكلام النظري ويهمنا العملي ...
وهي عبارة ومكونة من HTML و XML
طبعا لماذا XHTML بالذات .!
الكثير من يجهل بأن العالم بالكامل يستخدمون متصفحات أخرى أيضا أنظمة أخرى فأغلب المتصفحات تعتمد في قراءتها للصفحة على XHTML و ليس HTML ... بل أن البعض يتصفح من خلال جوال ويرى لخبطة الصفحة ... وهذا جدا مهم للمواقع الكبرى وما بين توافق التصميم للمقاييس المعيارية والي هي XHTML
طبعا تختلف XHTML عن HTML :
1- بأن يجب اغلاق كل الأوسمة وعدم تركها مثل HTML
2- كتابة الأوسمة بالحروف السمول وليس الكابتال ... يعني <p> وليس <P>
3- يجب ترتيب الأوسمة وعدم لخبطتها ...
ولنبدأ بمشاهدة الأمثلة ...
نأخذ أول كود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <b><i>This text is bold and italic</b></i>
</code> </code>
هذا كود code HTML راح يقوم بتحويل الكلام الي مكتوب بداخل الوسم الى خط عريض وخط ايطالي مائل ...
لكن وفقا لــ XHTML هناك خطأ وهو أنه لم يتم ترتيب الأوسمة هنا ... والتصحيح يكون هكذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <b><i>This text is bold and italic</i></b>
</code> </code>
يجب حين البدأ بوسم أن لا تنتقل الى وسم اخر قبل اغلاق الأول واقفاله ...
شاهدوا أيضا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
</code> </code>
هنا نسى الكود codeر أن يغلق وسم <li> بوسم </li>
والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</code> </code>
أيضا نأخذ كود code اخر
نشاهد هنا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <p>This is a paragraph
<p>This is another paragraph
</code> </code>
لم يتم اغلاق وسم <p> بوسم </p> والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <p>This is a paragraph</p>
<p>This is another paragraph</p>
</code> </code>
أيضا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
</code> </code>
يجب اغلاق كل الأوسمة بــ </> وعدم تركها فاضية كذا ... التصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
</code> </code>
مثال اخر على الحروف الكبيرة هالكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <BODY>
<P>This is a paragraph</P>
</BODY>
</code> </code>
نشاهد مكتوبة الأوسمة بحروف كبيرة والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <body>
<p>This is a paragraph</p>
</body>
</code> </code>
أيضا خطأ اخر هنا :
رمز PHP:
<code style="white-space:nowrap"> <code> <table WIDTH="100%">
</code> </code>
والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <table width="100%">
</code> </code>
أيضا هنا هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <table width=100%>
</code> </code>
نشاهد بأنه لم يغلق بعلامتي تنصيص الرقم .! والصحيح :
رمز PHP:
<code style="white-space:nowrap"> <code> <table width="100%">
</code> </code>
كمثال لصفحة مكتوبة بــ XHTML من دون أي أخطاء :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
</code> </code>
وهنا مرجع للأوسمة :
http://www.w3schools.com/tags/default.asp
بالنسبة لمن أراد تعديل صفحة بالفرونت بيج وفقا لــ XHTML يتفضل هـالشرح طريقة :
http://www.w-dev.com/My_Lap/About_XH..._Frontpage.rar (http://www.w-dev.com/My_Lap/About_XHTML_In_Frontpage.rar)
ملاحظة : استخدم الفرونت بيج اخر اصدار فــ هناك تحديث updateات في اللغة تجنبك في الكثير من الأخطاء في الاصدارات القديمة ...
والله أعلم اذا فيه برامج أخرى مساعدة .!
للتأكد من الصفحات ان كانت مطابقة للمعايير من هنا :
http://validator.w3.org/check?uri=http://www.w-dev.com/
فقط استبدل رابط موقعي برابط موقعك ... وسوف يتم اعطائك الأخطاء التي في الصفحة وكيفية تصحيحها ...
في خيارات الموقع أيضا اذا تريد رفع صفحة للتأكد من الأخطاء راح تشاهدها في نفس المربع ...
بالتوفيق وما أسمح لأحد ينقل موضوعي من غير ذكر المصدر ...
المصدر :
http://www.w-dev.com/showthread.php?p=334
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
