نبذة عامة
تخيل معي أن هناك مجموعة من عناصر الـ HTML في صفحة الويب مثل عنوان وفقرة نصية بالإضافة لصورة ، هل ستترك هذه العناصر مبعثرة في الصفحة أم كيف ستتعامل معها ، هذا ما سندرسة في هذا الدرس .
ما هو عنصر الـ DIV
بداية الـ div هو إختصار لـ Division ولو قمنا بترجمتها ستأتي بمعنى تقسيم او توزيع !
إستكمالاََ لما ذكرناه في بداية المقال ، سنقوم بطرح مثال ، تخيل معي ان هناك في صفحتك مجموعة من المنتجات ، وكل منتج يحتوي على صورة وأسم ووصف بسيط ، ولديك ثلاث منتجات في صفحتك ،
هل ستقوم بكتابة الكود بهذا الشكل !
<img src='img/product_1.png' alt="">
<h2> Products 1 </h2>
<p> Here Description For Product 1 </p>
<img src='img/product_2.png' alt="">
<h2> Products 2 </h2>
<p> Here Description For Product 2 </p>
<img src='img/product_3.png' alt="">
<h2> Products 3 </h2>
<p> Here Description For Product 3 </p>
لماذا لا نجعل الحياة أسهل وأجمل والكود أكثر ترتيباََ ونقوم بوضع كل منتج بداخل عنصر الـ div ليصبح الكود بهذا الشكل .
<div>
<img src='img/product_1.png' alt="">
<h2> Products 1 </h2>
<p> Here Description For Product 1 </p>
</div>
<div>
<img src='img/product_2.png' alt="">
<h2> Products 2 </h2>
<p> Here Description For Product 2 </p>
</div>
<div>
<img src='img/product_3.png' alt="">
<h2> Products 3 </h2>
<p> Here Description For Product 3 </p>
</div>
فائدة عنصر الـ div هي انه عبارة عن حاوية لمجموعة العناصر الموجودة لديك أي ان فكرتها تكمن في تجميع الأشياء او المحتوى او العناصر مع بعضها بحيث يسهل التحكم بها ويكون الكود أكثر ترتيباََ وهو أيضاََ سيفيدك بشكل كبير في التنسيق من خلال الـ CSS .
اختصاراََ لما سبق عنصر الـ div في الـ html لا يمثل شيئاََ معيناََ الا انه يعتبر حاوية عامة للعناصر .
ما هو عنصر الـ Span
العنصر span هو أحد عناصر الـ HTML وهو بلا معنى تقريباََ وتكون استخداماته عند الحاجة له وفي حال عدم وجود اي من عناصر الـ HTML لتحل محلة ، وهو يعتبر ايضاََ كحاوية ولكن لأشياء صغيرة مثل النصوص فقط ،
لو كان لديك فقرة كبيرة ومن ضمن هذه الفقرة تريد ان يكون كلمة من هذه الكلمات بلون مختلف ، سأقوم بوضع هذه الكلمة في عنصر الـ span ومن ثم أعطائها اللون الذي تريد من خلال الـ CSS .
ولكن لو كنت تريد جعل هذه الكلمة بشكل سميك Bold عن الكلمات الأخرى ، هنا في هذه الحالة يفضل استخدام أحد عناصر الـ HTML المسئولة عن ذلك مثل <strong>
ويمكن أن يكون هذا العنصر داخل اي عنصر أخر من عناصر الـ HTML
<h3>
Welcome To Lrean <span style="color: red"> HTML </span> Language
</h3>هنا بالمثال كلمة HTML ستكون هي فقط باللون الأحمر ، لأن خاصية اللون الأحمر تم اعطائها للعنصر span المحيط بكلمة HTML .
وستكون النتيجة بهذا الشكل
