XHTML ( الدرس الثاني ) : المقارنة بين HTML و XHTML

twinkle · 30-10-2007, 04:18 PM

المقارنة بين HTML و XHTML

يمكنك أن تهيء نفسك للغة XHTML بكتابة أكواد HTML بشكل دقيق وصحيح

كيف نكون مستعدين للغة XHTML؟
لغة XHTML هي الجيل الثاني للغة HTML، ولكن يتطلب ذلك من المتصفحات والبرمجيات الأخرى بعضا من الوقت لتكون جاهزة لها..

وفي أثناء ذلك، هناك بعض الأمور الهامة التي باستطاعتك عملها لتجهز نفسك للتعامل مع هذه اللغة.

لغة XHTML لا تختلف كثيرا عن لغة HTML والتي تطرقت لدراستها سابقا. ولهذا، فإن رفع الكود إلى معايير HTML 4.01 ستكون بداية جيدة للدخول لعالم XHTML.. وسيساعدك ما كتب على هذا الرابط HTML 4.01 reference
إضافة إلى ذلك، يجب عليك من الآن كتابة أكواد HTML بالحروف الصغيرة، واهتم بنهايات الوسوم ولا تنس كتابتها (مثل </p>).
بداية ممتعة في عالم XHTML !

أهم الفروقات بين HTML و XHTML:
• عناصر لغة XHTML إن كانت متداخلة فيجب أن تتداخل بشكل صحيح.
• وثائق لغة XHTML يجب أن تشكل بشكل جيد.
• كتابة الوسوم يجب أن تكون بالحروف الصغيرة.
• كل عناصر لغة XHTML يجب أن تغلق.
وسيتم شرح كل فرق بالتفصيل:

عناصر لغة XHTML إن كانت متداخلة فيجب أن تتداخل بشكل صحيح:
المقصود بالتداخل: إذا كتب وسم داخل وسم، فإن الوسم الداخلي يجب أن يفتح ويغلق داخل الوسم الخارجي،أي لا يغلق الوسم الخارجي قبل أن يغلق الوسم الداخلي (الوسم الداخلي يغلق أولا).

ففي لغة HTML، بعض العناصر تتداخل فيما بينها بشكل غير صحيح، مثل هذا الكود:

كود:

<b><i>This text is bold and italic</b></i>

لكن في لغة XHTML فيجب أن تتداخل العناصر بشكل صحيح مثل هذا الكود:

كود:

<b><i>This text is bold and italic</i></b>

ملاحظة:
أكثر الأخطاء شيوعا في كود كتابة القوائم، فغالبا ما تكتب القائمة الداخلية بشكل غير صحيح. مثلا.. في الكود التالي لم يكتب وسم النهاية للعنصر li الداخلي (أي لم يكتب الوسم </li> )

كود:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

والتصحيح هو:

كود:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

لاحظ: تم إضافة الوسم </li> بعد وسم </ul> الواردة في المثال السابق

وثائق لغة XHTML يجب أن تشكل بشكل جيد:

كل عناصر لغة XHTML يجب أن تكتب ضمن (أو داخل) العنصر الجذري <html>، وكل العناصر في الكود يمكن أن تحتوي في داخلها على عناصر أخرى.
العناصر الداخلية يجب أن تكتب كأزواج وتتداخل بشكل صحيح داخل العنصر الذي يحتويها.

الصورة العامة لكتابة الوثائق هي:

كود:

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

كتابة الوسوم يجب أن تكون بالحروف الصغيرة:
وهذا بسبب أن وثائق XHTML تعتبر تطبيقات XML، ولغة XML حساسة لحالة الحروف، مثلا: الوسم <br>والوسم <BR> يترجمان على أنهما وسمين مختلفين، فهذا الكود خاطئ:

كود:

<BODY>
<P>This is a paragraph</P>
</BODY>

وهذا صحيح:

كود:

<body>
<p>This is a paragraph</p>
</body>

كل عناصر لغة XHTML يجب أن تغلق:
جميع العناصر (الفارغة وغير الفارغة) يجب أن تغلق..

فالعناصر غير الفارغة يجب أن يكتب لها وسم نهاية لإغلاقها..

مثلا..هذا الكود خاطئ:

كود:

<p>This is a paragraph
<p>This is another paragraph

وهذا الكود صحيح:

كود:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

وكذلك العناصر الفارغة يجب أن تغلق بكتابة وسم نهاية لها أو أن تكتب بوسم البداية فقط مع جعل وسم البداية ينتهي بهذا الرمز />

مثلا.. هذا الكود خاطئ:

كود:

This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">

وهذا الكود صحيح:

كود:

This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />

ملاحظة مهمة عن التوافق:
لجعل أكواد XHTML متوافقة مع المتصفحات الحديثة والمستخدمة هذه الأيام، يجب أن توضع مسافة إضافية قبل رمز / مثل:

كود:

<br />

و

كود:

 <hr />.

زهرة البيلسان · 01-11-2007, 07:25 AM

