دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (الفرق بين HTML و XHTML)م#3

**أبو آسر** · 15-04-2014 10:49 AM

ما هي لغة XHTML ؟
لغة XHTML هي اختصار لـ EXtensible HyperText Markup Language وهي دمج بين لغة HTML ولغة XML
وهي مطابقة تقريبا للإصدار 4.01 من لغة HTML ولكنها تتسم بأنها لغة نظيفة وأكثر صرامة وأكثر ترتيبا وتنظيما من HTML ومدعومة من جميع المتصفحات الرئيسية ، باختصار هي الإصدار المطور والمطابق للمعايير القياسية العالمية للغة HTML .

أهم الفروقات بين HTML و XHTML
على عكس لغة HTML العادية التي قد تتغاضى عن حالة الأحرف التي قد تكون كبيرة Capital أو صغيرة Small فإن حالة الأحرف في XHTML لابد وأن تكون صغيرة Small فقط
المثال التالي خطأ

كود:

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

هذا المثال هو الصحيح

كود:

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

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

كود:

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

هذا هو الصحيح

كود:

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

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

كود:

<br>
<hr>
<img src="picture.jpg">

هذا هو الصحيح

كود:

<br />
<hr />
<img src="picture.jpg" />

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

كود:

<b><i><u>This text is bold, italic and underline</b></i></u>

هذا هو الصحيح

كود:

<b><i><u>This text is bold, italic and underline</u></i></b>

قد تتساءل:
ما الذي يجبرني على اتباع هذه اللغة الصارمة واجتناب سهولة لغة HTML العادية ؟
الجواب هو أن لغة XHTML عبارة عن مشروع نظيف ، حيث كل محتوى سيكون في مكانه المخصص ، حتى يكون من السهل جدًا البحث عن تعديل محتوى ما وسط تلك الأكواد مما يساعدك على جعل أكوادك منسقة ومنظمة جيدًا وخالية من الوسوم اللاقياسية ، والذي بالمقابل يجعل صفحتك سهلة التعديل والتحديث ، وحتى يمكن دمجها بعد ذلك مع CSS (الذي سنتطرق إليه لاحقا إن شاء الله بشيء من التفصيل).

وسوم إلزامية عند إنشاء أي صفحة XHTML
توجد وسوم لابد من وجودها في أي صفحة ويب تنشئها وهي
وسم فتح الصفحة

كود:

<html>

وسم رأس الصفحة والذي يحتوي على أكواد أخرى هامة ولكن لا تظهر بشكل مباشر في الصفحة

كود:

<head>

وسم عنوان أو اسم الصفحة ، ومكانه بين وسم فتح وغلق كود رأس الصفحة <head>

كود:

<title>

وسم محتوى الصفحة

كود:

<body>

بالإضافة إلى الكود التالي الذي سيكون موجودًا في بداية كل صفحة ويب تنشئها وقبل كتابة كود فتح html وذلك لإخبار المتصفح أن الصفحة التالية مطابقة للغة XHTML

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

والخلاصة أن الكود التالي هو الطريقة الصحيحة لكود نظيف وإلزامي يجب أن يكون موجودا بكل صفحة تنشئها (لست مضطرا إلى حفظ الكود بل يكفيك نسخه والاحتفاظ به في ملف عندك وقم بلصقه في كل صفحة جديدة تنشئها)

كود:

<!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">

<head>
<title>Title of document</title>
</head>

<body>
Your Page Content
</body>

</html>

رابط الحلقة السابقة
http://www.nilemotors.net/Nile/415799-html-2-a.html

**أبو آسر** · 15-04-2014 11:21 AM

أتمنى لو في أي شيء مش واضح ومش مفهوم بنسبة 100% تبلغوني فورا احنا كل ده لسة مقدمات وتمهيدات وكلام إنشا احنا لسة مدخلناش في الغويط :)
الموضوع سهل جدا وأبسط مما تتخيلوا بس الرك كله على اللي بيشرح وأنا أتمنى إن يكون شرحي سهل ومش معقد ولو في حاجة غامضة محدش يطنش أو يتحرج من السؤال عنها

**أبو آسر** · 15-04-2014 04:47 PM

المشاركة الأصلية كتبت بواسطة canner

