رائد ابو فيصل
27-02-2010, 04:58 PM
السلام عليكم ورحمة الله وبركاته
خلال هذه الدورة سوف نمر بكثير من الخصائص Attributes
تستخدم بكثرة فى الـ XHTML
من هذه الخصائص, class و id و title و style و i18nالـ classوالـ id يمكنك ان تعتبرها علامة اضافية للعنصر
بحيث تستطيع تطبيق امور اضافية على هذا العنصر
بإستخدام الـ css او الجافا سكريبت
والأستخدام الأكثر لهم هو لإستهداف العناصر التى تعطها id و class معين
من خلال الـ css او الجافا سكريبت كما ذكرنا.
مثلا
كود:
<div id="top_div"
<p class="paragraph">text here</p>
<p>another text</p>
<p class="another_paragraph">another line of text</p>
</div>
الـ id تستخدم لتعريف عنصر واحد فقط بكل صفحة.
يعنى لا يمكن لأكثر من عنصر ان يكون لهم نفس الـ id
بمعنى ان الكود التالى كود خاطئ
كود:
<div id="top">
<p id="top">
هذا خاطئ تماما.
لكن على عكس الـ id يمكن لأى عدد من العناصر ان يكون له نفس الـ class
كالتالى مثلا
كود:
<div class="class_name">
<p class="class_name">
هذا الكود صحيح ولا يوجد به اى مشكلة.
الـ class والـ id سوف ننوه عنهم مرة اخرى مع تفاصيل اكثر فى دورة الـ css بإذن الله.
الـ title هذه الخاصية رائعة عند حاجتك لإضافة تفاصيل اضافية عن عنصر ما.
مثلا لدينا عنصر a التالى ويشير لمنتديات الدعم العربى
كود:
<a href="http://www.dd4bb.com">الدعم العربى</a>
لاحظ ان كلمة الدعم العربى هى فقط التى تظهر.
ماذا اذا اردنا وضع نبذة بسيطة عن الدعم العربى؟ وبنفس الوقت لا نريد استخدام مساحة اكثر فى الصفحة؟
هنا يأتى دور title
كود:
<a href="http://www.dd4bb.com" title="منتديات الدعم العربى منتديات تقنية وبرمجية ,, الخ">الدعم العربى</a>
الكود اعلاه عندما تنظر اليه, سترى انه لا يظهر سوى كلمة الدعم العربى
لكن اذا وقفت بمؤشر الفأرة على كلمة الدعم العربى قليلا
سترى الجملة "منتديات الدعم العربى منتديات تقنية وبرمجية ,, الخ" ظهرت لك
والـ title يستخدم فى كثير من الأوسمة مثل img و blockquote
خاصية الـ style هذه الخاصية تستخدم مع الكثير جدا من العناصر
لتضيف بها اكواد css مباشرة, بدلا من اعطاء العنصر class معين. ثم تطبيق هذا الكلاس وخصائصه بمكان مختلف بالصفحة او حتى بملف خارجى, الـ style يسمح لك بتطبيق اكواد css مباشرة داخل العنصر.
(كل شئ سوف يشرح بالتفصيل فى وقته)
خصائص الـ i18n يفضل الكثير ان يطلق على هذه الخواص اسم 18 Character من i الى n
وخصائصها هم dir و xml:lang
خاصية الـ dir تحدد اتجاه الصفحة وقيمتها يمكن ان تكون ltr (او left to right اذا كنت ستضع فى صفحاتك نصوص لغة مثل الإنجليزية)
او rtl (بمعنى right to left اذا كنت ستضع نصوص مثل نصوص اللغة العربية بصفحاتك)
الـ xml:lang لتوضيح اللغة التى سيتم استخدامها فى العنصر
كامثلا en للإنجليزية او de للألمانية او ar للعربية. الخ.
هناك ايضا خصائص الأحداث, اى الفعل الذى يقوم به الزائر.
لكنها خصائص خاصة بالـ java script وهذا ليس جزء من دورتنا.
لكن الخصائص نفسها هى كالتالى
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove,onmouseout, onkeypress, onkeydown , onkeyup
اتمنى يكون الدرس بسيط بإذن الله. اراكم بالدرس القادم.
•الدرس السابق تعلم الـ XHTML من الصفر. (http://www.abc4web.net/vb/showthread.php?t=6919)
•الدرس التالى اساسيات بناء صفحة XHTML
الى هنا انتهى النقل
من الدعم العربي التطويري.
خلال هذه الدورة سوف نمر بكثير من الخصائص Attributes
تستخدم بكثرة فى الـ XHTML
من هذه الخصائص, class و id و title و style و i18nالـ classوالـ id يمكنك ان تعتبرها علامة اضافية للعنصر
بحيث تستطيع تطبيق امور اضافية على هذا العنصر
بإستخدام الـ css او الجافا سكريبت
والأستخدام الأكثر لهم هو لإستهداف العناصر التى تعطها id و class معين
من خلال الـ css او الجافا سكريبت كما ذكرنا.
مثلا
كود:
<div id="top_div"
<p class="paragraph">text here</p>
<p>another text</p>
<p class="another_paragraph">another line of text</p>
</div>
الـ id تستخدم لتعريف عنصر واحد فقط بكل صفحة.
يعنى لا يمكن لأكثر من عنصر ان يكون لهم نفس الـ id
بمعنى ان الكود التالى كود خاطئ
كود:
<div id="top">
<p id="top">
هذا خاطئ تماما.
لكن على عكس الـ id يمكن لأى عدد من العناصر ان يكون له نفس الـ class
كالتالى مثلا
كود:
<div class="class_name">
<p class="class_name">
هذا الكود صحيح ولا يوجد به اى مشكلة.
الـ class والـ id سوف ننوه عنهم مرة اخرى مع تفاصيل اكثر فى دورة الـ css بإذن الله.
الـ title هذه الخاصية رائعة عند حاجتك لإضافة تفاصيل اضافية عن عنصر ما.
مثلا لدينا عنصر a التالى ويشير لمنتديات الدعم العربى
كود:
<a href="http://www.dd4bb.com">الدعم العربى</a>
لاحظ ان كلمة الدعم العربى هى فقط التى تظهر.
ماذا اذا اردنا وضع نبذة بسيطة عن الدعم العربى؟ وبنفس الوقت لا نريد استخدام مساحة اكثر فى الصفحة؟
هنا يأتى دور title
كود:
<a href="http://www.dd4bb.com" title="منتديات الدعم العربى منتديات تقنية وبرمجية ,, الخ">الدعم العربى</a>
الكود اعلاه عندما تنظر اليه, سترى انه لا يظهر سوى كلمة الدعم العربى
لكن اذا وقفت بمؤشر الفأرة على كلمة الدعم العربى قليلا
سترى الجملة "منتديات الدعم العربى منتديات تقنية وبرمجية ,, الخ" ظهرت لك
والـ title يستخدم فى كثير من الأوسمة مثل img و blockquote
خاصية الـ style هذه الخاصية تستخدم مع الكثير جدا من العناصر
لتضيف بها اكواد css مباشرة, بدلا من اعطاء العنصر class معين. ثم تطبيق هذا الكلاس وخصائصه بمكان مختلف بالصفحة او حتى بملف خارجى, الـ style يسمح لك بتطبيق اكواد css مباشرة داخل العنصر.
(كل شئ سوف يشرح بالتفصيل فى وقته)
خصائص الـ i18n يفضل الكثير ان يطلق على هذه الخواص اسم 18 Character من i الى n
وخصائصها هم dir و xml:lang
خاصية الـ dir تحدد اتجاه الصفحة وقيمتها يمكن ان تكون ltr (او left to right اذا كنت ستضع فى صفحاتك نصوص لغة مثل الإنجليزية)
او rtl (بمعنى right to left اذا كنت ستضع نصوص مثل نصوص اللغة العربية بصفحاتك)
الـ xml:lang لتوضيح اللغة التى سيتم استخدامها فى العنصر
كامثلا en للإنجليزية او de للألمانية او ar للعربية. الخ.
هناك ايضا خصائص الأحداث, اى الفعل الذى يقوم به الزائر.
لكنها خصائص خاصة بالـ java script وهذا ليس جزء من دورتنا.
لكن الخصائص نفسها هى كالتالى
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove,onmouseout, onkeypress, onkeydown , onkeyup
اتمنى يكون الدرس بسيط بإذن الله. اراكم بالدرس القادم.
•الدرس السابق تعلم الـ XHTML من الصفر. (http://www.abc4web.net/vb/showthread.php?t=6919)
•الدرس التالى اساسيات بناء صفحة XHTML
الى هنا انتهى النقل
من الدعم العربي التطويري.