السلام عليكم، سنرى في هذا الدرس ماهية العنصران DIV و SPAN و كيفية توظيفهما في HTML، و سنتطرق أيضاً للعنصر BDI و دوره في HTML.
العنصران DIV و SPAN
يقحمان العنصران 'DIV' و 'SPAN' في HTML لسبب واحد، ألا و هو إعطاء لمحتواهما مظهر مخصص بـCSS، حيث أن كلاهما ثنائيا الأوسمة، إلا أنهما يختلفان في النوع، فعنصر 'DIV' هو عنصر من نوع Block، أما عنصر 'SPAN' فهو عنصر من نوع Inline.
العنصر DIV
يقحم عنصر 'DIV' في HTML في حالة إعطاء مظهر مخصص لعنصر أو مجموعة عناصر صفحة الويب أو جلها سواء كانت من نوع Block أو من نوع Inline أو مختلطة، و ذلك بجعلها بين وسم فتح عنصر 'DIV' و وسم إغلاقه، أي جعلها محتواه، ثم إقحام CLASS Attribut أو ID في عنصر 'DIV'، ثم تخصيص المظهر للمحتوى في أكواد CSS عبر محدد Class أو محدد Id حسب ما أقحمناه من Attribut في العنصر 'DIV'.
يقحمان CLASS أو ID في عنصر 'DIV' إذا كان هناك أكثر من عنصر 'DIV' واحد في صفحة الويب، أما في حالة تواجد عنصر 'DIV' وحيد في الصفحة، فيخصص محدد العنصر في CSS.
يمكن لعنصر 'DIV' أو مجموعة عناصر 'DIV' أن تتواجد في نفس عنصر 'DIV'.
العنصر SPAN
يقحم عنصر 'SPAN' في HTML في حالة إعطاء مظهر مخصص لعنصر أو مجموعة عناصر صفحة الويب من نوع Inline، و ذلك بجعلها بين وسم فتح عنصر 'SPAN' و وسم إغلاقه، أي جعلها محتواه، ثم إقحام CLASS Attribut أو ID في عنصر 'SPAN'، ثم تخصيص المظهر للمحتوى في أكواد CSS عبر محدد Class أو محدد Id حسب ما أقحمناه من Attribut في العنصر 'SPAN'.
يقحمان CLASS أو ID في عنصر 'SPAN' إذا كان هناك أكثر من عنصر 'SPAN' في صفحة الويب، أما في حالة تواجد عنصر 'SPAN' وحيد في الصفحة، فيخصص محدد العنصر في CSS.
يمكن لعنصر SPAN أو مجموعة عناصر 'SPAN' أن تتواجد في نفس عنصر 'SPAN'.
من أكبر الأخطاء المرتكبة من مصممو الويب هو توظيف عنصرا 'DIV' و 'SPAN' مكان عناصر HTML أخرى، يوظفان العنصران 'DIV' و 'SPAN' في حالة عدم تواجد عناصر HTML تؤدي الوظيفة
الفيديو التوضيحي للدرس
العنصر BDI
يعتبر العنصر 'BDI' عنصر من نوع Inline و ثنائي الأوسمة، و دوره هو منع لخبطة كلمات تُكتب بلغة من اليمين إلى اليسار كالعربية، مع كلمات لغة تكتب من اليسار إلى اليمين كالفرنسية، حيث تعتبر هذه الأخيرة لغة LTR أي Left To Right، و اللغة العربية لغة RTL أي Left To Right، و بتواجد علامات الترقيم بين كلمات اللغتين تتلخبط لوغاريتمات البرمجة حيث يتدخل عنصر 'BDI' و يصلح الأمر، و ذلك بكتابة كلمات أو جمل اللغة المختلفة الإتجاه داخل عنصر 'BDI'، أي بين وسميه.
الأكواد المستعملة في هذا الدرس
أتمنى أن تستفيدوا من الدرس