جزاك الله خيرا على الموضوع هو فيه كذا سؤال

1- ايه هى اكواد و بتتكتب ازاى title & body

2- الكود ده بيطلع ازاى <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3- ازاى احدد اللغة اللى بكتب فيها سواء HTML او XHTML؟

4- جبت سيرة picture هنا ايه الكود بتاعها؟

1- ما يكتب داخل كود <title> هو عنوان الصفحة ليس إلا
مثال:

كود:

<title>أهلا بكم في الصفحة الرئيسية لموقعنا</title>

أما ما يتم كتابته داخل كود <body> فهو محتوى الصفحة كلها وهي أكواد مختلفة ومتنوعة وكثيرة جدا سنتاول أمثلة لها بالتفصيل إن شاء الله

2- هذا الكود كود خفي لا يظهر في الصفحة ولكنه يوجه المتصفحات إلى نوعية الصفحة

3- لو كتبت هذا الكود في أول الصفحة

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

4- كلمة picture كانت مجرد اسم ملف صورة كمثال ليس أكثر أما كود الصور عموما وبشكل مختصر فهو

كود:

<img src="picture.jpg" />

على أن تكون كلمة picture هي اسم ملف الصورة و .jpg هو امتداد ونوعية هذه الصورة و src هي اختصار لكلمة source أي مصدر هذه الصورة أو بمعنى آخر موقعها ومكان مسارها في مجلدات الموقع

**prof2013** · 15-04-2014 06:10 PM

من زمان لما كان عندي منتدى وحبيت اعمله استايل خاص بيه بالفوتوشوب معرفتش اركبه ع المنتدى لانه كان محتاج هاك بصيغه xml مربوط بالصور حاولت اتعلمه معرفتش لقيت ان لازم الصور تتقسم الاول ببرنامج فرونت بيج وبعدين بتطلع اكواد لكل صورة تم تقطيعها وفي الاخر بتحفظ الملف بصيغه xml
فهل الكلام ده هيبقى موجود في الكورس ؟؟ وهل ال xml هو هو xhtml ؟؟؟

**أبو آسر** · 15-04-2014 10:02 PM

المشاركة الأصلية كتبت بواسطة prof2013

من زمان لما كان عندي منتدى وحبيت اعمله استايل خاص بيه بالفوتوشوب معرفتش اركبه ع المنتدى لانه كان محتاج هاك بصيغه xml مربوط بالصور حاولت اتعلمه معرفتش لقيت ان لازم الصور تتقسم الاول ببرنامج فرونت بيج وبعدين بتطلع اكواد لكل صورة تم تقطيعها وفي الاخر بتحفظ الملف بصيغه xml
فهل الكلام ده هيبقى موجود في الكورس ؟؟ وهل ال xml هو هو xhtml ؟؟؟

زي ما في الموضوع xhtml هو الدمج بين html و xml لأن xml لغة مستقلة لها قواعد ووظائف أخرى هحاول أشرحها بشيء من الإيجاز إن شاء الله

**أبو آسر** · 15-04-2014 10:04 PM

المشاركة الأصلية كتبت بواسطة canner

شكرا على الرد بس انا عاوز افهم النقطة رقم 4 يعنى الكود بتاع الصورة مثلا هو
</"img my documents="canner.jpg>

هنفترض ان عندك صورة اسمها canner وامتدادها jpg. وموقعها في مجلدات موقعك داخل فولدر اسمه images
يبقى الكود بتاع إظهار الصورة هيكون كالتالي

كود:

<img src="images/canner.jpg" />

-

الموضوع: دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (الفرق بين HTML و XHTML)م#3

LinkBack

أدوات الموضوع

عرض

دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (الفرق بين HTML و XHTML)م#3 - انشر الموضوع فى :

-

-

-

-

المواضيع المتشابهه

دورة تصميم وتطوير مواقع الإنترنت للمبتدئين (تمهيد) #1

دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (مقدمة) #2

طرق الشراء من مواقع الإنترنت

هيونداي الثالثة عالميا في تصميم وتطوير ناقل حركة أوتوماتيكي سداسي النسب ...

الكلمات الدلالية لهذا الموضوع

المفضلات

المفضلات

ضوابط المشاركة