جميل و شرح واضح ..

بارك الله في الجهود ..

aroma · 01-11-2007, 01:00 PM

واضح ,,

شكر الله لكم ,,

محمد جبلي · 01-11-2007, 11:30 PM

الله يجزاك خير تونكـل شرح رآئــع

ومرتب و واضـح

كـان عندي ملاحظـة أنه الرابط حق HTML 4.01 reference
فيه زيادة شرطة مائلة في النهاية تخليه مايفتح ..
أتمنى إن أستطاع أحد المشرفين تعديلها فليعدلها

وشكراً تونكـل

أم يوسف · 02-11-2007, 02:03 AM

بارك الله فيك..

كوشيه دي سولاي · 02-11-2007, 02:33 AM

شرح جميل

جزيت خيرا

twinkle · 02-11-2007, 02:02 PM

جزاكم الله خيرا

بإذن الله سيتم تصحيح الرابط

الأمل الطائر · 02-11-2007, 02:34 PM

بارك الله فيكم ,,

درس مليء بالمفاهيم السهلة والأساسية ,,

بوركتم ,,

عبدالمجيد · 02-11-2007, 08:50 PM

وفقكم الله ،،

درس سهل وبسيط بإذن الله ،،

محمد جبلي · 05-11-2007, 08:20 AM

الرجاء مـن جميـع أعضـاء الفريـق اللي مـا لهم رد في هذا الدرس
أن يضعوا ردهـم
لكـي نعلم أنه لا يوجد سؤال على الدرس ليقوم المشرفيـن بإغلاقـه

الرجاء الرد في أسرع وقت

ريفــــــــــــــــان · 09-11-2007, 07:22 PM

. .

ما شاء الله

الدرس بسيط جداً . .

ننتقل إلى الثالث

http://forum.ma3ali.net/t381442.html

. . .


Ma3ali Tube	Be Happy	الجـوال	Ma3ali flickr	الغرفة الصوتية	البطاقات	الصـوتيـات	مركز التحميل	مجلة أجيال

01-11-2007, 11:30 PM	#4
محمد جبلي اوسمتي مجموع الاوسمة: 1	الله يجزاك خير تونكـل شرح رآئــع ومرتب و واضـح كـان عندي ملاحظـة أنه الرابط حق HTML 4.01 reference فيه زيادة شرطة مائلة في النهاية تخليه مايفتح .. أتمنى إن أستطاع أحد المشرفين تعديلها فليعدلها وشكراً تونكـل
محمد جبلي اوسمتي مجموع الاوسمة: 1

05-11-2007, 08:20 AM	#10
محمد جبلي اوسمتي مجموع الاوسمة: 1	الرجاء مـن جميـع أعضـاء الفريـق اللي مـا لهم رد في هذا الدرس أن يضعوا ردهـم لكـي نعلم أنه لا يوجد سؤال على الدرس ليقوم المشرفيـن بإغلاقـه الرجاء الرد في أسرع وقت
محمد جبلي اوسمتي مجموع الاوسمة: 1

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

