lecture13(list ,table,form css)

مرحبا يعطيكم العافيه واهلا وسهلا فيكم في لقاء جديد من لقاء كورس الفرونت اند. بهذا اللقاء بدنا نعمل مراجعه للي اخذناه في موضوع الليست القوائم والتابل الجدول والفورم ونضيف عليهم اشياء في السي اس اس وناخذ بعض من التطبيقات على هذا الشي. حنعمل مراجعه بالاول بعدين نبدا ناخذ الاشياء اللي تعلمناها في السي اس اس.

اول حاجه موضوع الليست القوائم. اخذنا قبل هيك انه في عننا ثلاث انواع من القوائم. كان عننا اوردر ليست اللي هي القوائم المرتبه اللي بتكون واحد اثنين ثلاث او اي بي سي دي او الارقام اللاتينيه. النوع الثاني ان اوردر ليست اللي هي القوائم الغير مرتبه اللي هي بتكون عباره عن تعداد نقطي سواء كان دائره او مربع او دائره غير مظلله. والنوع الثالث كان الدسكربشن ليست اللي هي القوائم الوصفيه اللي بستخدمها انه لو انا كان في عندي عنوان وبدي اعمل وصف لها.

نبدأ على السريع بالنوع الأول اللي هو كان ان اوردر ليست اللي هو قلنا تعداد غير مرتب أو بكون تعداد نقطي. حكينا بنعمل هذا الشي عن طريق التاج اللي اسمه يو ال اختصار لان اوردر ليست. بداخل هذا التاج معنا الل اي على شان احط العناصر اللي أنا بدي اياها تكون لهذه القائمة. لنفرض أنه أنا بدي أعمل تعداد نقطي لمجموعة من لمشروبات مثلا فبكي له ملك مثلا، اعمل ال اي ثانية فيها كلمة تي، الاي مثلا كلمة وتر. إذا هذه عبارة عن ان اوردر ليست قائمة غير مرتبة مكونة من الثلاث عناصر هدول.

الان نعمل ريفريش حيظهر معي بهذا الشكل. طبعا الوضع الافتراضي للان اوردر ليست أنها تكون على شكل نقاط بهذا الشكل. حكينا لو أنا هذا النقاط بدي أغيره كان في عننا اتربيوت بنستخدمه مع اليو ال اسمه تايب وبداخل التايب بحدد شو نوع القائمة اللي أنا بدي اياها. في عننا ثلاث أنواع من الان اوردر ليست. هذا القائمة الافتراضية أو الوضع الافتراضي بنحكي عنه ديسك اللي هو عبارة عن دائرة وبتكون بداخلها مضلل. النوع الثاني كان سكوير أنها تكون بشكل مربع فكتبها سكوير. الان شكل التعداد حيتغير لشكل مربع زي ما احنا شايفين. والنوع الثالث من عناصر القائمة اللي هو السيركل عبارة عن دائرة وبتكون مفرغة من الداخل. الان اعمل ريفريش بيكون بهذا الشكل. إذا هذا عبارة عن الان اوردر ليست.

هلقيت لو أنا هذا التعداد ما بدي إياه، بدي أعمل مجموعة من القائمة ولكن بدون ستايل لها يعني ولا بدي دائرة ولا بدي مربع ولا بدي أي نوع. فبكت داخل التايب حاجة اسمها نان. النان بستخدمها أنه أنا بدي أعمل قائمة لكن ما بديش يكون لها أي ستايل. فالان اعمل ريفريش الشكل حيروح معاي ولا دائرة ولا مربع ولا دائرة مفرغة. فهذا الأربع قيم اللي بتاخذها الاتربيوت اللي اسمه تايب لتحديد نوع وشكل أو ستايل القائمة اللي أنا بدي اياها العناصر اللي أنا بدي اياها. هذا بالنسبة للان اوردر ليست.

النوع الثاني حكينا فيه اللي هو اوردر ليست عبارة عن تاج الأو اختصار لاوردر ليست. قلنا عبارة عن تعداد رقمي أو قوائم مرتبة بتكون واحد اثنين ثلاث القيمة الافتراضية. وبقدر أحدد النوع اللي بدي إياه للقائمة المرتبة برضه عن طريق تايب. فالان بدي أعمل ال اي عناصر مرتبة مثلا للغات البرمجة حاكتب اتش تي ام ال واعمل ال اي مثلا سي اس اس وال اي مثلا جي اس. هلا أنا ايش كاتبة اوردر ليست قائمة مرتبة. فالان اعمل ريفريش حيكون الوضع الافتراضي لها واحد اثنين ثلاث. القائمة المرتبة في عندي نوع ثاني بقدر أختاره فحدد التايب الاتربيوت اللي اسمه التايب مع الأو ال وبحدد النوع اللي بدي إياه. هلا عندي هذول الأنواع كلهم للقائمة المرتبة. واحد اثنين ثلاث هو القيمة الافتراضية. لو حطيت أي كابيتال فح يصير اي بي سي بشكل كابيتال بهذا الشكل. أو أختار أي سمول فحيص التعداد عبارة عن اي بي سي سمول بهذا الشكل. أو أختار اللاتينية سواء هذا الشكل أو هذا الشكل فبص عندي التعداد بهذه الطريقة. هذا بالنسبة للقوائم المرتبة اللي هي الأوردر ليست فيها الأنواع هذه عن طريق الاتربيوت اللي اسمه تايب.

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

لو أنا بدي القائمة تبدأ تعد من عند رقم معين فبروح بحدد الرقم اللي بدي القائمة هذه تبدأ تعد من عندها. هذا أول اتربيوت عفوا ثاني اتربيوت بعد التايب. نفس الحاجة لو أنا كان عندي هون الو ال التايب تبعها مثلا أي تايب يساوي أي. تمام بدي يبدأ من عند الـ A. هلقيت A ايش معناتها أنه A B C D. تمام لكن بدي يبدأ يعد من عند الـ C. فبج بحكي له هون ستارت ثلاثة فح يبدأ يعد من عند رقم ثلاثة. نعمل ريفريش اللي هو C D E F G. تمام بيبدأ يح لو قلت له ستارت أربعة بدأ D E F وهكذا بياخذ اللي هو الحرف الرابع وبيبدأ يعد من عنده. هذا هو الاتربيوت اللي اسمه ستارت أن أنا أحدد من وين هذا الرقم يبدأ يعد.

الاتربيوت الثاني اللي بنستخدمه اسمه ريفيرس. لما أستخدم ريفيرس معناته أنا بدي أعكس الترتيب. نعمل ريفريش شوف ايش حيصير. ععكس لي الترتيب D C B A. طبعا ايش حكيا له ستارت أربعة ف بيبدأ من عند أربعة وبعكس. خليني أحذفها عشان بس تبين الأمور معنا. أنا محددة التايب أي وحكيه له ريفيرس فبص يعكس الترتيب. آخر واحد بحطه بال أول يعني هي ببدا A B C D بيبدأ العد من تحت ريفيرس ععكس الترتيب. لو أنا كنت مش حاطة التايب فالترتيب هو باي ديفولت واحد اثنين ثلاثة فح يبدأ العد معي خمسة أربعة ثلاثة اثنين واحد. نعمل ريفريش بهذا الشكل. إذا الريفيرس عبارة عن اتربيوت بستخدمه لعكس ترتيب القيم. أنا بديش إياه يبدأ يعد بدي يكون عكس الترتيب اللي موجود معاي. فهذ الاثنين اتربيوت الجداد اللي بستخدمهم مع القوائم اللي من نوع أوردر اللي هي القوائم المرتبة. ستارت أحدد له من وين يبدأ يعد هذا الرقم وفيرس لو أنا بدي أعكس ترتيب هذا الرقم.

هذول كان بالنسبة للانواع الأوردر والان أوردر ليست. النوع الثالث أخذناه اللي هو عبارة عن دي ال اختصار ديسكربشن ليست. حكينا بداخل هذا التاج في عندي اثنين تاج اللي هو الدي تي عشان أحط التايتل اللي أنا بدي إياه. مثلا بدي أعمل تعريف لـ الاتش تي ام ال فبحط داخل الدي تي والوصف اللي بدي إياه أو الشرح بحطه داخل دي دي اللي هو اختصار لـ ديسكربشن ديسكربشن ليست. فالدي عبارة عن الديتيلز أو الكريشن. مثلا أحط الاختصار هايبر مارك أب لانجوج. فلي حيصير أنه حعرض الاتش تي ام ال ينعرض تحتها الاختصار بهذا الشكل. فهذا عبارة عن السكشن ليست.

الان نرجع على الأنواع الموجودة. حكينا هذه عبارة عن ان أوردر ليست وهذ أوردر ليست وهذه ديسكربشن ليست. أي موقع في الدنيا حيكون موجود فيه نوع من أنواع القوائم اللي هي يا بتكون أوردر ليست يا بتكون ان أوردر ليست. مثلا شكل الهيدر اللي موجود هون هذه عبارة عن قوائم لأنه لما أضغط على شيء بفتح لي صفحة أو بفتح لي سكشن معين. فكيف بروح بعمله هذا؟ هذا بكون عبارة عن قائمة. طيب أي نوع من القوائم أستخدم؟ هل هو أوردر ليست ولا ان أوردر ليست ولا ديسكربشن ليست؟ الهيدر بنقدر نستخدمه أوردر ليست أو ان أوردر ليست. ولكن الصح والشغل الاحترافي أنه يكون عبارة عن ان أوردر ليس لأنه الان أوردر تعداد نقطي فبكون فيها واحد اثنين ثلاثة بتكون عبارة عن نقاط أو مربعات أو دوائر وبقدر هدول النقاط الان أتحكم فيهم. إذا أي هيدر موجود في الدنيا هذا بده يكون عبارة عن قائمة فح يكون ان أوردر ليست.

الان أحذف هذا الأشياء. أحذف الدسكربشن وأحذف الأوردر ونبدأ نشتغل على الان أور أوردر ليست. الان أوردر ليست خلص أنا حددت يو ال بدي أرفع التايب تبعها اللي هو نان وأخليها عبارة عن ان أوردر ليست قائمة فيها هذا الكلام. الان حتكون الشكل تبعها اللي هو التعداد النقطي الافتراضي تبعها. تمام أول حاجة بدي أعملها أنه هدول القوائم بدي أرفع النقاط تبعهم. قلنا بنرفعهم عن طريق الاتربيوت اللي اسمه تايب. في عننا خاصية في السي اس اس بتخليني أتحكم في هدول بدل ما أستخدم الاتربيوت اللي اسمه تايب ممكن أستخدم خاصية في السي اس اس اسمها ليست ستايل تايب. فبج هون على الستايل بدي أتحكم في اليو ال فبحيث يو ال في عننا خاصية اسمها ليست ستايل تايب. هي لتحديد نوع القائمة اللي أنا بدي إياه. الأنواع هي سيركل أو ديسك أو سكوير أو نان. نفس الأشياء اللي بحطها في الاتربيوت تايب بستخدم خاصية الليست ستايل تايب. خليني أحكي له مثلا سكوير. الان حيجي الشكل عبارة عن مربعات بهذا الشكل.

