المحتوي الذي تضع وتنظم بداخلهالادوات ونصوص واشكال وصور وغيرها وكيفية جعل الكتابة في اتجاة اليمين في اللغة العربية او اتجاة اليسار في اللغة الانجليزية
ما هو الديف Div
هو محتوي Container
هذا المحتوي تضع وتنظم بداخله اي شئ مثل ادوات ونص واشكال وصور وغيرها . باختصار محتوي تضع بداخله اي شئ تريد تنظيمه . وهو يعتبر من عناصر الهتمل html
|
|
اين اضعه
تضعه في اي مكان في وسم جسم الصفحة body
هل يمكن الاستغناء عن الديف
لا ..لا تستطيع ذلك عمليا لانه يجمل الشكل جدا وتستخدمه في تنظيم وترتيب الصفحة مثل الجدول .
طريقة الكتابة
مثل اي وسم من وسوم الهتمل لها بداية ونهاية وبينهما تضع المحتوي كالاتي
<div>
هنا تضع او تكتب اي شئ فهنا محتوي الديف
</div>
كيف تكتب من اليسار لليمين او من اليمين الي اليسار
هذا يسمي اتجاة الكتابة للنص ويفيد عندما تريد كتابة شئ بالعربية من اليمين لليسار
او كتابة نص بالانجليزية من اليسار الي اليمين
فهناك خاصية في الديف تسمي align
هذه الخاصية تأخذ احد الاشياء التالية
|
ستنقل المحتوي الي جهة اليسار |
left |
|
ستنقل المحتوي الي جهة اليمين |
right |
|
ستضع المحتوي في المنتصف |
center |
مثال علي نص عربي داخل ديف باتجاة من اليمين الي اليسار
<div align="right" >
نص عربي
</div>
مثال علي نص انجليزي داخل ديف باتجاة من اليسار الي اليمين
<div align="left">
نص انجليزي
</div>
طريقة اخري من خلال وضع ستايل
من خلال الخاصية ستايل
<div style="text-align:right">
هنا النص عربي
</div>
كيفية وضع الستايل دينامك
اي عندما تريد كتابة نص عربي
ثم تضع هذا النص داخل الديف او الجدول
ثم تعطي خاصية ان هذا النص يكون علي اليمين
<div id="divArabic" runat="server">
هنا النص عربي
</div>
1- اعطي هذا الديف اسم id
2- اعطيه خاصية runat اي تعمل علي السيرفر اي تأخذ اسم وتستطيع ان تنادي علي اسمها وتغير في اي خصائصها من الكود الداخلي للصفحة .
3- افتح الكود الداخلي للصفحة ثم اكتب الاتي في حدث الباج لود
//هنا بكتب اسم الخاصية والقيمة
divArabic.Style.Add("text-align", "right");
اي اقول للديف ان الستايل الخاص بها اضف الخاصية الاتية
ثم اكتب اسم الخاصية وهي الاتجاة وبعدها اكتب القيمة
مثال اخر
اريد ان اغير في عرض او طول الديف بشكل دينامك ايضا بنفس الطريقة
من الكود الداخلي للصفحة كي تتم بشكل دينامك
//اذا اردت ان تغير في عرض او طول الديف دينامك
divArabic.Style.Add("width", "10px");