منتدى المعالي
 
عدد الضغطات : 1,283
ينتهي : 24-10-2012
Ma3ali Tube Towards Happiness الجـوال الغرفة الصوتية البطاقات الصـوتيـات مركز التحميل مجلة أجيال
Ma3ali Tube Be Happy الجـوال Ma3ali flickr الغرفة الصوتية البطاقات الصـوتيـات مركز التحميل مجلة أجيال



عدد الضغطات : 15,792عدد الضغطات : 5,503
ينتهي : 20-06-2012
عدد الضغطات : 10,019
ينتهي : 25-12-2012عدد الضغطات : 1,898

العودة   منتدى المعالي > العالم الرقمي > منتدى الحاسب الآلي و ورشة الصيانة والاستفسارات > فريق التعلم الذاتي لبناء المواقع > مسار الواعدين

مسار الواعدين هنا نُرحّب بالمبتدئين . .

موضوع مغلق
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 30-10-2007, 04:18 PM   #1





twinkle is on a distinguished road



افتراضي 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 ; 28-10-2008 الساعة 12:23 PM. سبب آخر: تعديل العنوان
twinkle غير متواجد حالياً
 
   
إظهار / إخفاء الإعلانات 
منتديات مسلمة النسائية مساحة إعلانيه
قديم 01-11-2007, 07:25 AM   #2
 
الصورة الرمزية زهرة البيلسان





زهرة البيلسان has a brilliant futureزهرة البيلسان has a brilliant future
زهرة البيلسان has a brilliant future



افتراضي



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

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



زهرة البيلسان غير متواجد حالياً
 
   
قديم 01-11-2007, 01:00 PM   #3
 
الصورة الرمزية aroma





aroma is a splendid one to behold
aroma is a splendid one to beholdaroma is a splendid one to beholdaroma is a splendid one to behold



افتراضي

واضح ,,

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

aroma غير متواجد حالياً
 
   
قديم 01-11-2007, 11:30 PM   #4
 
الصورة الرمزية محمد جبلي

افتراضي

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

ومرتب و واضـح

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

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


محمد جبلي غير متواجد حالياً
 
   
قديم 02-11-2007, 02:03 AM   #5
 
الصورة الرمزية أم يوسف





أم يوسف is on a distinguished road



افتراضي

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

أم يوسف غير متواجد حالياً
 
   
قديم 02-11-2007, 02:33 AM   #6
 
الصورة الرمزية كوشيه دي سولاي





كوشيه دي سولاي is on a distinguished road



افتراضي

شرح جميل

جزيت خيرا

كوشيه دي سولاي غير متواجد حالياً
 
   
قديم 02-11-2007, 02:02 PM   #7





twinkle is on a distinguished road



افتراضي

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

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

twinkle غير متواجد حالياً
 
   
قديم 02-11-2007, 02:34 PM   #8





الأمل الطائر is on a distinguished road



افتراضي

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

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

بوركتم ,,

الأمل الطائر غير متواجد حالياً
 
   
قديم 02-11-2007, 08:50 PM   #9
 
الصورة الرمزية عبدالمجيد





عبدالمجيد is on a distinguished road



افتراضي


وفقكم الله ،،

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

عبدالمجيد غير متواجد حالياً
 
   
قديم 05-11-2007, 08:20 AM   #10
 
الصورة الرمزية محمد جبلي

افتراضي


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

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


محمد جبلي غير متواجد حالياً
 
   
قديم 09-11-2007, 07:22 PM   #11
 
الصورة الرمزية ريفــــــــــــــــان





ريفــــــــــــــــان is on a distinguished road



افتراضي

. .

ما
شاء الله

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

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

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


.
. .

ريفــــــــــــــــان غير متواجد حالياً
 
   
موضوع مغلق

مواقع النشر (المفضلة)


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

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة



الساعة الآن 11:26 PM.