هلا السؤال بحكي أنه طب أنا في عندي اتربيوت اسمه تايب بستخدمه مع اليو ال وفي عندي خاصية برضه بقدر أستخدمها واثنين الاثنين بيعملوا نفس الشي. متى أستخدم الاتربيوت أحطه هون مباشرة ومتى أستخدم الخاصية؟ هلقيت لو هذه القائمة ما بدك تعملي عليها خصائص ثانية في السي اس اس يعني ما بدك توصلي لها أصلا ولا تعملي عليها خصائص. فبيكون الأسهل أني أحط هون التايب وأعطيها النوع اللي بدي إياه. لكن إذا القائمة هذه أنا بدي أوصل لها وأعمل عليها خصائص وبدي أعمل لها بادينج ومارجن وأتحكم في لونها مثلا. ف أنا بدي أوصل لها ف بوصل لها وبستخدم الخاصية الست ستايل تايب وبحدد النوع اللي بدي إياه. لأن أنا هيك هيك واصلة لها. لكن متى بكون بستخدم الاتربيوت لو أنا ما بديش أوصل لها فبيكون الأسهل علي أني أستخدم الاتربيوت عشان أقلل من حجم الكود يكون شغلي احترافي أكثر. لكن هي صراحة أي قائمة في الدنيا مستحيل تكون شكلها بس هيك. ف أنا في السي اس اس بالتاكيد حاكون واصلة لها وأعمل عليها خصائص وكل هذه الأمور. فبكون الأفضل لي أني أستخدم هذه الخاصية. لو أنا ما بدي أعمل عليها شيء ما بدي الشكل يكون بقول له ليست ستايل نان. فبروح أن شكل النقاط بهذا الشكل بتكون عبارة عن قائمة ولكن بدون الستايل تبع هذا العناصر.

كمان زي الليست ستايل تايب في عندي خاصية ثانية اسمها ليست ستايل. برضه بتعمل نفس هذا الكلام. الليست ستيل شي مختصر عن التايب بتاخذ قيمة نان في حال أنا ما بديش أعمل أي شكل. يعني بقدر لو أنا بدي أستخدم ليست ستايل تايب وأعطيه قيمة بدل ما أكتبها كلها في عندي خاصية اسمها ليست ستايل نان بستخدمها لو أنا ما بديش أعمل أي ستايل على القائمة. هي أعطاني نفس النتيجة ليست ستايل تايب نان ولست ستايل نان. النتين بيعطوني نفس النتيجة. لشو بستخدمهم لو أنا هذه القائمة ما بديش أحدد لها نوع قائمة أو الستايل تبعها بدي إياه يكون نان يعني بدون تعداد نقطي بدون شكل الدائري بدون شكل المربع.

هلقيت حكينا أنه أي هيدر في الدنيا بده يكون عبارة عن ان أوردر ليست اللي هي القائمة. قلت لكم أوردر أو ان أوردر ولكن الأصح أنها تكون ان أوردر. الان لو أنا هذا الهيدر بدي أجي أحلله حاجي أرسم ه الشكل. تمام أي صفحة ويب في الدنيا عبارة عن هذا الشكل لنفرض. تمام ها صفحة الويب اللي هي الفيو بورت اللي أنا عرضاها هي هون. هذه الفيو بورت. تمام بدنا نعمل تحليل لها. أي صفحة ويب بتجيني أو أي موقع ويب بجيني بون في عندي هون على جنب. طبعا أنا بحكي لو في حال الموقع عندي إنجليزي شغلي كله لحتى الان إنجليزي. فبيكون في عندي هون اللوجو أو الشعار على جهة اليسار. لو أنا كنت شغالة موقع عربي فبيكون اللوجو معي هون على اليمين. تمام في عندي هون لوجو أو الشعار وهون بيكون عبارة عن القائمة. هذه القائمة احنا هذا الشكل كله هذا الشكل كله بنحكي عنه هيدر. تمام ايش يعني هيدر يعني القسم العلوي أو القسم الراسي للصفحة. بداخل الهيدر في عندي اللوجو وبيكون عندي هون شكل القائمة. شكل القائمة بنحكي عنها ناف بار ناف بار شريط القوائم. بستخدم لها التاج اللي اسمه ناف اللي حكينا عنه. تمام هلقيت اللوجو هون قد يكون صورة. هي صورة شعار الموقع وقد يكون اسم الموقع يعني بكون نص. تمام إذا اللوجو يا أما بيكون عبارة عن صورة يا أما بيكون اسم يعني مثلا هذا الموقع اللوجو فيه عبارة عن اسم اسمه أي ان سي. خلص اسمه كذا مش صورة. لكن في مواقع ثانية بكون الشعار عبارة عن صورة اللي هي صورة خاصة في الموقع.

إذا هذا شكل الهد. معلومة مهمة جدا أنه اللوجو لازم نحطه داخل تاج الـ A رابط بداخل هذا التاج. نحن عارفين أنه الرابط مع الاتش رف اللي بيوديني على مسار الصفحة. مسار الصفحة للشعار بتكون عبارة عن هاشتاج. ايش يعني هاشتاج يعني أنا بدي لما أضغط عليه يوديني على الصفحة الرئيسية تبعت الموقع اللي أنا أصلا بكون موجودة فيها اللي هي صفحة الاندكس. فلما بحكي له هاشتاج معناتها أنه لما أضغط عليه ما يوديني على أي شيء أضلني في نفس الصفحة. حتى لاحظوا هذا الشيء افتح أي موقع عندكم واضغطوا على اللوجو حتلاقوه بوديكم على الصفحة الرئيسية اللي في الموقع. فهذه معلومة صراحة مش الكل بيعرفها. فانتم بدي اياكم تكونوا عارفينها أنه اللوجو وعدنا ح نطبقها بنحطه داخل تاج الـ A رابط بيكون اللوجو عبارة عن رابط وهذا الرابط الاتش رف تبعه بده يكون عبارة عن هاشتاج.

القسم الثاني من الموقع بنحكي عنه المين سكشن. الان ببدا أعدد السكشن اللي موجودين معنا وأخذنا معلومة قبل هيك أنه أول سكشن عندي في الموقع حكينا بده يكون اسمه هيرو. هذا اسم متعارف عليه ما بين مبرمجين الويب أنه أول سكشن في الصفحة بده يكون عبارة عن اسم هيرو. بعدين ببدا أحط مجموعة السكشن سكشن اثنين سكشن ثلاثة قديش في عندي سكاشن في الصفحة بحطهم. آخر جزء عندي في الصفحة بكون اسمه فوتر اللي هو القسم الأخير من الصفحة أو تذييل الصفحة بنحكي فيها الفوتر. آخر قسم اللي هو بكون في اللينكات الصفحة ومواقع السوشيال ميديا وكل هذا الشي. إذا هذه الصورة بدها تضل قدامكم عبارة عن هيدر. مجموعة من السكشن وفوتر.

ش أو الهيدر عفوا التركيبة الأساسية له عبارة عن لوجو وبعدين شكل الناف بار اللي هم القوائم اللي هي بدها تكون بداخلها اليو ال والـ اي اللي هلقيت حنحكي فيهم. تمام يعني لو أنا اجيت قلت بدي أطبق الهيدر البسيط اللي موجود معي في هذه الصفحة خلينا نشوف كيف بنطبق. تتذكروا حكينا قبل هيك اللي هو ملف الستارتر أنه أعمل عليه أي شي أنا بدي إياه. بلاحظ يعني بضيف عليه أي شي أنا بشوف أنه هذا الشي بيشتغل معي أو أني ح أستخدمه في أي صفحة من صفحات الويب. اللي هلقيت بدي أكتبه المفروض يكون في ملف الستارتر. من الأشياء الأساسية الموجودة في أي صفحة ويب اللي هو عبارة عن هيدر. تمام اللي هو الهيدر القسم الرئيسي اللي فوق. بداخل الهيدر حكينا في عننا شغلتين اللي هو اللوجو وحكينا الناف بار أو المنيو بنحكي عنها القائمة. تمام اللوجو هذا بدي أحطه داخل ديف عشان أصير لما بدي أعمل خصائص على اللوجو أتحكم في عن طريق أني أنا أوصله للديف. فدائما الهيدر بيكون عبارة عن جزئيتين ديف للشعار وديف للقائمة. هذه طبعا أنا بكتب هون بس أنتم مش ضروري تلتزموا في الشي أو كمسمك كشرح. إذا الهيدر بده يكون عبارة عن تو ديف. اثنتين ديف. الديف الأولى بدها تكون للوجو واللوجو قلنا يا أما بحطه دا يعني اللوجو يا أما بكون صورة يا أما بكون نص. سواء كان صورة ولا كان نص بدي أستخدم له التاج اللي اسمه أي. تمام والاتش رف تبعها بده يكون هاشتاج. والله إذا كان جويته نص كلام بكتبه كلام زي هيك. إذا كان جويته صورة باجي هون وبكتب إيمج تاج الأمج وبحط الصورة اللي أنا بدي إياها. هذا الديف عبارة عن الديف الخاص في اللوجو. فبروح بعطيه كلاس اسمه لوجو عشان أقدر أميزه. فبح كي له هون كلاس اسمه لوجو عشان أصير لما بدي أوصل للوجو بقول له دوت لوجو الـ A اللي موجود فيه أعمل لي كذا وكذا عليها. تمام هذا الف الخاص في اللوجو. خلصنا منه.

الف الثاني حكينا هو عبارة عن شكل الناف بار أو القوائم اللي أنا بدي إياها. ف القائمة هذه ممكن أعطيها اسم منيو. فبح كي له كلاس اسمه منيو. في ناس ح تسميه كلاس اسمه ناف بار أو مثلا استبدل ديف كلاس منيو باسم باسم التاج اللي اسمه ناف بار. الاثنين صح. أما بحكي له ناف أو ببدله بأنه ديف كلاس اسمه منيو وبحط بداخله القوائم. القائمة عبارة عن ان أوردر ليست بداخلها مجموعة ال اي. أنا بحكي بشكل عام لحتى الان وعدنا ح نطبق هي مجموعة ال اي بصير أحط قديش بدي قوائم. شفت قت السهم لتحت وبحط قديش بدي قوائم هيك كثير أوفر. ححب منهم. تمام على قد أربع قوائم. إذا اللي صار عندي أنه هي الشكل. هي الهيدر القسم الرئيسي عبارة عن اثنتين ديف. ديف للوجو وديف للمنيو أو الناف بار شريط القوائم. بداخل ديف اللوجو قلنا عبارة عن رابط والاتش ريف تبعه هاشتاج. أنا لاني في صفحة الاندكس بداخل الهاشتاج. أما بيكون إيمج وبحط رابط الصورة أو ممكن يكون كلام مثلا كلمة لوجو. خلص فبكون النص عندي حيظهر أنه كلمة لوجو. يعني لو رحت هلقيت هون على صفحة الويب حلاقي حتظهر معي كلمة لوجو بهذا الشكل. تمام هذا بالنسبة لجزئية الهيدر.

حكينا الجزئية الثانية بعد الهيدر بيجي عندي مجموعة من السكشن اللي بدي اياهم. وأخذنا في تركيبة الصفحة في عندي مين وبداخل المين بحط السكشن. كم بدي سكاشن مثلا بدي ثلاثة سكشن. بعمل شفت الت السهم لتحت وهي ثلاثة سكشن. أول سكشن بده يكون عبارة عن أي دي اسمه هيرو وكلاس اسمه هيرو عشان أصير في شغل السي اس اس أوصل له عن طريق دوت هيرو وفي شغل الجي اس أوصل عن طريق الأي دي تبعه. تمام كل سكشن حطيه أي دي وكلاس. بعدين بكتب هدول بحط الأي دي والكلاس تبعهم حسب محتويات الموجودة بداخل السكشن. خلصنا من المين اللي هي المين بيكون فيها مجموعة من السكشن. بعد ما نخلص منها بكون عندي جزئية الفوتر وبداخل الفوتر بحط المحتوى اللي بدي إياه اللي هو روابط صفحات لوجو أي حاجة موجود في الفوتر حسب تصميم الصفحة اللي عندكم. إذا هذا عبارة عن التركيبة الأساسية لأي صفحة ويب أنا بدي إياها. هيدر. مين بداخل المين مجموعة السكشن وفوتر. طبعا هذا الشي أخذناه قبل هيك.