30-10-2007, 04:18 PM	#1
twinkle	XHTML ( الدرس الثاني ) : المقارنة بين HTML و XHTML المقارنة بين HTML و XHTML يمكنك أن تهيء نفسك للغة XHTML بكتابة أكواد HTML بشكل دقيق وصحيح كيف نكون مستعدين للغة XHTML؟ لغة XHTML هي الجيل الثاني للغة HTML، ولكن يتطلب ذلك من المتصفحات والبرمجيات الأخرى بعضا من الوقت لتكون جاهزة لها.. وفي أثناء ذلك، هناك بعض الأمور الهامة التي باستطاعتك عملها لتجهز نفسك للتعامل مع هذه اللغة. لغة XHTML لا تختلف كثيرا عن لغة HTML والتي تطرقت لدراستها سابقا. ولهذا، فإن رفع الكود إلى معايير HTML 4.01 ستكون بداية جيدة للدخول لعالم XHTML.. وسيساعدك ما كتب على هذا الرابط HTML 4.01 reference إضافة إلى ذلك، يجب عليك من الآن كتابة أكواد HTML بالحروف الصغيرة، واهتم بنهايات الوسوم ولا تنس كتابتها (مثل </p>). بداية ممتعة في عالم XHTML ! أهم الفروقات بين HTML و XHTML: • عناصر لغة XHTML إن كانت متداخلة فيجب أن تتداخل بشكل صحيح. • وثائق لغة XHTML يجب أن تشكل بشكل جيد. • كتابة الوسوم يجب أن تكون بالحروف الصغيرة. • كل عناصر لغة XHTML يجب أن تغلق. وسيتم شرح كل فرق بالتفصيل: عناصر لغة XHTML إن كانت متداخلة فيجب أن تتداخل بشكل صحيح: المقصود بالتداخل: إذا كتب وسم داخل وسم، فإن الوسم الداخلي يجب أن يفتح ويغلق داخل الوسم الخارجي،أي لا يغلق الوسم الخارجي قبل أن يغلق الوسم الداخلي (الوسم الداخلي يغلق أولا). ففي لغة HTML، بعض العناصر تتداخل فيما بينها بشكل غير صحيح، مثل هذا الكود: كود: <b><i>This text is bold and italic</b></i> لكن في لغة XHTML فيجب أن تتداخل العناصر بشكل صحيح مثل هذا الكود: كود: <b><i>This text is bold and italic</i></b> ملاحظة: أكثر الأخطاء شيوعا في كود كتابة القوائم، فغالبا ما تكتب القائمة الداخلية بشكل غير صحيح. مثلا.. في الكود التالي لم يكتب وسم النهاية للعنصر li الداخلي (أي لم يكتب الوسم </li> ) كود: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> </ul> والتصحيح هو: كود: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> لاحظ: تم إضافة الوسم </li> بعد وسم </ul> الواردة في المثال السابق وثائق لغة XHTML يجب أن تشكل بشكل جيد: كل عناصر لغة XHTML يجب أن تكتب ضمن (أو داخل) العنصر الجذري <html>، وكل العناصر في الكود يمكن أن تحتوي في داخلها على عناصر أخرى. العناصر الداخلية يجب أن تكتب كأزواج وتتداخل بشكل صحيح داخل العنصر الذي يحتويها. الصورة العامة لكتابة الوثائق هي: كود: <html> <head> ... </head> <body> ... </body> </html> كتابة الوسوم يجب أن تكون بالحروف الصغيرة: وهذا بسبب أن وثائق XHTML تعتبر تطبيقات XML، ولغة XML حساسة لحالة الحروف، مثلا: الوسم <br>والوسم <BR> يترجمان على أنهما وسمين مختلفين، فهذا الكود خاطئ: كود: <BODY> <P>This is a paragraph</P> </BODY> وهذا صحيح: كود: <body> <p>This is a paragraph</p> </body> كل عناصر لغة XHTML يجب أن تغلق: جميع العناصر (الفارغة وغير الفارغة) يجب أن تغلق.. فالعناصر غير الفارغة يجب أن يكتب لها وسم نهاية لإغلاقها.. مثلا..هذا الكود خاطئ: كود: <p>This is a paragraph <p>This is another paragraph وهذا الكود صحيح: كود: <p>This is a paragraph</p> <p>This is another paragraph</p> وكذلك العناصر الفارغة يجب أن تغلق بكتابة وسم نهاية لها أو أن تكتب بوسم البداية فقط مع جعل وسم البداية ينتهي بهذا الرمز /> مثلا.. هذا الكود خاطئ: كود: This is a break<br> Here comes a horizontal rule:<hr> Here's an image <img src="happy.gif" alt="Happy face"> وهذا الكود صحيح: كود: This is a break<br /> Here comes a horizontal rule:<hr /> Here's an image <img src="happy.gif" alt="Happy face" /> ملاحظة مهمة عن التوافق: لجعل أكواد XHTML متوافقة مع المتصفحات الحديثة والمستخدمة هذه الأيام، يجب أن توضع مسافة إضافية قبل رمز / مثل: كود: <br /> و كود: <hr />.
twinkle	التعديل الأخير تم بواسطة twinkle ; 28-10-2008 الساعة 12:23 PM. سبب آخر: تعديل العنوان


منتديات مسلمة النسائية	مساحة إعلانيه

01-11-2007, 07:25 AM	#2
زهرة البيلسان	جميل و شرح واضح .. بارك الله في الجهود ..
زهرة البيلسان

01-11-2007, 01:00 PM	#3
aroma	واضح ,, شكر الله لكم ,,
aroma

02-11-2007, 02:03 AM	#5
أم يوسف	بارك الله فيك..
أم يوسف

02-11-2007, 02:33 AM	#6
كوشيه دي سولاي	شرح جميل جزيت خيرا
كوشيه دي سولاي

02-11-2007, 02:02 PM	#7
twinkle	جزاكم الله خيرا بإذن الله سيتم تصحيح الرابط
twinkle

02-11-2007, 02:34 PM	#8
الأمل الطائر	بارك الله فيكم ,, درس مليء بالمفاهيم السهلة والأساسية ,, بوركتم ,,
الأمل الطائر

02-11-2007, 08:50 PM	#9
عبدالمجيد	وفقكم الله ،، درس سهل وبسيط بإذن الله ،،
عبدالمجيد

09-11-2007, 07:22 PM	#11
ريفــــــــــــــــان	. . ما شاء الله الدرس بسيط جداً . . ننتقل إلى الثالث http://forum.ma3ali.net/t381442.html . . .
ريفــــــــــــــــان

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الأعضاء الذين قرؤوا الموضوع منذ 30 يوم ( أيام ) : 0 .
الموضوع لم يُقرأ بعد

XHTML ( الدرس الثاني ) : المقارنة بين HTML و XHTML

مسار الواعدين