حاويات ليس الإسم العلمي لهذه الوسوم لكن هو الإسم الي سيلصق بذهنك ويجعلك تفهمها بشكل جيد.
تكلمنا عن أساسيات لغة HTML والتنسيقات وكثير من الأمور الأخرى , لكن هناك شئ مهم ناقص وهو الحاويات هذه الأكواد تحتاج كود أكبر يحتويها وهذا ما سنتكلم عنه في هذا الموضوع.
تنقسم الحاويات الى قسمين
حاويات غير دلائلية
وهي حاويات لا تعبر عن أى معنى حاويات محايدة يمكنك أن تستخدمها في أى مكان ويمكنك أن تعتمد عليها ولا تحتاج بالضرورة أن تعتمد على غيرها هي بمفردها تغنيك عن غيرها
الحاوية [[<div>]]
هذه أهم حاوية على الإطلاق هي العنصر الرئيسي الذي ستجده يملأ صفحات الويب
هذه الحاوية يمكنك أن تستخدمها في كل شئ وفي كل مكان وتضيف بداخلها أى أكواد تريد
وطبعا يمكنك أن تضيف لها كلاس أو معرف لتمييز واحده عن الأخرى
مثال تطبيقي
<div id="example">
<p>فقرة</p>
<b>خط سميك</b>
<i>خط مائل</i>
</div>
يمكك بهذه الطريقة تقسيم العناصر داخل حاويات وتضيف داخل كل حاوية العناصر التي تريد.
الحاوية [[<span>]]
هذه الحاوية الوحيدة التي سنتكلمها عنها من نوع inline
تنقسم العناصر في لغة HTML الى
عناصر block
وهي العناصر التي تبدأ في سطر جديد
مثل عنصر [[<p>]] وعنصر [[<div>]]
وعناصر inline
وهي عناصر لا تبدأ سطر جديد بل هي تكون ضمن السطر الذي تكتبه حتى
لو كتبتها انت في اللغة البرميجة في سطر جديد ستظهر في نفس السطر مثل
[[<span>]] وكذلك معظم
تنسيقات النصوص التي تعلمناها , هي عناصر inline
هذه الحاوية تستخدم لإستهداف شئ في نفس السطر يعني كلمة تريد أن تعطيها لون معين ستستخدم الحاوية وتستهدفها بها , كلمة تريد تغيير الخط أو اعطائها خصائص معينة, ليس كلمات فقط لكن أى عنصر يكون في نفس السطر تستخدم معه تلك الحاوية.
مثال
<div id="main-example">
<p>Hello World <span class="example">it's</span> a good day</p>
</div>
هنا كلمة it's أصبحت داخل حاوية لها كلاس ويمكن أن نستهدفها ونعدل عليها بشكل منفرد وتظل جزء من الجملة لا تكسر الجملة او تظهر في سطر منفصل
حاويات دلائلية
هذه الحاويات لا تفرق في الوظيفة عن [[<div>]] لكن هذه الحاويات لها معنى ودلالة في صفحة الويب , وان كانت [[<div>]] يمكنك أن تستخدمها كبديل وهي محايدة فيمكنك أن تستخدمها في كل مكان.
الحاويات الدلائلية يجب أن تستخدمها في المكان المناسب لها وإلا فالأفضل حينها أن تستخدم [[<div>]]
الحاوية [[<nav>]]
تخص القوائم عندما تريد عمل قائمة أساسية في الموقع تستخدم تلك الحاوية لها
الحاوية [[<header>]]
من اسمها هي تخص الهيدر الخاص بالموقع أو الجزء العلوي للموقع
الحاوية [[<footer>]]
نفس الشئ من اسمها واضح أنها تخص الفوتر أو الجزء السفلي من الموقع
الحاوية [[<section>]]
هذه تستخدم لتقسيم الموقع لأقسام أساسية ويبرز استخدامها أكثر في مواقع الواجهات فتكون الواجهة بها قسم من نحن , قسم عن الموقع , قسم العملاء - تستخدم عادة تلك الحاوية في هذه الأجزاء.
الحاوية [[<main>]]
تستخدم عادة في تمييز كامل منطقة المواضيع
الحاوية [[<aside>]]
وتستخدم في تمييز منطقة السايدبار
الحاوية [[<article>]]
وتستخدم في تمييز الموضوع ليس منطقة المواضيع بأكملها ولكن فقط الجزء الخاص بكل موضوع
هل الأفضل استخدام الحاويات الدلائلية أم الغير دلائلية؟
أنت طبيعي ستستخدم الغير دلائلية في معظم الأكواد , لكن لو هناك أحد الحاويات الدلائلية وتعرف مكانها الصحيح فاستخدمها فيه أفضل هذا هو الإستخدام الأمثل , احترت ولا تعرف أيهم الأنسب فوراً استخدم [[<div>]]
هي الحاوية التي ستلازمك دائماً وتغنيك عن أى شئ .
بارك الله فيك شيخ
ردحذفوفيك بارك الله يا غالي
حذف