تمام نفرض أنه بدنا نعمل تطبيق لهذا الهيدر بناء على الكلام اللي حكيته هون. حاذفه عشان نعيده كمان مرة وتثبت عندكم المعلومة. فحذف كل شي حكيناه ونعيده نفسه. طبعا ليش عملت هذا الشي عشان في معلومة برضه الان بدي أحكيها أنه احنا كنا لما نشتغل هون واجي أطبق بلاحظ أنه المحتوى ملتصق بالضبط في الفيو بورت. لكن كثير بنشوف تصاميم المحتوى بعد مسافة من اليمين وبعد مسافة من اليسار. عفوا من اليمين هون ومن اليسار هون عشان شغالين إنجليزي. تمام الفكرة أنه في عندي مسافات من الجوانب. المسافات هذه بقدر أعملها عن طريق الباد. ولكن ايش اللي حيصير؟ حصير كل عنصر مثلا أجى عند اللوجو أجى عند هذا النص ممكن يكون اتش 3. حاجي عند هون مثلا ممكن يكون اتش 2 وأجي أعطيه بادين من اليسار بادين ليفت بادين ليفت وأكرر هذا الكود في كل حاجة موجودة عندي. طيب هذا الكلام صح وبيشتغل وكل شيء تمام بس تخيل الموقع عندي هذا كله كل شيء موجود في هذه الصفحة كل عنصر موجود بدي أعطيها بادين ليفت وأعطيها قيمة مثلا 20 بكسل. تمام بصير أنا أخذت أسطر من الكود. فاجا عندي حاجة اسمها كلاس اسمه كونتينر. فكرة كلاس الكونتينر بحكي لي أنه روحي حطي كل المحتوى تبع الصفحة هذا داخل كلاس الكونتينر. وبنلاقي ديفولت ماخذ مسافات من اليسار ومسافات من اليمين. كلاس الكونتينر ايش بيعمل؟ بيعمل لي توسيط للمحتوى. توسيط للعناصر في النص. بياخذ مسافات من اليسار ومسافات من اليمين وبيوسط لي العناصر كلها بالنص. عشان هيك حكينا عنه كونتينر حاوية للعناصر. بياخذ مسافات من اليسار ومسافات من اليمين وبيصير أحط فيه هذا الكلام.

فايش بنعمل احنا على الشي اللي حكيناه تو. هيدر حكينا التركيبة الأساسية هيدر بعدين المين عشان أحط فيها السكشن والفوتر اللي هو آخر جزئية. تمام؟ بيصير على كل عنصر من هدول يعني بداخل حكينا سكشن وسكشن الأول اللي معه أي دي اسمه هيرو وم كلاس اسمه هيرو. بيصير كل المحتوى هيت اللي بدي أضيفه أحطه في كلاس اسمه كونتينر. هل بحط كل المحتوى داخل كلاس اسمه كونتينر عن طريق فاش بحكي عشان أسهل بدل ما أكتب أخذناه في الاختصارات. بحكيله ديف دوت كونتينر وأعمل إنتر. فنشي ديف بداخلها كونتينر. هل أي محتوى بحطه هون يعني بس على السريع أجرب اتش 3 عشان توضح الفكرة. أكتب له كلمة ويلكم. حتلاقوها مباشرة اجت في نص الصفحة وأخذت بادين من اليسار ومن اليمين. طبعا مش ح تبين هلقيت معي عندنا لأنه ح نعمل شوية خصائص على الكلاس اللي اسمه كونتينر. بس الفكرة اللي أنا بحكيها أنه الان أي محتوى بضيف بيجي من اليسار لليمين. فبحط داخل كلاس اسمه كونتينر عشان أعمل حاوية لهذا الكونتينر. الكونتينر هلقيت بدي أعطيه خصائص. أخذه كوبي بيست على الستايل. طبعا نحذف هذا الكلام واتفقنا من الأول أنه لازم نثبت هدول في اليونيفرسال اللي هو مارجن صفر. هدول خلص على طول معنا بحذفهم. بادين صفر وبوكس سايزين بوردر بوكس. وأخذنا ليش هذا الكلام بنعمله. بوك سيز بوردر بوكس. الان اعمل ريفريش شفنا هذا الكلام اللي هو بادين ومارجن. خلص بطل كانت هان حكيت له باد مارجن صفر فطلعت معاي فوق. قت الكلاس اللي اسمه كونتينر بوصله عن طريق دوت اسم الكلاس اللي هو كونتينر. هذا الكونتينر عبارة عن حاوية. ف الحاوية هذه لأنه العناصر هون باي ديفولت حتكون ماخذة و وماخذة هايكل ها الأمور. ف حاجي أحكي له هون أنه بدي الود لها العرض مثلا نحكي 80% عشان ما بدي إياه ياخذ كل المساحة لا بدي جزء منه 80% عشان يجي معي بالنص. وكمان أحكي له مارجن صفر أو تو. ايش يعني صفر أو تو؟ يعني من اليمين ومن اليسار من التوب والبوتوم اللي هو تحت صفر ومن اليمين واليسار اللي هو أو تو يحسب لي إياه افتراضي من المتصفح. الان اعمل ريفريش. ايش صار؟ المحتوى لحاله اجا معي بادين من اليمين وباد من اليسار. لو أنا أعطيته باك جراوند كر أعطي الكونتينر باك جراوند ر مثلا لون أحمر. نعمل ريفريش عشان تشوفوه. زي ما أنتم شايفين هي جزئية الكونتينر. في العادة لما كنت أعطي عنصر باك جراوند كر كان يجي على كل الود صح ولا لا؟ لكن قلنا أنه الكونتينر عبارة عن حاوية بتوسط لي المحتوى كله في وسط الصفحة. فاعطيته باك جراوند ك عشان تشوفوا أنه هي الباد اللي جاي من اليسار وهي الباد اللي جاي من اليمين. إذا أي تصميم بنشوفه بهذا الشكل في مسافة بين اليسار ومسافة بين اليمين بروح على كل عنصر وبعطيه بادين لا بعمل المحتوى كله داخل كونتينر. هي المحتوى حطيته داخل كلاس سميته كونتينر واجيت هون أعطيته وت 80% عشان ما يأخذ المساحة كلها. مارجن صفر أو تو يعني من فوق ومن تحت بديش بادين ومن اليمين ومن اليسار بدي إياه بالنص يتواصل. الان أحذف الباك جراوند ر هذا بالنسبة للكونتينر ونبدأ نحط الأشياء اللي موجودة فيه.

حكينا أنه الهيدر بعد ما حطيت المحتوى داخل كونتينر. قلنا الهيدر بتكون من شغلتين أساسيتين. جزئية اللوجو وجزئية المنيو. فحاج أحط ال اللوجو. قلنا دوت لو عشان أعمل كلاس اسمه لوجو عشان أعمل كلاس اسمه لوجو. بداخل هذا الكلاس حكينا بنعمل تاج الـ A. الاتش ريف تبعها عبارة عن هاشتاج. يا أما بكون بداخلها إيمج وبحط الصورة اللي بدي إياها يا أما بتكون بداخلها محتوى. فحكت محتوى يكون مثلا اسمه لوجو. هذا عبارة عن الرابط. هذه الف الخاصة في اللوجو. هي خلصنا منها. واحنا هذه نهاية الف تاعت كونتينر. الان بعمل الديف الثانية تبعت المنيو. فبح كي له دوت منيو وتاج الديف تبعت المنيو حكينا بدها تكون عبارة عن القائمة. يو ال بداخل اليو ال ال اي. وهدول الروابط هدول الروابط أو القوائم هي عبارة عن رابط لأنه لما أضغط عليه يا حودين على صفحة يا أما حودين على السكشن الخاص فيه. فلازم الـ A هون تكون عبارة عن تاج A. الاتش تبع حسب وين بدي إياه يوديني. وباجي هون بكتب اسم العنصر القائمة اللي بدي إياه مثلا اسمها هوم. وبدي أعمل مجموعة من القوائم. هوم مثلا أباوت وهون تكون اسمها كونتاكت. تمام الاتش ريف أنا في صفحة مين الاندكس شغالة. فالات ريف تبعتي الهوم لما أضغط على الهوم ما بدي يوديني على أي شيء فبحط هون هاشتاج. الأباوت إذا أنا كنت شغالة في أكثر من صفحة فبتكون هون اسم الصفحة دوت اتش تي ام ال مثلا أباوت دوت اتش تي ام ال. زي ما أخذنا في القوائم إذا كان عبارة عن قسم بحط اسم الأي دي تبع هذا القسم. هذا زي ما أخذنا في فكرة القوائم. بيصير أعمله. إذا اللي عملناه عبارة عن جزئية الهيدر. احنا الان اللي بنشرحها جزئية الهيدر. وهون عندي سكشن وه عندي فوتر. إذا بدكم تحطوا محتوى بس أنا هلا بركز على ه اللي هو القوائم.

هلقيت لما أعمل هون ظهر معي اللوجو والقوائم اللي موجودين معنا هون بهذا الشكل. الان بدي أبدأ أرتب هذا المحتوى اللي موجود معنا هون. أول حاجة اللوجو كلهم عبارة عن قوائم صح ولا لا؟ بدي أرفع القائمة هذه تبعتهم وبدي أرفع الخط هذا تبعهم. ففي عننا في السي اس اس بقدر أوصل لهم. حنشتغل على جزئية جزئية. أول شيء اللوجو الـ الكلام اللي موجود فيه ممكن أني أوصله. فال هذا عشان أوصله بدي أحكيله في عندي بالترتيب بناخذ هيدر بعدين دوت كونتينر عشان الوصول الصحيح له. دوت لوجو اللي موجود فيه وبحط الخصائص اللي بدي إياها. فجي أحكيله ه في الستايل بعدت كونتينر بعدين حكينا لازم يكون في الترتيب هيدر دوت كونتينر دوت لوجو دوت لوجو الـ A اللي موجود فيه بدي أعمل أشياء على الـ A اللي موجودة معنا هون. مثلا بدي أرفع النقاط الخط هذا اللي موجود تحت. الخط هذا أخذنا في خصائص الخطوط عندي ليست ستايل نان. ليست ستايل نان بستخدمها عشان أرفع الخط اللي هي الدائرة الموجودة عشان أرفع الدائرة الموجودة عفوا الخط عشان أرفعه عن طريق تك ديكوريشن. تك ديكوريشن عشان أرفع الخط اللي موجود تحت اللوجو. بدي أغير اللون مثلا خليني أعطي الهيدر باك جراوند كر عشان نصير نتحكم فيها زي ما بدنا. أجى هون على الهيدر نفسه وأعطيه باك جراوند كر مثلا بهذا اللون. ونلاحظ ترتيب الأكواد عندي كونتينر بعدين هيدر. ماجيت حطيت الهيدر هان لا أنا بالترتيب. هلقيت الهيدر أعطيته باك جراوند كلر بهذا اللون. فالكلام باي ديفولت تبع الروابط بكون لونه أزرق. ممكن أغيره لأبيض. فمثلا الـ A أحكي له خاصية الكلر تكون لونها أبيض وايت بهذا اللون. نعمل ريفريش. فهي بدأت الأمور تكبر مع يعني تصير أحسن. مثلا حجم الخط بدي أغيره بحكي له فونت سايز بدي إياه 20 بكسل مثلا. بدي أخليه غامق شوية بحكيله فونت ويت يكون 500. بصير أتحكم حسب شكل التصميم اللي موجود معي. نعمل ريفريش. فهي شكل اللوجو تغير معي.

