تعلم [Html5] درس #10 I شرح العناصر inline و Block و الفروق بينهم وSpan وشرح استخدام ال Div

عناصر HTML


جميع عناصر لغة Html لها طريقة عرض افتراضية ..وهذه الطريقة تعتمد على نوع العنصر وطريقة العرض الافتراضية هذه إما أن تكون block or inline

block elements

عناصر لغة Htmlالتى تظهر بطريقة البلوك تبدأ من سطر جديد وتترك بعدها سطر جديد بمعنى لا يستطيع أى عنصر آخر ان يكون معها فى نفس السطر مثل العناصر التالية:-

<p>- <h1>-<h2>-<h3>-<h4>-<h5>-<h6>-<div>

inline elements

وهى عناصر لغة Html ولا تظهر فى سطر جديد وانما تظهر متجاورة مع بعضها فى نفس السطر مثل العناصر التالية

<a>-<img>-<span>

في (HTML) وأيضا ال (XHTML)، يتم استخدام عناصر ال <span> و <div> في بعض الأجزاء من الملف التي لا يمكن وصفها لغويا بواسطة عناصر ال HTML.

معظم عناصر ال HTML تحمل معاني لغوية، حيث أن هذه العناصر تقوم بوصف بيانات معينة وتكون تأدية هذه العناصر لوظيفتها بناءً على نوعية البيانات التي تحتويها، مثال : (ap) هي عناصر ينبغي ان تحتوي على فقرات من نص معين، بينما (H1) هو عنصر يحتوي على ترويسة الصفحة، حيث أن مقدمي الخدمة الإلكترونية ينبغي ان يكون لديهم القدرة على التمييز بين هذه الرموز وفقا لذلك. حيث أن ال <span> وال <div> ليس لديهم معنى لغوي أساسي إضافة إلى التجميع المنطقي لمحتوى النص، يمكن استخدامهم لتعريف لفظ أو تصرف معين بدون الحاجة إلى ذكر زيادة في المعنى

الاختلافات والتصرف التلقائي

هنالك فرق واحد بين ال <div> وال <span>، في المقاييس المعيارية لل HTML يعتبر ال <div> عنصر مستوى عام بينما يعتبر ال <span> عنصر ضمني. حيث يقوم ال <div> نظريا بفصل جزء من المستند في الصفحة كما هو الحال أيضا في الفقرات المتضمنة في الصفحة. ال <span> يحتوي على معلومة ضمنية محيطة بالنص، حتى هذه الخاصية يمكن تغييرها عملياً بواسطة خاصية الصفحات المتراصة.

الاستخدام العملي

عناصر ال <span> وال <div> يتم استخدامها بشكل نقي لتعبر عن مجموعة منطقية من العناصر المغلقة،

عندما يكون استخدامها متعلقا بمجموعة معينة أو لتحديد هوية شيء ما، حيث يمكن لهذه العناصر ان تدل على أنواع المعلومات التي لا يمكن وصفها بال HTML. مثال :

Fred Smith

يمكن استخدامها للدلالة على اسم المؤلف في ملف معين، 21st Jan 2006 يمكن استخدامها لتحديد تاريخ معين. هناك ثلاثة أسباب رئيسية لاستخدام <div> و <span> لتحديد الطبقات أو التعريفات :

التنسيق بواسطة CSS

يعتبر الاستخدام الشائع لل <span> وال <div> كعناصر يتم تطبيقها في تحديد الطبقات والتعريفات، حيث يتم هذا العمل بالترابط مع ال CSS لتكوين طبقة، أو مادة مطبوعة، لون، وتطبيقات أخرى يتم تنفيذها على الصفحة. بالإضافة إلى أن ال CSS لا يتم تطبيقه فقط مع التطبيقات المرئية، حيث أنها تستخدم أيضا في التطبيقات السمعية للتأثير على ارتفاع حدة الصوت، كثافة الصوت, وتوزيعة بالنسبة إلى صورة صوتيه. لهذه الأسباب ولتوافقيتها مع مفهوم الشبكة النحوية، سنناقش فيمايلي سمات مرفقة لعناصر متضمنة في ال HTML ينبغي ان تصف أهدافها اللغوية بدلا من الاقتصار على المقصود منها خصائص العرض في وسط واحد بعينه. مثال : password too short لا معنى لها نحوياً، بينما password too short تعتبر واضحة ومفيدة أكثر. بالاستخدام الصحيح لخاصية ال CSS على الشاشة، علامات التحذير يمكن أن تكون ظاهرة باللون الأحمر، بخط صغير، لكن عند الطباعة تكون غير ظاهرة، وبالتالي يكون قد فات الأوان لعمل أي شيء حيال ذلك. ربما بالنسبة للأوامر الصوتية يلزم ان تكون مشددة أكثر، مع تخفيض بسيط في معدل الصوت. المثال الثاني هو الترميز الدلالي، بدلا من مجرد العرض ولكنها تخدم الغرضين عندما تقترن في ال CSS.

الوضوح الدلالي

هذا النوع من التجميع واستخدام الدلالات في محتويات الصفحة يمكن تقديمه بشكل واضح لجعل الصفحة ذات وضوح لغوي أكبر. حيث أنه يصعب التكهن بكيفية تطور الشبكة العنكبوتية في السنوات والعقود المقبلة. ان الصفحات التي تم تصميمها قد تبقى قيد الاستخدام حتى الوصول إلى نظام معلومات لا يمكن تخيله على الشبكة. حتى يومنا هذا, بعض محركات البحث على الشبكة مثل الغوغل ومحركات البحث الأخرى تستخدم خاصية المعالجة بالخوارزميات ذات التعقيد العالي. إن الشبكة العالمية العنكبوتية (W3C) لسنوات متعددة كانت تدير مشروعا نحويا للشبكة تم تصميمه لجعل الشبكة مفيدة وذات معنى لاستخدام نظام المعلومات في الحاضر والمستقبل. خلال عملية عملية تصميم الصفحة، يكون لدى المصمم فكرة واضحة عن هدف ومعنى كل عنصر رئيس وعنصر جزئي خلال النص. إذا كانت العناصر المعيارية ل HTML الموجودة تعبر عن المعنى، فإنه يستوجب استخدامها، أما إذا لم تكن موجودة فتكون الأفضلية هنا لاستخدام عناصر ال span وال div بترتيب مناسب واستخدام مناسب للتعريفات، وهذا سيساعد مؤلفيي المستقبل للوصول إلى درجة مناسبة في تنسيق النصوص.




إرسال تعليق

0 تعليقات

AdSpace768x90
AdSpace768x90
AdSpace768x90