السلام عليكم ورحمة الله وبركاته
انا مبتدا في البرمجة وعندي سؤال
مافائدة وضع div داخل div داخل div
يعني ثلاث divs داخل بعض
اتمنى فهمتوني
سؤال عن ال <div >
لجعل الحياة سهلة!
تخيل حائط معلق عليه لوحة اعلانات وطُلب منك أن تعبر عما تراه بصفحة HTML، ماذا ستفعل؟
بالنسبة لي، سوف اعبر عن الحائط ب div واعطيه class أو id مثل wall. لوحة الاعلانات أيضا سأعبر عنها ب div داخل ال div الخاص بالحائط ب class مثل ads_board وقس على ذلك الاعلانات، كلها ستكون داخل ال div الخاص بلوحة الاعلانات.
الان أنت تملك تحكم كامل في جميع العناصر لديك، بمكنك مثلا تغيير لون الحائط، تغيير مكان لوحة الاعلانات على الحائط، اضافة او ازالة اعلانات على لوحة الاعلانات.
فائدة وضع div داخل div داخل div هي أننا عبرنا عن الهيكلية التي نريد يبناؤها بشكل صحيح، في التصميم، لا ننشئ أو نضيف عنصر بدون هدف، كل عنصر يجب أن يعبر عن شيئ منطقي.
أنصحك بقرائة كتاب Head First HTML and CSS فهو رائع لو كنت مبتدئ.
تحياتي
بإمكانك اعتبار الـdiv مثل الحاوية
مثلا لديك عدة عناصر ولنفترض 100 عنصر وتريد تغيير اللون والخط لكل عنصر بدلا من أن تذهب إلى كل عنصر وتقوم بتغيير هذه الخصائص تضعهم داخل div واحد وتغير خصائص هذا الـdiv وسيتم تطبيق تلك الخصائص على جميع العناصر داخله
أي أنك تقوم بتجميع العناصر مع بعضها كمجموعة ليسهل لك التحكم بها بدلا من أن تتعامل مع 100 عنصر مثلا ستتعامل مع عنصر واحد فقط
أما بالنسبة لوضع div داخل div فنفس الأمر أحيانا يكون لديك مثلا 10 divs وتريد تحريكهم مع بعضهم أو تطبيق خاصية معينة عليهم فبدلا من التعامل مع كل div على حدة تضعهم داخل div آخر وتتعامل معه وسيتم تطبيق كل ذلك على ما بداخله
أي أن فكرة الـdiv تجميع الأشياء أو العناصر مع بعضها بحيث يسهل التحكم بها فمثلا إذا قررت في المستقبل تغيير خاصية معينة كنت قد وضعتها في الـ100 عنصر. بدون الـdiv (أو أمثاله من الحاويات) ستقوم بالذهاب لكل عنصر من الـ100 عنصر وتطبق التغيير أما إذا استخدمت div فستقوم ببساطة بتطبيق التغييرات التي تريدها على ذلك الـdiv وكل التغييرات ستسري على العناصر التي بداخله
ليس بالضرورة , انت الي بتحدد حسب طلبك, اقرأ اكثر عن عنصر البلوك وعنصر انلاين هذا مثال ممكن ان تبني به صفحتك بطريقة قياسية متوافقة مع ال SEO
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<footer>
<p>Copyright 2009 Your name</p>
</footer>
التعليقات