الان هذه القائمة موجود بكون عندي لوجو وبيكون عندي القائمة في جهة ثانية. ففي عندي اثنتين جايين على نفس السطر على طول بعطيهم ديسبلاي فليكس. طيب لمين أعطي ديسبلاي فليكس؟ احنا شايفين ها جزئية الهيدر وهي الف الكونتينر بداخل ديف الكونتينر عندي ديف كلاس اسمه لوجو وبداخلها في ديف كلاس منيو. ف أنا عندي اللوجو والمنيو الاثنين بدهم يجوا على نفس السطر. فالصح أني أدور على الأب تبعهم اللي هو الكونتينر وأعطيه ديسبلاي فليكس. ولكن أنا هون الكونتينر بدي أستخدمه في كل السكشن اللي موجودين معي. خلص أنا عممت أنه عندي هلقيت لما أصير أضيف هون على السكشن بدي أضيف محتوى على طول حاطه دوت كونتينر وأحط المحتوى اللي فيه. مثلا اتش 3 اسمها سيرفسز. الفوتر نفس الشي المحتوى اللي موجود فيه بده يكون دوت كونتينر وأصير أحط فيه الأشياء. فهذا الكونتينر شيء عام للكل مش صح أعطيه ديسبلاي فليكس. إيش الحل؟ الحل أني أمسك دف كلاس اللوجو ودف كلاس المنيو وأحطهم داخل عنصر ثاني يكون ماسكهم. ممكن أحطهم داخل ديف ممكن أحطهم داخل الناف اللي هو شريط القوائم. ففي عندي تاج اسمه ناف. كنترول سي بمسك هذا الكلام. فه ايش صار؟ اللوجو ها كلاس اللوجو ودف كلاس المنيو. الأب تبعهم هو مين الناف. فبصل للناف وبعطيه. هيك بتكون الشي أحسن. كيف أوصل للناف؟ بالترتيب بحكيله الهيدر الناف اللي موجود فيه. فحج على الترتيب بحكيله موجود الناف مين معناته اللي هو جزئية اللوجو وجزئية المنيو. بدي أعطيه ديسبلاي فليكس. ديسبلاي فليكس عشان يجوا على نفس السطر. نعمل ريفريش. زي ما احنا شايفين ها بدأت الأمور شوي. هذا السيرفسز هذ تبعت السكشن. هلقيت ايش اللي صار؟ هي اللوجو وهي القوائم اجوا على نفس السطر بطلوا تحت بعض. هليت بصير أتحكم بينهم. بدي بدي هيك ملزقين ببعض. بديش ملزقين ببعض. بدي أعمل بينهم مسافات. فبخ جستي فاي كونتنت على الأب. طبعا أنا شغالة فبح كي له جستي فاي كونتنت سبيس بتوين عشان أعمل بينهم مسافات. الان اعمل ريفريش. زي ما احنا شايفين هي اللي صار أنه هي اللوجو والمنيو صار بينهم سبيس بتوين. الالين ايتمز مثلا بدي أوسطهم عمودي. يعني اللوجو جاي فوق والقائمة جايه تحت. بدي أخلي اللوجو ينزل تحت أوسطه عمودي. فبخ معهم اللاين ايتم عشان أوسطهم عمودي. الـ A قلنا بتاخذ أكثر من قيمة. لكن أنا شايفة اللوجو جاي فوق بدي إياه يجي على نفس السطر مع اللينكات القوائم. فبع الين ايتم سنتر عشان يتواصل ويجي على نفس القائمة تبعت الروابط. فالان اعمل ريفريش. زي ما احنا شايفين هي نزل لتحت صار متوسط معاي عموديا. هيك بدأت الأمور شوي شوي تكون أحسن. هذا بالنسبة للهدر نا اللي موجود.

طيب الان بدي أبدأ أشتغل على الو القائمة موجودة هون. ابدأ أشتغل على هذه على اليو ال عشان أبدأ أشتغل عليها. أول شي بدي أعرف كيف بدي أوصل لها. الوصول تبع المنيو هي موجودة داخل التاج اللي اسمه هيدر في كلاس اسمه منيو. اليو ال الموجودة. فجي هون بحكيله هيدر دوت منيو. هو الكلاس اللي اسمه منيو. اليو ال اللي موجودة. أول حاجة بدي أرفع النقط اللي موج ه فحكي له ليست ستايل نان. ليست ستايل هذه دائما مع القوائم بستخدم ليست ستايل نان. فبعمل ريفريش. هلقيت حتلاحظوا أنه النقاط راحوا اللي كانوا موجودين هون. كمان في شغلة مهمة ومش الكل بيعرفها أنه القائمة باي ديفولت حتلاقوا لو أنت جربته عملته يو ال لحالها حتلاقوا أنها باي ديفولت ماخذة بادين ومارجن. ف أنا عشان أحذف هذا الكلام دائما قاعدة عامة عند كل المبرمجين المحترفين مع اليو ال بستخدموا مارجن صفر وبادن صفر. ح تحكي لي طب احنا من الأول عاملين مارجن صفر وبادن صفر وهذه لكل العناصر صحيح ومضبوط. لكن أنا اجيت هون خصصته لمين لليو ال لأنه اليو ال باي ديفولت معها مارجن وبادن. فلما بحكيله مارجن صفر وبادن صفر معناتها أحذف المارجن والباد اللي موجودين مع اليو ال. الان اعمل ريفريش مش حيبين كثير يعني معنا إلا عندنا لما نعمل الباد على الـ A نفسها. لكن هذه قاعدة عامة يعني المفروض هذه تمسكوها كوبي بيست على ملف الستارتر اللي بده يكون ملف لأي مشروع معكم تمسكوها وتضيفها عشان تصير أي قائمة اللي موجودة في الهيدر يكون ست ستايل نون ها ومارجن صفر وبادن صفر.

الان الأمور ها بدأت شوية تتصلح معاي. هلقيت القوائم هدول الـ A اللي موجودين هون بداخلهم بدي أعمل بينهم أنهم يكونوا على نفس السطر. فبروح ايش بستخدم ديسبلاي ان لاين أو بستخدم ديسبلاي فليكس. كيف أوصل للـ A؟ بمسك هذا الكلام وبضيف عليه الـ A. هذه ايش معناتها العناصر اللي موجودين في اليو ال اللي موجودين في كلاس المنيو اللي في هيدر. يبقى أنا بأشر على هذول بدي أخليهم على نفس السطر. أستخدم ديسبلاي ان لاين. الان لاين برضه بتخلي لي إياهم على نفس السطر. نعمل ريفريش. زي ما احنا شايفين بد الهيدر يتكون معي. إذا ه صاروا على نفس السطر. طيب بدي أعمل شوية مسافات من ه. هذه المسافات هي عبارة عن بادين ليفت وبادن رايت صح ولا لا؟ لكن أنا برضه بدي أعمل من فوق مسافات. يبقى بست يعني أنا هذه فوق بادين توب وبا فيا بستخدم بادين ليفت لحالها يا بستخدم الباد الخاصية المشتركة وبقول له صفر ومن مثلا من اليمين ومن اليسار 15 بكسل. فهذ ايش معناتها من فوق ومن تحت صفر ومن اليمين ومن اليسار 15 بكسل. اعمل ريفريش. زي ما احنا شايفين هي صارت المسافات هذه المسافات هي عبارة عن الباد من اليمين ومن اليسار. هلقيت الخط اللي موجود على القائمة هذا الخط تبع الرابط اللي هو الـ A. فعشان أرفعه بستخدم تكوريشن. يبقى لازم أوصل لـ A واستخدم تكوريشن. بتصير ه أس الوصول أسهل. باخذ هذا كوبي لأن أنا ماشية على الترتيب. شايفين كيف طريقة كتابة للأكواد مرتبة وبضيف الـ A. هذه ايش معناتها العناصر اللي موجودين في اليو ال اللي موجودين في كلاس المنو اللي في هيدر. يبقى أنا بأشر على هذول بدي أخليهم على نفس السطر. أستخدم ديسبلاي ان لاين. الان لاين برضه بتخلي لي إياهم على نفس السطر. نعمل ريفريش. زي ما احنا شايفين بد الهيدر يتكون معي. إذا ه صاروا على نفس السطر. طيب بدي أعمل شوية مسافات من ه. هذه المسافات هي عبارة عن بادين ليفت وبادن رايت صح ولا لا؟ لكن أنا برضه بدي أعمل من فوق مسافات. يبقى بست يعني أنا هذه فوق بادين توب وبا فيا بستخدم بادين ليفت لحالها يا بستخدم الباد الخاصية المشتركة وبقول له صفر ومن مثلا من اليمين ومن اليسار 15 بكسل. فهذ ايش معناتها من فوق ومن تحت صفر ومن اليمين ومن اليسار 15 بكسل. اعمل ريفريش. زي ما احنا شايفين هي صارت المسافات هذه المسافات هي عبارة عن الباد من اليمين ومن اليسار. هلقيت الخط اللي موجود على القائمة هذا الخط تبع الرابط اللي هو الـ A. فعشان أرفعه بستخدم تكوريشن. يبقى لازم أوصل لـ A واستخدم تكوريشن. بتصير ه أس الوصول أسهل. باخذ هذا كوبي لأن أنا ماشية على الترتيب. شايفين كيف طريقة كتابة للأكواد مرتبة وبضيف الـ A. هي لو رجعتوا ه حتلاقوا أنه الشي صح موجودة فيه. بدي أرفع الخط تبعها. فصير عنديش على شان أرفع الخط. اعمل تكوريشن. هذا الشكل. هلقيت بدكم تتحكموا في في اللون بدكم تتحكموا في حجم الخط بتصير تتحكموا فيه بالخصائص اللي أخذناهم. اللي بيهمني هلقيت أنه نعرف كيف شكل الهيدر. هي بدا شكل الهيدر يتكون معاي. نركز على أنه الهيدر عبارة عن جزئيتين. جزئية اللوجو وجزئية القوائم هذه. فاحنا رحنا حطيناهم في تاج الناف عشان أطبق عليهم الديسبلاي فليكس وأعمل بينهم جستي فاي كونت وأعمل بينهم الين ايتم. بعدين حكينا أنه لوجو لازم يكون داخل تاج الـ A والاتش ريف تبعه هاشتاج. بعدين القوائم هذول حطيناهم بيو ال والـ A وبدينا نشوف الخصائص اللي هان. إذا هذا كان تطبيق على القوائم وكيف نعمل الهيدر فيهم.

هلقيت بدي أحكي معلومة برضه مهمة كثير ومش الكل صراحة بيعملها أو مش الكل بيعرفها. هلقيت لو أنا كان عندي قائمة لنفرض أنها من نوع يو ال وبداخل هذه القائمة عناصر اللي هم الـ A. طبعا تو.

