Fez-Soft Blog » html4 http://fez-soft.net دروس متقدمة في تصميم الويب و البرمجة بالجافاسكربت Mon, 19 Jul 2010 12:38:39 +0000 en hourly 1 ما الفرق بين html و xhtml ??? http://fez-soft.net/archives/100 http://fez-soft.net/archives/100#comments Thu, 09 Jul 2009 07:40:59 +0000 Fez-Soft http://www.fez-soft.net/?p=100 بسم الله الرحمان الرحيم ، كثيرا ما مر معي في دروس قبل كلمتي xhtml و html ، لكنني لم أبين الفرق بينهما ظنا مني أنها شيء عادي و الكل يعرف الفروقات بين هذه التقنيات ، لكن عند الطلب وجب الشرح ، و سيكون درسنا اليوم ان شاء الله تعالى عبارة عن أفكار نشرحها واحدة تلو الأخرى و نحاول أن نقرب لإخواننا الفرق بين هتين اللغتين – إن شاء الله – و نبدأ باسم الله ..
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/xhtml1-transitional.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 و meta يتم غلقها بإضافة مسافة و / في آخرها قبل اغلاقها ، امثلة من دون ترتيب :

    <img src="#" alt="صورة" />
<br />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta 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
  • html المقصود في الشرح وهو html 4 ، و مع صدرو html 5 ان شاء الله سنحاول عمل دروس مخصصة له في المدونة

أرجو ان تكون الاختلافات ظاهرة و كل شيء بين ، كما أنني لا أظن أنه بعد قراءة المقال هناك من سيعتمد في مشاريعه على html4
و السلام عليكم ورحمة الله .

انشر هذا المقال Digg del.icio.us Facebook Google Bookmarks Live MySpace TwitThis Yahoo! Buzz FriendFeed LinkedIn Ping.fm StumbleUpon

]]> http://fez-soft.net/archives/100/feed 6