[0:00]السلام عليكم ورحمه الله وبركاته. اتكلمنا في الفيديو اللي فات عن البوكس موديل. وعرفنا خاصيتين مهمين جدا وهم الويدث والهايت او العرض والطول. ولكن احنا كنا بنتعرف عليهم بس مش اكتر في حاجات كتيرة في الويدث والهايت هنتكلم عليها وفي مشاكل كتيرة ممكن تقابلنا فلازم ان احنا نكون فاهمين المشاكل دي بتيجي ازاي ونقدر ان احنا نحل المشاكل دي. فالنهارده ان شاء الله هنتكلم عن الويدث والهايت وتحديدا هنتكلم عن مشكلة مهمة جدا في الويدث والهايت. المشكلة دي ببساطة هنفهم من خلالها الفرق ما بين النسبة المئوية اللي انت بتديها للويدث والهايت. والديفولت فاليو او قيمة الاوتو اللي انت بتديها للويدث والهايت وانا عارف ان انت مش فاهم فتعالى دلوقتي لما ندخل معنا في الشرح.
[0:53]هنعمل دلوقتي مع بعض باراجراف وهنكتب جواه مثلا اي كلمة. اعمل انت باراجراف اعمل اتش ون اعمل ديف اعمل اللي انت عاوزه. وهنروح دلوقتي علشان نشوف شكل البوكس بتاع الباراجراف انا شايف قدامي كلمة لكن انا محتاج اشوف البوكس بالكامل. فعلشان نشوف البوكس بالكامل هنضطر ان احنا نلون البوكس ده. ف هقولك مثلا اعمل له بوردر اعمل له حواف فا هخلي البوردر ده مثلا يكون اثنين بكسل ولون البوردر هيكون باللون الاحمر ونوع البوردر هيكون سوليد. فاعمل لك دلوقتي ريلود فانا دلوقتي شفت البوكس انا عملت البوردر علشان بس اشوف البوكس مش اكتر تمام انت كنت ممكن تستخدم مثلا مكان البوردر الباك جراوند علشان تلون البوكس. الباك جراوند كلر او الباك جراوند بس دي بتلون لك البوكس ممكن ان انت تلونه مثلا للون الاحمر بالشكل ده. استخدم اللي انت عاوزه انا بس عاوز في النهايه اوريك شكل البوكس الطول والعرض طيب انا هنا بتقابلني مشكلة. انا دلوقتي لو جيت لك هنا وقلت لك دلوقتي جيب لي الويدث واديله مثلا 50%. لو انا دلوقتي عملت لك هنا ريلود هتلاقي دلوقتي ان هو خد 50% من حجم البراوزر وسواء البراوزر كبير او صغير فهو بياخد 50% يعني لو البراوزر عندك كبير بالشكل ده هتلاقي عندك خد 50% بالظبط من حجم البراوزر لو البراوزر عندك صغير هتلاقيه خد عندك 50% من حجم البراوزر. فدلوقتي انا لو جيت لك هنا وكتبت لك هنا مثلا 100% فهتلاقيه خد لك عندك 100% من حجم البراوزر تمام بص. خد لك 100% من حجم البراوزر الكلام ده ما بيحصلش عندك في خاصيه الهايت فدلوقتي انا لو جيت لك هنا في الهايت وكتبت لك 100%. واعملت لك هنا ريلود مفيش اي تغيير بيحصل تمام طيب اشمعنى في تغيير بيحصل هنا في الويتث ومفيش تغيير بيحصل هنا في الهايت؟ بص يا معلم الموضوع بيكمن في القيمة الافتراضية للويدث والهايت.
[2:59]القيمة الافتراضية للويدث لو انت دلوقتي ما كتبتش عندك الويدث لو انا دلوقتي ما عملتش عندي الويدث فهي كده كده بتاخد عندك 100% من عرض الاب بتاع العنصر بتاعك. يعني ايه الكلام ده؟ يعني دلوقتي البراجراف ده خد عندك 100% من عرض الاب اللي هو البودي والبودي في الحالة دي هو جسم الموقع بتاعك اللي هو البراوزر. علشان كده البراجراف خد عندك 100% من عرض البراوزر سواء انت فاتح البراوزر او قافله كده كده البراجراف بياخد عندك 100% من عرض الاب بتاعه. هتقول لي انا مش مصدقك هقول لك طيب لو انت مش مصدقني انا ممكن دلوقتي اجيب لك البودي واخليه مثلا العرض بتاعه مثلا الويدث يكون مثلا 200 بيكسل تمام هو انا مش قلت لك ان البراجراف بياخد 100% من عرض الاب؟ ودلوقتي لو الاب خد عندك 200 بيكسل يبقى المفروض البراجراف يكون برضه 200 بيكسل؟ تعال دلوقتي لما نشوف. هعمل لك هنا ريلود هتلاقي دلوقتي ان البراجراف اقل عندك من هنا واصبح عندك 200 بيكسل. طيب تعال كده لما نقلل عندنا البودي هنخليه مثلا 100 وهعمل لك هنا ريلود هتلاقي دلوقتي ان البراجراف عمال بيقل برغم ان انت مقللتش عرض البراجراف انت ما جيتش جنبه اصلا. انت عمال بتقلل عرض الاب بتاعه هتقول لي يا عبد الرحمن انا مش فاهمك هقول لك ولا يهمك وسيبك من كل الكلام ده. تعالى دلوقتي لما نبدا من الاول على نضافة انا دلوقتي هعمل لك هنا ديف الديف ده هيكون الاب بتاع مثلا ال H2 تمام يبقى دلوقتي انا عندي هنا H2 وعندي هنا الديف. هاجي لك هنا واقول لك دلوقتي انا محتاج ان انا مثلا اكتب اي كلمة اكتب اللي انت عاوزه جوه ال H2 طيب وبعدين تعالى بس كده لما نقلل عندنا عرض. خليها 100% طيب وبعد كده هروح لك هنا على ال H2 وهبدا دلوقتي ان انا اظهر البوكس هلونه تمام هخليه مثلا باللون الاحمر حلو الكلام حلو الكلام. ليه دلوقتي ال H2 خد عندك 100% من عرض البراوزر؟ هقول لك لان ببساطة هو خد 100% من عرض الاب بتاعه اللي هو الديف والديف خد عندك 100% من عرض الاب بتاعه اللي هو البودي اللي هو جسم الموقع اللي هو هنا البراوزر. لكن انا لو جيت لك على الديف واديت له مثلا عرض تعالى كده مثلا لما ندي للدييف عرض مثلا هقول لك الويدث مثلا 300 بكسل تمام. لو عملت لك هنا ريلود هتلاقي دلوقتي ان ال H2 خد عندك 100% من عرض الديف اللي هو 300 بكسل. وعلشان ابين لك الموضوع اكتر تعالى كده لما ندي خلفية للدييف هديله مثلا خلفية باللون الازرق تمام وهاجي لك هنا واقول لك دلوقتي انا محتاج ان ال H2 ياخد مثلا 80% من عرض الاب بتاعه تمام. فلو عملت لك هنا ريلود هتلاقي دلوقتي ان ال 80% دي مش 80% من عرض البراوزر 80% من عرض الاب بتاعه اللي هو الديف لو انا كتبت لك 50 تمام. اذا دلوقتي انا لما اقول لك 100% تفهم ان 100% دي معناها ايه؟ 100% معناها 100% مش من عرض البراوزر 100% من عرض الاب بتاع العنصر ده الكلام ده بالنسبة للويدث. في بس ملحوظة مهمة لازم ان انا اشرحها لك قبل ما ندخل في شرح الهايت وهي ان العناصر في ال HTML بتتقسم لنوعين يا اما العنصر ده بلوك يا اما العنصر ده ان لاين. لازم تفهم ان كل الكلام اللي انا قلته لك ده ما بينطبقش على العناصر الانلاين طبعا الكلام ده هنشرحه في المستقبل انا مش عاوزك ان انت تفهم الحتة دي انا عاوزك بس ان انت تسجلها عندك. وده ان شاء الله هنبدا ان احنا نشرحها انا عاوزك بس تفهم ان احنا عندنا عناصر انلاين زي الاسبان مثلا. الاسبان ما بينطبقش عليه الكلام اللي انا قلته لك او اللي انا شرحته لك ده الكلام ده انا بكرر تاني هيتشرح ان شاء الله في المستقبل. تعالى دلوقتي بقى لما نتكلم في الطول. دلوقتي انا لو جيت لك هنا واديت لك هايت واديت له قيمة 100%. وعملت لك هنا ريلود مش هتلاقي اي حاجة بتتغير كذلك لو انا استخدمت عندي ال 50% برضه مفيش حاجة بتتغير طيب ليه؟ بص يا معلم انا هقولها لك وبعد كده هشرحها لك تمام ببساطة الطول بيتحدد على حسب المحتوى اللي جواه. طبعا انت مش فاهم تعالى دلوقتي لما اشرح لك الكلمة دي دلوقتي انت لما بتستخدم النسبة المئوية لما اقول لك 50% او 100% دي معناها ايه؟ معناه ان انا بقول لك ادي له طول 100% من طول الاب. طيب وهو فين طول الاب؟ طول الاب بيتحدد على حسب المحتوى اللي جواه لو الكلام اللي جواه كبير الطول بيكبر طيب انا مش فاهم تعالى دلوقتي لما نفهم مع بعض. دلوقتي لو انا عندي هنا كلام كتير تعالى كده مثلا لما نكتب عندنا لوريم مثلا 100 كلمة اعمل لي دلوقتي 100 كلمة انت لما بتكتب عندك لوريم وشرحت الموضوع ده في كورس ال HTML. لما بتكتب عندك لوريم وبعدها رقم هو بيعمل لك عدد كلمات عشوائية بحسب الرقم اللي انت بتكتبه. هضغط لك هنا على انتر فهو دلوقتي كتب لك 100 كلمة طالما عندك محتوى كبير يبقى الطول عندك هيزيد عندك هنا. فلو عملت لك ريلود هتلاقي دلوقتي الطول عندك زاد على حسب المحتوى اللي جواه جا لك عند المحتوى ووقف ده بالنسبة للطول. لو الطول عندك قليل او الكلام اللي عندك جوه قليل بالشكل ده فهتلاقي عندك ان الطول اقل طيب لو مفيش كلام خالص الحتة دي مهمة جدا. لو مفيش كلام خالص مش هتلاقي اي طول عندك بيظهر الطول عندك هيكون زيرو تمام الكلام ده حتى بالنسبة للبودي. خلي بالك دلوقتي البودي بالشكل اللي قدامك ده الطول بتاعه بيكون زيرو لكن العرض ما بيكونش زيرو تعالى كده لما اوريك لو انا جيت لك هنا. وضغط لك هنا كليك يمين على انسبكت ووقفت لك هنا على البودي ونزلت لك هنا هتلاقيه دلوقتي بيقول لك ان العرض هو 1264 في الطول اللي هو زيرو واخد بالك هو هنا بيديه له العرض لكن الطول بيكون زيرو.
[9:30]اذا الطول بيتحدد على حسب المحتوى اللي جوه العنصر تمام دلوقتي انا لو عندي هنا الديف وجوه الديف مثلا كلمة عادية بالشكل ده. فدلوقتي لازم تفهم ان البودي نفسه اصبح دلوقتي الطول بتاعه على حسب المحتوى اللي جواه ده الكلام ده بالنسبة للبودي وبالنسبة للديف وبالنسبة لل H2. فدلوقتي انا لما اجي لك هنا واقول لك خلي لي ال H2 يكون طولها 100% من طول الاب كده كده اصلا الاب طوله بيكون على حسب المحتوى اللي جواه فكده كده دي مش هتتغير. طيب لو انا جيت لك هنا على الاب وقلت له خلي بالك انا مش عاوزك تكون على حسب المحتوى انا هديلك طول ثابت وليكن مثلا 200 بكسل الكلام ده معناه ان انا لما بقول لك خد 100% من طول الاب يبقى دلوقتي ال H2 هيكون طولها 200 بكسل. تعالى دلوقتي لما نتاكد فدلوقتي هو خد عندك 100% من طول الاب لو انا اديت له مثلا 50% فا هتلاقيه دلوقتي خد عندك 50% من طول الاب لو انا اديت له مثلا 80 فا هياخد عندك 80% من طول الاب. لكن لو انت ما كنتش كاتب هنا طول بالشكل ده تمام فدلوقتي الديف ده طوله هيكون على حسب المحتوى اللي جواه يبقى دلوقتي ال 80% وال 100% واللي انت بتكتبه هنا مش هيكون له اي معنى وكده كده مش هتتغير. يبقى ملخص الكلام ده كله. انا دلوقتي لو جيت لك هنا على الهايت وكتبت لك رقم ثابت وليكن مثلا 100 بكسل اه هيكون عندك 100 بكسل لكن لو استخدمت عندك نسبة مئوية وليكن مثلا 100% او 50% او 80% لازم تفهم ان النسبة المئوية دي بتكون من طول الاب فدلوقتي انا لو مش مدي طول الاب يبقى الرقم ده ملوش اي لازمة تمام يا اما دلوقتي ادي طول الاب اقول لك دلوقتي ان الهايت مثلا هيكون طولها مثلا 400 بكسل يبقى دلوقتي النسبة المئوية دي هيكون ليها معنى. لان انت بتقول له انا عاوز دلوقتي 100% من طول الاب اللي انا دلوقتي حطيته تمام فدلوقتي انا لما اعمل لك ريلود اه دلوقتي هيكبر لكن لو انا مش كاتبها يبقى مش هيكون ليها اي معنى بالشكل ده اتمنى ان انتم تكونوا فهمتوا واشوفكم ان شاء الله في فيديو جديد وسلام عليكم.