شفنا أنه الوضع الافتراضي لليو ال بتكون عباره عن نقاط. يعني عشان توضح الأمور خلينا نطبق. خليني أحكي لكم إيش اللي بنحكيها. خليها جزئية الكونتينر، خليه المحتوى بالنص. تمام؟ اللي بدي أعمله إنه هي أحذف الهيدر وهي المين. هلقيت اللي بحكيه إنه نفرض عندي هو وبداخلها ال أي. مثلاً أكتب على السريع "آيتم واحد" وأجي أكررها وأعملها "آيتم اثنين"، "آيتم ثلاثة"، "آيتم أربعة". هل اللي بحكيه إنه إحنا شفنا إنه هذه اليو ال الوضع الافتراضي تبعها عبارة عن شكل نقاط، صح ولا لا؟ آه، إحنا عاملين ست ثاني. أرفع هدول عشان تبين معنا بهذا الشكل. تمام؟ عشان كنا معطينه بادينج صفر ومارجن صفر فالنقاط كانوا داخلين جوا فمش مبينة. هلقيت إحنا قلنا إنه هذه اليو ال هي الوضع الافتراضي تبعها عبارة عن شكل النقاط. طبعاً إحنا عارفين وحكينا قبل هيك إنه اليو ال وال أي قلت لكم من العناصر البلوك المنت، صح ولا لا؟ وهينا شايفين هذا الكلام إنه "آيتم واحد"، "آيتم اثنين" كلهم جايين تحت بعض. هلقيت لو حولت هدول عناصر لـ إن لاين المنت حجوا معي على نفس السطر، صح ولا لا؟ يعني لو أنا اجيت هون قلت له بدي اليو ال ال أي اللي موجودين ديسبلاي إن لاين، فحيصير معاي العناصر على نفس السطر زي ما إحنا شايفين. ولكن بلاحظ إنه النقاط بتروح من العناصر بدون ما أستخدم ليست ستايل نون. ففي عندي معلومة مهمة إنه أحياناً أنا بحتاج هذي القوا أخليهم على نفس السطر لكن بكون بدي النقاط يكونوا موجودين، ما بديش النقاط يكونوا بروحوا. طبعاً حيجي حدا يحكي لي بعمل ديسبلاي فليكس ومش حيروح النقاط، صح؟ تمام الأمور تمام، لكن في معلومة نكون عارفينها وصراحة شيء مهم كثير لأنه ليش أنا بدي أحكي هذا الكلام؟ عشان أنا لو أنا النقاط هذه ما بديش يكونوا بس نقاط، لا بدي أتحكم يكونوا سكوير، يكونوا سيركل، فكيف هذا الكلام بصير؟ بروح إذا. إيش الفكرة اللي أنا بحكيها؟ إنه أنا عندي يو ال بداخلها ال أي فحكي إنه الوضع الافتراضي لهم بيكون عبارة عن شكل النقاط اللي هو الديسك، لأنها من العناصر البلوك. فاللي بحكيه إنه لو حولتها إن لاين هيها عناصر إن لاين وخليتهم على نفس السطر، لاحظنا إنه العناصر بتروح النقاط منهم. فكيف أنا أعمل قائمة من نوع أون أوردر ليست وأخليهم على نفس السطر وشكل النقاط هذا أقدر أتحكم فيه سيركل، ديسك، سكوير؟ كيف بعمل هذا الكلام؟ حكي لي ضيفي سبان على كل ال أي موجودة معنا. حاجي هون أضيف سبان ويصير هذا "آيتم واحد" داخل سبان. وأجي هذا الكلام وأكرر. فت السهم لتحت. تمام؟ وهذه "آيتم اثنين"، و"آيتم ثلاثة". إذا اللي بدي أعمله إنه بدي أضيف سبان على كل الي موجود على كل عنصر موجود معاي. والآن باجي على السي إس إس بحكيله اليو ال عبارة عن ديسبلاي إن لاين. تمام؟ وبدي أوصل للسبان نفسها إنه أحكيله يو ال ال أي السبان اللي موجودة معي وأصير أتحكم بالسبان نفسها إنه أحكيله مثلاً بدي الود تبعها مثلاً 8 بكسل. بصير أتحكم في السبان نفسها والهاي مثلاً خليها 8 بكسل ونعطيها مثلاً باك جراوند كر لون أحمر. وأعطيها هون ديسبلاي إن لاين بلوك. ديسبلاي إن لاين بلوك. الآن شوفوا إيش اللي حيصير. أعمل ريفريش. زي ما إحنا شايفين شكل الدوائر صاروا موجودين معاي. لكن عندي صار العناصر صار لهم تداخل. هليت صار عندي هون تداخل في الأشياء الموجودة. لأن الصراحة ه أنا مش منتبهة. هلا أنا بضيف السبان لكن العنصر بضل داخل ال. أنا كنت ضايف الـ آيتم داخل السبان. معلش ما كنت منتبهة لهذ النقطة. إذا أنا بدي أضيف السبان داخل ال أي نفسها، لكن المحتوى هو بضل كمحتوى لعناصر القائمة. هذا أحذفه ونكرر هذه وأحكيله مثلاً "آيتم اثنين"، "آيتم ثلاثة"، "آيتم أربعة"، مثلاً عقد أربعة. هلا شوفوا إيش حيصير. نعمل ريفريش. زي ما إحنا شايفين هي الشكل صار معاي. إذا اللي بنحكي كنا إنه أنا عندي قائمة وبدي أتحكم إنه هذه القائمة العناصر تبعتها على نفس السطر وبدي أتحكم في نوعها إنه يكون سكوير، يكون سيركل حسب أنا إيش بدي. فاجيت عملت ضفت بس سبان على ال أي نفسه، لكن ظل القائمة العنصر تبعها ظلت موجودة. واجت هون في الستايل صرت أتحكم في السبان نفسها. قلت لما قلت له د 8 بكسل وهاي 8 بكسل صار عندي بالضبط شكل مربع لأنه الهاي والو نفس الشيء. لو بدي إياه دائرة بس أضيف بوردر ريديس. أخذناها بوردر ريديس. بكي له 50% فبير يعطيني شكل دائرة زي ما إحنا شايفين. وهذا كله وين بكون تحكمي على السبان نفسه. إذا أنا صرت هلا بتحكم في السبان نفسها مش في ال أي. فبيعطيني هذا الشكل. فهي صراحة معلومة مهمة لازم تكونوا عارفينها.

هلا بعد ما خلصنا من الحديث على موضوع الليست بدنا نحكي على موضوع التيبل. الجداول أخذنا قبل هيك في الاتش تي ام ال كيف ننشئ أي جدول عننا. قلنا أي جدول بدي أنشئه بنشاه عن طريق التاج اللي اسمه تيبل. بداخل هذا التيبل في عننا ثلاث تاجات أساسية. التاج الأول تي هيد على شان أحط فيه ترويسة الجدول اللي عندي. والتاج اللي بعده تي بدي. والتاج اللي بعده تي فوت. هذا أي جدول عندي هذه التركيبة الأساسية له. هلقيت بداخل التي هيد بحط عنوان الجدول اللي أنا مش عنوان الجدول عفوا ال عنوان الخلايا تبعون أول صف عندي عن طريق التاج اللي اسمه تي. قلت لكم بقدر نحط تي آر اللي هو أنشئ صف وبداخل التي آر أعمل مجموعة من التي اتش أو بقدر أكتب التي اتش مباشرة لأنه خلص هو بيفهم إنه تي اتش هذه عبارة عن الهيدين اللي هو عبارة عن الصف الأول تبع الجدول. نعمل جدول مثلا مكون من ثلاث أعمدة فح احكي له تي اتش ثلاث مرات ونحط في بيانات مثلا الاي دي والنيم. مثلا جدول ل بمثل بيانات شخص أو طالب. وبعد النيم نحط ه الفون. مثلا هذه بتكون عبارة عن الصف الأول عندي. ريفريش بهذا الشكل. هدول عبارة عن التي اتش وزي ما إحنا شايفين التي اتش بكون اللون تبعها غامق عشان يبيني إنه هذا ترويسة الجدول اللي عننا. بعد التي هيد عندي التي بدي بتكون هي عبارة عن مجموعة الصفوف تبعت الجدول. بشها عن طريق التاج اللي اسمه تي آر وداخل التي آر بحط تي دي وبعبي خلايا الأعمده اللي موجودة عندي هون. مثلاً الصف الأول بده يكون في ثلاثة تي دي بهذا الشكل. تي دي الأولى بتمثل الاي دي. تي دي الثانية بتمثل النيم. التي دي الثالثة بتمثل الفون. فحط أي شي مثلاً الاي دي تبعه رقم واحد. الاسم تبعه أحمد مثلاً. الفون عندي أحط أي أرقام بهذا الشكل. فهون حدرج صف أول موجود في هذه البيانات بهذا الشكل. ممكن أعمل تي آر ثانية بداخلها لا تي دي مثلاً الاي دي اثنين والاسم محمد والفون نحط أي أرقام بهذا الشكل. ونعمل كمان صف تي آر بداخله تي دي رقم ثلاثة. الاي دي والاسم مثلاً علي والفون عبارة عن الأرقام هذه. الآن فريش حيعطي جدول مكون من ثلاث صفوف زي ما إحنا شايفين. ونعمل آخر صف داخل التي فوت تي آر بداخله تي دي بمثل رقم أربعة ويكون الاسم مثلا مش عارفة حسام مثلاً وتيدي الأرقام بهذا الشكل. هيك أنا أنشأت جدول بسيط بهذا الشكل. هليت لو أنا بدي أعمل عنوان للجدول في عننا تاج اسمه كابشن بمثلي عنوان الجدول. بما إنه عنوان للجدول يبقى بدي أحطه بعد تاج اليبل عبارة عن الكابشن اللي هو العنوان. مثلاً أحكيله هذه عبارة عن معلومات شخصية انفورميشن. إذا عنوان جدول بنحطه داخل التاج اللي اسمه كابشن. الآن نعمل ريفريش زي ما إحنا شايفين هي بيرسونال انفورميشن هذا عبارة عن العنوان. وبدا يحط لي تركيبة الجدول. المرة اللي فاتت حكينا أو لما أخذناه التيبل في الاتش تي ام ال قلنا إنه الاتش تي ام ال تنشئ لي جدول بهذا الشكل بدون بوردر. كنا عشان نحط بوردر قلت لكم نستخدم اتربيوت هون اسمه بوردر بعطيه قيمة واحدة عشان يعمل لي بوردر افتراضي للجدول بهذا الشكل. إحنا هذا الكلام ما بدنا إياه هلا لأنه أخذنا البوردر في السي اس اس. يبقى الآن بدنا نتعامل كسي اس اس. التعامل كسي اس اس بحكي لي إنه أنا بدي أنشئ حدود للجدول اللي معاي. فيبقى لازم أوصل لتاج التيبل. فبج هان كستايل بحكي له في عندي تاج اسمه تيبل بدي أعطيه خاصية البوردر. وأخذنا البوردر اختصار لثلاث خصائص اللي هي كانت البوردر دث والبور ستايل والبور كر. فبع طيه القيم هذه في خاصية البوردر. لنفرض بدي أحكي له واحد بكسل من نوع سوليد اللون بدي إياه يكون جراي رمادي. نعمل ريفريش. الآن حيعطي حدود للجدول زي ما إحنا شايفين. هلقيت هذا اللي أعطاني إياه عبارة عن حدود لمين؟ لليبل نفسه. لآني أنا جيت هون إيش قلت له؟ وصلت لتاج التيبل. طب أنا بدي بدي أعمل كمان حدود هون للأعمدة ول الخلايا اللي موجودة. يبقى باجي هون بوصل للتي اتش والتي دي. لو أنا شغلي عادية مبتدئة حاجي أعمل تي اتش بهذا الشكل وأخذ الخاصية هذه وأضيفها هون. إيش يعني تي اتش؟ حتعمل لي حدود ما بين الأعمدة. نعمل ريفريش. زي ما إحنا شايفين لأنه هي هدول هم عبارة عن التي اتش. ولو بدي أعمل ما بين الخلايا حاجي أحكي له تي وبرضه أعمل خاصية البوردر. نعمل ريفريش. هلقيت حتعطيني حدود لكل الجدول زي ما إحنا شايفين. طيب هون أخذت كم سطر عندي من الكود؟ أربع أسطر. هدول التي اتش والتي دي أخذوا أربع أسطر. لما أخذنا السي اس اس قلنا في عننا حاجة اسمها الجروب سلكتور. إنه أنا في عندي أكثر من عنصر ماخذين نفس الخاصية بوصل لهم بالجروب سلكتور. إيش يعني جروبين سلكتور؟ اجي هون على التابل أحط كوما اللي هي الفاصلة وأحكي له تي اتش بعدين كوما وتي دي. هذه معناتها إنه التيبل والتي اتش والتي دي بدي أعطيهم بوردر واحد بكسل. يبقى أنا اختصرت من الكود وكتبت كود بطريقة أحسن. وباجي أحذف هذا الكلام. الآن أعمل ريفريش ح يعطيني نفس النتيجة بهذا الشكل. يبقى أنا هيك شغلي تمام. إذا اللي عملته إنه عملت جدول مكون من حدود البوردر في من نوع واحد بكسل من نوع سولد لونه جراي. الآن بدنا ناخذ أشياء حديثة ما حكيناها شي في الجدول. زي مثلاً الجدول بدي أتحكم في الطول والعرض تبعه. فبج بقدر أوصل له إني أنا واصلة أصلاً لليبل. فممكن أجي أحكي له إنه بدي طبعاً أنا هون واصلة للتبلت اتش ولتي دي. فخليني أعمل تاج تيبل لحاله وأحكي له بدي الهاي له الطول مثلاً يكون 100 بكسل. اليث يكون مثلاً 100 بكسل. أنا بدي أتحكم في الطول والعرض تبعون الجدول. الآن أعمل ريفريش. لا ما تغير. ثواني. تمام عشان أنا معطيا ه 100 بكسل 100 بكسل مش مبين كثير. خليني أحكي له الهاي مثلاً 300 بكسل عشان يبين والوي مثلاً يكون 400 بكسل عشان يبين الفرق. نعمل ريفريش. الآن زي ما إحنا شايفين هي البل الطول والعرض تبعه تغير عن طريق خاصية الهاي والو. لو أنا بدي التيبل ياخذ مساحة العرض كاملة فجي أحكي له ه الوث لها 100% فحلا قي إنه التيبل بغطي صفحة الويب كامله زي ما نحنا شايفين بهذا الشكل. هيه 100% الوث له. إذا لو بدي أتحكم فيه بتحكم في خصائص الطول والعرض عن طريق خاصية الهاي والوتس اللي أخذناهم أصلاً إحنا قبل هيك. الآن لو اجيت مثلاً الهاي أنا شايفاه كثير كبير. لو قلت له بدي هاي 100 بكسل والو نخليها 100% نعمل ريفريش نشوف كيف الشكل. تمام بهذا الشكل. هلقيت بصير أي خاصية من خصائص السي اس اس اللي أخذناها قبل هيك أتحكم فيها. كمثال مثلاً أنا هذه حدود التيبل نفسه. هذا البوردر اللي برا عبارة عن حدود التيبل نفسه. لو بدي أعمل مسافات بينه وبين التي اتش نفسها. هذه تعتبر مسافات داخلية لأنه التي اتش داخل التيبل. فبستن خاصية الدين. يبقى باجي هون بقدر أحكي له على التيبل استخدم بادين وأعمل مسافات مثلاً 20 بكسل من فوق ومن تحت وع بكسل من اليمين ومن اليسار. الآن نعمل ريفريش. زي ما إحنا شايفين هذه المسافات وهذه عبارة عن بادين توب وبادين بوتم اللي هي ال بكسل اللي حكيت له إياها. وهذه عبارة عن الفت والرات اللي هي الع بكسل اللي أنا حكيتها. هذه أنا أي استخدمت باد لمين؟ لليبل نفسه. فعملي مسافة ما بين البوردر حدود التبل والكونت المحتوى اللي بداخله. هو هذا التي اتش. طب لو أنا بدي أعمل مسافات بين الخلايا نفسها. فبروح بوصل للخلايا نفسها. هيني وص لها التي اتش والتي دي. وبستخدم عل معلش سوري. وبستخدم عليها خاصية الباد برضه. خليني أدين من كل الاتجاهات مثلا 15 كسل. الآن نعمل ريفريش. زي ما إحنا شايفين صار شكل الجدول أحسن بكثير من قبل. هيني عملت بادين مسافات على التي اتش وعلى التي دي بمقدار 15 بكسل. فهي صار المحتوى في كثير كويس. لو أنا هذا المحتوى نفسه بدي أغيره مثلاً هون أنا شايفاه مش يعني جاي تقريباً من اليسار بدي إياه بالنص. فبخ خاصية التكست الين اللي أخذناها قبل هيك. تكست الين سنتر حتوس لي اياهم. الآن نعمل ريفريش. زي ما إحنا شايفين صار ش شكل الجدول كثير أرتب من قبل. طبعاً أنا هون وصله للتي اتش ولتي دي. لو كنت بدي الأشياء الموجودة داخل التي اتش اللي هي الاي دي والنيم والفون مثلاً بديش اياهم بالنص بدي اياهم يبدوا من اليسار. فجي بوصل للتي اتش نفسه وبحكيله تكست الين ليفت. هلقيت بتصير تطبقوا أي خصائص من الخصائص اللي أخذناها قبل. أعمل ريفريش. آه أنا هون مستخدمة خاصيتين لهم. خليني أحذف هذه. هي ريفريش. تمام. إذا هي التي اتش عمل تكست اللاين بمقدار الفت صار موجود باللفت بطل في السنتر. لو بدي المحتوى يكون في السنتر بوصل له عن طريق تي دي وبحكيله تكست اللاين سنتر. بتصير تتحكموا في الأشياء اللي بدكم إياه لأنكم أنتم عارفين إنه هذا المحتوى اللي هون عبارة عن تي دي. هذول عبارة عن تي اتش. البوردر اللي بره عبارة عن تيبل. فبتصير تتحكموا ف زي ما بدكم. هي صار المحتوى عندي بالنص. لو بدكم تعملوا العكس مثلاً بدي العنوان اللي هون يكون بالنص. بصل للتي اتتش وبقول له تكست اللاين سنتر. وبصل للتي دي وبقول له تكست اللاين ليفت مثلاً أو تكست اللاين سنتر زي ما أنا بدي. مثلاً بدي هذا أنا. آه هيني أوريدي كاتبها. تمام. بدي العنوان اللي هان يكون كله عبارة عن كابيتال. أخذنا قبل هيك خاصية التكست ترانسفورم. فبج على التي اتش وبحكي له ترانسفورم. أخذنا كابيتال بتخلي اياهم كلهم كابيتال. معلش كابيتال أول حرف منهم كابيتال. معلش أبر كيس بستخدم الابر كيس عشان أحولهم كلهم لكابيتال. بهذا الشكل. إذا صار شكل الجدول معي أحسن بكثير من قبل. تعلمنا فيه خاصية الهاي وال. بدي أعمل بادين. بدي أعمل مسافة مثلاً بين الجدول وعنصر ثاني. بستخدم فيها ساعتها المارجن. وبصير أتحكم في هذه الخصائص زي ما بدي.

