رائد ابو فيصل
01-03-2010, 06:25 AM
السلام عليكم ورحمة الله وبركاته
اساسيات بناء صفحة XHTML
--------------------------------------------------------------------------------
بنيان اى صفحة XHTML يتطلب عناصر معينة لتكوين صفحة 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">
<head>
<title></title>
</head>
<body>
</body>
</html>
اول سطر بالكود
كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
هو عبارة عن تعريف نوع الصفحة
هل هو html 4 ام xhtml
وفى المثال اعلاه فهو XHTML من النوع Transitional
(وهذا النوع هو مايستخدم بكثرة)
السطر الثانى
كود:
<html xmlns="http://www.w3.org/1999/xhtml">
هو بداية كود الـ HTML الخاص بنا, ونضع به الخاصية xmlns
ليتعرف المتصفح على مصدر الأوسمة التى سنتستخدمها للصفحة (لا داعى للتعمق فى شرح هذه الأسطر, حيث انها بكل الأحوال اجبارية ويجب استخدامها)
بعد ذلك يأتى عنصر الـ <head>
عنصر الـ head يوضع بداخله انواع متعددة من العناصر
الأول والأجبارى منها هو عنصر الـ title والذى عن طريقه يتم تحديد
عنوان الصفحة.
وبعد عنصر الـ <head> يأتى عنصر الـ <body> (ولاحظ ان جميعهم داخل العنصر الأب <html>)
عنصر الـ body هو الصفحة الخاصة بنا, وكل العناصر التى توضع بداخله تعرض بالمتصفح.
نعود مرة اخرى للعنصر html
عن طريق هذا العنصر يمكننا ان نحدد لغة الصفحة (بشكل عامل, كما يمكننا تغير ذلك لأى عنصر بمفرده)
بالشكل التالى
كود:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar">
او
كود:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
الأول للغة العربية والثانى الإنجليزية.
بالنسبة لتحديد اللغة لأى عنصر على حدى لنفرض للعنصر span مثلا
يتم الأمر كالتالى
كود:
<span xml:lang="ar">عنصر عربى</span>
فى حالة اننا نصمم صفحات لغة عربية
فإننا بحاجة لإضافة خاصية اخرى لعنصر الـ html لنجعل الصفحة تقرأ من اليمين لليسار وهى خاصية dir
وتتم بالشكل التالى
كود: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="rtl">
نذهب للأسفل قليلا الى العنصر head
العنصر head يمكن ان يضم بداخله عدة عناصر مختلفة
عنصر scrip لإضافة اكواد برمجية
او عنصر style لإضافة اكواد css
او عنصر meta والذى له الكثير من الإستخدامات.
مايهمنا الأن هو العنصر meta واستخدامه لتحديد نوع الكود المستخدم بالصفحة وترميز الصفحة.
الترميز, هو لغة تشفير يتم تشفير النصوص بها فى الصفحة ليتمكن المتصفح من قراءة النصوص بشكل صحيح.
الترميز الخاص باللغة العربية هو الترميز windows-1256
لكن فى الوقت الحالى الأكثر انتشارا هو الترميز utf-8 والذى تعمل بها اغلب اللغات التى تحتوى على رموز خاصة (كاليبانية, والعبرية, والعربية, الخ)
فنحن نقوم بإستخدام العنصر meta داخل العنصر head مع اضافة خاصية الـ
http-equiv والتى عملها ان ترسل اشارات معينة للمتصفح يستطيع من خلالها فهم طريقة التعامل مع هذه الصفحة (ويتم اضافة خصائص فرعية لهذه الخاصية)
ويتم الأمر بالشكل التالى
كود:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>صفحة للتعلم من دروس ملتقى مطورى المواقع</title>
</head>
وبنفس الجزء الخاص بالـ head يمكننا اضافة اوسمة meta خاصة بمحركات البحث
كالميتا keywords والميتا description
كود:
<meta name="keywords" content="تعلم, تصميم, صفحات, html" />
<meta name="description" content="انا اتعلم كيف اصمم صفحات HTML" />
اتمنى يكون الدرس واضح وبسيط وان شاء الله اراكم على خير بالدروس القادمة بإذن الله.
اقرأ ايضا..
•الدرس السابق خصائص تستخدم بكثرة Attributes (http://www.abc4web.net/vb/showthread.php?t=7054)
•الدرس التالى عناصر النصوص text elements..
من الدعم العربي التطويري
اساسيات بناء صفحة XHTML
--------------------------------------------------------------------------------
بنيان اى صفحة XHTML يتطلب عناصر معينة لتكوين صفحة 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">
<head>
<title></title>
</head>
<body>
</body>
</html>
اول سطر بالكود
كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
هو عبارة عن تعريف نوع الصفحة
هل هو html 4 ام xhtml
وفى المثال اعلاه فهو XHTML من النوع Transitional
(وهذا النوع هو مايستخدم بكثرة)
السطر الثانى
كود:
<html xmlns="http://www.w3.org/1999/xhtml">
هو بداية كود الـ HTML الخاص بنا, ونضع به الخاصية xmlns
ليتعرف المتصفح على مصدر الأوسمة التى سنتستخدمها للصفحة (لا داعى للتعمق فى شرح هذه الأسطر, حيث انها بكل الأحوال اجبارية ويجب استخدامها)
بعد ذلك يأتى عنصر الـ <head>
عنصر الـ head يوضع بداخله انواع متعددة من العناصر
الأول والأجبارى منها هو عنصر الـ title والذى عن طريقه يتم تحديد
عنوان الصفحة.
وبعد عنصر الـ <head> يأتى عنصر الـ <body> (ولاحظ ان جميعهم داخل العنصر الأب <html>)
عنصر الـ body هو الصفحة الخاصة بنا, وكل العناصر التى توضع بداخله تعرض بالمتصفح.
نعود مرة اخرى للعنصر html
عن طريق هذا العنصر يمكننا ان نحدد لغة الصفحة (بشكل عامل, كما يمكننا تغير ذلك لأى عنصر بمفرده)
بالشكل التالى
كود:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar">
او
كود:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
الأول للغة العربية والثانى الإنجليزية.
بالنسبة لتحديد اللغة لأى عنصر على حدى لنفرض للعنصر span مثلا
يتم الأمر كالتالى
كود:
<span xml:lang="ar">عنصر عربى</span>
فى حالة اننا نصمم صفحات لغة عربية
فإننا بحاجة لإضافة خاصية اخرى لعنصر الـ html لنجعل الصفحة تقرأ من اليمين لليسار وهى خاصية dir
وتتم بالشكل التالى
كود: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="rtl">
نذهب للأسفل قليلا الى العنصر head
العنصر head يمكن ان يضم بداخله عدة عناصر مختلفة
عنصر scrip لإضافة اكواد برمجية
او عنصر style لإضافة اكواد css
او عنصر meta والذى له الكثير من الإستخدامات.
مايهمنا الأن هو العنصر meta واستخدامه لتحديد نوع الكود المستخدم بالصفحة وترميز الصفحة.
الترميز, هو لغة تشفير يتم تشفير النصوص بها فى الصفحة ليتمكن المتصفح من قراءة النصوص بشكل صحيح.
الترميز الخاص باللغة العربية هو الترميز windows-1256
لكن فى الوقت الحالى الأكثر انتشارا هو الترميز utf-8 والذى تعمل بها اغلب اللغات التى تحتوى على رموز خاصة (كاليبانية, والعبرية, والعربية, الخ)
فنحن نقوم بإستخدام العنصر meta داخل العنصر head مع اضافة خاصية الـ
http-equiv والتى عملها ان ترسل اشارات معينة للمتصفح يستطيع من خلالها فهم طريقة التعامل مع هذه الصفحة (ويتم اضافة خصائص فرعية لهذه الخاصية)
ويتم الأمر بالشكل التالى
كود:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>صفحة للتعلم من دروس ملتقى مطورى المواقع</title>
</head>
وبنفس الجزء الخاص بالـ head يمكننا اضافة اوسمة meta خاصة بمحركات البحث
كالميتا keywords والميتا description
كود:
<meta name="keywords" content="تعلم, تصميم, صفحات, html" />
<meta name="description" content="انا اتعلم كيف اصمم صفحات HTML" />
اتمنى يكون الدرس واضح وبسيط وان شاء الله اراكم على خير بالدروس القادمة بإذن الله.
اقرأ ايضا..
•الدرس السابق خصائص تستخدم بكثرة Attributes (http://www.abc4web.net/vb/showthread.php?t=7054)
•الدرس التالى عناصر النصوص text elements..
من الدعم العربي التطويري