الآن لو بدي أعمل دمج ما بين صفوف وما بين أعمدة. في عندي خاصية اسمها كول سبان بتعمل دمج للأعمدة وخاصية اسمها رو سبان بتعمل دمج للصفوف. إيش يعني؟ يعني أنا هدول العمودين مثلاً بدي أدمجهم في عمود واحد. فبستن كل سبان. باجي على التي اتش نفسه. باجي هون كـ إتش تي ام ال مثلاً على التي اتش هذه النيم بحكي له كل سبان. وبتاخذ هون قيمة اللي هو قديش عدد الأعمدة اللي أنا بدي أدمجهم. يعني لما أحكي له كل سبان اثنين معناته دمج لي عمودين. الآن أعمل ريفريش. بتم دمج عمودين بهذا الشكل. هي تم دمج عمودين بهذا الشكل. صاروا هذول الاثنين تابعين لهذا العمود. لو أخذت مثلاً الكل سبان هذه وحطيتها هون على التي اتش الأولى وقلت له كل سبان ثلاثة حدم لي ثلاث أعمدة بداخلها. نعمل ريفريش بهذا الشكل. وكثير بنشوف جدول بهذا الشيء إنه عنوان وتحتيه بصير دمج لأكثر من عمود. فوين العمود اللي بدي أدمج عنده بستخدم معه الكسبان وبعطيه رقم بعبر قديش عدد الأعمدة اللي أنا بدي أدمجهم. بهذا الشكل. لو أنا بدي أدمج صفوف بستخدم خاصية الرو سبان عشان أعمل دمج ما بين صفوف. رو سبان. أنا بحكي بدي أدمج ما بين صفوف. مثلاً بدي أدمج الصف هذا مع الصف هذا. فبروح للتي دي نفسها. بروح للتي دي نفسها وبعمل لها رو سبان. فبج هون على التي دي وبحكي له رو سبان. برضه بتاخذ قديش عدد القيم اللي هي عبارة عن عدد الصفوف اللي أنا بدي أدمجهم. مثلاً روس بان اثنين. ف حتعمل لي دمج لصفين. نعمل ريفريش بهذا الشكل. هي رقم واحد هوية صار ماخذ صفين بهذا الشكل. ف أنا هيك بقدر أتحكم في الجدول زي ما بدي. كل سبان بتدمج لي أعمدة. روس بان تدمج لي صفوف. وأعرف وين أحطهم. دمج الصفوف بكون عندي التي دي. دمج الأعمدة بكون عبارة عن التي اتش. وبياخذ رقم بعبر عن قديش عدد الأعمدة اللي بدي أدمجها وقديش عدد الصفوف اللي بدي أدمجها. هذا كان بشكل عام عن التيبل وايش الخصائص اللي بنستخدمها فيه.

الآن بننتقل لموضوع الفورم. إحنا أخذنا كان لقاء مخصص للفورم في الاتش تي ام ال. الآن بناخذ تطبيق على الفورم ونعمل برضه عليها خصائص في السي اس اس. فحذف كل شي عندي في الكود عشان نبدأ نعمل الفورم بشكل صحيح. بس طبعاً حني اليونفيرسال لأنه هذه قلنا شي ثابت عندي في أي صفحة ويب. الآن بدنا نطبق الفورم البسيط اللي قدامكم هون. تمام؟ بدنا نعمل هذا الفورم. فحاج هون أول شي في التايتل أحكي له مثلاً اسمه فورم فورم بهذا الشكل. أول حاجة عشان أعمل تحليل لهذا الفورم زي ما إحنا شايفين مبين معنا إنه البدي عندي صفحة الويب نفسها ماخذه باك جراوند كر صح ولا لا؟ فهذه أول حاجة المفروض أعملها. اجي هان كستايل على البدي لأنه إحنا قلنا إنه البدي بتمثل لي صفحة الويب كاملة. فحع طيها باك جراوند ر لون جراي. بعد ما أختار الجراي بختار درجة غامقة من ه. مثلاً نختار هذه الدرجة. الآن أعمل ريفريش. زي ما إحنا شايفين هي هذه أول حاجة عملناها إنه البض أعطيناه باك جراوند ك. الآن كتحليل اتش تي ام ال إحنا قلنا إنه أي صفحة مكونة من هيدر ومين وفوتر. فش عندي هان هيدر ولا عندي فوتر. يبقى حيكون عندي في مين. فحاج هان كاتش تي ام ال أحكي له القسم الرئيسي عندي مين. بقدر بداخل المين أكتب سكشن. لكن أنا الصفحة عندي ما فيش فيها مجموعة من الأق. فخلص حيكون عندي بس مين. لو حابين تكتبوا سكشن ما فيش مشكلة. بس أنا مباشرة حبدا في موضوع الف. هلقيت هذه المين كتحليل اتش تي ام ال لو بدنا نيجي نحللها حنحكي أول حاجة في عندي صورة. بعدين في عندي نصوص اتش 1 مثلاً اتش 2 اتش 3. بعدين في عندي مجموعة من الانبوت. لكن نركز هون إنه هون مكتوب إيميل، مكتوب جيتهاب، مكتوب تويتر، مكتوب انستغرام. هذول عبارة عن روابط صح ولا لا؟ إيه. فهذه عبارة عن عناصر أو قائمة لمجموعة من روابط السوشيال ميديا. فالصح إني أحطها داخل يو ال. بعدين في ال اي. بعدين في تاج ال. وهذا المحتوى اللي موجود عننا هلقيت حنعمله. فحب أني أحط إيج. بعدين أحط النصوص هذه في أنواع الهيدين أو البي زي ما بدي. بعدين نشتغل في هدول. إحنا بنحكي كـ إشي ام ال. فاول حاجة إيش حعمله؟ حكينا إنه عندي إيج. حختار أي صورة من الصور اللي موجودين في مجلد الإمز. مثلاً هذه الصورة. مش مشكلة. بعد الإمج حكينا في عندي هذا العنوان. بما إنه اسمي وعنوان فبحط داخل اتش 1 مثلاً. تمام؟ اكتب فيه الاسم. بعدين في عندي بالستين وزا نحطها مثلاً ا 2. خليني آخذهم كوبي بست بدل ما أكتب. أحطهم داخل اتش 2 بهذا الشكل. بعدين في عندي المسمى الوظيفي مثلاً فرونت انفلوب. أحطها داخل بي بي اتش 4 أو أش 5 زي ما بدنا. هذا كان القسم الأول من الفورم اللي موجود معاي. فالصح إني بما إني حتحت فيه الصح إني أروح أحطه داخل ديف. فمسك هذا وأحطه داخل اللي هو الصورة مع الاتش 1 تاتش 2 والبي أحطهم داخل ديف. وهذا الف أسهل على حالي وأعطيه اسم كلاس عشان عندي أتحكم في الخصائص زي ما بدي. نسمي مثلاً الكلاس بروفايل انفورميشن مثلاً بروفايل انفو. خليه هذا اسم الكلاس. إذا عملت ديف حطيت فيها الصورة مع النصوص اللي موجودة معاي. الآن الجزء الثاني خلصت من هذا الجزء. الث اني كان عبارة عن الروابط اللي حكيناها. فحط داخل يو ال بداخل اليو ال ال اي. بعدين تاج ال. وعندي الكلام اللي موجود ه اللي هو إيميل، جيتهاب، تويتر. فح كتبهم على السريع. باجي هون بحكي له إيميل. ونفسها بدي أكررها ثلاث مرات. المرة الأولى للجيت هب. والمرة الثانية انستغرام مثلاً. وبعدين والمفترض بداخل الاتش رف أحط مسار الإيميل تبعي. أحطها رابط الجيت هاب تبعي. رابط الانستغرام تبعي. رابط التويتر تبعي. هلا هول كلهم بتروحوا على صفحتكم السوشيال ميديا وبتاخذ الرابط تبعها. بالنسبة للإيميل لو أنا بدي أحط رابط لما أضغط عليه يوديني على إيميل هذا الشخص. هذه كثير بتكون في المواقع إنه بضغط على كلمة إيميل ولا على أيقونة إيميل ووديني على الإيميل الخاص بهذا الموقع. بستخدم حاجة اسمها ميل تو. بستخدم حاجة اسمها ميل تو. بكتبها بهذا الشكل وبحط نقطتين أو كولون نقطتين وبكتب فيها اسم الإيميل اللي أنا بدي انتقل عليه. حط إيميلي على السريع. هذا إيش معناته؟ إنه لما أضغط على الإيميل وديني على الإيميل هذا. فلما أنا بدي انتقل على إيميل بس أستخدم ميل تو بداخل الاتش رف بكتب ميل تو وبحط نقطتين وبكتب فيها اسم الإيميل اللي بدي إياه ينتقل له. رابط الجيت هاب بحطه. رابط الانستغرام بحطه. رابط التويتر بحطه. وهي نهاية اليو ال. الآن نعمل ريفريش ونشوف إيش اللي صار. طبعاً هذه الصورة مش مشكلة حجمها كبير. عندنا بنتحكم فيها. هي اللي صار إنه هي اتش 1 وهي اتش ت وهي البي وهي مجموعة الروابط. لحتى الآن كل شغلنا عبارة عن اتش تي ام ال. طيب بنيجي نتطلع هون في التصميم. إحنا اللي عملناه قلنا عملنا ديف بداخل المين وعملنا مين نفسها. فيفترض أتحكم في المين اللي هي هذه اللون الرمادي هذا. هذا عبارة عن المين اللي موجود فيه كل حاجة. فحصل للمين كستايل في السي اس اس. وهون ترتيب الأكواد مهم إنه أبدأ شي شي. الشيء الرئيسي عندي مين. بطلع المين ماخذه دث معين عرض معين وماخذه هاي وماخذه باك جراوند ر لون خلفية ومعمول لها شوية بوردر ريديس برضه كمان جايه بالنص. فبرضه بوسطها. فحن شغل هذا الشغل. إذا حاجي على المين أعطيها دث مثلاً بمقدار خلي الوث لها. إذا بتلاحظوا هون الوث إيش ماله جاي كل الصفحة معطيتها 100 بكسل 200 بكسل. فحاجي أحكي له الوث لها 100% عشان تاخذ كل الصفحة. هذا الود العرض استني أنا إيش قلت؟ ال 100% لا أنا أنا قصدي عن الهاي. خليني أعطيها هاي 100% إنه ياخذ كل الصفحة. وأعطيها د مثلاً 400 كسل 500 بكسل عشان تبين معاي. بدي أعطيها باك جراوند كر كان لون الجراي الرمادي الفاتح. فممكن أجي أختار من هون درجة رما. الآن أعمل ريفريش ونشوف إيش صار معي. تمام شكل الف اللي ظهرت معاي ب وهاي معينين وهي باك جراوند كر. طبعاً الصورة ل سيبكم منها ح نتحكم لأنه في الصورة لحالها. حكينا كمان هذه الدف كانت ماخذه شوية بوردر ريس. فبرضه ممكن المين أعطيها بوردر مش الف عفوا هي المين بوردر ريس كان شوية خليها سب كسل مثلاً سب كسل من كل الاتجاهات. هذا بالنسبة لمين للمين عشان تبين معاي الأمور. أنا بدي أتحكم بالاشياء اللي داخل المين. هذه المين حكينا عشان أتحكم ب بدي أدخل للاشياء اللي جوا. الأشياء اللي جوا إحنا إحنا عملنا ديف مخصص للمحتوى وديف مخصص ل أو لا ما عملنا ديف مخصص لليو ال. حعملنا القوائم بداخل يو ال. فحاج أوصل للديف هذا اللي هو البروفايل انفو. بوصله عن طريق بما إنه ماخذ الكلاس. فالوصول الصحيح لاله إني أحكي له دوت اسم الكلاس اللي هو بروفايل انفو. عندنا حنشوف إيش ممكن أعطيها خصائص. البروفايل انفو اللي هي مين بتمثل؟ البروفايل انفو اللي هم هدول الصورة مع الكونتي الموجودين. هم البروفايل انفو. بعد البروفايل انفو في عندي كان بداخلهم إيمج. كان في عندي إيمج. فبدي أوصل للاج هذه عن طريق أحكي له دوت بروفايل انفو الامج اللي موجودة بداخله. أو في ناس ثانية ح تعطي الامج اسم كلاس وتوصل لها في اسم الكلاس. خلينا إحنا هيك نوصل لها إنه اسم الكلاس الامج اللي موجود. أول شي بدي أعمل بدي أصغر حجم الامج لأنها كثير كبيرة. فحع طيها و مثلا 70 بكسل الود. وطبعاً كان شكلها دائرة. إذا بتلاحظوا كان شكلها دائرة. يبقى لازم الوث والهاي يكونوا نفس الحاجة. فحط هاي 70 بكسل وبوردر ريديس 50% عشان تطلع معي شكل دائرة. الآن أعمل ريفريش. زي ما إحنا شايفين بدأت الأمور تكون أحسن. هي شكل ال حتى كثير كبيرة. فخلي الود والهاي 50 50 تكون الأمور أحسن. ريفريش بهذا الشكل. تمام. إذا هذا اللون الرمادي الغامق البدي. اللون الرمادي الفحي اللي هو المين. هلا شغلي على هذه الجزئية اللي هي جزئية الصورة مع كونتنت اللي حطيناها داخل بروفايل انفو. هلقيت أنا لو بدي أتحكم في هذه الأشياء. عننا خصائص البوزيشن عشان أتحكم فيها. لكن لسه ما أخذناهم. حناخد لقدام. بس أول حاجة ممكن أعملها إنه هذا المين أعطيه مارجن أو أوتو. ممكن أعطيه مارجن أو أوتو عشان يتوسط. مارجن أو أوتو. أعمل ريفريش. زي ما إحنا شايفين ها بدأت شوية الأمور تتواصل. والوي أنا شايفاه كثير كبير. فخليه على قد 400 بكسل الوث. فرش. ها بدأت الأمور شوية أحسن. ممكن أعطيه بادين من فوق برضه بادين توب عشان كثير ملزق في بعض. فخليني أحكيله بادب مثلاً 40 بكسل وصفر. هو من فوق ومن تحت 40 بكسل وصفر من اليمين ومن اليسار. هما البا. وأعطيه كمان مارجن عشان كثير ملزق البوردر نفسه ملزق في المحتوى. فبرضه ممكن أعطيه مارجن توب على قد مار. الآن أعمل ريفريش. آه إن ثواني. أنا معطيه مارجن أو أوتو. ه معطيه مارجن أو أوتو للوسيط. معطيها مارجن أو أوتو لتوسيط هذه. بدي أنزلها لتحت. ممكن أستخدم معها قلت له مارجن أو أوتو هان عشان أواسط هان. هي الصح بس عشان أنا إحنا صراحة أنا ماشية معكم ستيب باي ستيب. الصح ه إنّي أستخدم معها بوزيشن عشان أوسطها. يعني لو أنا بدي أشتغل شغل صح ويطلع نفس الكلام الموجود. المفروض أستخدم هان بوزيشن. بس عشان إحنا ما أخذنا البوزيشن. اللبس اللي صار إنه أنا بدي أعطيه مارجن أو أوتو للتوسط. وبنفس الوقت بدي أعطيه مارجن توب من فوق عشان يطلع لي مسافة. ف أنا لو بدي أحرك صح المفروض أحكي له هون بوزيشن أبوت. حناخد البوزيشن واوسطها عن طريق بدل ما أحكيله مارجن أو اوسطها عن طريق إني أحكيله توب 50% من فوق 50% ومن اليسار لفت 50%. هذا البوزيشن حناخد لقدام. بعدين أحكي له ترانسفورم برضه حناخد لقدام ترانزليت عشان يتوسط معاي سالب 50% وسالب 50%. وهذا المين بيتحرك بالنسبة للديف اللي موجود هون. هو البروفايل انفو. فيفترض البروفايل انفو نفسها أعطيها بوزيشن رييف. البوزيشن أشرحها كمان أكم من اللقاء. فحت فهموا الأشياء اللي أنا بكتبها. نعمل ريفريش. الآن بدأت الأمور شوية تكون أحسن. هلا إيش اللي عملته أنا؟ إنه المين نفسها بدل ما حركتها بمارجن أو أوتو عشان توسط لي العناصر. حكيت له بوزيشن أبسوليوت وتوب 50% من فوق 50% ولفت 50% وترانسفورمرزبرايم تبعها أو لعنصر ثاني تابع لها. فال البروفايل انفو حركتهم اللي هم العناصر الموجودين بداخلهم. قلت لهم بوزيشن ريلاتيف. بوزيشن ريلاتيف عشان ما يتحركوا معايا. وحركت هذه بوزيشن أبسوت. موضوع البوزيشن حنشرح إن شاء الله لقدام. مش هلقيت. بس خلينا هلقيت نركز إنه إحنا بدنا نعمل فورم يكون قريب من هذا الشكل. بعد هيك بقدر أتحكم في الأشياء اللي موجودة هون اللي هي الاتش 1 والبي. فممكن نتحكم فيهم كيف؟ أوصل للاتش 1. ها الاتش 1 عبارة عن دوت بروفايل انفو. الاتش 1 اللي موجودة فيه. فمشي بالترتيب د بروفايل انفو الاتش اللي كانت موجودة فيه. الاتش إيش ماخذه خصائص؟ ماخذه لون معين وممكن أعطيه فونت سايز معين وأشتغل الخصائص اللي بدي. مثلاً خليني أحكيله فونت سايز بمقدار 20 كسل والر اللون نختار لون مثلاً هذا اللون. وأجي من هون أغير الدرجة لهذا اللون. تمام؟ هذا بالنسبة للاتش 1. وأعمل شوية خصائص على الاتش 2 اللي هي البستاين وغزا كانت ماخذه خصائص. ممكن برضه الفونت سايز بس يكون أصغر شوية. والمسافات ما بين هذه وهذه أعطيها مارجن بوتوم. اللي هو من تحت. فممكن هون الاتش 1 يعني شوف الشكل كيف صار عندي هون يعني ملزقين ببعض. بين الاتش 1 تاتش 2 ممكن أعمل مارجن بوتوم بمقدار صغير. مارجن بوتوم مثلاً على قد 12 بكسل. ه وهون بالاتش 2 أعطيه برضه مارجن بوتوم عشان أعمل مسافات بين كل نص والثاني. مارجن بوتوم مثلاً 20 بكسل خليها. وممكن الاتش ت أغير شوية الفون سايز يكون على قد 15 لأنه كان حجمه أصغر من اللي موجود في الاتش. الآن أعمل ريفريش. زي ما إحنا شايفين ها بدأت الأمور شوية تحسن. تتحسن. هذا اللي صار هو عبارة عن المارجن بوتوم اللي أنا أعطيته إياه. بعد هيك كان عندي البي اللي هي هذه الفرونت ان ديفلوبر. برضه كانت ماخذه خصائص. فحاج عليها ه دوت بروفايل انفو البي اللي موجودة. ممكن أعطيها فونت سايز 14 كسل. فون سايز 14 بكسل. وإذا بتلاحظوا إيش كمان كانت ماخذه خصائص؟ ماخذه إنه شكلها مائل. وأخذنا كيف نعمل الشكل المائل عن طريق خاصية الفونت ستايل. فبح كي له هون فونت ستايل اتالك. أو حدا ثاني حيروح البي نفسه يحطه داخل تاج ال أو داخل تاج ال إم عشان يعمله مائل. بس إحنا بما إنه واصلين للبي نفسه فبستن ستايل اتالك عشان تعطيني هذا الكلام. الآن أعمل ريفريش. نشوف إيش صار. تما تمام. الأمور لحتى الآن كثير ممتازة. قدرت هيني أتحكم فيهم. موضوع التوسيط سهل. بحكيله تكست اللاين سنتر عشان أواسط أي نص. بحكيله هون تكست اللاين سنتر عشان أواسط النصوص. وأخذها نفسها هون وباتش 1 لأنه زي ما إحنا شايفين كانوا موجودين في النص بهذا الشكل. تمام لاين سنتر عشان أوسطهم نفسهم. بعد هيك نشتغل على اللينكات اللي موجودين هون اللي حطيناهم داخل اليو ال. فاول حاجة المفروض أعملها إني أنا أوصل لليو ال. كيف أوصل لها؟ بقول له المين اليو ال الموجودة فيها. أو ممكن أعطي اليو ال نفسها كلاس وأريح حالي. مثلاً أعطيه كلاس اسميه بروفايل لينكس. روابط البروفايل بروفايل لينكس. تمام؟ وأوصل لها عن طريق دوت اسم الكلاس. هذه مين؟ اليو ال نفسها. البروفايل لينكس اللي هي اليو ال نفسها. إيش ممكن نعطيها خصائص؟ اليو ال نفسها أول حاجة هدول النقاط اللي موجودين هون. أحكيله ليست ستايل نون عشان أحذفهم. ليست ستايل نون عشان يروحوا النقاط. أعمل ريفريش. تمام. هي أول شي راحوا النقاط موج. الآن بدي أدخل على موجودة بالبروفايل بالبروفايل بروفايل لين اي اللي موجودة. اي اللي موجودة. إيش ممكن نعطيها خصائص؟ أول حاجة أي أنا شايفه في بينهم مارجن وفي بينهم بوردر صح ولا لا؟ أول شي حعمله هذا البوردر موجود على أي. بدي أعطيهم بوردر. بوردر أحكيله مقداره واحد بكسل سوليد لون مثلاً بلاك أسود بهذا الشكل. فيفترض كل ال اي من اللي موجودين معاي صارت معاي بهذا الشكل. إنه عملت لها بوردر واحد بكسل سلد بلاك. والآن أعمل مسافات بينهم اللي هو مارجن بوتوم. أعمل مسافات بينهم مارجن بوتوم عشان ياخذ مارجن بس من تحت. مارجن بوتوم مثلاً بمقدار 15 بكسل. أعمل ريفريش ونشوف إيش اللي صار. بهذا الشكل. ممتاز لحتى الآن الأمور كثير ممتازة. طيب الو تبع المين صار أصغر من الأشياء اللي موجودة هون. فكيف ممكن أحل هذه الإشكالية؟ نيجي هون على الميل نفسه. أنا الميل نفسه أعطيته هاي 100% وأعطيته و 400 بكسل. فممكن أحل هذا الموضوع عن طري إنه هاي 100% ما كفت معاي. ممكن أحكي له هون ماكس و اللي هو أعلى قيمة للماكس خليها 400 بكسل. تمام؟ الماكس أعلى قيمة لها تكون 400 بكسل. ونخلي الود نفسه 100% نشوف إيش اللي حيصير. فرش. بهذا الشكل. تمام هيك الأمور كثير ممتازة. هلا بال أول إيش كان؟ كان ال يعني صار عندي لما عملت مارجن صار عندي مسافات. صار الانبوت الموجودين أو اللينكات اللي ماخذين البوردر هذا طلعوا برا المين. مساحتهم خلصوا. فرت إيش عملت؟ قلت له الث العرض خليه 100% بهذا الشكل. واعطيته ماكس دث 400 بكسل. إيش يعني ماكس بت 400 بكسل؟ يعني الحد الأعلى للوت خليه 400 بكسل. فهيك صارت أمور كثير أحسن من قبل. الآن بقدر أتحكم في هدول. الشكل عندي الوس مثلاً شايفاه كثير العرض تبعه. فبقدر إني برضه أتحكم فيه. مثلاً أخليه 300 بكسل لو شايفينه أنتم كثير كبير. ريفريش. هي بهذا الشكل. هيك ها صارت الأمور شوية تكون أحسن. الآن هدول الروابط اللي موجودين عبارة عن تاج ال. فبقدر أوصل لهم عن طريق إني أحكي له هذا الكلام. ترتيب الأكواد كثير مهم. ال اي. ال اللي موجودة فيه. هذه عبارة عن ال اللي موجودة في ال اي اللي موجودة في اليو. إيش ممكن أعطيها خصائص؟ ال اي نفسها. أول حاجة بدي أرفع الخط اللي موجود تحت عن طريق تك ديكوريشن نون. حاجي أحكيله هون تكست ديكوريشن نون. تمام عشان يرفعلي اياهم. وإيش كمان كانوا ماخذين خصائص؟ كانوا ماخذين إنه جايين في النص. ال اي فبح كي له تكست اللاين سنتر عشان يشف النص. تكست اللاين سنتر. أعمل ريفريش. بدأت الأمور كثير تكون أحسن. طيب في عندي مسافات هون زي ما إحنا شايفين ومسافات هان على ال اي نفسه. فهذه عبارة عن بادين. مسافات داخلية. فبستن خاصية الدين. يبقى باجي هون بقدر أحكي له بادين مثلاً بمقدار 15 بكسل. يعني بادين 15 بكسل لكل الاتجاهات. ريفريش. بهذا الشكل. هي أعطاني 15 بكسل. ممكن نكبرها شوية. خليها 18 بكسل عشان يكون الشكل أكبر شوية. تمام. هي أعطيناه الدين. ممكن أعطيه ر اللون كان عندي هون لون تقريباً رمادي. فبستن جراي مثلاً. تمام. وفريش بهذا الشكل. بدي أغمق شوية. مثلاً ممكن أغمقه هون. وممكن أعطيه خاصية فون عشان يكبر شوية الخط بمقدار 18 بكسل. الفونت سايز. فرش. هيك الأمور كثير رائعة أنا شايفاها. كمان إيش ممكن كان ماخذ خصائص هون؟ ممكن أعمل شوية بوردر ريديس عليه. على ال اي نفسه. أعطيه بوردر ريديس بمقدار صغير مثلاً سب كسل. بوردر ريديس الهم سب كسل. بهذا الشكل. تمام. هذا شكل فورم اللي هون. أي ممكن نعمل أشياء تكون قريبة من شكل الفورم. الامج نفسها ما تحكمنا فيها. الامج نفسها ممكن كمان أتحكم فيها. بس إحنا المشكلة ما أخذنا خاصية البوزيشن عشان إنه نحكي في هذا الموضوع. بس الا الامج نفسها ممكن أتحكم فيها وأعطيها خاصية البوزيشن وأحركها زي ما أنتم شايفين هون الصورة جايه نص. فلما ناخذ البوزيشن حنف كيف هذا الشي بنعمله. بس أنا أطبق لكم إياه ه على السريع. وين الامج اللي هي هون. بقدر أعطيها خاصية بوزيشن عشان أتحكم فيها. أنا بدي أتحكم في الصورة نفسها. فبحيث عشان تيجي بالنص بالضبط. من جهة اليسار 50% وكمان أحكي له الترانس ترانسفورم اكس. لأنها بس على محور الاكس هي جايه سالب 50%. الآن نشوف كيف شكل الصورة معاي. بهذا الشكل. ها الصورة زي ما أنتم شايفين اجت بالنص. لآني أعطيتها البوزيشن لها ريلاتيف. وأعطيتها ففت 50%. إيش يعني ففت 50%؟ بدا يحسب منها 50% بالضبط. فتيجي معاي في النص. في عننا كمان خاصية الصور قلت إنه بنحكي له اوبجكت كفر. أي صورة موجودة عندي بنعطيه عفوا اوبجكت فيت قيمة كفر عشان الصورة تكون جودتها عالية وتكون أمورها أحسن. لما عملت اوبجكت فيت كثير تغيرت معاي. اوبجكت فيت كفر. ممكن كمان أعطيه مارجن عشان الصورة تنزل شوي وتبين معاي. أعطيه مارجن بمقدار مثلاً 25 كسل. الآن أعمل ريفريش. لا مار هذه. ف نرفعها بدون مارجن. خليها هيك أحسن. بديش أعمل مسافات بينها وبين الصورة. الآن هون الصورة بطلع لفوق مش مبينة كلها معاي. فممكن المين كله نفسه أعمله مارجن توب من فوق عشان ينزل. فحاج هان للمين نفسها وأحكيله مارجن توب مثلاً 40 بكسل عشان تبين معاي. فريش. بهذا الشكل. هيك صارت الأمور أحسن عندي هون. هدول ملزقين مع بعض. ليش ملزقين مع بعض؟ لو جينا هون على المين نفسه. أنا إيش حكي له؟ بادين 40 بكسل وصفر. فإش بيعتبر إنه من فوق ومن تحت 40 بكسل ومن اليمين ومن اليسار صفر. ف أنا ممكن أحذف الصفر وأخليه 40 بكسل من كل الاتجاهات. هيك صارت الأمور أحسن بكثير. إذا. قدرت أعمل هذا فورم قريب كثير من هذا الفورم اللي موجود معي هون. طبعاً هذا عبارة عن شكل فورم بسيط أنا عملته. لأنه إحنا في الاتش تي ام ال أخذنا الفورم على أصول الليبل والدف والراديو بوتون وكل هذه الأمور. بس الفكرة كانت إنه نعمل شكل فورم بسيط ونطبق عليه شوية من خصائص السي اس اس اللي أخذناهم. موضوع البوزيشن ما تركزوا فيها حالياً كثير. بس أنا عشان يطلع الشكل قريب من الشكل الموجود معي هون. ولكن حيكون في عننا لقاء مخصص لموضوع البوزيشن وتفهموا فيه. إذا لقانا كان لليوم اللي هو موضوع الليست والتيبل والفورم. ونركز جداً على موضوع الهيدر اللي حكينا فيه في اللقاء. لأنه كثير مهم. ننهي لقائنا لهذا اليوم ويعطيكم العافية.