Transcript for:

طيب تعالوا دلوقتي لما نبدا رحلتنا في تعلم الاتش تي ام ال انت دلوقتي شخص بتبدا رحلتك في تعلم شيء جديد عليك فعلشان تفهم الشيء ده المفروض ان انت تكون فاهم الشيء ده بيعني ايه بالظبط فيعني ايه كلمه اتش تي ام ال كلمه اش تي ام ال هي اختصار لكلمه هايبر تكست مارك اب لانجويج وما يهمناش الاسم ده في حاجه اطلاقا ومش هيفيدنا ان انت تعرفه او ما تعرفوش كل اللي يفيدك وكل اللي يهمك هو ان انت تفهم الاتش تي ام ال دي بتعمل ايه بالظبط اولا كده الاتش تي ام ال مش لغه برمجه هي لغه بتبني هيكل الموقع واحد هيقول لي يا عبد الرحمن انت قصدك انها بتبني الموقع هقول لك لا انا اقصد الكلمه بعينها الاتش تي ام ال بتبني هيكل الموقع بتاعك الموضوع عامل زي واحد بيبني مبنى او بيت او عماره او ايا يكن فالشخص ده اول حاجه بيعملها ان هو بيبني هيكل المبنى بتاعه والخطوه الثانيه بعد كده ان هو بيلون المبنى بيحط ابواب شبابيك كل الكلام ده نفس الفكره دي بالظبط موجوده عندنا في الويب فانت علشان تبني موقع اول حاجه بتعملها ان انت بتبني هيكل الموقع من خلال لغه اتش تي ام ال وعلشان تنسق الهيكل ده وتضيف له الوان وصور وفيديوهات وكل التنسيقات دي انت بتعملها من خلال لغه ثانيه اسمها سي اس اس فانت علشان تبني موقع بتبني هيكله بالاتش تي ام ال وبتضيفي له تنسيقات بلغه ثانيه اسمها سي اس اس هتلاقي لها برده ان شاء الله دوره ثانيه بعد ما تخلص دوره الاتش تي ام ال وطالما جبنا سيره المواقع يبقى احنا بنتكلم عن مجال الويب مجال الويب ده مجال انشاء المواقع او مجال برمجه المواقع ولو انت عاوز تتخصص في المجال ده يبقى لازم تفهم ان مجال الويب منقسم عندك ل تخصصين فرونت اند او تصميم المواقع وباك اند اللي هو برمجه المواقع وسواء انت عاوز تكون فرونت ان ديفلوبر او باك اند ديفلوبر يبقى لازم تبدا بالاتش تي ام ال الاتش تي ام ال حرفيا هي هي اول خطوه ليك في مجال الويب طيب انا هبدا الشرح ان شاء الله معاكم بشكل بسيط يفهمه كل الناس اتش تي ام ال ببساطه هي مجموعه من الاكواد احنا بنكتبه علشان يبنوا هيكل للموقع بتاعنا طيب الاكواد دي بنكتبها فين الاكواد دي بنكتبها في محرر اكواد ومش هيفرق نوع محرر الاكواد اللي احنا بنكتب في الاكواد دي ممكن تستخدم نوت باد ممكن تستخدم الاتوم ممكن تستخدم الفيجوال الستوديو كود ممكن تستخدم اللي انت عاوزه انا هستخدم في الشرح بتاعنا ده ان شاء الله الفيجوال استوديو كود وعلشان تحمله هتروح عندك في اي متصفح وهتكتب عندك في اس كود بالشكل اللي قدامك ده وهتضغط هنا على انتر وهتروح عندك على اللينك اللي قدامك ده تمام وتقدر ان انت تيجي عندك هنا وتحمل عندك الفيجوال استوديو كود على حسب النظام اللي انت فاتح من خلاله انا فاتح من الماك فهو عارف ان انا فاتح من الماك لو انت فاتح من الويندوز هو هيعرف ان انت فاتح من الويندوز و هيدي لك النسخه بتاعه الويندوز او تقدر ان انت تيجي عندك هنا وتختار النسخه اللي انت عاوزها سواء نسخه الماك او الويندوز او اللينكس او اللي انت عاوزه انا دلوقتي مثلا هاجي هنا وهضطر وهنتر شويه لحد ما يعمل داونلود اهو بالمنظر اللي قدامك ده هضغط هنا على سيف وبكده هو بيعمل هنا اهو داون لود بعد ما بنحمل الفي اس كود بنروح علشان نفتحه انا دلوقتي محتاج ان انا اعمل موقع فاول خطوه انا بعملها هو ان انا بعمل ملفات الموقع بتاعي ملفات الموقع دي زي ملفات الاتش تي ام ال السي اس اس الجافا سكريبت الصور الفيديوهات وغيره من ملفات الموقع بتاعك وعلشان تعمل كده انت بتروح عندك هنا وبتضغط عندك هنا على اوبن اللي من خلالها انت بتفتح الفولدر بتاع الموقع بتاعك ولو الاوبن دي ما كانتش موجوده او الصفحه دي عامه ما كانتش ظاهره عندك يعني مثلا كانت بالشكل ده فعادي ما عندكش اي مشكله ممكن ان انت تروح عندك هنا على فايل وتختار عندك هنا اوبن فولدر الثنين هيوصلك لنفس الفكره تمام طيب انا دلوقتي هضغط هنا على اوبن فولدر علشان اروح افتح الفولدر اللي انا عاوزه في المكان اللي انت عاوزه انا هختار عندك هنا الديسك توب اختار انت المكان اللي انت عاوزه في الديسك توب انا م عنديش هنا غير فولدر واحد بس اسمه عبد الرحمن فانا هقوللك لا انا محتاج ان انا اعمل فولدر تاني للموقع بتاعي فه دغط هنا على نيو فولدر سمي انت الفولدر ده بالاسم اللي انت عاوزه انا هسميه مثلا هنا فرونت تمام سميه انت بالاسم اللي انت عاوزه ممكن ان انت تسميه عندك باسم الموقع بتاعك وهضطر فانا هنا عندي فولدرين فولدر عبد الرحمن اللي كان موجود قبل كده وفولدر الفرونت اند اللي انا لسه عامله فحد وهضطر لي الفولدر ده جوه الفي اس كود هتلاقي عندك هنا اسم الفولدر ده موجود عندك هنا في المكان ده ولو رحت عندك هنا في الديسك توب هلاقي عندي هنا فولدرين فولدر عبد الرحمن اهو قدامك وفولدر فرونت اند اللي احنا لسه عاملينه من شويه لو انا فتحته مش هلاقي عندك هنا جوه الفولدر ده اي حاجه فتعال دلوقتي لما نبدا ان احنا ننشئ ملفات الموقع بتاعنا جوه الفولدر ده انا دلوقتي محتاج ان انا اعمل ملف اتش تي ام ال طيب دلوقتي انا محتاج ان انا اعمل ملف اش تي ام ال جوه الفولدر بتاعي انا قلتلك ان المكان ده هو الفولدر بتاعك فعلشان تعمل فايل في المكان ده بتروح عندك في اي مكان جوه المربع اللي قدامك ده وبتدوس عندك كليك يمين ثم نيو فايل او ممكن ان انت تختار عندك من الاختصارات اللي عندك هنا اختصار عندك هنا اسمه نيو فايل لو ضغطت لك عليه هيعمل لك هنا نيو فايل ممكن ان انت تسميه بالاسم اللي انت عاوزه انا هسميه اندكس سميه انت بالاسم اللي انت عاوزه ولكن لازم يكون بامتداد اتش تي ام ال يعني لازم ان انت تكتب فيه هنا دوت اتش تي ام ال علشان تعرفني ان ده ملف اش تي ام ال لو ضغطت لك هنا على انتر فانا دلوقتي عملت لك هنا الملف ده ولو انا رحت لك هنا وفتحت لك الفولدر بتاعنا هلاقي دلوقتي ان الفولدر ده اصبح في عندك هنا ملف اسمه اندكس دوت اش تي ام ال طيب دلوقتي انا لو قررت ان انا امسح عندك الفايل ده من الفولدر عندك هنا هتلاقيه برض اتمسح عندك هنا من الفي اس كود فتعال دلوقتي لما نمسح عندنا الفايل ده من المكان ده هتلاقيه برض ان هو اتمسح عندك هنا من الفي اس كود ولو انا رجعته عندك هنا هتلاقيه برض رجع عندك هنا في الفي اس كود تمام تمام جدا جدا طب دلوقتي الفايل ده انا لو كتبت فيه هنا اي كلمه اي كلمه او اي كود او ايا يكن دلوقتي انا محتاج ان انا اشوف نتيجه الشغل اللي انا هعمله هنا في الملف ده علشان تشوف النتيجه بتاعته بتروح عندك هنا في الفولدر بتاعك الفولدر اللي انت كنت عامله عندك هنا تمام وبتضغط عندك هنا دبل كليك على الفايل بتاعك ففتح لك دلوقتي الفايل بتاعك فين في البراوزر او المتصفح بتاعك اللي فتح قدامك ده هو نتيجه الشغل بتاعك يعني دي النتيجه النهائيه اللي المفروض ان هي تظهر عندك بعد ما بتكتب الاكواد بتاعتك تاني كده علشان نكون فاهمين دلوقتي دلوقتي مع بعض انا دلوقتي في الفي اس كود عملت عندك هنا ملف اتش تي ام ال الملف ده انا هبدا دلوقتي ان انا اكتب فيه عندك هنا كود وهنبدا دلوقتي ان احنا نشتغل عندنا في الملف ده نتيجه الشغل بتاعتنا دي بنبدا ان احنا نشوفها عندنا في البراوزر ده بوصل له ازاي بوصل له ببساطه بان انا بفتح عندك الفولدر ده وبضغط هنا دبل كليك على الملف بتاعي فبيح لك دلوقتي نتيجه الملف ده في المتصفح بتاعك تيجي نشوف تعال دلوقتي لما نشوف دلوقتي مع بعض انا دلوقتي كتبت لك هنا كلمه تست الكلمه دي انا محتاج ان انا اشوفها عندي هنا في البراوزر ده محتاج ان انا اشوفها عندي هنا في المكان ده فعلشان اشوفها المفروض ان انا احفظ عندك الكلام ده اي كود او اي حاجه انت بتبدا ان انت تعملها المفروض ان انت تحفظها وعلشان احفظها بضغط عندك على كنترول اس او كوماند اس لو انت فاتح عندك من الماك فطالما انا حفظتها لو جيت لك هنا وعملت لك هنا ريلود هلاقي دلوقتي ان الكلمه دي ظهرت عندك هنا طب دلوقتي انا لو جيت لك هنا وكتبت لك مثلا عبد الرحمن تعال دلوقتي بس لما نقفل عندنا الجنب ده دلوقتي انا لو عملت لك ريلود الكلمه دي مش هتظهر ليه لان المفروض ان انا احفظ عندك الكلمه دي فبضطر ل اس وبروح عندك هنا فبلاي دلوقتي ان الكلمه دي ظهرت عندك فاي تغيير انت بتبدا ان انت تعمله المفروض ان انت تحفظه وعندك هنا حل جميل جدا انا ممكن ان انا اعمل لك هنا الاوتو سيف الاوتو سيف دي انا لو عملت لك هنا التشيك ده على الاوتو سيف فهو يحفظ لك من نفسه فاي تغيير انت هتبدا ان انت تعمله هيتحط عندك بشكل تلقائي فمش مش لازم ادوس على كنترول اس دلوقتي انا لو عملت لك هنا ريلود هتلاقي دلوقتي ان الكلمه دي ظهرت عندك وده ببساطه لان انت عامل عندك هنا اوتو سيف طبعا انا مش محتاج اقول لك ان اللي قدامك ده مش كود اللي قدامك ده ليس اتش تي ام ال تمام انا من شويه كنت كاتب لك هنا اسمي فطبيعي ان ده نص عادي جدا انا لما بعمل لك هنا ريلود النص ده بيبدا يظهر عندك هنا ايا يكن انت كاتب ايه عندك هنا ولكن انا مش عاوز ان انا اكتب نص انا دلوقتي محتاج ان انا اتعلم ازاي ان انا اكتب كود اتش تي ام ال فتعال دلوقتي لما نبدا ان احنا نتعلم اتش تي ام ال علشان تكتب كود اش تي ام ال فانت المفروض تلتزم بقواعد وقوانين الاتش تي ام ال القواعد والقوانين دي اسمها سنتاكس فانت لو التزمت بالسنكس دي هتعرف تكتب كود اش تي ام ال مظبوط ولو انت ما التزمت بالسنكس دي مش هتعرف تكتب كود اتش تي ام ال الموضوع عامل زيه زي اللغات البشريه بالظبط فاحنا عندنا في اللغات البشريه حاجه اسمها القواعد النحويه اللي نقدر نشبهها بالسنكس نفس الموضوع موجود عندنا في الاتش تي ام ال ولحسن الحظ فال السنتاكس بتاعه الاتش تي ام ال سهله جدا الاتش تي ام ال معتمده على التاجز يعني ايه التاجز دلوقتي هي المواقع بتاعتنا دي بتتكون من ايه المواقع ممكن يكون فيها عنوان ممكن يكون فيها برجراف ممكن يكون فيها صوره ممكن يكون فيها فيديو ممكن يكون فيها ازرار ممكن يكون فيها اوديو ممكن يكون فيها حاجات كتيره جدا طيب انا عاوزك تفهم ان كل الكلام اللي قدامك ده كل الحاجات اللي قدامك دي هي عباره عن اضافات او تاجز انت بتضيفوا بالاتش تي ام ال فاحنا في الاتش تي ام ال عندنا اضافه او تاج للعنوان وعندنا اضافه او تاج للبرجراف وعندنا تاج للصور وعندنا تاج للفيديو وتاج ل الاوديو وتاج للازرار وكل حاجه في الموقع بيكون ليها تاج في الاتش تي ام ال فاتش تي ام ال مبنيه على التاجز وطريقه كتابه التاجز مش صعبه جدا انت بتكتب عندك علامه الاصغر من وبعد كده بتكتب عندك اسم التاج وبعد كده بتكتب عندك علامه الاكبر من دي كده اسمها فتحه التاج وبتيجي عندك في النهايه وبتقفل عندك التاج بالشكل ده بانك بتضيف عندك السلاش بالشكل ده وبكده بتكون فتحت عندك التاج وقفلت عندك التاج بالشكل اللي قدامك ده وبتكتب عندك المحتوى ما بين البدايه وما بين النهايه ليه التاج عارف انك لسه مش فاهم فتعال دلوقتي لما نفهم مع بعض من خلال الكود لو لو انا جيت لك هنا في صفحه الاتش تي ام ال الفاضيه اللي قدامك دي وكتبت لك دلوقتي اي كلمه الكلمه اللي انا بكتبها دي مش تاج اتش تي ام ال دي كلمه عاديه جدا لو انا جيت لك هنا وعملت لك دلوقتي ريلود الكلمه دي ظهرت عندك هنا طيب ازاي دلوقتي الكلمه دي ظهرت وده مش تاج اتش تي ام ال دلوقتي انا عاوزك تفهم ان صفحه الاتش تي ام ال دي بتعامل معامله الكومنت بتعا معامله المستند الكتابي زيه زي اي ملف كتابي موجود عندك فلو انت تيت هنا وكتبت دلوقتي اي كلمه في الدنيا الكلمه دي هتظهر عندك هنا ولكن الكلمه دي مش من مكونات الموقع يعني الكلمه دي مش عنوان للموقع ولا هي برجراف ولا هو عنوان بوست ولا سبان ولا اي حاجه من مكونات الموقع دي كلمه عاديه جدا علشان تحول الكلمه دي لاحد مكونات الموقع بتستخدم عندك التاجز وهي دي الفكره كلها فتعالوا دلوقتي لما نجرب مع بعض نحول الكلمه دي لعنوان للموقع انا اضر دلوقتي مش ان انا اعلمك العناوين او مش ان انا اعلمك تاجي العنوان انا ن دور دلوقتي ان انا افهمك يعني ايه بس كلمه تاج دلوقتي تاج العناوين هو تاج الهيد وتاج الهيد ده انت علشان تعمله بتفتح عندك دلوقتي علامه اصغر من وحرف الاتش حرف الاتش ده بيرمز عندك للهيد فلو انت عاوز تعمل عندك عنوان الموقع بتستخدم عندك الاتش عاوز تعمل عنوان بوست عاوز تعمل عنوان مقاله عنوان لاي حاجه في الدنيا بتستخدم عندك الاتش الاتش دي المقاسات اللي فيها بتتقسم عندك من واحد و 2 3 4 خ 6 واحد ده هو اكبر مقاس وسته هو اصغر مع اس فلو انا دلوقتي جربت لك الاتش 1 تعال دلوقتي لما نجربه لو انا جيت لك هنا وقفلت لك التاج ده هتلاقي دلوقتي الفيجوال ستوديو كود عمل لك هو القفله بتاعه التاج فانت ما بين البدايه للتاج وما بين النهايه بتحط عندك الكونتنت بتحط عندك الجمله اللي انت عاوزها تكون عنوان للموقع ده فلو انا جيت لك هنا وكتبت لك دلوقتي نفس الكلمه لمجرد الاختبار بس مش اكتر عاوزك دلوقتي تاخد بالك من مقاس الكلمه دي لو انا جيت لك هنا وعملت لك دلوقتي ريلود فبص دلوقتي المقاس اللي ظهر عندك ظهر عندك دلوقتي كلمه كبيره وبولد وحجمها متغير الحجم اللي حصل ده او التاثير اللي حصل ده هو تاثير التاج اللي اسمه اتش1 تعال كده لما اثبتها لك اكتر لو انا جيتلك هنا وكتبتلك دلوقتي نفس الجمله هنا بالظبط لو عملتلك دلوقتي ريلود فده هو مقاس الكلمه العاديه بدون اي تاثير ولكن هو ده مقاس الاتش 1 كمان برضو عندنا الاتش 2 ودي حجمها اصغر من الاتش 1 تعال كده لما نجرب فدلوقتي احنا عندنا الاتش 1 وعندنا الاتش 2 الاتش 1 هي اكبر من الاتش 2 لو انا جيتلك هنا وعملتلك دلوقتي ريلود فده حجم الاتش 1 ده حجم الاتش 2 كمان برضو عندنا الاتش 3 وفور وفا و6 تعال دلوقتي لما نكتبه مع بعض سريعا كده هنا الاتش 3 وهنا الاتش 4 وهنا الاتش 5 وهنا الاتش 6 لو انا جيتلك هنا وعملتلك دلوقتي ريلود فده حجم الاتش 1 ده الاتش 2 ده 3 ف 5 6 طيب احنا كده قطعنا شوط كويس عملنا انجاز كويس فهمنا تركيبه التاجز خلي بالك احنا مش بنتعلم الاتش 1 ولا الاتش 2 ولا كل الكلام ده كل الكلام كل تاج الهيد اللي قدامك ده هيكون لي ان شاء الله دروس بعد كده انا دلوقتي بعلمك تركيبه التاجز احنا دلوقتي فهمنا شكل واحد بس من التاجز وهي التاج اللي بيكون ليه بدايه وبيكون ليه نهايه تمام جدا وم م انا بقى عاوزك تفهم ان احنا عندنا شكل تاني من التاج التاج المره دي ما بيكونش ليه ولا بدايه ولا نهايه بيكون س التاج تعال كده لما ناخد مثال على تاج الاتش ار التاج اللي قدامك ده مالوش ولا بدايه ولا نهايه هو بيتكتب بالشكل اللي قدامك ده طيب ليه مالوش ولا بدايه ولا نهايه ببساطه لان ما فيش محتوى تضيفه عندك جوه التاج ده يعني احنا هنا كان عندنا بدايه ونهايه لان في محتوى تقدر ان انت تضيفه عندك ما بين بدايه ونهايه التاج لكن الاتش ار ده هو بيعمل لك سطر تعال كده انا موريها لك علشان تكون فاهم شايف السطر اللي قدامك ده ده سطر او هوريزونتال رو و هيي اصلا كلمه اتش ار هي اختصار لكلمه هوريزونتال رو تمام فانت مش محتاج ان انت تقفل عندك التاج علشان تضيف عندك محتوى تمام لان ما فيش اصلا محتوى تقدر ان انت تضيفه عندك ما بين الاتش ار الاتش ار نفسها هي عباره عن محتوى هي نفسها عباره عن اضافه انا عاوز اقول لك ان التاجز اللي هي بتكون سينجل تاج انت ممكن تكتبها عندك بالشكل ده وممكن تكتبها عندك بالشكل ده في ناس بتميز عناصر السينجل تاج بالشكل اللي قدامك ده فكده صح و كده برده صح تمام جدا جدا طبعا هي بتعمل لك سطر لو انت كررتها هتعمل لك سطر تاني تعال كده ولو قرناها الثالث هتعمل لك برض سطر ثالث زي ما موجود قدامك هنا طيب انت دلوقتي اتعلمت الفرق ما بين التاج العادي وما بين السنجل تاج في كمان شويه تيبس مهم جدا ان انت تكون عارفهم دلوقتي لو انت كتبت عندك الكود بالشكل ده كتبت دلوقتي عندك سطر كود وكتبت دلوقتي سطر كود تاني تحته لو عملت لك دلوقتي ريلود الاثنين في الاود بوت جم كل واحده فيهم على سطر كمان برض لو انت كتبتهم عندك على نفس السطر مش هيحصل فرق عندك في الاوت بوت كل واحده فيهم برض هتيجي عندك على سطر لوحدها فلو دلوقتي انا جيت لك هنا وعملت لك دلوقتي ريلود مافيش اي اختلاف ليه لان الاتش 1 ده هو عنصر بلوك ومعنى كلمه عنصر بلوك طبعا احنا هنشرح ان شاء الله بعد كده يعني ايه كلمه بلوك دي ولكن بشكل مبدائي العنصر البلوك بياخد سطر كامل لوحده فسواء انت كتبته هنا على سطر لوحده كتبته عندك هنا بالشكل ده او كتبتهم على نفس السطر فكده كده كل واحده فيهم هتاخد سطر عندك في الاوت بوت الاوت بوت اللي هو البراوزر بتاعك ده تمام جدا جدا كمان برض المسافات تعال كده المسافات اللي انت بتعملها هنا كل المسافات دي بيتم تجاهلها في الاوت بوت فلو انا جيت لك هنا وعملت لك دلوقتي ريلود ولا في اي اختلاف حصل لو انا جيت لك هنا وجبت لك عربيه نص نقل مليانه مسافات وحطيتها هنا ولا في اي اختلاف هيحصل عندك في الاوت بوت فتاخد بالك جدا برض من المواضيع دي تمام تعال كده لما نشيل عندنا كل المسافات دي نفس الكلام اللي انا قلته لك ده تقدر برض ان انت تطبقه عندك جوه التاج نفسه جوه التاج عندك هنا كل المسافات دي بيتم تجاهلها لو انا جيت لك هنا وعملت لك دلوقتي ريلود عمل لك مسافه واحده بس تعال كده لما ابينها لك اكتر شيللي دلوقتي كل المسافات دي وتعالي هنا في الكلمه دي واعمل لك كل المسافات دي شايف كل المسافات دي هيتم تجاهلها وهيعمل لك مسافه واحده بس لو عملتلك دلوقتي ريلود فهي مسافه واحده بس اللي اتعملت عندك تمام تمام جدا جدا فناخذ بالنا دلوقتي من الموضوع ده تعال كده طيب افرد دلوقتي انا عاوز اعمل مسافه افرد دلوقتي انا عاوز انزل سطر يعني انا دلوقتي عاوز الكلمه دي تكون في سطر وعاوز الكلمه دي تكون في سطر طبعا انا لو عملتلك دلوقتي ريلود مافيش اي حاجه هتحصلي طيب اعملها ازاي عندنا تاج بيعملك الموضوع ده التاج ده اسمه بي ار وده سنجل تاج التاج ده بيضيف لك لاين بريك لو انا دلوقتي وقفت لك عليه هيقوللك تعال كده هيقوللك دلوقتي ان انا بضيف لك عندك لاين بريك يعني بضيف لك عندك سطر جديد لو انا جيتلك هنا وعملتلك دلوقتي ريلود نزل لك في سطر جديد لو انا كررت دلوقتي البي ار تاني هينزلك برض في سطر جديد وخلي بالك لو انت كررته على نفس السطر مش هيفرق احنا اتكلمنا في الموضوع ده فلو عملتلك دلوقتي ريلود مافيش اي اختلاف حصل تمام فاكتبه على نفس السطر او في سطر لوحده مش هيفرق لو انا عملتلك دلوقتي بي ار تان هينزل لك سطر جديد لو عملت لك بي ار رابعه هينز لك برض سطر جديد اي صفحه اش تي ام ال في العالم اي موقع في العالم بيكون ليه نفس المكونات يعني المكونات اللي هنكتب دلوقتي تقدر تلاقيها في اي موقع في العالم لو انت فتحت يوتيوب لو انت فتحت فيسبوك لو انت فتحت اي موقع في العالم هتلاقي نفس المكونات دي موجوده ف ايه ممكن اقرب لك الفكره دي بالسياره او العربيه طبعا باللهجه المصريه طبعا العربيه هتلاقي فيها مكونات اساسيه موجوده في اي عربيه وفي مكونات ثانيه اضافيه المكونات الاساسيه اللي هتلاقيها في اي عربيه هي الاربع عجلات هي الشكمان هي الموتور هي الدريكسيون دي اسمها المكونات الاساسيه اللي هتلاقيها في اي عربيه في العالم طبعا في مكونات ثانيه اضافيه بتفرق عربيه عن عربيه ولكن كل العربيات فيهم نفس المكونات الاساسيه نفس الفكره دي موجوده عندنا في الاتش تي ام ال طيب ايه هي المكونات دي تعالوا دلوقتي لما نشوف مع بعض اول مكون انت بتكتبه في صفحه الاتش تي ام ال هو ان انت بتحدد اصدار الاتش تي ام ال اللي انت هتشتغل بيه اللي هو يا ترى انت هتشتغل بش تي ام ال 4 او اصدار اتش تي ام ال 4 ولا هتشتغل باصدار اتش تي ام ال 5 فانت لازم تحدد الموضوع ده في اول سطر انت بتكتبه عندك ف طبعا احنا بنشتغل باصدار اتش تي ام ال 5 هاجي عندي هنا في اول سطر وهقول له ان انا بشتغل باصدار اتش تي ام ال 5 علشان اقول له كده هكتب دلوقتي علامه اصغر من ثم علامه التعجب ثم دوك تايب اتش تي ام ال وبقفل عندي التاج كده انا قلت له ان انا بشتغل باصدار اتش تي ام ال 5 طيب دلوقتي انا عاوز اكتب كود اش تي ام ال اكتبه فين بتكتبه عندك ما بين البدايه والنهايه لوسم الاتش تي ام ال كل الصفحه بتاعتك بكل الاكواد بكل حاجه بتتكتب عندك ما بين البدايه والنهايه لوسم الاتش تي ام ال طيب احنا دلوقتي عاوزين نبدا نكتب كود انا عاوز اقوللك ان انت ما بتكتبش الكود بتاعك بشكل عشوائي بل انك بتنظم الصفحه بتاعتك بتنظم عندك لعقل الموقع وجسم الموقع العقل ده بيتعمل عندك من خلال وسم الهيد الهيد ده تقدر تقول عليه كده هو عقل الموقع والبدي هو جسم الموقع طيب يعني ايه جسم الموقع ويعني ايه عقل الموقع جسم الموقع هو كل حاجه موجوده عندك في الموقع اي حاجه بتظ ظهر للمستخدم والمستخدم بيشوفها بعينه دي انت بتكتبها عندك في وسم البادي في جسم الموقع زي مثلا العناوين والصور والفيديوهات والبراجراف وكل حاجه موجوده عندك في الموقع انت بتكتبها عندك في وسم البادي طيب ايه هو الهيد في الهيد انت بتكتب عندك معلومات الموقع زي اسم الموقع وصف الموقع المعلومات اللي انت بتديها لمحركات البحث علشان يصنف الموقع بتاعك فكل معلومات الموقع انت بتحطها عندك في الهيد وكل حاجه بتظهر للمستخدم انت بتحطها عندك في وسم البادي هي دي ببساطه المكونات الاساسيه في اي موقع في العالم اي حاجه غير كده دي مش مكونات اساسيه اي حاجه غير كده بتكون اضافات لكن اي موقع في العالم بيتكون عندك من هيد وبيتكون عندك من بدي وبيتكون عندك من كل الكلام اللي احنا قلناه ده تعالوا دلوقتي لما ناخد مثال عملي انا دلوقتي عاوز اكتب عندي عنوان او اتش و يظهر عندي في الموقع طالما انا عاوز اكتب حا حاجه تظهر في الموقع يبقى هكتبها عندك في البادي فهن دلوقتي في البادي وهنكتب عندنا اتش 1 وهنكتب لك فيه اي كلمه في الدنيا فلو عملتلك ريلود هتظهرلك الكلمه اللي انت كتبتها عندك هنا في البادي ظهرت لان انت كاتبها عندك في جسم الموقع طيب ما تدينا دلوقتي مثال على الهيد تعال دلوقتي لما نعمل حاجه من معلومات الموقع وهو التايتل بتاع الموقع او عنوان الموقع او الكلمه اللي بتظهر عندك في المكان ده بتتحكم عندك في التايتل من خلال وسم التايتل فهن عندنا في الهيد وهنكتب عندنا وسم التايتل وهتكتب فييه الكلمه اللي انت عاوزها تكون تايتل للموقع فلو عملت لك هنا ريلود ظهرت الكلمه دي عندك ممكن طبعا تكتب الكلمه اللي انت عاوزها فلو كتبت لك دلوقتي الكلمه دي وعملت لك دلوقتي ريلود ظهرت عندك الكلمه دي تقدر تكتب اللي انت عاوزه انا عاوز اقول لك ان الفيديو الجاي ان شاء الله هنتكلم فيه عن الهيد بشكل مفصل هنقول لك ايه اللي بيتكتب في الهيد وكل التفاصيل اللي موجوده عندنا في الهيد اتمنى تكون فهمت ايه هي المكونات الاساسيه لاي صفحه اش تي ام ال النهارده هنتكلم عن الهيد وهنقول تفاصيل مهمه جدا جدا ولكن قبل ما نتكلم عن الهيد انت دلوقتي داخل عالم الويب ففي اداه هتكون صديقه ليك حرفين هي صديقك الوفي في عالم الويب علشان توصل للاداه دي بتيجي عندك هنا كليك يمين في اي مكان طبعا وبتيجي عندك هنا على انسبكت لو رحنا دلوقتي على النتس هتلاقي هنا كل السورس كود بتاعك كل السورس كود اللي انت كنت كاتبه في صفحه الاتش تي ام ال هتلاقيه موجود عندك هنا في النتس او في العناصر بتاعه الاتش تي ام ال هنا بتلاقي عندك كل السورس كود ولو انت مركز هتلاقي ان انت عندك هنا وسم الدوك تايب وعندك هنا وسم الاتش تي ام ال وعندك هنا الهيد وعندك هنا البادي ولو انت فتحت دلوقتي البادي هتلاقي ان انت عندك هنا الاتش 1 وخلي بالك لو انت وقفت بالماوس على اي عنصر في البادي بيعمل لك مؤشر على العنصر ده بيحدد لك ان انت واقف دلوقتي على العنصر ده ولو انت مش فاهم تعال كده في الكود بتاعنا لما نعمل عندنا كذا عنصر علشان بس ابين لك مش اكتر وهنعمل هنا ريلود لو فتحت لك دلوقتي البادي ووقفت لك هنا على العنصر الاول هتلاقي ايه دلوقتي بيشر لك ان انت واقف على العنصر الاول لو انا وقفت لك على الثاني هتلاقي بيشر لك ان انا واقف على العنصر الثاني لو الثالث بص لو الرابع لو الخامس اي عنصر انت هتقف عليه هشر لك ان انت واقف على العنصر ده بالتحديد جميل جدا جدا تعال كده لما نمسح عندنا العناصر دي ونسيب عندنا اتش 1 واحده بس وهنعمل ريلود انا عاوز اقول لك ان انت ممكن تعدل الكلمه اللي انت كاتبها هنا من خلال الانسبيك فلو انا جيتلك هنا على العنصر ده وضغطت لك دلوقتي دبل كليك وكتبت لك هنا اي كلمه وضغطت لك هنا على انتر فتم تعديل الكلمه دي كمان انا ممكن امسح لك الكلمه دي ولكن انت لازم تفهم ان كل التعديلات اللي انت بتعملها دي هي تعديلات مؤقته وفي البراوزر بتاعك بس يعني ايه الكلام ده يعني مالاقيش دلوقتي واحد راح موقع جوجل مثلا وجالك هنا على الكلمه دي جوجل كليك يمين ثم انسبكت وقال لك انا واقف دلوقتي على الكلمه دي طيب انا ممكن همسح لك الكلمه دي وبس كده كلمه جوجل مش هتظهر للمستخدمين في موقع جوجل جاي يستظرف يا ماما بس ظريف الحقيقه لطيف للاسف الكلام ده ما ينفعش انا والله كنت عاوز اراضي يروح الهكر اللي جواك ولكن للاسف الكلام ده ما ينفعش بدليل ان انا لو جيت لك هنا وعملت لك دلوقتي ريلود كل حاجه رجعت للاصل ولا كانك عملت اي حاجه كمان برض لو انا جيت لك هنا في صفحه الاتش تي ام ال وعملت لك دلوقتي ريلود كل حاجه رجعت للاصل وكل التعديلات اللي انت كنت عاملها في الانسبيك رجعت ولا كانك عملت اي حاجه فاللي انا عاوزك تفهمه ان التعديلات اللي انت بتعملها في ال انسبكت هي تعديلات مؤقته وفي البراوزر بتاعك بس لو انا رحتلك دلوقتي على موقع جوجل وجيت لك هنا كليك يمين في اي مكان ثم انسبكت وفتحتلك هنا الهيد هتلاقي دلوقتي ان اول حاجه منوره عندك هي الميتا اشار ست يو تي اف 8 ايه الكلام ده هنفهم دلوقتي مع بعض ايه هو المتا ولكن الاول انا عاوزك تكون فاهم طيب هتروح عندك هنا في الهيد وهتيجي عندك هنا وهتكتب تاج الميتا تاج الميتا هو سينجل تاج يعني مالوش كلوزنج تاج بيتكتب عندك بالشكل ده في ناس بتميز العناصر اللي مالهاش كلوزنج تاج بال السلاش بالشكل ده دي صح ولو انت ما كتبتها صح طبعا هي في العادي بتتكتب كده ولكن علشان لو شفته في يوم من الايام تاج مكتوب بالشكل ده ما تبقاش متلخبط دي صح ودي صح طيب بتيجي عندك هنا في المتا وبتكتب حاجه اسمها اتشار ست الله ايه الحاجه اللي انا كتبتها جوه التاج اللي هي اللي قدامك دي اللي انت بتكتبه هنا بغض النظر هي تشار ست ولا ايه بالضبط اللي انت بتكتبه هنا ده اسمه اتربيوت يعني خاصيه خاصيه انت ضيفها عندك للاي العنصر ده كل عنصر في الاتش تي ام ال بيكون له خاصيه انا ممكن اجيلك هنا في الاتش 1 واستخدم عندي مثلا خاصيه اسمها الستايل الستايل ده اتربيوت من خلاله بنضيف اكواد سي اس اس طبعا انا مش عاوزك تركز في الستايل انا بس بوريل لك الفكره مش اكتر الستايل ده هو جلوبال اتربيوت يعني مش خاص بس بالاتش 1 انت ممكن تستخدمه مع الاتش 1 او البادي او مع عناصر تانيه كتيره جدا طيب بغض النظر عن الاتربيوت انا دلوقتي فهمت ان بيتكتب هنا ده اتربيوت ايه النقطتين دول اللي قدامك دول اسمهم علامتين تنصيص او دبل كودز من خلالهم بتضيف عندك الفالو او القيمه بتاعه الاتربيوت ايا يكن الاتربيوت ده انت ممكن تكتب عندك دبل كودز او سنجل كود اللي انت عاوزه الاتنين صح طيب ايه هي التشار ست كلمه اشار ست هي اختصار لكلمه كراكتر ست وكاركتير فانت هنا بتتحكم عندك في الحروف اشار ست دي بتتحكم عندك في الترميز او التشفير يعني ايه الكلام ده هفهمك الموضوع ده من خلال مثال عملي احنا بنستخدم عندنا الترميز اللي اسمه يو تي اف داش 8 ده الترميز العالمي الجديد اللي بيدعم اللغه العربيه والانجليزيه ولغات تانيه كتيره جدا زمان تعال كده لما اوريك زمان احنا كنا بنستخدم ايه هروح دلوقتي لدبليو 3 سكولز ده موقع مهم جدا جدا لو رحت لك دلوقتي لموقع ده هتلاقيه كاتب لك هنا في الاتش تي ام ال كراكتر يتس هيقوللك ان احنا زمان كنا بنستخدم عندنا ترميز اسمه ايزو داش 8 8 5 9 داش 1 ده الترميز اللي احنا زمان كنا بنستخدمه ولكن الترميز ده مش بيدعم لغات كتيره جدا من ضمنها اللغه العربيه وتعال كده لما اوريلك الموضوع ده لو انا جيت لك هنا وكتبت لك هنا ايزو داش 8 8 59 داش واح وكتبت لك هنا كلمه باللغه العربيه تعال كده لما نكتب عندنا هنا مثلا عبد الرحمن جمال اي كلمه باللغه العربيه لو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهر لك الكلام الغريب اللي قدامك ده ليه ظهر لك الكلام ده لان دلوقتي الترميز اللي قدامك ده ما بيدعم اللغه العربيه ولكن الترميز الجديد اللي هو يو تي اف داش 8 الترميز ده بيدعم اللغه الانجليزيه واللغه العربيه ولغات تانيه كتيره جدا فلو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهرت لك الكلمه اللي باللغه العربيه وكمان الكلمه اللي باللغه الانجليزيه ظهرت عادي وبدون اي مشاكل فلو انت هتعمل الموقع بتاعك باللغه العربيه استخدم عندك الترميز اللي اسمه يو تي اف 8 كمان برض بتروح عندك في الاتش تي ام ال هنا وبتحدد اللغه بتاعه الموقع فهتي عندك هنا وهتستفيد اللغه بتاعه الموقع لو الموقع بتاعك باللغه العربيه بتكتب اي ار لو الموقع بتاعك باللغه الانجليزيه بتكتب عندك اي ان وما تقلقش لو انت كتبت عندك هنا اي ان هتظهر لك برض الكلمه اللي باللغه العربيه لان انت استخدمت التشفير اللي اسمه يو تي اف 8 فلو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهرت لك الكلمه باللغه العربيه وظهرت الكلمه اللي باللغه الانجليزيه انت هنا بتحدد لغه الموقع بتاعك لمحركات البحث بتعرف محركات البحث ايه هي اللغه بتاعتك من خلال الاتربيوت اللي اسمه لانج طيب تعالى دلوقتي نعمل التايتل بتاع الموقع اتكلمنا عن التايتل ده المره اللي فاتت ولكن المره دي هنعمل التايتل باللغه العربيه [موسيقى] فهكذا فبص شوف الشكل اللي قدامك فخلي بالك دايما من الموضوع ده هتقول لي حتى في التايتل هقول لك حتى في التايتل انت راجل مش جدع رجع دلوقتي اليو تي اف 8 طيب انا دلوقتي عاوزك تركز كويس جدا لاننا دلوقتي هنبدا نضيف معلومات الموقع المعلومات دي انت برض بتضيف من خلال تاج المتا ولكن بتضيف بشكل مختلف ما بتستخدم بقى التشار ست ولا الكلام ده كله بتستخدم عندك اتربيوت اسمه نيم واصبر هقول لك دلوقتي وبتستخدم عندك اتربيوت اسمه كونتنت فبيكون عندك نيم وكونت نت ومش بيفرق الترتيب بتاعهم ممكن يكون الكونتنت قبل النيم بالشكل ده عادي جدا جدا طيب هنا لازم نهدي اللعب شويه حط في دماغك كده اول ما تشوف عندك مت فيها نيم وكونت انتت تعرف ان انت هتضيف معلومات في الموقع المعلومات دي ممكن تكون وصف للموقع انت بتوصف الموقع بتاعك ممكن تكون مثلا عاوز ققول مين اللي برمج الموقع ممكن مثلا تكون عاوز تضيف الكي ووردز او الكلمات المفتاحيه للموقع كل الكلام ده هشرحه لك دلوقتي ولكن انا بس بفهمك ان دي معلومات الموقع عاوزك برض تفهم كده قبل ما نتكلم وقبل ما نقول لك ايه هي المعلومات دي وقبل ما نشرح كل الكلام ده مش كل المعلومات اجباريه يعني موضوع اضافه المعلومات ده على مزاجك انت حابب تضيفه في موقعك تمام مش حابب تضيفه براحتك طيب ايه اللي بيتكتب في النيم وايه اللي بيتكتب في الك كونتنت اللي بيتكتب في النيم هو اسم الخاصيه واللي بيتكتب في الكونتنت هو محتوى الخاصيه دي او الفالو او القيمه بتاعه الخاصيه دي زي ايه زي مثلا ان انت دلوقتي عاوز توصف الموقع تعال دلوقتي لما نعمل ديسكربشن لموقع فبتكون كربشن انا كده كتبت عندي اسم الخاصيه في الكونتنت بتضيف عندك محتوى الخاصيه بتبدا تكتب عندك الالو اللي هو الوصف فممكن مثلا اوصف لك الموقع ده باللغه العربيه او الانجليزيه او اللي انت عاوزه فممكن اقول لك مثلا الموقع ده بيتكلم عن الطبخ مثلا اي حاجه يعني تمام اي هبل يعني مش مشكله المهم ان انت بتضيف عندك هنا وصف للموقع تمام طيب الوصف ده لو انت جيت هنا وعملت دلوقتي ريلود مش هتشوفه قدامك هتقول لي الله امال ايه فايدته هقول لك تعال دلوقتي لما ابين لك فايده الدسكربشن هاجي عندك هنا في جوجل وهكتب لك هنا اي بي ام ايجيبت مثلا تمام اي موقع في العالم جيب انت اي موقع يخطر في بالك تمام دلوقتي ده لينك موقع اي بي ام لو بصيت عندك هنا هتلاقي دلوقتي عندك هنا وصف لموقع اللي قدامك ده ديسكربشن الموقع تعال كده لما اثبت لك الموضوع ده لو فتحتلك دلوقتي موقع اي بي ام وجيتلك هنا في اي مكان كليك يمين ثم انسبكت هنشوف دلوقتي المتا بتاعتهم هنفتح دلوقتي عندنا الهيد في المكان ده وهند دلوقتي على ميتا ديسكربشن ميتا ديسكربشن م اهو متا ديسكربشن هنا متا النيم بتاعتها ديسكربشن وال كونتنت عندك هنا فور مور سنري اي بي ام هازبين الى اخر الوصف بتاعك شايف الوصف ده تعال هنا بقى لما اوريك الوصف ده هتلاقي ان عندك هنا فور موران سري اي بي ام هاز بين الى اخره نفس الوصف اللي كان موجود عندك هنا في الميتا ديسكربشن الوصف ده هو بالضبط الوصف اللي بيظهر عندك في محركات البحث ف ببساطه كده وبكل هدوء الوصف اللي انت بتحطه للموقع ده هو اللي انت بتدي لي محركات البحث علشان توصف الموقع بتاعك ودي فايده الدسكربشن طيب برض عندك ميتا تانيه او معلومات تانيه من معلومات الموقع وهي الكي ووردز فهن عندنا ميتا ليها نيم وليها كونتنت هتيجي عندك هنا في النيم وهتكتب اسم الخاصيه اللي هي الكي ووردز بالشكل اللي قدامك ده الكي ووردز بتعني الكلمات المفتاحيه او الكلمات اللي المستخدم ممكن يكتبها علشان يلاقي الموقع بتاعك فلو موقعك مثلا بيتكلم عن الرياضه فانت متوقع ان المستخدم هيروح في جوجل ويكتب مثلا كلمه ليها علاقه بالرياضه هيكتب مثلا كره قدم هيكتب كره سله هيكتب الاهلي الزمالك ريال مدريد الكلام ده كله فلو انت عاوز تحسن ترتيب موقعك في محركات البحث فانت بتضيف عندك كل الكلمات المفتاحيه اللي انت متوقع ان المستخدم هيدخلها فتعال كده لما ناخد مثال عملي انا دلوقتي عامل موقع بيتكلم عن البرمجه عندي كورسات اتش تي ام ال سي اس اس جافا سكريبت والى اخره فانا متوقع ان المستخدم هيدخل هنا كلمه اتش تي ام ال وسي اس اس وجافا سكريبت وكل الكلام الجميل ده طيب نعمل ايه بروح عندي هنا في الكونتنت وبكتب عندي هنا اتش تي ام ال ده كده كي وورد انا متوقع ان المستخدم هيدخله طيب عاوز اضيف كي وورد تانيه فبج عندي هنا وبكتب عندي الفاصله دي انا عملت كي وورد وبعمل عندي فاصله وبعمل عندي كي وورد تانيه فهاك تب عندي هنا سي اس اس وهعمل فاصله وهكتب عندي جافا سكريبت وهعمل فاصله وهكتب عندي بي اتش بي واى اخره اكتب بقى اللي انت عاوزه وممكن تكتب عندك بالعربي او بالانجليزي او بالل انت انت عاوزه تمام انا كده اضفت عندي الكلمات المفتاحيه عندي برضو متا المتا دي خاصه بمين اللي برمج الموقع فبج عندك هنا وبكتب عندك نيم وبجيلك هنا وبعمل لك هنا كونتنت بنفس الطريقه بالضبط اسم الخاصيه هي اوثر المؤلف مين المؤلف بتاع الموقع ده فهيك تبلك مثلا هو عبد الرحمن جمال طبعا يعني احنا مش دايما بنستخدمها بس هو اوبشن انا بعلمه لك لعلك عاوز تستخدمه في يوم من الايام طيب قبل ما نكمل احنا عندنا انواع ميتا كتيره جدا علشان تعرف ازاي بتذاكر الميتا بتيجي عندك هنا في جوجل وبتكتب عندك دبليو 3 سكولز تمام وبتكتب عندك مت انتر هيجيب لك اللينك ده هضغط دلوقتي عليه هيجيب لك هنا كل المعلومات عن المتا هيقوللك ان احنا عندنا المتا اتشار ست اتكلمنا عليها عندك الميتا ديسكربشن اتكلمنا عليها الكي ووردز اتكلمنا عليها الاسر اتكلمنا عليها وعندك مت تانيه اسمها الفيو بورت الفيو بورت دي ادفانسد جدا وممكن ما تفهمهاش ولكن انا هديلك فكره عنها هجيلك هنا وهنستخدم دلوقتي بالشكل ده انا بكرر تاني احنا هناخد فكره مش هنشرح علشان لو انت ما فهمتهاش ب عادي جدا ولا كانك سمعت عنها خالص تمام الفيو بورت بتتحكم عندك في الريسبونس في التجاوب في فكره ان الموقع بتاعك يتفتح على الكمبيوتر او التابلت او الموبايل او كل الكلام ده طبعا انت مش فاهم يعني ايه ريسبونسيف ولا تجاوب ولا كل الكلام اللي انا قلته لك ده الحقيقه انا مش فاهم لان في مرادفات كتير في الجمله فلو انا جيت لك هنا علشان افهمك بس مش اكترر وفتحتلك مشروع من المشاريع اللي احنا هنعملهم ان شاء الله مع بعض فهن لقي دلوقتي عندنا ديزاين عادي جدا ولكن الديزاين ده ريسبونسيف يعني بيتفتح عندك على الموبايل بالشكل ده وبيتفتح عندك على التابلت بالشكل ده وبيتفتح عندك على الكمبيوتر بالشكل ده لاحظ ان هو بيتجاوز دي كانت على الجنب اليمين لما الشاشه عندك بتكون كبيره طب لما الشاشه بتصغر بيتجاوز عندك تحت تمام هو بيتجاوز لكش الديزاين فده شكله على الموبايل ده شكله على التابلت ده شكله على الكمبيوتر طبعا الشغل ده احنا بنعمله بالسي اس اس ولكن انا بس بديلك فكره عن الريسبونس ف ف الفيو بورت دي مسؤول عن الريسبونس لو انت ما فهم ولا كانك شفتها خالص طبعا مش هشرحلك الكونتنت ده واقوللك ايه اللي مكتوب فيه لان انت تتعقد من حياتك لو انا قلته لك دلوقتي فتعال كده لما نمسحها ولا كاننا شفناها انا بس بديلك فكره عن الفيو بورت علشان تعرف ان هي بس موجوده مش اكتر عندنا كمان ميتا تانيه تعال كده الميتا دي ولا بتكتب فيها نيم ولا بتكتب فيها اتشار ست بتكتب فيها تعال كده اتش تي تي بي اك وايف ام ايه الكلام ده تعال دلوقتي لما ناخد نا خد مثال علشان نفهم مع بعض ايه هو الاتش تي تي بي اكواف هكتب لك هنا ريفريش وهجيلك هنا وهعمل لك هنا كونتنت الكونتنت ده هو عدد الثواني اللي البراوزر بتاعك بيعمل فيها ريفريش فانا هنا ممكن اتحكم لك في الريفريش بتاع الموقع بتاعك فكتب لك هنا مثلا لاث ثواني الكلام ده معناه ايه الكلام ده معناه ان الموقع بتاعك كل لاث ثواني هيعمل عندك ريفريش تعال كده لما نجرب هجيلك هنا هنصر دلوقتي الموقع ده تعال كده لما نعمل عندنا ريلود علشان بس نحفظ عندنا الاكواد دي هو دلوقتي بعد كل ثلاث ثواني هيعمل لك ريفريش علشان نجرب تعال كده لما نمسح عندنا التاج ده ونستنى عندنا لاث ثواني 1 2 3لا هتلاقيه دلوقتي مسح لك عندك التاج ده ممكن اجي لك هنا واكتب لك هنا اي كلمه بعد لاث ثواني هتلاقي الكلمه دي عامه اضافت عندك هنا اهي في المكان ده ليه اضافت من نفسها لان هو بيعمل لك ريفريش من نفسه ممكن تجرب وتكتب اللي انت عاوزه تعالى كده ممكن دلوقتي نعمل لنا كذا كود هنستنى دلوقتي مع بعض هتلاقيه دلوقتي عملها لك من نفسه لان هو بيعمل لك ريفريش من نفسه ممكن طبعا تعال كده لما نمسح دول ممكن طبعا تكتب عندك هنا لاث ثواني ثانيتين صفر ثانيه صفر ثانيه دي يعني هيفضل كل شويه يعمل لك ريفريش فلو انا جيت لك هنا وكتبت لك هنا اي كلمه على طول الكلمه دي هتظهر عندك في المكان ده فلو انا جيت لك هنا وعملت لك دلوقتي اتش ت وكتبت لك فيه تست وكررتها لك عندك بالشكل ده فهتلاقي ظهرت عندك على طول في لحظتها ليه في لحظتها لان هو بيعمل لك ريفريش باستمرار كل صفر ثانيه يعني على طول عمال بيعمل لك ريفريش لو انت ركزت عندك هنا في المكان ده هتلاقيه دلوقتي عمال بيعمل لك ريفريش باستمرار تمام تمام جدا جدا هنا بقى في المكان ده في سؤال انترفيو مهم جدا جدا بيتسال لناس كتير وللاسف الناس دي مش بتعرف تجاوب على السؤال ده دلوقتي بيسالك كده في الانترفيو وبيقول لك انا عاوزك دلوقتي بعد مده معينه تحول المستخدم من موقعك لموقع ثاني تعمل الكلام ده ازاي سعدتك بتكلمني طبعا هيقول لك في الانترفيو استخدم عندك اتش تي ام ال بس هتقول له سهله جدا بنعمل الموضوع ده من خلال الميتا اتش تي تي بي اك وايف وبنيجي عندنا في الكونتنت وبنحب عندنا المده اللي احنا هننقل فيها المستخدم من موقعنا لموقع تاني فانا هقوللك مثلا بعد لاث ثواني انقل المستخدم من موقعي لموقع يوتيوب فجيل لك هنا وهكتب عندك هنا يور ار ال الور ال اللي انت عاوز تبعت عليه المستخدم فانا مثلا عاوز ابعته على يوتيوب على جوجل تعال كده لما نبعته على جوجل فهن كتب عندنا هنا يساوي وهنكتب عندنا اتش تي تي بي اس نقطتين فوق بعض دب سلاش www دجلو ك بالشكل ده انت بتكتب عندك اليو ار ال بشكل كامل البروتوكول اللي هو الاتش تي تي بي اس ونفهم ان شاء الله بعد كده يعني ايه بروتوكول المهم ان انت بتكتب عندك اليو ال بشكل كامل فلو انا جيتلك هنا تعال كده لو انا جيتلك هنا هعملك دلوقتي ريلود بس عشان الكود ده يتحفظ وهستنى دلوقتي لا ثواني واح ا ت عامه هو نقلك هنا لجوجل طيب تعال كده لما نجربها من تاني ف هجيلك هنا وهفتح دلوقتي الموقع بتاعي 1 2 3 ني الجوجل ممكن بقى تجربها مع جوجل تجربها مثلا هنا مع فيسبوك فيسبوك بالشكل ده وهجيلك هنا هنمسح دلوقتي الكلام ده وهنفتح هنا الموقع بتاعنا من جديد 1 2 3 هيحولك دلوقتي لموقع فيسبوك طيب احنا هناخد دلوقتي لاثه تاجز جداد بيتكتب في الهيد ولكن مش هنستخدم دلوقتي اخدها ليه بقى العكن انا في وسط الاجتماعات يا ماتو ما تركز ركز يالا بصراحه انا تعبت من التركيز اسمع معي نعم الثلاثه تجز دول ان شاء الله بنشتغل بيهم لما بنتعلم السي اس اس والجافا سكريبت فانت يكفي بس ان انت تعرف ان هم موجودين مش اكتر تمام مش هنشتغل بيهم دلوقتي ولا هنعمل بيهم اي حاجه اول تاج عندنا وهو تاج اللينك التاج ده بنستخدمه علشان نربط ملف سي اس اس التاج ده بياخد منك اتنين اتربيوت اول اتربيوت اللي هو ريل ودي اختصار لكلمه ريليشن شيب او ايه هو علاقه الملف اللي انت عاوز تربطه بملف الاتش تي ام ال بتاعك فانا دلوقتي بقوللك ان الملف ده ستايل شيت يعني ملف سي اس اس السي اس اس هو ملف ستايل شيت وهنا في الاتش ار اي اف بتحدد عندك مكان ملف السي اس اس فلو انت عندك ملف سي اس اس خارجي جنب ملف الاتش تي ام ال بتيجي عندك هنا وبتحدد موقع الملف ده وبكده تكون ربطت ملف السي اس اس بملف الاتش تي ام ال وما تركزش خالص في اللي انا بقوله دلوقتي ده كل الكلام ده ان شاء الله نتعلمه لما ندخل عندنا في السي اس اس يكفي دلوقتي بس ان انت تعرف ان احنا عندنا تاج اسمه لينك مش اكتر من كده كمان برض عندنا تاج تاني اسمه ستايل فالتاجر علشان نكتب سي اس اس بشكل مباشر في ملف الاتش تي ام ال فممكن دلوقتي نكتب كود سي اس اس على سبيل التجربه وما تركزش نهائي في الكود ده انا دلوقتي من خلال الس اس عاوز دلوقتي الون الخلفيه عندي باللون الازرق مثلا فجيل لك هنا واكتب لك دلوقتي بدي وما تركزش في الكلام اللي انا هكتبه دلوقتي هقول لك دلوقتي خليلي الباك جراوند باللون الازرق مثلا تمام لو جيت لك هنا وعملت لك دلوقتي ريلود اتلونت عندك الخلفيه باللون الازرق فانت ما بين تاج الاستايل ما بين البدايه وما بين النهايه بتكتب عندك اكواد السي اس اس كمان برض عندنا تاج تاني اسمه سكريبت التاج ده ما بين بدايته وما بين نهايته بنكتب عندنا اكواد جافا سكريبت ما تقلش خالص انت ولا هتستخدم عندك التاج ده ولا تاج الستايل ولا تاج اللينك طول كورس الاتش تي ام ال انت بس يكفي ان انت تعرف ان هم موجودين وتعرف ان هم بيتكتب عندك في الهيد ازاي بنعمل فقره نصيه واحد دلوقتي هيرد عليا ويقول لي اكتب عندك هنا اي نص وبكده تكون عملت عندك فقره نصيه هقول لك طبعا الكلام ده غلط جدا بدليل دلوقتي ان انا لو هنا وكتبتلك دلوقتي اي نص وليكن هل ماي نيم ماي نيم از عبد الرحمن مثلا وتعال كده لما ننزل في سطر جديد واقوللك دلوقتي ان ماي ايدج از ت6 وننزل برض في سطر جديد ونعمل دلوقتي جمله مثلا اي لاف اش تي ام ال اي حاجه تمام انا دلوقت عملت عندي لات سطور اول سطر وتاني سطر وتالت سطر هل دلوقتي لو انا فتحت لك جوجل كروم هيظهروا عندك بالشكل ده هل هيظهروا عندك في ثلاث سطور تعالوا دلوقتي لما نشوف مع بعض لو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهروا عندك في سطر واحد بس اول جمله اللي هي هلو ماي نيم از عبد الرحمن وتاني جمله وثالث جمله ظهروا عندك في سطر واحد وده لان المتصفح بيتجاهل عندك كل الكلام ده بيتجاهل عندك السطور الجديده اللي انت بتعملها كل اللي انت عملته ده المتصفح عندك هيعمل له تجاهل و ولا كانه موجود عندك او ولا كانك انت عملته لو انا جيت لك هنا كليك يمين وضغطت لك دلوقتي هنا على انسبكت ووقفت لك دلوقتي على النص ده ورحت عندك هنا على حاجه اسمها ستايلس الستايل ده هو الجزء الخاص بالسي اس اس وده هنشتغل بيه كتير جدا لما نتعلم ان شاء الله السي اس اس ولو انت ملاحظ هتلاقي دلوقتي ان النص ده مافيش عليه اي تنسيقات سي اس اس بيقوللك هنا مافيش هنا اي حاجه طيب انت دلوقتي عاوز تعمل ايه انا دلوقتي عاوز اجيب لك السطر ده في سطر كامل لوحده وده يكون عندك في نيو لاين وده يكون عندك في نيو لاين اعمل الكلام ده ازاي هنعمل الكلام ده باستخدام الفقره النصيه او البراجراف علشان تعمل عندك بارجراف بتكتب عندك بي البراجراف بتتكتب عندك بالشكل ده وبتحط عندك النص ما بين البدايه والنهايه للبي البي او البراجراف هو عنصر بلوك ليفل المنت يعني بيعمل لك سطر كامل لوحده بياخد لك النص ده وبيحط عندك في سطر كامل لوحده فلو انا جيت لك هنا وعملتلك دلوقتي ريلود هتلاقي دلوقتي ان السطر ده بص بص خد عندك سطر كامل لوحده كل اللي بعد كده نزل عندك في سطر جديد اما البراجراف خد لك السطر كامل كده لوحده ولو انت دلوقتي وقفت على العنصر ده هتلاحظ دلوقتي ان السي اس اس في كلام ظهر عليه الكلام ده ما نعرفش دلوقتي ولكن اللي انا اعرفه ان البي بيكون ليها تنسيقات بيتم اضافتها من خلال اليوزر ايجنت استايل شيت ايه هو اليوزر ايجنت اليوزر ايجنت ده هو المكان اللي انت شغال عليه او ممكن نقول المتصفح او جوجل كروم في الحاله بتاعتنا المتصفح بيضيف عندك تنسيقات سي اس اس لكل عنصر البراجراف بيكون لها تنسيقات خاصه الاتش 1 بيكون لها تنسيقات خاصه الاتش 2 بيكون لها تنسيقات تانيه وهكذا التنسيقات دي انا مش عاوزك تركز فيها كل الكلام ده ان شاء الله هيتشر بعدين تمام طيب تعال دلوقتي لما نكمل مع بعض هنعمل عندنا دلوقتي بارجراف ونحط في السطر ده وهنعمل عندنا برجراف تاني ونحط فيه السطر ده بحيث ان كل سطر ياخد عندك لاين كامل لوحده ف لو عملت لك دلوقتي ريلود فبص كل برجراف خد عندك سطر كامل لوحده لو انت دلوقتي وقفت عندك هنا على اي بارجراف هتلاقيه دلوقتي بيشاور لك ان هو واخد سطر كامل لوحده بص ليه البراجراف بياخد عندك سطر كامل لان البراجراف هو عنصر بلوك لو انت دلوقتي وقفت عندك على اي بارجراف هتلاحظ دلوقتي ان هو واخد عندك ديسبلاي بلوك العناصر اللي بتيجي عندك على سطر واحد دي اسمها عناصر ان لاين ان لاين يعني بتيجي على سطر واحد اما العناصر اللي بتاخد عندك سطر كامل دي اسمها عناصر بلوك والكلام ده ان شاء الله هتعرفه بعدين ولكن انا بقولها لك كده بشكل مبدئي كمان في تنسيق تاني بيتم اضافته للبراجراف ومش عاوزك قوي تركز فيه لان احنا مش بنشرح تنسيقات ولكن انا بس بعرفك ايه هو البراجراف علشان بس يكون عندك معلومات عامه مش اكتر تمام البراجراف بيتم اضافه ليه حاجه اسمها مارجن او مسافه هتلاقي دلوقتي في مسافه عندك من فوق ومن تحت ولو انت دلوقتي رحت عندك بالماوس على اي بارجراف اي واحد فيهم هتلاقي دلوقتي في حاجه كده خط اورنج من فوق ومن تحت الخط الاورنج ده هو المارجن هو المسافه المسافه دي بيتم اضافتها بشكل تلقائي لاي عنصر بارجراف فدلوقتي لو انت عندك مقاله مثلا تقدر دلوقتي ان انت تكتب مجموعه فقرات نصيه كل فقره في براجراف ولكن افرض دلوقتي في المقاله بتاعتي انا عاوز دلوقتي اعمل مسافات ما بين كل فقره والتانيه اعمل الكلام ده ازاي هل دلوقتي اناجي لك هنا واجيب لك دلوقتي الانتر دي بالشكل ده واعمل لك مسافات بالشكل ده الاجابه لا ا انا عارف دلوقتي ان المتصفح بيلغي كل المسافات دي لو انا جيت لك هنا وعملت لك دلوقتي ريلود ولا كاني عملت حاجه طيب نعمل ايه هجيلك هنا وستخدم عندي تاج جديد وهو البي ار البي ار ده هو سنجل تاج يعني تاج مالوش ولا بدايه ولا نهايه ممكن طبعا تكتبه بالشكل ده او ممكن تكتبه بالشكل ده اللي انت عاوزه البي ار هو عنصر لاين بريك لو انت دلوقتي وقفت عليه هيقوللك دلوقتي ان البي ار ده هو عنصر لاين بريك يعني بيعمل لك سطر جديد لو انا جيت لك هنا وعملت لك دلوقتي ريلود هتلاحظ دلوقتي ان في سطر جديد اتعمل هنا لو جيت لك هنا وعملت لك دلوقتي سطر تاني وعملت لك دلوقتي ريلود هتلاحظ دلوقتي ان في سطر جديد تم اضافته وتضل دلوقتي ان انت تيجي عندك هنا وتعمل دلوقتي برض بي ار بالشكل ده تعال كده لما نعمل عندنا تاب وبرضو نعمل عندنا هنا بي ار ثانيه يبقى دلوقتي عندنا في مسافتين هنا وفي عندنا مسافتين هنا فلو جيت لك هنا و عملت لك دلوقتي ريلود فعمل لك دلوقتي سطرين هنا وعمل لك دلوقتي سطرين هنا الكلام ده تقدر تستخدمه جوه البراجراف نفسه يعني ايه الكلام ده انت لو جيت عندك جوه التاج وعملت عندك مسافات كتيره جدا المتصفح بيلغي عندك كل المسافات دي فلو جيت لك هنا وعملت لك دلوقتي سطر جديد ايا يكن مكتوب في ايه فكل اللي انت عملته ده هيتم الغاه لو انا جيت لك هنا وعملت لك دلوقتي ريلود تعال كده بس لما نكبر عندنا الشاشه دي فالسطر الاول جه بعده السطر الثاني زي ما مكتوب قدامك هنا هلو ماي نيمز عبد الرحمن جه بعدها السطر الثاني على طول الكلام ده حصل ليه لان كل المسافات دي المتصفح عندك بيغيه طيب نعمل ايه ممكن نجي لك هنا في المكان ده تعال كده ونستخدم عندنا وسم البي ار الوسم ده بيعمل لك عندك نيو لاين بيعمل لك دلوقتي سطر جديد تمام طيب دلوقتي في سؤال في ناس كتير اكيد بتساله دلوقتي ليه الكلام اغلبه بيجي عندك على شمال الشاشه يعني ليه مش بيجي في النص ولا في اليمين ولا في الكلام ده كله ليه دايما اي حاجه بكتبها بتيجي عندك في الشمال ببساطه لان الديفولت بتاع اي تكست انت بتضيفوا بيجي عندك في الفت بتاع الشاشه لو انت عاوز تتحكم في الموضوع ده طبعا احنا بنعمله بالسي اس اس ولكن انا هديلك فكره كده بالاتش تي ام ال انا ممكن اجيلك هنا جوه البراجراف تعال كده في البراجراف في المكان ده واستخدم عندي دلوقتي اتربيوت اسمه اللاين الانلاين بتاخد عندك ديفولت فو وهو الفت فسواء كتبتها او ما كتبتها هي كده كده تاخد عندك الديفولت فالو الليت اللي هو بيجي عندك على شمال الشاشه طب انا دلوقتي عاوز اجيبه في اليمين باجي عندك هنا وبكتب دلوقتي عندك هنا رايت تمام فجيل لك هنا وهعمل لك دلوقتي ريلود هيروح عندك في اليمين لو انا جيتلك هنا واستخدمت لك دلوقتي السنتر السنتر دي يعني في النص لو انا عملتلك دلوقتي ريلود هيجي عندك هنا في النص لو انت دلوقتي وقفت عندك هنا على البراجراف هتلاقي دلوقتي تعال كده هتلاقي دلوقتي ان البراجراف واخد عندك ستايل هو التكست الاين سنتر وهو ده مربط الفرس واللي انا هقوله لك دلوقتي ده من اسئله الانترفيو المهمه جدا جدا دلوقتي انت لما بتستخدم عندك الاتربيوت اللي اسمه اللاين بيعمل لك على طول خاصيه في السي اس اس اسمها التكست اللاين فالكست انلاين دي بتعادل عندك الاتربيوت اللي اسمه اونلاين لو انت ملاحظ هتلاقي بيقوللك ان التكست اونلاين ده اتعمل عندك عشان الاتربيوت بتاع البراجراف ده الاتربيوت اللي هو الالين ده فاحنا ساعه الجد لما بنشتغل وبنعمل مشروع حقيقي ما بنستخدم فيها الاتربيوت اللي اسمه اللاين بنستخدم عندنا الخاصيه اللي في السي اس اس اللي اسمها تكست انلاين ما بنكتبش عندنا الاتربيوت ده طبعا التكست انلاين دي انت هتتعلم ان شاء الله لما تدخل في السي اس اس ولكن انا دلوقتي بعرفك علشان لو اتسالت في الانترفيو واحد قاللك دلوقتي ليه احنا مش بنستخدم الاتربيوت اللي اسمه اونلاين قول له لان الاتربيوت ده بيعمل لك اصلا الخاصيه اللي في السي اس اس اللي اسمها تكست اونلاين فانا الاولى ان انا اكتب عندي الخاصيه دي بدل ما اكتب اتربيوت بيعمل لي الخاصيه طب انا اكتب الخاصيه على طول انت فاهم علشان كده في الاتش تي ام ال 5 الاونلاين اصبحت not سبورت في الاتش تدي ام ال 5 غير مدعومه في الاتش تي ام ال 5 واي عنصر اصلا تلاقيه مكتوب عندك باللون الاحمر ده تعرف ان هو not سبورت غير مدعوم طيب سيبك من الانلاين دلوقتي وتعال دلوقتي نتكلم على موضوع مهم جدا دلوقتي لو انا جيت لك هنا جوه البراجراف وعملت لك دلوقتي المسافات دي طبعا احنا عارفين ان المسافات دي مش هتظهر عندنا في البراوزر فلو دلوقتي انا جيت لك هنا وعملت لك دلوقتي ريلود كلهم هيجوا عندك على نفس السطر ولكن افرد انا مش عاوز كده افرض دلوقتي انا عاوز كل المسافات وكل الحاجات اللي انا عملتها دي تظهر عندي هنا في البراوزر في الحاله دي ما بتستخدم عندك وسم البي في الحاله دي بتستخدم عندك وسم تاني وهو البري الوسم اللي قدامك ده فمن خلال الوسم ده كل اللي انت بتعمله جوه هنا بيظهر عندك في البراوزر كل المسافات دي هتظهر عندك دلوقتي في البراوزر فدلوقتي انا لو عملت لك هنا ريلود بص شوف كل الكلام ده ظهر عندك تعال دلوقتي لما ابينها لك اكتر وتعال هنا لما نعمل دلوقتي شويه المسافات دي هعمل لك دلوقتي هنا ريلود المسافات دي ظهرت عندك لو انا جيت لك هنا وعملت لك المسافات دي برض المسافات دي ظهرت عندك اي حاجه انت هتعملها عندك اهو كل الكلام ده هيظهر عندك دلوقتي في البراوزر طيب بنستفاد من حاجه زي كده ايه تعال دلوقتي لما اوريك عندنا تاج في الاتش تي ام ال اسمه كود الكود ده واسم من خلاله بنكتب عندنا كمبيوتر كود عاوزينه يظهر للمستخدم فممكن انت مثلا تكون عاوز تظهر للمستخدم مثلا كود من جافا سكريبت عاوز انت بس تعرض له الكود ده عاوز مثلا تعرض له كود سي بلس بلس عاوز تعرض له كود بايثون عاوز بس توريه الكود تعرضه له بس مش اكتر يعني ايه الكلام ده تعالى دلوقتي لما اوريك مثال عملي لو رحنا لك دلوقتي على موقع نوفل او ا يكن ورحنا هنا على البروبلم سولفينج واخترنا مثلا تعال كده لما نختار هنا الجافا سكريبت انا انا بس عاوز اوريك كود علشان تفهم انا بقول لك ايه فتعال كده مثلا لما نروح عندنا للاختبارات اللي موجوده عندنا نختار مثلا اختبار ال اي اختبار تعال مثلا نختار عندنا اللوب وتعال لما نيجي عندنا هنا ونبدا دلوقتي الاختبار انا بس عاوز دلوقتي اوريك كود تجاهل دلوقتي السؤال ده وتجاهل دلوقتي السؤال ده اهو دلوقتي ده كود ظهر قدامنا الكود اللي قدامك ده معمول علشان يظهر للمستخدم مش علشان يتنفذ في الموقع معمول الكود اللي قدامك ده علشان يظهر المستخدم فلو انت ملاحظ هتلاقي عندك دلوقتي هنا مسافات المسافات دي موجوده عندك هنا اهي وهنا اهي وكل الكلام ده هتلاقيه موجود عندك بالشكل اللي قدامك ده الكلام اللي قدامك ده مش هتقدر تعمله غير من وسم البري المسافات اللي قدامك دي اللي بيعملها لك هو وسم البري طبعا تقدر تعملها بحاجات ثانيه كتيره جدا ولكن هتاخد منك وقت ومجهود كبير واسم البري هو اللي بيختصر عليك الدنيا ازاي الكلام ده تعالى دلوقتي لما نشوف مثال عملي طيب دلوقتي لو انا رحت هنا في الكود في الكود ده انا ممكن دلوقتي اكتب لك هنا اي كود عاوز دلوقتي اعرضه للمستخدم فممكن اكتب لك مثلا كود جافا سكريبت كود جافا كود بايثون كود سي بلس بلس المهم ان انا دلوقتي بكتب عندي كود علشان بس اعرضه للمستخدم فتعال دلوقتي لما نكتب عندنا كود جافا سكريبت علشان بس ابين لك الفكره ولكن ما تركزش في الكود اللي هو الجافا سكريبت ده تمام طيب دلوقتي هكتب لك هنا كونست ما تركزش في الكود ده هكتب لك كونست اكس اال 10 وهكتب لك هنا كونست واي ايكوال 20 في اصوات كده في الخلفيه يا ربما ما تكونش سامعين لمهم هقوللك دلوقتي كونسول دوت لوج اجمعي دلوقتي مثلا الاكس على الواي بالمنظر اللي قدامكم ده ده كود جافا سكريبت المفروض دلوقتي ان انا اعامل الكود ده علشان يظهر عندك كل سطر في لاين لوحده لكن مش ده اللي هيحصل لو انا دلوقتي عملتلك هنا ريلود تعال كده لما اوريها لك ظهروا عندك كلهم على نفس السطر هل انت عاوز كده لا انا مش عاوز كده فعلشان تحل المشكله دي بنحلها من خلال البري فبنا اخد عندنا الكود ده انا دلوقتي بوريك بس اهميه البري فاخد لك دلوقتي الكود ده واحط عندك هنا جوه وسم البري ما بين البدايه وما بين النهايه طبعا هنشيل عندنا المسافه دي حتى برض المسافات دي هتظهر عندك هنا في المكان ده لو انت دلوقتي مش عاوز المسافات دي بتيجي عندك هنا بالشكل ده وبتعمل دلوقتي شفت تاب من الكيبورد وبتعمل عندك هنا ريلود ف بيظهروا عندك بالشكل ده دي احد استخدامات البري انا هنا مش بشرحلك الكود الكود ده ان شاء الله هنعمله بعد كده في مشروع لما ندخل عندنا في السي اس اس انا دلوقتي بوريلكس اهميه البري وده اكتر مثال بنستخدم فيه البري اتمنى يا رب تكونوا فهمتوا واعتقد ان انتم فهمتوا ومؤهلين ان احنا نعمل دلوقتي مشروع بسيط جدا الفيديو الجاي يلا بينا لما نروح للفيديو الجاي واشوفكم على خير النهارده ان شاء الله هنتكلم عن الفورمات تكست الدرس ده مهم جدا ومحتاج تركيز لان في معلومات كتيره جدا ان شاء الله تتقال النهارده علشان نفهم الفورمات تكست لازم نفهم الفرق ما بين العناصر البلوك والعناصر الان لاين دلوقتي احنا اتكلمنا قبل كده على عنصر اسمه البي وده عنصر بارجراف العنصر ده لو انت كتبت جواه اي كلمه اي كلمه عاديه جدا الكلمه دي هتظهرلك تعال كده الكلمه دي هتظهرلك هنا في المكان ده بالشكل ده كلام عادي جدا وفهمناه وتعلمناه قبل كده اتعلمنا كمان ان البراجراف ده هو عنصر بلوك يعني ايه عنصر بلوك يعني لو انت عملت عندك كذا بارجراف كل واحده فيهم هتيجي عندك على سطر جديد لو عملت لك دلوقتي ريلود كل واحده فيهم هتيجي على سطر جديد حتى لو هم نفسهم انت كنت عاملهم على نفس السطر بالشكل ده برض هيجوا عندك على سطر جديد تعال كده ريلود كل واحده فيهم على سطر جديد وده لان البي هو عنصر بلوك عايز اقول لك ان انا عندي عنصر اني شبه البي وهو الابان تعالى كده لما نكتب عندنا نفس الكلمه نفس الكلمه دي هكتبها عندي هنا في المكان ده وتعال دلوقتي لما نشوف الفرق ما بين البي وما بين السبان هتلاحظ كده ان ما فيش اي فرق ما بين البي اللي هي الكلمه الاولى وما فيش فرق ما بين الكلمه الثانيه اللي احنا حطيناها في تاج الابان ولكن طبعا في فرق ما بين البي وما بين السبان فالبي هو عنصر بلوك اما السبان هو عنصر ان لاين فلو انا جيت لك هنا وعملت لك دلوقتي اكتر من سطر تعال كده امسح دلوقتي البي احنا فهمناها خلاص دلوقتي انا عملت عندي ثلاث سطور من السبان ولكن السبان هو عنصر ان لاين فلو عملت لك دلوقتي ريلود هيجوا عندك على نفس السطر فهمت طيب الكلام ده بقى كله هيكون مدخل للفورمات تكست فكل عناصر الفورمات تكست اهو من قبل ما اتكلم هي عناصر ان لاين طيب الاول كده بس يعني ايه فورماتين تكست كلمه فورماتين تكست معناها تنسيق النص تنسيقه زي ان انت تكبر النص تخليه بولد او ان انت تصغره او ان انت تميله تخليه اتالك او ان انت تعمل عليه مارك علامه كده او ان انت تحط شرطه تحته او شرطه في النص او حاجات ثانيه كتيره هنتعلم ان شاء الله في الدرس ده ولكن قبل ما نتكلم اهو كل التنسيقات اللي انا هتكلم عليها تقدر تعملها بالسي اس اس تمام يعني في حاله بس ان انت مش هتستخدم سي اس اس فتقدر تستخدم التاجز دي الكلام اللي انا هقوله دلوقتي تمام طيب تعال دلوقتي لما ناخد مع بعض اول تنسيق وهو ان انت تصغر حجم الخط لو انا جيت لك هنا وكتبت لك دلوقتي براجراف في دلوقتي اي كلمه في العالم اي كلمه تمام وجيت لك هنا وعملت لك دلوقتي ريلود فده حجم الخط اللي ظهر عندك لو انا جيت لك دلوقتي وحبيت اصغر حجم الخط ده نعمل الكلام ده ازاي بنعمل الكلام ده من خلال تاج اسمول سمول ومن اسمه لو انت كتبت دلوقتي جواه اي جمله تعال كده لما نكتب نفس الجمله بالظبط نفس الجمله دي هي اللي انا كتبتها هنا ومع ذلك لو انا عملتلك دلوقتي ريلود فال السمول حجمها اصغر من الكلمه العاديه مش م متاج اقول لك ان السمول هو عنصر ان لاين طيب ليه كل شويه انا عمال اكد واقول ان لاين لان معنى ان انا اقول لك كلمه ان لاين يعني تقدر تستخدمه جوه التاجز نفسها ممكن اجيلك هنا دلوقتي جوه البراجراف ده جوه هنا واقول لك دلوقتي انا عاوز مثلا اصغر الكلمه دي فاخد دلوقتي الكلمه دي كات واحطها دلوقتي في تاج السمول بالشكل ده وبما ان السمول ده او التاج ده ان لاين فمش هينزل لي بالكلمه دي في سطر جديد يعني مش هيبوظ عندي الجمله دي فلو جيتلك هنا وعملتلك دلوقتي ريلود الاتنين على نفس السطر ولكن الكلمه دي هي حجمها اصغر من الكلمه دي تمام ودي فايده ان انا اقوللك ان العنصر ده ان لاين طيب تعالوا بقى لما نتعلم بقيه عناصر الفورمات ولكن في مثال واقعي شويه دلوقتي هنتخن عندنا موقع لبيع المنتجات وعندنا دلوقتي منتج في الموقع ده المنتج ده بيكون ليه عنوان هنعمله مثلا من خلال الاتش 3 تمام اسم المنتج مثلا اي حاجه ماك بوك مثلا ماك بوك اير ام 2 مثلا يعني تمام طيب دلوقتي انا عندي المنتج ده تعال كده لما نشوفه انا عندي الماك بوك اير ام 2 الماك بوك اير برض بيكون له سعر هنعمل السعر مثلا في براجراف فهقولك دلوقتي ان البرايس هيكون مثلا مثلا مثلا 1300 دولار فدلوقتي 1300 دولار تعال بقى لما نستخدم عندنا الفورمات اول فورمات هنعمله هو البولد تاثير البولد انا مثلا دلوقتي الكلمه دي اللي هو المبلغ بتاعي يكون بتاثير البولد فهش دلوقتي هاخده دلوقتي كت وهكتب عندي تاج البولد اللي هو بي بتكتب عندك بي بالشكل ده وبتحط دلوقتي جواه الكلمه اللي انت عاوز تعملها بولد ومش محتاج طبعا اقوللك ان البي ده هو عنصر ان لاين اصلا كل الفورمات هي عناصر ان لاين لو عملتلك دلوقتي ريلود ركز دلوقتي في التاثير بتاع ال 1300 ده هعمل لك دلوقتي ريلود فبقت بولد عندك بالشكل ده عندنا حاجه تانيه زي البي بالظبط يعني بتعمل نفس الافكت بالبط بالظبط وهي السترونج لو جيت لك هنا وكتبت لك دلوقتي السترونج وحطيت دلوقتي جواها ال 1300 لو عملت لك دلوقتي ريلود مش هتحس دلوقتي باي فرق خالص اهو بص عملت لك اهو ريلود مافيش اي اختلاف ما بين البي وما بين السترونج الاثنين بيعملوا نفس الافكت وهو ايفيكت البولت هتقول لي طيب هو ما فيش اختلاف خالص هقول لك لا في اختلاف ولكن بيكون من ناحيه الاستخدام مش من ناحيه الافكت الاثنين بيعملوا نفس الافكت بالظبط ولكن انت بتستخدم البي في حاجه وبتستخدم السترونج في حاجه انيه مختلفه تعال دلوقتي لما نروح عندنا على جوجل وهنكتب عندنا هنا مثلا فورماتين فورماتين تاجز اتش تي ام ال زي ما موجوده قدامكم هنا واضغط لك دلوقتي هنا على انتر وهروح عندي على موقعي المفضل وهو دبليو 3 سكولز الموقع ده بحبه جدا وهنزل لك عندك هنا هلاقي لك دلوقتي بيقوللك ان البي انت بتستخدمها للبولد تكست والاسترونج انت بتستخدمها ليه الا امبورتنت تكست فهمتك انا كده صح هقوللك لا تعال دلوقتي لما افهمك الفرق ما بين البولد وما بين الابور انتت تاج ال بي انت بتستخدمه علشان تعمل ايفيكت البولد لمجرد الشكل مش اكتر لو انت عاوز تخلي اي كلمه بولد لمجرد ان شكل البولد حلو يعني مش اكتر اما السترونج فانت بتعملها للبورت انتت تكست للكلمات المهمه لو انت عندك عباره مهمه في الموقع بتاعك وعاوز العباره دي تظهر بشكل بولد فانت بتحط العباره دي في تاج السترونج عارف ان الصوره لسه مش كامله فتعال دلوقتي لما ناخد مثال عملي على كلمه مهمه جدا انا دلوقتي عندي المنتج ده عاوز دلوقتي اكتب عباره مهمه جدا تهم دلوقتي المستخدم فتعال كده لما نكتبها عندنا في تاج البي وهقول لك دلوقتي تحذير ورنين ده تحذير مهم جدا انا هقول لك مثلا في التحذير ده انا ما بقبلش الدفع مثلا بالباي بال مثلا يعني فهقولك نو بيمنت باي باي بال مثلا يعني دي رساله مهمه جدا رساله مهمه لازم المستخدم يشوفها [موسيقى] فالرسالة مش هخليها بولد بتاج البي هخليها بولد بتاج السترونج طالما هي كلمه مهمه فجيل لك هنا واكتب لك دلوقتي تاج السترونج واحط لك دلوقتي العباره دي في تاج السترونج فلو عملت لك دلوقتي تعال كده لو عملت لك دلوقتي ريلود فخليها لك دلوقتي بولد ولكن البولد ده امبورتنت تكست زي ما مكتوب لك هنا في موقع الدبليو 3 سكول امبورتنت تكست عندنا تاج تاني اسمه الاي وعندنا تاج تاني اسمه الاي ام والاثنين برض بيعملوا نفس الافكت وهو ايفيكت الايتك تعال دلوقتي لما نشوفه دلوقتي مع بعض هنشيل دلوقتي السترونج خلاص احنا اتعلمناها ورجع الكلمه زي ما هي بالشكل ده انا دلوقتي مثلا عاوز اخلي الكلمه دي اتالك تكون مايله كده فممكن اخليها اتالك بالاي وممكن اخليها اتالك بالاي ام فتعال دلوقتي لما نستخدم عندنا تاج الاي وحط لك دلوقتي الكلمه دي في تاج الاي فتعال كده لما نشوف دلوقتي الافكت ده فخلك دلوقتي الكلمه دي مايله او اتالك كمان برض تاج الاي ام اللي هو اختصار للانف سيز لو كتبت لك هنا اي ام وحطيت لك دلوقتي الكلمه دي في اللي هي كلمه الباي بال وجيت لك هنا وعملت لك دلوقتي ريلود هيعمل لك برض نفس الافكت بالظبط طيب ايه الفرق ما بينهم الفرق ما بينهم ان الاي دي انت برض بتستخدمها للشكل مش اكتر لو انت عاوز تخلي كلمه شكلها اتالك لمجرد الشكل بس مش اكتر طيب الانفا سيز الانفا سيز انت بتستخدمها لو انت عندك حكمه عاوز تقولها عندك اقتباس مثلا عاوز تعمله عندك مثلا مقاله بلغه معينه وفيها جمله من لغه تانيه زي مثلا انك بتكتب مقاله باللغه الانجليزيه وفي جمله باللغه الفرنسيه فجمله دي انت بتحطها عندك في انفا سيز فهمتوا طيب عندنا حاجه تانيه برض وهي المارك تعال كده لما نرجع خلي دلوقتي الجمله دي بدون اي افكت خالص عندنا حاجه تانيه وهي المارك المارك ده هي علامه باللون الاصفر انت ممكن تعملها على اي كلمه بالشكل اللي قدامك ده لو و انت عاوز تتعلم على اي كلمه زي اقلام المارك على فكره بالمناسبه اللي موجو عندنا في المكتبات نفس الموضوع بالظبط لو انت دلوقتي عاوز تعلم على اي كلمه بتستخدم عندك تاج المارك طيب لو انا دلوقتي عاوز احط شرطه تحت الكلمه تعال كده لما نشيل عندنا دلوقتي المارك لو انا دلوقتي عاوز احط شرطه تحت كلمه بيمنت فبش دلوقتي الكلمه دي وبستخدم عندي تاج اليو وبحط دلوقتي الكلمه اللي انا عاوز احط شرطه تحتها جوه تاج اليو وباجي لك هنا وبعمل لك دلوقتي ريلود فبيح لك دلوقتي شرطه تحت الكلمه دي تمام طيب عندنا برض حاجه زيها بالظبط وهي الانس لو انا جيت لك هنا وعاوز دلوقتي احط شرطه تحت الكلمه دي فبشرها وبستخدم دلوقتي عندي تاج الانس وبحط دلوقتي الكلمه دي اللي هي كلمه باي بال ما بين البدايه والنهايه لتاج الانس وبجيلك هنا وبعمل لك دلوقتي ريلود فبيح ط لك شرطه تحت الكلمه دي طيب ايه الفرق ما بين اليو وما بين الانس اليو برضو لمجرد الشكل مش اكتر اما الانس فالانس ده هو تاج اختصار لكلمه انسيرت تكست هبسط لك سريعا كده لو انت دلوقتي عندك مقاله او بوست او ايا يكن وانت نشرت المقاله دي خلاص كتبتها ودلوقتي ونشرتها 100 م جيت بعد كده حبيت ان انت تضيف كلام على المقاله دي فالكلام المضاف بتحطه عندك في الانس الانس اللي هي اختصار لكلمه انسيرت تكست كلام مضاف بتعرف المستخدم ان العباره دي انت اضفتها هي العباره دي ما كانتش موجوده قبل كده في المقاله العباره دي انت اضفتها جديد فاهم طبعا مخدهاش كتير ولكن هم حاطينها يعني لو انت حبيت تستخدمها وكده تمام طيب عندنا برض الشرطه اللي بتكون في النص دي الشرطه اللي من تحت الكلام عندنا كمان شرطه في نص الكلام ايوه يعني ايه الكلام ده عندنا دلوقتي تاج اسمه الاس التاج ده بيعمل لك دلوقتي شرطه في نص الكلام فلو عملت لك دلوقتي ريلود بص شوف الشرطه دي بقت فين وعندنا برض حاجه تانيه زيها هي الديل تعال كده لما نكتب عندنا هنا ديل فهعمل لك دلوقتي ريلود فهعمل لك دلوقتي شرطه هنا وشرطه هنا هنا برض ايه الفرق ما بين الاس وما بين الدل الاس لمجرد الشكل مش اكتر اما الدل بترمز ان الكلمه دي كلمه محذوفه ديل اختصار لكلمه ديليت طيب بنستخدمها في ايه هقول لك تعال كده لما نمسح عندنا الكلمه دي اشهر مثال للديل لو مثلا المنتج ده كان سعره مثلا 1500 1500 دولار ودلوقتي مثلا سعره بقى 1300 دولار تمام لو عملت لك دلوقتي ريلود المستخدم مش هيفهم اول كلمه دي يعني 1500 1300 ايه الكلمه دي لكن لو انا دلوقتي اخدت لك دلوقتي ال 1500 دي وحطيتها عندي في تاجل ديل بالشكل اللي قدامك ده وحطيت لك دلوقتي 1500 دولار هنا وعملت لك دلوقتي هنا ريلود فدلوقتي المستخدم عرف ان ال 1500 دي ديليت اتمسحت سعر قديم كان موجود واتمسح ودلوقتي ال 1300 دي هي السعر الجديد اخيرا هنتكلم عن الب سكريبت وعن السوبر سكريبت الاثنين دول عكس بعض وسهلين جدا جدا طيب اول حاجه هي الب سكريبت الب سكريبت دي تاثيرها عباره عن ان انت بتنزل كلمه من على السطر فلو انت عندك جمله مثلا كبيره وفي كلمه في الجمله دي انت عاوز تنزلها من على السطر فبت استخدم عندك السب سكريبت السوبر هي عكسها بترفع الكلمه فوق السطر طيب يعني ايه الكلام ده تعال بقى دلوقتي لما نشوف الكلام ده بشكل عمليه عاوز دلوقتي انزل الكلمه دي من على السطر فهن استخدم عندنا السب سكريبت فاخد لك دوي الكلمه دي كات وستخدم لك دلوقتي السب سكريبت وهحط لك فيها دلوقتي الكلمه دي وهجيلك هنا وهعمل لك دلوقتي ريلود فالكلمه دي نزلت من على السطر العكس بتاعها طبعا هو السوبر سكريبت وهجيلك هنا فالكلمه طلعت فوق السطر طيب دول استخداماتهم دلوقتي السوبر سكريبت اللي قدامك دي احنا ممكن نستخدمها في الاس مثلا في الباور اللي بيكون في الماس فلو دلوقتي انا عندي ان اس انين عندي دلوقتي الرقم ده مثلا يعني تمام فاللي قدامك هنا ده مش ان اس انين ده ان وجنبه اين علشان تخلي الثنين دي اس للن فبتركها على الاثنين دي واخدها دلوقتي كات واحطها عندي فين احطها عندي في سوبر سكريبت وبحط فيها دلوقتي رقم اثنين طبعا تعال كده لما نشيل المسافه دي وهجيلك هنا وهعمل لك دلوقتي ريلود فالاثنين اترفعت فوق السطر فاصبحت عندك اس طيب والسب سكريبت السب سكريبت زي ما هو موضح لك هنا بيقول لك انت ممكن تستخدمها في مثال مشهور جدا وهو ال h2o في المثال ده هو الاثنين نازله تحت عندك هنا تعال دلوقتي لما نجربها دلوقتي مع بعض انا ممكن اجيل لك هنا في المكان ده واقول لك دلوقتي انا عندي رمز الاتش 2o اللي بيستخدموه بتوع الكيميا طبعا انا دلوقتي عاوز الرقم اثنين ده ينزل من على السطر فاخد دلوقتي الرقم ده وستخدم دلوقتي تاج الصب بالشكل اللي قدامك ده وحط لك فيه دلوقتي رقم اثنين فلو جيت لك هنا وعملتلك دلوقتي ريلود فال 2و نزلت تحت واصبحت دلوقتي h2o بالشكل اللي معروف [موسيقى] عنه مافيش موقع في العالم مش بيكون فيه صور يعني الصور دي من الحاجات الاجباريه اللي انت المفروض تكون فاهمها تمام طيب تعلم الصور في حد ذاته مش صعب تعلم الصور من الحاجات السهله جدا في الاتش تي ام ال صعوبه الصور بتكون في فهمك للمسارات في فهمك انت جايب الصوره دي منين بالظبط فتعال دلوقتي لما نتعلم مع بعض ازاي بنضيف صوره في الموقع بتاعنا بطريقه سهله جدا دلوقتي انا علشان اضيف صوره فبجيب الصوره زي الشاطر كده وبحطها جنب ملف الاتش تي ام ال انا بقوللك الفكره كلها في المسارات فخلي مسار الصوره جنب ملف الاتش تي ام ال تمام وانس ان هي جنب ملف الاتش تي ام ال هروح عندي دلوقتي في ملف الاتش تي ام ال طبعا هلاقيه جنبه بالضبط عندك هنا فجيل لك هنا في الملف ده وهكتب لك وسم الامج اول ما هضغط دلوقتي هنا على هتلاقي دلوقتي اضف لك اتنين اتربيوت اساسيين وهما الاس ار سي والال الاس ار سي ده معناه سورس الوره او مكان الصوره او اليور ار ال بتاع الصوره لو انت دلوقتي وقفت على الاس ار سي هتلاقي دلوقتي بيقوللك ان ده معناه ذاج يور ار ال هو ده اليور ال بتاع الصوره دي اما الالت هو الرنف او وصف الصوره او الكريشن بتاع الصوره دي لو دلوقتي انا وقفت عليه هيقوللك ان ده هو الرنف اللي هو يعتبر التكست هو الكريشن هو الوصف بتاع الصوره دي طب يعني ايه الوصف ويعني ايه السورس هنفهم دلوقتي ان شاء الله مع بعض الاول كده الامج هو سينجل تاج طيب ليه سنجل تاج مش تاج عادي زي البي مثلا لان البي انت بتضيف جواه كونتنت انا ممكن اجيلك هنا واكتبلك دلوقتي هنا اي كونتنت ما بين البدايه وما بين النهايه لكن الصوره انت مش بتضيف فيها كونتنت الصوره في حد ذاتها هي كونتنت الصوره هي اضافه انت بتضيف وفقط لا غير طيب انا دلوقتي محتاج ان انا اضيف الصوره دي جوه ملف الاتش تي ام ال يبقى هتروح دلوقتي للاس ار سي للسورس ده وهتيجي عندك هنا وتكتب اسم الملف الملف اللي هو الصوره فجيل لك هنا واكتب لك دلوقتي ايج دوت جي بي جي الامتداد بتاعه بالكامل انا كتبت الاسم بس لان الصوره جنب الملف لو الصوره ما كانتش جنب ملف الاتش تي ام ال كنت هكتب حاجات تانيه هنتكلم عليها دلوقتي ان شاء الله طيب انا دلوقتي قبل ما نتكلم كده على الالت امسحها دلوقتي هنتكلم عليها ان شاء الله هجي لك هنا وهعمل لك دلوقتي ريلود فهلا قي دلوقتي الصوره ظهرت عندي وم م طيب افرد الصوره ما كانتش جنب ملف الاتش تي ام ال يعني افرد دلوقتي انا كان عندي هنا مثلا فولدر جيت لك هنا وعملت لك دلوقتي فولدر تمام سميته مثلا اي حاجه وليكن ايمج واضفت دلوقتي الصوره دي جوه الفولدر ده ايه اللي هيحصل ايه اللي هيحصل ان الصوره مش هتتعرض بص عندك كده شوف ظهر لك ايه ظهر لك كده بيقول لك ان ان ما فيش صوره موجوده عندك هنا في المكان ده انت دلوقتي عملت عندك ايمج السورس بتاعه غلط ليه غلط لان ما فيش صوره جنب الملف ده طيب في الحاله دي بنعمل ايه في الحاله دي بنكتب المسار الصحيح للصوره دي هي الصوره دي موجوده فين الصوره دي موجوده عندك في فولدر اسمه ايدج يبقى هتكتب عندك اسم الفولدر ده وبعدين انا دلوقتي عاوز ادخل جوه الفولدر ده فكتب عندي سلاش خلي بالك هو اصلا لوحده كاتب لك الصوره اللي موجوده جوه الملف ده فكتب لك دلوقتي اسمها على طول اللي هو الامج دوت جي بي جي بالشكل اللي قدامك ده لو جيت لك هنا وعملت لك دلوقتي ريلود فالصوره ظهرت عندك طيب علشان نختبر فهمنا للمسارات لو انا جيت لك دلوقتي جوه الفولدر اللي موجود فيه الصوره دي وعملت فولدر تاني تعال كده نختبر فهمنا سميت لك الفولدر ده مثلا تست اي اسم في الدنيا واضفت فيه الصوره دي يبقى دلوقتي انا عندي ايه انا دلوقتي عندي ملف اتش تي ام ال جنبه فولدر الفولدر ده جواه فولدر تاني جوه الصوره بتاعتي طيب دلوقتي لو انا كتبت له الكود بالشكل ده هل هيشتغل لا مش هيشتغل لان جوه فولدر الايمج انا ما عنديش الصوره بشكل مباشر انا عندي فولدر تاني اسمه تيست فلو جيت لك هنا وعملتلك دلوقتي ريلود مافيش حاجه ظهرت طيب علشان تظهر بنعمل ايه وقف دلوقتي الفيديو وجاوب كده مع نفسك لو عرفت اكتب في الكومنتات لو ما عرفتش تابع دلوقتي وشوف الحل معانا دلوقتي المجلد اللي اسمه ايمدج ده جواه مجلد تاني اسمه فه جيلك هنا واقوللك دلوقتي بعد المجلد ده انا عندي مجلد تاني اسمه تست جواه الصوره دي جواه دي يعني سلاش فورورد سلاش بالشكل ده لو انا جيتلك كده وعملتلك دلوقتي ريلود فظهرت لك الصوره دي طيب انا كل ده برض بتكلم على اساس ان مجلد الصور جنب ملف الاتش تي ام ال يعني دلوقتي كل شغلك كله جنب بعض ملف الاتش تي ام ال جنبه مجلد الصور ولكن افرد مش ده اللي كان موجود عندك افرد دلوقتي الصوره دي كانت في بارتشن مختلف كانت في الديسك توب كانت في الداون لودز كانت في بارتيشن تاني طبعا انا مش بقوللك تعمل كده وغلط جدا ان انت تعمل كده ولكن هنفترض ان انت فعلا عملت كده دلوقتي الصوره دي في الديسك توب مثلا ازاي الصوره اللي في الديسك توب اربطها مع ملف الاتش تي ام ال تعال دلوقتي لما نجرب مع بعض ونشوف هروح دلوقتي للصوره دي واخد دلوقتي كوبي علشان احطها في مكان مختلف وهروح مثلا للديسك توب او ارح مثلا للداون لودز اي مكان اختار اللي انت عاوزه واختار مثلا المجلد اللي اسمه ايجز ده روح دلوقتي واحط لك الصوره دي ست في المكان ده فدلوقتي انا عندي صوره موجوده عندي جوه الداونلود تعال كده بقى لما نرجع عندنا لملف الاتش تي ام ال ونمسح عندنا المجلد ده بالكامل طبعا انت دلوقتي مسحت المجلد ده لو انا جيتلك هنا وعملتلك دلوقتي ريلود الصوره اتمسحت ومش هتظهر عندك طيب انا دلوقتي عاوز اوصل للصوره اللي موجو عندك فين اللي موجو عندك في الداون لودز في المجلد ده علشان توصل للصوره دي بتجيب الباث ده بالكامل ايا يكن موقع الصوره دي لو موقعها في الدي بتجيب عندك الباث بالكامل لو موقع في الديسك توب بتجيب عندك الباث هي موقع عندي هنا في الداون لودز في المكان ده فاجيب دلوقتي الباث ده بالكامل اللي هو المسار ده بالكامل وهروح عندي هنا وهحط دلوقتي تعال كده هحط لك دلوقتي المسار ده جوه الاس ار سي المسار ده بالكامل خلي بالك المسار ده مسار المجلد مش مسار الصوره نفسها يعني مسار المجلد اللي موجوده في الصوره دي فعلشان اوصل للصوره دي ججي لك هنا وهكتب لك دلوقتي باك سلاش او فورورد سلاش اللي انت عاوزه فهن جرب دلوقتي الباك سلاش ايج دوت جي بي جي بالشكل ده لو جيت لك هنا وعملت لك دلوقتي ريلود الصوره اتعرضت وم 100 طبعا مسارات الويندوز بتكون عندك باك سلاش لو انت برض جيت هنا وكتبت عندك فورورد سلاش شغاله برض معاك و 100 م لو جيت لك هنا وعملت لك دلوقتي ريلود شغاله معاك و 100 م طبعا الشغل ده غلط جدا واوعى تعمل كده الشغل الصح هو ان انت تحط شغلك كله في مجلد واحد بالشكل اللي موجود قدامك ده الصور جنب ملف الاتش تيم ال ولما نعمل ان شاء الله ملفات سي اس اس برضو كلها تكون موجوده عندنا في المجلد ده طيب كمان برضو الصوره دي انت ممكن تكون جايبها من على الانترنت فلو انت عندك صوره على الانترنت بتحط اللينك بتاعها او المسار بتاعها في الاس ار سي بتاع الامج دي فلو دلوقتي انا رحتلك هنا للانترنت وكتبتلك مثلا اش تي ام ال او اي حاجه يعني و حطلك دلوقتي على الصور واخترت دلوقتي اي صوره ايا يك مثلا الصوره دي فهيج لك هنا على الصوره دي ركز كليك يمين ثم كوبي ايمج ادرس او ممكن ان انا افتح الصوره دي في تاب تانيه واجيب دلوقتي المسار بتاعها ده اللي انت عاوزه عاوز تعمل كده عاوز دلوقتي تيجي هنا كليك يمين وتختار دلوقتي كوبي ايمج ادرس اللي انت عاوزه الاتنين واحد فاجي لك دلوقتي واخد كوبي للينك بتاعها واحطه دلوقتي في الاس ار سي بالشكل دهل لاحظ دايما ان مسارات الصور اللي انت بتجيبها من على الانترنت بتكون طويله بالشكل ده تمام لو انا جيت لك هنا ورحت لك هنا وعملت لك دلوقتي ريلود فهي عرض لك دلوقتي الصوره دي بشكل عادي جدا فمتحزنش [موسيقى] بتاعك فهاج دلوقتي الصوره بتاعتي اللي احنا كنا شغالين عليها اللي موجوده عندنا جوه مجلد الايمج وعندنا دلوقتي جوه المجلد ده مجلد تاني اسمه تست وجوه المجلد ده الصوره بتاعتنا اللي هي الامج دوت جي بي جي بالشكل اللي قدامك ده طيب يعني ايه الالت اللي كانت مكتوبه من شويه الالت هو وصف الصوره والوصف ده انت بتحطه في حاله ان الصوره دي ماتعرضت الصوره دي خلي بالك ممكن ما تتعرض للمستخدم لعده اسباب ممكن الانترنت عنده يكون ضعيف ممكن يكون فاتح من براوزر قديم مثلا ممكن اسباب كتيره جدا تخلي الصوره دي ما تتعرض للمستخدم فانا دلوقتي عاوز لو الصوره دي ماتعرضت يعرض لي دلوقتي وصف يقول لي الصوره دي مثلا كانت بتتكلم عن ايه فمثلا ده اللوجو بتاعي فجيل لك هنا في الالت وهكتب لك هنا لوجو او اكتب الوصف اللي انت عاوزه لو انا جيت لك هنا وعملت لك دلوقتي ريلود الالت ده مش هيظهر عندك طالما الصوره اتعرضت يبقى الالت عندك مش بيظهر لو انا جيتلك هنا كليك يمين ورحت لك دلوقتي على انسبكت علشان الغي عرض الصوره دي لو وقفت لك دلوقتي على الصوره بتاعتنا تعال كده لما نلغيها اجيلك هنا على الاس ار سي وهنمشي قدامك ده وهجيلك هنا وضغط دلوقتي هنا على انتر فدلوقتي الصوره ماتعرضت طالما الصوره ماتعرضت يبقى الالت عندك هو اللي هيتعرض تعال كده لما نكبر فظهر لك هنا كلمه لوجو الكلمه دي هي الكلمه اللي انت اضفتها من خلال الالت كمان عندنا اتربيوت تاني مهم جدا وهو التايتل التايتل ده مش اتربيوت خاص بالمج التايتل ده هو جلوبال اتربيوت جلوبال اتربيوت يعني اتربيوت خاص باي عنصر ممكن تستخدمه مع الاتش 1 الاتش ت البراجراف مع اي عنصر التايتل ده بيدي للمستخدم معلومات عن العنصر ده فممكن اجيلك هنا مثلا واقوللك ان ده ذس از لوجو مثلا او لوجو يعني مش مشكله المهم طيب الكلمه دي بتظهر للمستخدم امى الكلمه دي بتظهر لو وقفت بالماوس على العنصر ده فلو جيت لك هنا وعملت لك دلوقتي ريلود وصغرت لك دلوقتي الصوره دي علشان احنا كنا مكبرين الشاشه لو دلوقتي انا وقفت لك بالماوس على العنصر دي هيظهر لك دلوقتي مربع شايف المربع ده مربع موجود في الكلمه اللي انت كتبتها على العنصر ده التايتل دي ممكن تستخدمها مع اي حاجه يعني ممكن اجيلك هنا وعمل لك دلوقتي براجراف موجود في اي كلمه في الدنيا تمام الكلمه دي لو انا عملت لك دلوقتي ريلود ووقفت عليها تعال كده لو وقفت عليها من هنا لبكره مافيش اي حاجه هتظهر على الكلمه دي لكن لو انا جيت لك هنا واستخدمت لك دلوقتي التايتل ده الجلوبال اتربيوت اللي اسمه تايتل وكتبت لك هنا اي حاجه وليكن مثلا هلو اي حاجه في الدنيا لو جيت لك هنا وعملت لك دلوقتي ريلود وقفت لك دلوقتي على العنصر ده هيظهر لك دلوقتي الكلمه دي اللي ظهرت من خلال التايتل فتايت ده هو لوبال اتربيوت تمام جدا جدا امسح دلوقتي البرجراف ده طيب عندنا كمان اتربيوت زي الهايت والوي والبورد والثلاثه دول احنا مش هنستخدم خالص يعني انت يكفي بس ان انت تكون عارف ان هم موجودين بس مش اكتر لكن ان شاء الله التحكم في الطول والعرض وكمان اضافه البوردر كل ده ان شاء الله هنعمله من خلال السي اس اس فتعال دلوقتي بس لما نتعرف بس عليهم انا دلوقتي عندي تربيوت اسمه تيتس وده للتحكم في العرض للصوره دي قبل دلوقتي ما نكتب هنا اي حاجه ده العرض اللي موجود للصوره دي تعال كده ده العرض اللي موجود للصوره دي ممكن اجيلك هنا واكتب لك هنا اي رقم لو انا دلوقتي كتبت لك 200 الرقم اللي انا بكتبه هنا ايا يكن بيكون بالبيكسل يعني معنى ال 200 دي هي 200 بيكسلز فلو انا جيت لك هنا وعملت لك دلوقتي ريلود فصغر لك حجم الصوره دي ل 200 بيكسلز ممكن اجيلك هنا واخليه لك مثلا 400 فلو جيت لك هنا وعملت لك دلوقتي ريلود فبقت 400 بيكسل مش محتاج اقوللك ان انت لما بتكبر او بتصغر العرض الارتفاع بيتناسب مع العرض اللي انت كتبته لكن لو انا جيت لك هنا وحبيت برض ان انا اتحكم في الطول والعرض مع بعض يعني قلت لك هنا دلوقتي تحكم لي في الهايت وخليها لي مثلا 400 يبقى دلوقتي العرض عندك 400 والطول عندك 400 كده الصوره دي الابعاد بتاعتها ممكن ان هي تبوظ منك بص بالمنظر اللي قدامك ده تعال كده لما ابينها لك اكت هنا 200 والطول مثلا خليها 100 مثلا لو جيت لك هنا وعملت لك د ريلود فبص ابعاد السر عندك باظت بالشكل اللي قدامك ده فده بالنسبه للطول والعرض ومش هنستخدم ان شاء الله خالص في الاتش تي ام ال عندنا حاجه تانيه برض هي البوردر اللي هي اتلغت اصلا ما بقتش موجوده ما بقيناش بنستخدمها البوردر دي بتضيف لك حواف للصوره بتاعتك فده شكل الصوره قبل ما نعمل اي حاجه للصوره دي لو انا دلوقتي عاوز اضيف حواف خارجيه للصوره دي بكتب هنا مثلا 10 دي 10 بيكسلز فلو عملت لك دلوقتي ريلود فضف لك دلوقتي حواف خارجيه بمقدار 10 10 بيكسلز برض مش هنستخدمها ان شاء الله في الاتش تي ام ال هنستخدم البوردر اللي موجوده في السي اس اس ان شاء الله لما نتعلم سي اس اس كمان برضو في حاجه مهمه جدا في الصوره لازم ان انت تكون فاهمها الصوره دي هي ان لاين هو عنصر ان لاين فلو انا عملتلك دلوقتي صورتين لو جيتلك هنا وعملتلك دلوقتي ريلود الصورتين دول جم جنب بعض على نفس السطر دلوقتي انا عندي هنا ملف صوتي ملف ام بي 3 عاوز دلوقتي الملف ده تكون موجو عندي في الموقع بتاعي اعمل ايه تعالى دلوقتي لما نشوف ازاي بنضيف عندنا الصوتيات في ملف الاتش تي ام ال علشان تضيف عندك الصوتيات فانت عندك وسم الوسم ده مسؤول عن الصوتيات وهو وسم الاوديو الوسم ده للعلم كده بيكون لبدايه وبيكون ليه نهايه وهقول لك ليه شويه كده بيكون ل بدايه ونهايه مش وسم سنجل تاج زي وسم الايمج ولكن انا عاوز تركيزك دلوقتي يكون على الاس ار سي اللي هو الاتربيوت الاساسي للاديان في مشكله كبيره جدا هقولها لك دلوقتي الاس ار سي هو اتربيوت خاص بمسار الصوت او مكان الصوت او اليو ار ال بتاع الصوت فمن خلال دلوقتي الاس ار سي ده انت بتضيف عندك مكان الصوت بتاعك فدلوقتي انا عاوز اضيف الصوت ده فجيل لك هنا وهكتب لك دلوقتي ملف الصوت اللي هو ميوزك دوت ام بي 3 وبتكتب عندك الامتداد الملف ده جنب ملف الاتش تي ام ال علشان كده كتبت الاسم على طول لكن لو الملف ده مثلا كان في مجلد تاني كنت هكتب لك مسار الملف ده بالكامل تمام جدا جدا دلوقتي في في بقى معلومه مهمه جدا انا دلوقتي الملف بتاعي ده ملف ام بي 3 انت ممكن يكون عندك ملف ويف واحد تاني مثلا ممكن يكون عنده ملف او جي جي ايا يكن الامتداد بتاع الصوت بتاعك انا بقى عاوزك دلوقتي تكون فاهم ان مش كل المتصفحات بتقبل كل امتدادات الصوت يعني ايه الكلام ده يعني في متصفحات ما بتقبلش مثلا امتداد الاو جي جي في متصفحات مثلا ما بتقبلش امتداد الويف وهنا لازم تركز كويس جدا دلوقتي لو المستخدم دخل من متصفح ما بيقبلش مثلا الويف وانت حطيت له صوت بامتداد ويف فالصوت ده مش هيشتغل عند المستخدم طالما المتصفح ما بيدعم الصوت يبقى الصوت مش هيشتغل عند المستخدم طيب فكر فيها كده قبل ما نكتب كود وقبل ما نعمل اي حاجه فكر دلوقتي في حل المشكله دي انا دلوقتي عندي مشكله وهي ان البراوزر ممكن ما يقبلش امتداد معين الحل ببساطه هو ان انت تحط له من نفس الصوت كل الامتدادات المتوفره عندك تحط له من نفس الصوت امتداد امبي وامتداد ويف وامتداد اوجي جي وكل الامتدادات اللي متوفره عندك هل الكلام ده تقدر تعمله بالاس ار سي لا الكلام ده ما تقدرش تعمله بالاس ار سي لان الاس ار سي بتعمل لك مسار واحد بس او بتضيف لك مسار واحد بس علشان كده احنا ما بنستخدم اتربيوت الاس ار سي وده تفسير ان الاوديو بيكون له بدايه وبيكون ليه نهايه فهني عندنا دلوقتي ما بين البدايه وما بين النهايه في المكان ده وهنستخدم عندنا دلوقتي تاج اسمه سورس السورس بيكون سنجل تاج بتيجي عندك هنا وبتستخدم دلوقتي الاتربيوت اللي اسمه اس ار سي من خلال تاج السورس تقدر ان انت تضيف كذا نسخه من الصوت بتاعك فدلوقتي لو انت عندك الصوت ده اللي هو الميوزك ده بامتداد امبي 3 بتقدر ان انت تضيفه لو انت عندك نفس الصوت بامتداد برض ويف شرط طبعا ان هو يكون موجود عندك يعني الكلام ده كله شرط ان يكون عندك نفس النسخه دي ام بي 3 ونفس النسخه دي ويف فتقدر ان انت تضيفها كمان برض تقدر ان انت تضيف نفس النسخه دي او جي جي وكل الامتدادات اللي موجود عندك بالشكل اللي انت عملته ده انت امنت نفسك فدلوقتي لو البراوزر بيدعم عندك الام بي 3 مش هيدخل عندك في السطور اللي بعد كده ما تقلقش يعني من الموضوع ده لكن لو هو ما بيدعم الامتداد ده فهيد خ عندك في الامتداد ده لو ما بيدعم هيدخل عندك في الامتداد ده المهم انه بيشوف الامتداد المناسب ليه وبيشغل وبكده تكون عملت شغل مظبوط جدا كمان بتيجي عندك دلوقتي جوه التاج ده في المكان اللي قدامك ده وبتحدد دلوقتي نوع الملف الصوتي من خلال اتربيوت اسمه طايب بتعرف البراوزر ايه هو نوع الملف ده يا ترى هو ام بي 3 ولا ويف ولا او جي جي طيب بنعرف الكلام ده ازاي دلوقتي لو انت عندك ملف ام بي 3 فبتكون سلاش ام بي اي جي طيب لو الملف ده ويف بتقول دلوقتي في التايب ان الملف ده اوديو سلاش ويف الملف ده ملف صوتي نوعه ويف طيب لو الملف ده او جي جي بتكتب عندك اوديو سلاش اوجي جي يعني ايه الكلام ده تعالى دلوقتي لما نشوف مع بعض دلوقتي الملف اللي عندي ده ام بي 3 فقول دلوقتي للبراز ان ده اوديو ده ملف صوتي الملف ده من نوع ام بي اي جي طيب ولو ويف هقول لك برض ان ده ملف صوتي تمام والملف ده من نوع ويف طيب لو الملف ده او جي جي لو الملف ده اوجي جي بتقول دلوقتي اوديو سلاش او جي جي لو دخلت دلوقتي عندك على موقع دبليو 3 سكولز هتلاقي دلوقتي محدد لك التايبس دي وقايل لك انواع كل الملفات دي يبقى انا دلوقتي شغلي سليم جدا جدا ومع ذلك لو انا جيت لك هنا وعملت لك دلوقتي ريلود مافيش اي حاجه هتظهر ليه لانك لازم تيجي عندك هنا في الاوديو وتقول لي دلوقتي انا عاوز اظهر الكونترول اللي هي ازرار التحكم ل الصوت ده فلو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهرت عندك ازرار التحكم اللي هو زرار تشغيل الصوت والزرار اللي بيجري عندك الصوت بيقدم وبياخذ وعندك هنا اللي بيعلي بيوطي وكل ازرار التحكم انت بتظهر عندك من خلال الكونترول فلو الكونترول ما كانتش مفعله الصوت عندك مش هيظهر تمام تمام جدا جدا كمان برضو عندك اتربيوت تاني وهو اللوب بتكتب عندك هنا لوب اللوب ده بيعمل لك تكرار للصوت فلو انا جيتلك هنا وعملتلك دلوقتي ريلود وشغلت لك دلوقتي الصوت هتلاقيه بيكرر نفسه منه لنفسه يعني انا ما شغلت حاجه هو دلوقتي عمال بيكرر في نفسه تمام جدا جدا كمان برضو عندك اتربيوت تاني وهو الميوت وده خاصيه الصامت فلو انا جيتلك هنا وعملتلك دلوقتي ريلود ركز دلوقتي هنا في الصوت لو عملتلك دلوقتي ريلود هتلاقي دلوقتي في شرطه على الصوت الشرطه دي معناها دلوقتي ان مافيش صوت معناه ان ده صامت فلو انا دلوقتي شغلت لك الصوت مافيش اي حاجه ظهرت عندك هندخل دلوقتي بقى في اتربيوت سيء جدا جدا جدا الاتربيوت ده هو الاوتو بلاي الاوتو بلاي المفروض ان هو بيشغل لك الصوت بشكل اوتوماتيك بمجرد ما الصفحه عندك بتشتغل طبعا ده اتربيوت سيء جدا جدا وما بقاش مدعوم في الجوجل كروم ولا في متصفحات ثانيه كتيره جدا طيب ليه ما بقاش مدعوم الاول كده لو جيت لك هنا وعملت لك ريلود ما فيش اي حاجه عندك هتشتغل طيب ليه ما بقاش مدعوم وليه هو اتربيوت سيء جدا جدا تخيل دلوقتي معايا مستخدم دخل الموقع بتاعك اول ما دخل الموقع عندك لاقى السماعات عنده بتشتغل هو مش فاهم السماعات عنده اشتغلت ليه ولا فاهم الموسيقى دي اشتغلت ليه انت المفروض عام له الاوتو بلاي اللي هو بيشغل الصوت بشكل اوتوماتيك وهو بص لاق الصوت عنده اشتغل مش فاهم الصوت اشتغل ليه فدي حاجه سيئه جدا وكمان مزعجه في ناس ما بتكونش عاوزه موسيقى تشتغل عندها فعلشان كده جوجل كروم ما بقتش بتدعم حاجه زي كده وانت لو قررت ان انت تشغل حاجه زي كده شغل عندك الميوت بحيث لو في اوتو بلاي يكون في عنده ميوت بحيث ان يكون الصوت عنده صامت حاب ان هو يشغله يشغله ما حابش ان هو يشغله انت ما تكبرو على حاجه كمان برده لو البراوزر بتاع المستخدم مش بيدعم دلوقتي اي نوع من الانواع دي فانت ممكن دلوقتي تكتب عندك رساله الرساله دي مش هتظهر غير في حاله ان مافيش ولا نوع من هنا اشتغل فممكن دلوقتي اجيلك هنا اقوللك مثلا يور براوزر دز not سبورت سبورت بالشكل ده ذا اوديو المنت او اي حاجه يعني اكتب اللي انت عاوزه تمام الرساله دي مش هتظهر غير في حاله ان مافيش ولا صيغه من عندك هنا اشتغلت تمام طبعا هم كلهم شغالين لو جيتلك هنا شغاله و 100 م بالشكل اللي قدامنا ده ف شغالها [موسيقى] هنا تعال دلوقتي لما نضيف عندنا فيديو جنب صفحه الاتش تي ام ال علشان نقدر نتعامل معاه ممكن ان انت تضيف عندك الفيديو مباشره جنب صفحه الاتش تي ام ال وممكن ان انت تنظم عندك الدنيا بان انت تعمل دلوقتي فولدر تحط فيه دلوقتي كل فيديوهات الموقع بتاعك فهنسي دلوقتي الفولدر ده فيديو وهدخل لك دلوقتي جوه الدر ده وهضيع عندي الفيديو بتاعي انا كنت ناسخه فحط دلوقتي الفيديو عندي جوه الفولدر ده تمام جدا جدا تعال بقى دلوقتي جوه صفحه الاتش تي ام ال هنيجي عندنا هنا وهنستخدم دلوقتي وسم الفيديو نفس الكلام اللي كنا قلناه على وسم الاوديو هو بالضبط اللي هنقوله على وسم الفيديو فمن خلال الاس ار سي تقدر ان انت تضيف عندك سورس واحد بس للفيديو فممكن اجيلك هنا واضيف لك دلوقتي مسار الفيديو ده اللي هو الفيديو بتاعنا ده فممكن اجيلك هنا في الا ار سي بقول لك دلوقتي انا عندي مجلد اللي هو فولدر اسمه فيديو جوه الفولدر ده عندي الفيديو بتاعي اللي هو ماوس دوت ام بي 4 بالطريقه دي تقدر ان انت تضيف عندك سورس واحد بس لكن لو انت عندك اكتر من سورس وده طبعا للضمان بتيجي عندك هنا وبتستخدم دلوقتي وسم السورس من خلال الوسم ده تقدر ان انت تضيف عندك كذا مصدر للفيديو بتاعك فدلوقتي انا عندي الفيديو ده مثلا ام بي ف فقول لك دلوقتي انا عندي الفيديو ده ام بي 4 ونفس الفيديو ده عندي برده منه نسخه ثانيه ا ويب ميديا مثلا فقول لك دلوقتي ويب ام وعندي نفس الفيديو ده مثلا اوجي جي مثلا يعني شرط طبعا ان هم يكونوا موجودين عندك وطبعا حط كل الصيغ اللي موجوده عندك كمان برض بتيجي عندك هنا وبتحدد برده النوع زي ما عملنا في الاوديو بالظبط فهتي جي عندك هنا وهتقول دلوقتي انا عاوز استخدم عندي التايب علشان احدد نوع الملف بتاعي فلو الملف بتاعك هو ام بي ف بتيجي عندك هنا وبتقول ان هو فيديو من نوع ام بي 4 يبقى بتكتب عندك فيديو سلاش ام بي 4 طب لو الفيديو ده مثلا ويب ميديا بتيجي عندك هنا وبتكتب دلوقتي فيديو سلاش ويب ميديا طيب لو الفيديو ده مثلا من امتداد اوجي جي او بامتداد اوجي جي بتيجي عندك هنا وبتقول ان هو فيديو سلاش او جي جي بالشكل اللي قدامك ده وبكده البراوزر هيشوف الصيغه او الامتداد اللي بيدعمه وهشغل عنده طيب لو مافيش دلوقتي ولا صيغه من دول البراوزر بيدعمه هاجي عندك في المكان ده وبنفس الطريقه ققول لك دلوقتي يور براوزر ز not سبورت ذا فيديو المنت او الكلمه اللي انت هتكتبها ايا يكن الكلمه دي فالكلمه دي مش هتظهر غير في حاله ان مافيش ولا امتداد من دول البراوزر بيدعمه تمام تمام جدا جدا لو انا جيت لك هنا وعملت لك دلوقتي ريلود هتلاقي دلوقتي في صوره اشتغلت لكن مافيش ولا اي زرار تحكم تقدر ان انت تشغل من خلاله الفيديو ده علشان دلوقتي تظهر ازرار التحكم بتيجي عندك هنا وبتكتب دلوقتي كنترولز فلو انا جيت لك هنا وعملتلك دلوقتي ريفريش هيظهرلك دلوقتي ازرار التحكم فظهر لك دلوقتي زرار التشغيل والدقائق وزرار اللي بيجار الفيديو بالشكل اللي قدامك ده كمان عندك الزرار اللي بيعلي وبيوضي الصوت وكمان رار اللي بيمل عندك الشاشه تمام كمان برض في عندك شويه اوبشنز هنا المهم تعال دلوقتي لما نشغل عندك [موسيقى] الفيديو فعلشان بس ما نضيع ش وقت بعض دلوقتي هو شغل لي الفيديو اول ملاحظه هتلاحظيها دلوقتي هو حجم الفيديو هتلاقي دلوقتي ان حجم الفيديو عندي كبير ممكن انت لو شغلت فيديو عندك تاني تلاقي حجم مختلف الموضوع ده بيكون على حسب حجم الفيديو اللي موجود عندك طيب افرض دلوقتي انا عاوز اتحكم انا في حجم الفيديو عاوز مثلا يكون عرض الفيديو 400 بيكسل انا اللي اتحكم في الموضوع ده فبج لك هنا ققول لك دلوقتي انا اقدر اتحكم في العرض والطول من خلال الويتس والهات فالويس بيتحكم عندك في العرض فالرقم اللي انت تكتبه عندك هنا هو رقم البيكسل فلو انا كتبت لك هنا مثلا 400 دي 400 بيكسلز فلو انا دلوقتي عملت لك هنا ريلود فاصبح دلوقتي عرضها 400 بيكسلز كمان تقدر ان انت تتحكم عندك في الهايت لو انا جيت لك هنا وعملت لك دلوقتي هايت خليتها مثلا مثلا 400 بيكسلز برده اتكتب مها 420 يلا مش مشكله لو عملت لك دلوقتي ريلود فبقى الطور عندك 420 طبعا طول مش متناسب مع حجم الفيديو علشان كده في لخبط عندك طبعا خد بالك جدا من الابعاد بتاعه الفيديو بتاعك وما تبوظها عاوز تكبر او تصغر ممكن تستخدم عندك العرض بس او الطول بس فممكن دلوقتي اجيلك هنا على الطول بس واخليها مثلا 420 بالشكل اللي قدامك ده ممكن دلوقتي مثلا اخليها 120 لو عملت لك دلوقتي ريلود هتصبر عندك بالشكل ده واتحكم انت فيها زي ما انت عاوز كمان ممكن الرقم اللي انت بتحطه عندك هنا سواء للطول او للعرض يكون عندك بق في فبدل ما تكتب عندك هنا مثلا 100 بيكسلز ممكن تخليها مثلا 100% فال 100% بتكون عندك 100% من حجم المتصفح ايا كان حجمه فلو حجمه كبير هتكون عندك 100% لو حجمه عندك صغير بص متناسبه مع حجم البراوزر حجم البراوزر كده هتكون عندك 100% من حجم البراوزر وهو كده طب لو هو كده برضو هتكون عندك 100% طب لو هو كده برضو هتكون عندك 100% تمام فاستخدم عندك الفيلميه استخدم عندك البكسلز زي ما انت عاوز انا خليها مثلا 400 بكسلز تمام تعال كده ريلود فاصبح عندك بالمنظر اللي قدامك ده كمان انا عاوز اقوللك ان كل الاتربيوت اللي كنا بنستخدمها مع الاوديو تقدر دلوقتي ان انت تستخدمها مع الفيديو زي ايه زي اللوب تعال كده لما نكتب عندنا دلوقتي اللوب او التكرار فم خلال اللوب ممكن ان انت تعمل تكرار للفيديو ده فتعال كده لما نجربها مع بعض هشغل لك دلوقتي الفيديو ده نوطي بس الصوت تمام هو دلوقتي هيكرر نفسه بنفسه بدون ما انت تعمل اي حاجه وبدون اي تدخل منك خالص نسيبه دلوقتي فبيعمل لك تكرار بشكل مستمر تمام تمام جدا جدا كمان برض ممكن تستخدم عندك الميوت وده وضع الصامت اللي بيخلي لك دلوقتي الصوت عندك مش موجود فركز دلوقتي على شكل ايقونه الصوت لو عملت لك دلوقتي ريلود ففي شرطه كده معموله على الصوت وده بيدل على انه صامت لو انا دلوقتي شغلت لك الفيديو ده مافيش عندك اي صوت لانك مستخدم عندك وضع الميوت كمان برضو تقدر تستخدم عندك الاوتو بلاي وهنا لازم نتكلم شويه الاوتو بلاي بيشغل لك الفيديو بشكل اوتوماتيك يعني ايه الكلام ده يعني لو انا جيت لك هنا وعملت لك دلوقتي ريلود بيشتغل اهو بشكل اوتوماتيك لو عملت لك ريلود تاني بيشتغل اهو بشكل اوتوماتيك من غير ما انا اشغل اي حاجه ولكن لو انت مش عا عندك وضع الميوت مش هتشتغل عندك الاوتو بلاي تعال كده لما نجرب لو عملت لك دلوقتي ريلود ما فيش حاجه اشتغلت تاني اهو ريلود مافيش اي حاجه اشتغلت والاوتو بلاي وقفت عندك وما اشتغلتش طيب ايه تفسير الموضوع ده الاوتو بلاي هو اتربيوت بيشغل لك الفيديو بشكل اوتوماتيك ف متصفح جوجل كروم قال لك بص يا معلم عاوز تشغل الفيديو بشكل اوتوماتيك شغله ولكن ما تكبرش المست خدم ان يشغل الصوت بشكل اوتوماتيك في ناس بيحصل لها ازعاج لما بتشغل لها الصوت بشكل اوتوماتيك فعاوز دلوقتي تعمل اوتو بلاي للفيديو خلي دلوقتي وضع الميوت موجود فلو انت دلوقتي عملت عندك وضع الميوت وشغلت دلوقتي الفيديو ده هيشتغل معاك الاوتو بلاي اهو بص بيشتغل معاك الاوتو بلاي الكلام ده بينطبق على متصفح الجوجل كروم بس في متصفحات تانيه مافيش عندك الكلام ده تمام جدا جدا جدا الغي كده كل الكلام ده وتعال دلوقتي بقى لما نستخدم عندنا اتربيوت جديد وهو البوستر الاتربيوت ده من خلاله تقدر ان انت تضيف عندك خلفيه للفيديو ده بنشوف عندنا في اليوتيوب ان الفيديوهات هناك بيكون لها خلفيه او صوره مصغره الخلفيه دي تقدر ان انت تضيفها عندك ل الفيديوهات بتاعتك فتعال كده لما نضيف مثلا الصوره دي الصوره اللي قدامك دي هضيفها دلوقتي خلفيه للفيديو بتاعي ازاي بنعمل كده تعال دلوقتي لما نشوف من خلال اتربيوت البوستر بتضيف عندك مسار الصوره او اليو ار ال بتاع الصوره كانك بتستخدم الاس ار سي بالضبط فبت جي عندك في البوستر وبتقول لي دلوقتي انا عاوز اضيف الصوره دي اللي هي جنب ملف الاتش تي ام ال فهاج هنا وهكتب دلوقتي اسم الصوره اللي هي بوك دوت جي بي جي اسم الصوره لان هي جنب ملف الاتش تي ام ال فلو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهرت عندك الصوره كخلفيه للفيديو لو انا شغلت لك الفيديو تعال كده بس معلش نقفل الصوت لو انا شغلت لك الفيديو هيشتغل عندك طبيعي فاهم ولكن لو انت دلوقتي عملت عندك ريلود بيظهر عندك خلفيه الفيديو اللي انت عملتها من خلال البوستر كمان هنتكلم على البريل لود البريل لود بياخد منك ثلاث قيم اساسيه وهم الاوتو والميتا داتا والنون البريل لود ممكن تستخدمها مع الفيديو وممكن تستخدمها مع الاوديو طيب بتعمل ايه البريل لود مسؤول عن تحميل الميديا وانا قصدي هنا بالتحميل مش كلمه داونلود لا انا قصدي بالتحميل اللي هو شريط التحميل بتاع الميديا بتاعتك كتير بنشوف مواق اول دلوقتي ما تدخل على الموقع بتلاقي الفيديو او الاوديو يعني ايا يكن في شريط تحميل كده بيجري عندك او بيتقدم عندك فايده انك تعمل تحميل تلقائي للفيديو هو ان المستخدم اول ما يضغط الفيديو بتاعه يشتغل بشكل تلقائي لانه اوريدي كان حمل منه جزء كبير جدا تمام ده اللي مسؤول عنه البريل لود فلو انت جيت هنا في البريل لود واستخدمت عندك الاوتو قيمه الاوتو انت دلوقتي بتقول له اعمل لي تحميل تلقائي للميديا دي فدلوقتي اول ما تعمل عندك كر لود اول دلوقتي ما المستخدم يدخل الموقع الفيديو هيبدا عنده يحمل بالشكل اللي قدامك ده طبعا دي فيها ميزه وفيها عيب ميزتها انها بتختصر الوقت بتحمل الفيديو بسرعه للمستخدم عيبها ان هي بتبط الموقع بتاعك فتخيل دلوقتي معايا مثلا ان الموقع بتاعك فيه 10 فيديوهات كل فيديو عمال بيحمل وبيستهبل تخيل دلوقتي مدى بطء الموقع بتاعك تمام طيب دلوقتي لو انت استخدمت عندك هنا ن نان دي معناها ان انت ما تحملش الداتا فدلوقتي لو انا عملت لك هنا ريلود الداتا دي او الميديا دي مش هتحمل غير لو انا ضغطت على تشغيل الفيديو اول ما اضغط على تشغيل الفيديو هيبدا دلوقتي شريط التقدم ده يحمل عندك لكن قبل ما تضغط عليه ما بيحملش عندك اي حاجه تمام تمام جدا جدا ودي طبعا بتساعد على سرعه الموقع بتاعك عندك كمان حاجه تانيه وهي الميتا داتا هنا الموضوع مختلف انت هنا مش بتحمل الميديا انت هنا بتحمل الميتا داتا او معلومات الميديا ان شاء الله هتعرف بعد كده ان الميديا بيكون ليها عنوان للميديا زي عنوان الفيديو ديسكربشن الفيديو اللي هو وصف الفيديو ومعلومات كتيره جدا فانت دلوقتي من خلال الميتا داتا بتقول ل البراوزر يحمل لك معلومات الفيديو مش الفيديو نفسه فدلوقتي اول ما المستخدم هيدخل عندك على الموقع هيحمل لك الميتا داتا اللي هي معلومات الفيديو مش الميديا نفسها تمام فدي برض حاجه كويسه طيب تعال بقى دلوقتي لما نلغى عندنا البريل لود وندخل في حاجه انيه اخيره ومهمه جدا وهي ترجمه الفيديو بنشوف كتير في فيديوهات اليوتيوب ان بيكون في ترجمه تحت الفيديو الكلام ده طبعا في حاله ان انت بيكون عندك ملف للترجمه فانا دلوقتي عندي ملف للترجمه اهو باللغه العربيه الملف اللي قدامك ده اللي بيكون بامتداد في تي تي الملف اللي قدامك ده وعندي دلوقتي برض ملف تاني باللغه الانجليزيه اهو قدامك اهو نفس الامتداد برض في تي تي وهو بيكون عندك بال الشكل اللي قدامك ده فتعال دلوقتي لما نعرف ازاي بنستخدم عندنا الملفات دي فلو انا جيتلك هنا وكتبتلك دلوقتي وسم التراك من خلال الوسم اللي هو السينجل تاج ده تقدر دلوقتي ان انت تضيف عندك ملفات الترجمه فبت فهم عندك من خلال الاس ار سي فهقولك دلوقتي انا عاوز اضيف الملف اللي باللغه الانجليزيه اللي هو ان دوت في تي تي كمان هنحدد عندنا الكاين اللي هو نوع الملف ده هل هو ملف كابشن ولا هو شابرز ولا هو ديسكربشن ولا هو ميتا داتا ولا هو تز طبعا انا هقوللك ان هو سب تيتل انا دلوقتي بستخدم عندي ملفات ترجمه وهجيلك هنا وهقولك دلوقتي انا عاوز اعمل الليبل الليبل دي هكتبلك فيها مثلا كلمه انجلش وهوريك دلوقتي الليبل دي بتظهر فين ولكن واحده واحدها انا عندي ملف تاني الملف ده باللغه العربيه اسمه اي ار اهو قدامك اهو الملف ده اللي هو اسمه اي ار دوت في تي تي جيلك هنا قولك دلوقتي ان الملف ده الليبل بتاعه هيكون موجود فيه كلمه ارابك بال الشكل اللي قدامك ده طيب الليبل اللي موجود فيها انجلش والليبو اللي موجود فيها اربيك دي بتظهر فين لو جيت لك عندك هنا ووقفت لك دلوقتي على الثلاث نقط دي هلاقي دلوقتي حاجه هنا اسمها كابشن لو ضغطت لك دلوقتي عليها هلاقي دلوقتي الانجلش والاريك اللي انا اضافتهم من خلال الليبل لو انت كنت كاتب هنا اي حاجه في الدنيا لو كنت كاتب هنا كلمه تست وجيت لك هنا وعملت لك دلوقتي ريلود ووقفت لك هنا على الثلاث نقط وجيت لك هنا على الكابشن هلاقي دلوقتي عندي حاجه هنا اسمها تست فاللي انت بتكتبها عندك في الليبل بيظهر عندك في الكابشن تعال كده لما نخليها عندنا هنا ارابك وتعال دلوقتي لما نجرب الموضوع ده بدون دلوقتي اي كابشن انا دلوقتي ماستخدمتش اي ملفات ترجمها لو شغلت لك دلوقتي الملف ده اهو ما فيش اي ترجمه اشتغلت ولا في اي حاجه حصلت لكن لو انا جيت لك هنا وشغلت لك دلوقتي ملف الترجمه اللي باللغه الانجليزيه تعال كده ما نشغل دلوقتي مع بعض فدلوقتي في كلمه اهي ظهرت تعال كده لما اكبر لك دلوقتي الشاشه شايف الكلام اللي بيظهر قدامك ده عيد تاني من الاول هلو اا ماي نيم از عبد الرحمن جمال ذ فرونت ان تتوريال تعال كده لما نجرب عندنا اللي باللغه العربيه كابشن ارابك تعال كده لما نشغل دلوقتي اهلا بكم انا عبد الرحمن جمال وهذه دوره تصميم المواقع طيب انا لما جيت دلوقتي علشان اشغل الفيديو ما كانش في ترجمه شغاله الترجمه كانت بتظهر لما انت كنت بتيجي هنا وبتختار دلوقتي من الكابشن الترجمه اللي انت عاوزها سواء انجليزي او عربي ولكن افرد انا عاوز ترجمه تكون شغاله بشكل اوتوماتيك اول ما اشغل الفيديو تظهر عندي ترجمه نعمل الكلام ده ازاي بتيجي عندك هنا وبتختار الترجمه اللي انت عاوزها تظهر بشكل اوتوماتيك سواء الانجليزي او العربي انا مثلا هختار العربي فجي لك هنا واخليها هي الديفولت فانت بتستخدم اتربيوت اسمه الديفولت الاتربيوت ده بيحول لك دلوقتي الترجمه دي للترجمه اللي بتظهر بشكل اوتوماتيك فلو انا جيت لك هنا وعملت لك دلوقتي ريلود هنقفل دلوقتي الصوت هشغل لك دلوقتي الفيديو هتلاقي دلوقتي الترجمه اللي باللغه العربيه اهي ظهرت عندك بشكل اوتوماتيك من غير ما انت تروح تختارها لو انت عاوز الانجليزي تعال كده بنفس الطريقه هتختار دلوقتي الديفولت دي هتخليها هنا في الانجليزي فلو انا جيتلك هنا وعملتلك دلوقتي ريلود وقفلت لك دلوقتي الصوت وشغلت لك دلوقتي الفيديو هتلاقي دلوقتي الانجليزي هي اللي اشتغلت عندك بشكل اوتوماتيك التيبل من الحاجات المهمه جدا جدا لو انت عندك اي بيانات في الموقع بتاعك اي بيانات فافضل طريقه لعرض البيانات دي هي ان انت تعرضها عندك في تيبل اليبل بتعملها عندك من خلال وسم التيبل من خلال الوسم ده انت بتعمل عندك جدول الجدول بيكون مكون عندك من رو وكول من صفوف واعمده تركيبه الجدول هو ان انت لما بتعمل عندك صف بتحط في الصف الاعمده بتاعتك فلو انت دلوقتي عاوز تعمل مثلا جدول في صفين خمس اعمده فبتعمل عندك دلوقتي صف موجود فيه خمس اعمده وصف تاني موجود فيه خمس اعمده هي دي التركيبه المنطقيه فالصف بيكون جواها الاعمده فتعال دلوقتي لما نعمل مع بعض جدول باستخدام الاتش تي ام ال علشان تعمل عندك جدول انت بتعمل عندك صفوف واعمده فالصف انت بتعمله عندك من خلال التي ار فانا كده عملت عندي صف فمثلا انا دلوقتي عاوز اعمل عندي جدول في صف وثلاث اعمده ده فبتحب عندك الثلاث اعمده جوه الصف ده تمام الاعمده انت بتحطها عندك جوه الصف ده الاعمده انت بتعملها عندك من خلال التي دي فانت كده عملت عندك عمود وحطيته عندك جوه الصف ده ركز في الاستركشر ده فتعال كده لما نسميه مثلا نيم على سبيل المثال مش اكتر فانا كده عملت عندي عمود تعال كده لما نعمل عندنا عمود تاني هسميه مثلا ايدج وهعمل عندي عمود ثالث هسميه مثلا سالاري اي حاجه تمام فلو عملتلك دلوقتي ريلود هتلاقي دلوقتي لات كلمات جنب بعض عاوز اقوللك ان انت لو جيت عندك هنا في التيبل واستخدمت دلوقتي البوردر وخليت قيمتها مثلا واحد وعملت عندك هنا ريلود فهه عندك دلوقتي حواف لل تيبل بتاعك تمام انا عاوز اقوللك طبعا ان البوردر دي احنا مش هنستخدمها ان شاء الله بعد كده لما ندخل عندنا في السي اس اس انا بس استخدمتها دلوقتي علشان اوريلك ابعاد الجدول بس مش اكترر تمام جدا جدا انا دلوقتي عملت عندي صف واحد بس تعال كده لما نعمل عندنا صف تاني فجي عندي هنا وهكتب دلوقتي تي ار لان انا بعمل عندي صف جوه الصف ده محتاج دلوقتي ان انا اعمل عندي عمود العمود ده هسميه مثلا احمد ومثلا في العمود التاني هقول لك مثلا ان العمر بتاعه 25 وفي العمود الثالث السلاري مثلا 2400 اي حاجه حاجه فدلوقتي انا لو عملت لك هنا ريلود فتعمل عندك صف تاني في احمد وفي 25 وفي 2400 ممكن اجيلك هنا واعمل لك دلوقتي صف تالت فاقول لك دلوقتي تي ار اللي هو الصف وجوه الصف بحط عندي الاعمده فاجيل لك هنا ققول لك دلوقتي تي دي مثلا العمود هيكون فيه جمال طيب لو انا عشان برض ايه نكون فاهمين لو انا دلوقتي استخدمت عمود واحد بس يعني انا فوق كنت عامل عندي لاث اعمده وهنا لات اعمده وهنا عمود واحد بس فهنا هيعمل لك ادي عمود الثاني الثالث وهنا العمود الثاني الثالث وهنا عمود واحد بس كل اللي بعد كده هيكون عندك فراغ فناخذ بالنا من الموضوع ده هجيلك هنا وخليه مثلا 30 ايا يكن وفي السالاري 3000 برض ه يكن يعني مش مشكله فهعمل لك دلوقتي ريلود فتعمل عندك الجدول بالشكل اللي قدامك ده طيب شايف الكلام اللي فوق ده اللي هو بيكون عندك في راس الجدول اللي هو الصف اللي فوق عندك ده لو انت دلوقتي عاوز تميز العناوين وين دي انا بقول لك اهو لو انت عاوز لان الموضوع ده اختياري مش اكترر لو انت دلوقتي عاوز تميز الكلام اللي موجود عندك هنا في راس الجدول بتيجي عندك هنا وبدل ما تستخدم التي دي بتستخدم عندك التي اتش فجي لك هنا واستخدم دلوقتي التي اتش ركز دلوقتي على الكلمه دي لو عملت لك دلوقتي هنا ريلود فالكلمه دي اصبحت بولد عندك بالشكل ده علشان تميز ان هي في راس الجدول فممكن برض اجيل لك هنا على الايدج واجيلك برض هنا على السلاري واخليهم بدل التي دي اخليهم تي اتش خلي بالك دي للاعمده مش للصفوف فلو عملت لك دلوقتي ريلود اصبح شكلهم بالمنظر اللي قدامك ده طيب كمان برده عندنا حاجه ثانيه مهمه جدا ولكن الحاجه دي اختياريه يعني تقدر تقول لو انت ما استخدمتها ش هتقدر تعمل جدول ولو استخدمتها هتفيدك بشكل كبير جدا هتفيدك طبعا من ناحيه تنظيم الجدول الحاجه دي هي التي هيد والتي بدي والتي فوت ودول بشكل عام كده تقدر ان انت تقول بتستخدمهم علشان تنظم الجدول بتاعك فالتي هيد بيمثل عندك راس الجدول اما التي بدي بيمثل عندك جسم الجدول التي فوت بيمثل عندك الجزء اللي في الاسفل او زيل الجدول طيب دول بنعمل بيهم ايه التي هيد انت بتحط فيها كل محتويات راس الجدول والتي بادي انت بتحط فيها كل محتويات جسم الجدول في جداول كتير ما بيكونش فيها فوت للجدول ولكن في جداول ثانيه بيكون ليها فوت زي مثلا ان انت يكون عندك الناتج النهائي او المجموع النهائي كتير جدا بنشوف عندنا جداول بيكون في الناتج النهائي في اسفل الجدول ده بيكون عندك جزء الفوت كل المحتويات دي انت بتحطها عندك في التي فوت تيجوا دلوقتي ناخد مثال عملي تعالوا دلوقتي لما ناخد مثال عملي دلوقتي هن عندي الصف ده بيمثل عندي راس الجدول فالصف ده انا ممكن دلوقتي اخده كات واحط عندي في التي هيد وهقول لك دلوقتي فايده حاجه زي كده فهعمل دلوقتي التي هيد وهحط فيها دلوقتي الصف اللي كنت واخده عندي ك بالشكل ده فدلوقتي انا حطيت عندي كل محتويات الهيد في التي هيد طيب دلوقتي كل اللي عندي ده هو التي بادي انا لسه دلوقتي ما عنديش تي فوت فاخد دلوقتي كل الكلام ده وطه عندي في التي بدي تمام هنحطه عندنا بالشكل اللي قدامنا ده طيب تعال دلوقتي لما نعمل عندنا تي فوت ممكن دلوقتي نعمل عندنا تي فوت نحط فيه مثلا الناتج النهائي مثلا للساري مثلا يعني فهعمل لك دلوقتي صف تمام الصف ده هعمل لك فيه عمود العمود ده هكتب لك فيه توتال اللي هي الناتج النهائي ده اول عمود عندك اللي هو العمود ده وهجي لك هنا وهعمل لك دلوقتي عمود تاني العمود ده هيكون فيه الناتج النهائي اللي هو 2400 ئ 3000 اللي هي 5400 بالشكل اللي قدامك ده طيب دلوقتي قبل ما نحل المشكله دي قبل دلوقتي ما نحل عندنا مشكله الخط ده محتاجين دلوقتي ان احنا نفهم يعني ايه تي فوت وتي بدي وتي اتش بنستخدم ليه دلوقتي انا قلت لك استخدام قدام الحاجات دي بيكون للتنظيم طيب اديني فكره كده هقول لك دلوقتي هو التي فوت ده احنا بنستخدمه ليه هقول لك احنا بنستخدمه علشان نقول ان ده هو زيل التيبل او ده هو اسفل مكان في التيبل كل اللي انت بتكتبه جوه ده هو بيكون عندك اسفل مكان في التيبل فهف عندك اسفل مكان في التيبل وركز هنا ايا يكن انت هتكتب التي فوت دي فين بالظبط فلو انت كتبتها عندك لو كتبت دلوقتي التي ف دي اسفل التيبل او لو انت خدتها دلوقتي ق وطلعت عندك ركز اهو لو طلعت عندك في اول مكان وحطيت عندك دلوقتي التي فوت عندك في اول مكان فبرضه هتفضل عندك اسفل جزء في التيبل فدلوقتي انا لو عملت لك هنا ريلود كل الكلام اللي انت كتبته هنا هيفضل عندك اسفل مكان في التيبل نفس الكلام ده بينطبق عندك على التي هيد فال التي هيد هو راس التيبل هو اول صف عندك في التيبل تمام فهف عندك اول صف ايا يكن انت كاتبه فين فدلوقتي انا لو خدته عندك كات هنا وحطيته عندك اسفل مكان في التيبل حطيته عندي بيست هنا في المكان ده هيفضل برده الصف ده هو اول مكان عندك في التيبل فدلوقتي انا لو عملت لك هنا ريلود هيفضل برض الصف ده هو اول مكان عندك في التيبل فانت بتستخدم عندك التي هيد والتي بدي والتي فوت لتنظيم التيبل وكمان لمساعده محركات البحث علشان يفهم انت عامل ايه بالظبط علشان يفهم الصف ده بيعني ايه بالظبط هل هو الهيد ولا هو البادي ولا هو الفوت ولا هو ايه بالظبط تمام تمام جدا جدا تعالى كده لما نرجع كل حاجه نرجع عندنا الفوت تحت خالص عندنا في المكان ده طيب كمان برضو عندك حاجه تانيه مهمه جدا وهي الكابشن فالكبير لك هنا واستخدم دلوقتي وسم الكابشن علشان دلوقتي اكتب لك حاجه بتوصف عندك الجدول ده فممكن تكتب هنا اللي انت عاوزه ايا يكن الكلمه اللي انت تكتبها هنا فالكلمه اللي انت بتكتبها هنا ما بين بدايه و نهايه وسم الكابشن بتكون هي وصف للجدول ده وهتلاحظ دلوقتي ان هي جاي متوسطان عندك بالشكل ده بحيث ان ده كابشن التيبل ده طيب انا دلوقتي عندي مشكله شايف انت الخط ده انا هنا في الصف الاخير ده تعال كده انا هنا في الصف الاخير ده عندي عمودين بس يعني دلوقتي التيبل بتاعتي كلها كل صف فيها بيكون فيه ثلاث اعمده لكن الصف الاخير ده فيه عمودين بس والعمود ده فييه خط كده ف الموضوع مش لطيف طيب نعمل ايه انا دلوقتي عاوز ادمج العمود الاخير ده مع العمود اللي بعده عاوز دلوقتي العمود الاخير ده ركز قوي هنا عاوز دلوقتي العمود ده يكون بمقدار عمودين نعمل الكلام ده ازاي بنعمل الكلام ده من خلال اتربيوت اسمه كول سبان كلمه كول هي اختصار لكلمه كولوم او عمود انا دلوقتي تعالى كده انا دلوقتي عاوز العمود ده يكون بمقدار عمودين فجيل لك هنا وهكتب هنا اثنين تعال كده لما نعمل دلوقتي هنا ريلود فبص شوف الخط هنا اتلغى تعال كده عشان افهمك اكتر انا عارف ان دي بتلخبط جدا فتعال دلوقتي لما نفهمها بشكل اوضح طيب دلوقتي التيبل دي كل صف فيها فيه ثلاث اعمده كل صف فيه ثلاث اعمده فانا جيت لك في الصف ده وعملت لك عمود واحد بس تخيل دلوقتي معايا العمود ده في كلمه توتال مثلا يعني فدلوقتي انا لو عملت لك هنا ريلود عمل لك عمود واحد بس بدليل الخط ده فانا دلوقتي عاوز اقول لك العمود ده انا عاوزه يكون بمقدار ثلاث اعمده فجي لك هنا في المكان ده وهدي له دلوقتي الاتربيوت اللي اسمه ككل سبان وهكتب هنا لاثه انا دلوقتي عاوز العمود ده يكون بمقدار ثلاث اعمده تعال كده لما نشوف الكود انا دلوقتي عاوز العمود ده يكون بمقدار ثلاث اعمده فبكت عندك هنا لاثه فلو جيت لك هنا وعملت لك دلوقتي ريلود اتشال عندك الخط ده وعلشان دلوقتي ابينها لك اكتر ممكن دلوقتي نجيب الكلمه دي في النص فهني عندنا هنا وهنستخدم دلوقتي الاتربيوت اللي اسمه اونلاين اللي انا ما بنصحك بيه لان احنا ان شاء الله مش هنشتغل بالتربو ده في المستقبل ولكن طبعا انا بعمله للتجربه بس مش اكتر علشان بس اوضح لك اهميه الكول سبان فانا دلوقتي جبت لك الكلمه دي في النص من خلال اتربيوت تعال كده اتربيوت يخرب ب انا اسف من خلال اتربيوت الالين تمام تمام جدا جدا فدلوقتي انا لو عملت لك هنا ريلود الكلمه دي جت عندك في النص وبكده العمود ده خد عندك مقدار ثلاث اعمده طيب زي ما عندنا الكول سبان زي دلوقتي ما نقدر ان احنا ندمج عندنا اعمده كمان عندنا حاجه ثانيه وهي الرو سبان او دمج الصفوف وعلشان ابينها لك تعال دلوقتي لما ناخد عندنا مثال عملي تعال كده لما نخلي احمد وجمال الاثنين بياخدوا عندنا 3000 فدلوقتي انا لو عملت لك هنا ريلود فاحمد اهو بياخد عندك سلاري 3000 وجمال هنا بياخد عندك سلاري 3000 فدلوقتي الاثنين عندك بياخدوا عندك نفس المبلغ فبدل ما تكتب عندك الاثنين دول مرتين انت ممكن تكتبها مره واحده حده وتدمج عندك العمود ده في الصف الاول وفي الصف الثاني يعني ايه الكلام ده يعني دلوقتي انا عندي هنا 3000 وعندي هنا 3000 فبدل دلوقتي ما اكتبهم عندي مرتين ممكن دلوقتي اكتبهم عندي مره واحده بس بالشكل اللي قدامك ده وادمج ال 3000 دي مع الصف الاول ومع الصف التاني فعلشان اعمل كده بجيلك هنا في التي دي وبستخدم عندي الرو سبان كلمه رو يعني صف انا دلوقتي عاوز ادمج عندي عن ال 3000 فبج عندي هنا في التي دي ليه التي دي ما بروحش عندي للتي ار لان انا مش عاوز ادمج عندي كل حاجه انا دلوقتي عاوز ادمج عندي ال 3000 بس فبج لك هنا وبكتب عندي اثنين تعال كده لما نشوف الكود بروح لك هنا في ال 3000 وبديها دلوقتي رو سبان اثنين فدلوقتي لو انا جيت لك هنا وعملت لك دلوقتي ريلود ال 3000 دي خدت عندك الصفين ممكن تكون مش فاهم فتعال دلوقتي لما ناخد مثال تاني نرجع كده وتعال هنا بالشكل اللي قدامك ده ممكن دلوقتي اجيل لك هنا مثلا في التي ار انا دلوقتي عارف ان كل صف بيكون فيه لاث اعمده ممكن اجيل لك هنا واعمل لك دلوقتي عمود عندك رابع في مثلا هنا كلمه ايجيبت تمام فدلوقتي انا لو عملت لك هنا ريلود هتلاقي لك دلوقتي عمود رابع لوحده كده في كلمه ايجيبت انا دلوقتي عاوز العمود ده يكون مثلا لاحمد ولجمال فهاج لك هنا واروح لك دلوقتي في التي دي وادي له دلوقتي رو سبان اثنين اللي هي رقم اننين علشان دلوقتي ادمجه مع الصف الاول ومع الصف الثاني فدلوقتي انا لو عملت لك هنا ريلود اصبحت دلوقتي ايجيبت مدمجه عندك مع احمد ومع جمال كمان عندنا حاجه اخيره وهي تلوين التيبل التلوين دي مش من الحاجات المهمه واللي مش هتستخدمها كتير ان شاء الله في الاتش تي ام ال لان احنا بنعتمد في التلوين على السي اس اس ولكن للناس اللي بيكون عندها امتحانات اش تي ام ال بس فممكن دلوقتي تتعلم معانا فدلوقتي علشان الون عندي التيبل بستخدم عندي اتربيوت اسمه بي جي كر بالشكل اللي قدامكم ده والبي جي كر هو اختصار لكلمه باك جراوند كر وزي ما انت شايف باللون الاحمر يعني ما بقيناش بنستخدمه دلوقتي انت ممكن تحط هنا اي لون في الدنيا ممكن تحط عندك ريد بلو يلو جرين اللي انت عاوزه فدلوقتي انا لو عملتلك هنا ريلود ف التيبل كله اهو انا عملته عندك في التيبل فالتبول كله عندك بقى باللون الاحمر ممكن دلوقتي اشيلها عندك من التيبل بالشكل اللي قدامك ده واخلي الهيد بس هي اللي باللون الاحمر تمام بالشكل اللي قدامك ده او ممكن مثلا تعال كده او ممكن مثلا اخلي البادي عندك هو اللي باللون الاحمر تمام طبعا ممكن تحط عندك بلو جرين اللي انت عاوزه طيب كمان برض ممكن تلون صف واحد بس يعني ممكن اجيلك هنا تعال كده والون لك مثلا الصف ده اللي هو بتاع جمال فاجيل لك هنا على الصف ده والونه احط دلوقتي البي جي كر في التي ار بالشكل اللي قدامك ده ممكن كمان الو و عندي تي دي يعني ممكن مثلا اجيلك هنا في احمد دي واحط لك دلوقتي البيجي كر عندك في احمد دي بالشكل اللي قدامك ده تمام فانت دلوقتي تقدر ان انت تلون عندك الاعمده او الصفوف او التي اتش والتي بادي والتي فوت او التيبل كلها زي ما شفنا من شويه اتمنى يا رب تكونوا فهمتوا واشوفكم ان شاء الله في فيديو جديد خلي بالك التلوين دي احنا مش هنستخدمها نهائي ان شاء الله في الاتش تي ام ال فما تذاكرش كتير يعني انا بقولها لك لو انت بس عندك امتحانات بس مش اكتر لكن ان شاء الله احنا هنلون في السي اس اس كتير في الموقع بتاعك بتكون عاوز تعمل قائمه قائمه مثلا منتجات قائمه اسماء قائمه اي عناصر في الموقع بتاعك فانت محتاج تتعلم القوائم دي بتتعمل ازاي والنهارده ان شاء الله هنتعلم مع بعض درس مهم جدا و 90% بنسبه 90% لازم القوائم دي تكون موجوده في الموقع بتاعك فتعال دلوقتي لما نتعلم القوائم دي بشكل مبسط جدا اولا كده احنا عندنا كذا نوع من القوائم عندنا قوائم مرتبه وعندنا قوائم غير مرتبه وعندنا قوائم وصفيه او ديسكربشن ليست اول قائمه هنتكلم عليها ان شاء الله هي القوائم الغير مرتبه علشان تعمل القائمه دي بتستخدم عندك وسم اليو ال وسم اليو ال او كلمه اليو ال هي اختصار لكلمه ان اوردر ليست يعني قائمه غير مرتبه طيب دلوقتي القائمه دي بتكون فيها عناصر هي اصلا قائمه علشان فيها عناصر فالعناصر دي انت بتحطها عن عندك في ال اي كلمه ال اي هي اختصار لكلمه ليست ايتم يعني ده عنصر من عناصر القائمه دي فكل عنصر انت بتحطه عندك في ال اي فدلوقتي تعال كده لما نعمل مع بعض مثلا قائمه اسماء تمام فقولك اول اسم عندي هو احمد تمام فدخل عندك اسم تاني وهو مثلا علي دخل عندك اسم تالت وهو مثلا مازن اسم رابع مثلا جمال انت دلوقتي بتعمل قائمه كل عنصر في القائمه دي انت بتحطه عندك في ال اي تمام طيب لو عملتلك دلوقتي ريلود ده شكل القائمه دي هتلاحظ دلوقتي كذا حاجه اول حاجه هي النقط اللي موجوده عندك على كل ال اي فكل عنصر بيكون له النقط اللي موجوده دي علشان تحدد لك ان ده عنصر من عناصر القائمه دي كمان برض هتلاحظ ان عنصر الل اي ده هو عنصر بلوك يعني بياخد السطر كامل لوحده يعني مش بيجوا كلهم كده على نفس السطر هم مش عناصر ان لاين ههم عناصر بلوك كمان برضو هتلاحظ ان في مسافه عندك من الجنب ده يعني لو انت جيت هنا وعملت دلوقتي براجراف عادي جدا وكتبت فيه هنا اي كلمه ايا يكن فلو عملت لك دلوقتي ريلود الكلمه العاديه بتبدا عندك من هنا لكن الل اي عناصر القائمه بتكون واخده عندك مسافه المسافه دي ان شاء الله هتعرفها لما تدخل السي اس اس اسمها بادينج تمام كمان برض في مسافه عندك من فوق ومن تحت تعال كده لما اوريها لك لو انا جيت هنا وعملت لك دلوقتي انسبكت وجيت لك هنا وقفت لك دلوقتي على اليو ال هتلاحظ دلوقتي ان في خطين اورنج من فوق ومن تحت دول مسافات الم المسافات دي اسمها مارجن طبعا ما تهتمش قوي بكلمه مارجن او بادين او الكلام ده كل الكلام ده ان شاء الله هتعرفه لما تدخل في السي اس اس ولكن انا بس عاوزك تفهم ان هي بتاخد عندك مسافه من فوق ومسافه من تحت وبتاخد عندك بادنج او محاذاه داخليه من الجنب ده تمام طيب بنعمل ايه باليو ال انا هقول لك دلوقتي بنعمل بيه ايه من خلال ان انا هدي لك فكره كده عن المشاريع اللي ان شاء الله هنعملها في الدوره دي ولكن انا بنوه اهو المشاريع دي مشاريع متقدمه مستواك ما ياهل كش دلوقتي ان انت تعمل المشاريع دي انا بس بديلك فكره احنا بنعمل ايه باليو ال فلو انا جيت لك هنا وفتحت لك دلوقتي اي مشروع غالبا كلهم اتعمله باليو ال فلو جيت لك هنا على المشروع ده مثلا وفتحته لك هتلاقي دلوقتي عندك قائمه القائمه اللي قدامك دي شايف القائمه دي القائمه دي معموله بالكامل من اليو ال طبعا الالوان وكل الحاجات اللي قدامك دي معموله عندك بالسي اس اس فاحنا في المشروع ده استخدمنا الاتش تي ام ال والسي اس اس فتعال كده لما نشيل عندنا السي اس اس علشان نعرف القائمه دي اتعملت فعلا باليو ال ولا لا فلو جيت لك هنا كليك يمين ثم انسبكت علشان دلوقتي نشيل السي اس اس فجيل لك هنا في الهيد وهروح لك دلوقتي على ملف السي اس اس ده اللي هو اللينك ده وهشيله دلوقتي من خلال الديلي فاول ما تشال عندك ملف السي اس اس ظهرت عندك اليو ال ظهرت عندك القائمه دي لو انا جيت لك هنا على السكشن ده هلاقي دلوقتي موجود عندي هنا يو ال لو فتحت لك دلوقتي اليو ال دي هلاقي دلوقتي موجود عندي ال اي كل ال اي بيمثل عندك عنصر من عناصر القائمه اللي قدامك دي تمام تمام جدا ده مثال صغير كده على اليو ال وطبعا دي برض حاجه من الحاجات اللي تعرفك اهميه السي اس اس الشكل ده كله معمول عندك بالسي اس اس برضو تعال كده لما نشوف عندنا مشروع تاني ناخد فكره برض اكبر روح دلوقتي مثلا على المشروع ده كل المشاريع دي هنعملها ان شاء الله في الدوره دي ف القائمه اللي قدامك دي برض عملناها عندنا من خلال اليو ال كمان برض انا عاوز برض الفه نظرك لحاجه مهمه جدا الليست اللي قدامك دي كل ال اي فيها هو عنصر بلوك لو انت قدرت تحول العناصر دي من عناصر بلوك لعناصر ان لاين وطبعا الكلام ده هنتعلم ان شاء الله في السي اس اس هتقدر تعمل الناف بار اللي بتكون موجوده في المواقع تعال كده انا اوريها لك برض هنروح عندنا هنا اوريك مثلا اي مشروع تاني مثلا المشروع ده شايف الناف بار اللي قدامك دي الناف بار دي معموله برض عندك من خلال اليو ال لو انا جيت لك هنا كليك يمين ثم انسبكت علشان اثبت لك برض هلاقي دلوقتي اهو موجود عندي هنا اهو يو ال لو فتحتلك ال دي هلاقي دلوقتي موجود عندك هنا ال اي كل ال اي بتمثل عندك عنصر من العناصر اللي قدامك دي طبعا احنا جبناهم جنب بعض خليناهم دلوقتي ان لاين من خلال السي اس اس الكلام ده كله انت هتتعلم ان شاء الله بعدين ولكن انا بس بديلك فكره انت هتعمل ايه باليو ال فاليو ال دي من الحاجات المهمه جدا جدا ودي قائمه غير مرتبه عندنا قائمه ثانيه مرتبه اسمها او ال هي زيها بالظبط ولكن دي قائمه مرتبه وكلمه او ال هي اختصار لكلمه اوردر ليست يعني قائمه مرتبه برض العناصر بتاعتك بتحطها عندك في ال اي نفس الموضوع بالظبط ممكن اقوللك دلوقتي احمد او تعال كده لما ناخد مثال تاني هقوللك مثلا اتش تي ام ال وهنا مثلا سي اس اس وهنا مثلا جافا سكريبت وهنا مثلا بي اتش بي واخيرا مثلا بايثون ايا يكن العناصر اللي موجوده عندك في القائمه دي لو انا جيتلك هنا وعملتلك دلوقتي ريلود فعملت لك قائمه ولكن قائمه مرتبه عندك هنا العنصر الاول والثاني والثالث والرابع والخامس قائمه مرقمه كمان متاح ان ترتيب القائمه دي يكون ترتيب رقمي زي ما موجود قدامك هنا 1 ا 3 4 5 او يكون ترتيب ابجدي بالحروف الانجليزيه اي بي سي دي او ترتيب روماني اللي هي الارقام الرومانيه او اللي انت عاوزه بتعمل الكلام ده من خلال اتربيوت بتكتبه عندك هنا الاتربيوت ده اسمه تايب الديفولت فو بتاع الاتربيوت ده هو رقم واحد فرقم واحد ده بيعني ان انت عاوز الترتيب يكون ترتيب رقمي فسواء انت كتبتها او ما كتبتها كده كده الترتيب بيكون رقمي زي ما موجود قدامك هنا طيب لو انت عاوز الترتيب يكون ترتيب ابجدي بالحروف الانجليزيه فبتكون او اي لور كيس الا a اللي بتكون سمول لو انت عملت لك دلوقتي ريلود هيعمل لك دلوقتي ترتيب ابجدي اللي هو اي بي سي دي ولكن الحروف دي هتكون عندك سمول لو انت عاوز الحروف دي تكون عندك ابر كيس او كابيتال بتكتب عندك الاي كابيتال او اي ابر كيس فلو عملت لك دلوقتي ريلود فتعمل عندك ترتيب ابجدي ولكن ترتيب بحروف ابر كيس كمان برض لو انت عاوز الترتيب الروماني فبتكون سمول هيعمل لك دلوقتي الحروف الرومانيه او الارقام الرومانيه اللي قدامك دي هي الارقام الرومانيه كمان لو انت عاوز الارقام دي تكون عندك ابر كيس او كابيتال فبتكون ده فلو عملت لك دلوقتي ريلود اتحول عندك ل ارقام رومانيه ولكن بشكل كابيتال كل المعلومات دي لو انت وقفت عندك هنا على التايب هتلاقيها موجو عندك هنا بالشكل ده طيب كمان برض عندنا اتربيوت تانيه تعال كده لما نتكلم عليها لو عملت لك دلوقتي ريلود الترتيب ده عندك بدا من 1 ا 3 4 خ لو انا دلوقتي عاوز اعكس لك الترتيب ده يعني عاوز دلوقتي اقول لك خ ا 3 ا واحد ف بجي لك هنا وبعمل لك دلوقتي اتربيوت اسمه ريفير سد اعكس لي الترتيب ده فلو جيت لك هنا وعملت لك دلوقتي ريلود عكس لك الترتيب 5 4 3 2 1 كمان برض انا دلوقتي الترتيب عندك باي ديفولت بيبدا عندك من واحد لو انت عاوز الترتيب ده مثلا يبدا من 3ه من 10 من 100 من 50 فبت جي عندك هنا وبتعمل دلوقتي الاتربيوت اللي اسمه ستارت انت دلوقتي هنا بتحدد انت عاوز تبدا منين بالظبط فانا مثلا عاوز ابدا من 40 مثلا فلو عملت لك دلوقتي ريلود بدا العد عندك من 40 ادي 40 41 42 والى اخره لو انا مثلا عاوز ابدا العد مثلا من س ف هعمل لك دلوقتي ريلود ف 7 8 9 10 واللي انت عاوزه لو انت ما كتبتش حاجه خالص هو بيعمل لك بيبد لك العد عندك من واحد ف 1 2 3 4 5 جميل جدا جدا جدا هندخل دلوقتي ان شاء الله في ثالث قائمه ولكن قبل بس ما ندخل في القائمه دي انا دايما مش ببقى عاوزك تضيع وقت كتير دايما لما بتكون في حاجه مش مهمه بقول لك ما تضيعش فيها وقت ما تذاكرها قوي يعني الحاجه دي احنا ممكن مثلا ناخد زيها في السي اس اس ساعات كتير بقول لك كده لكن لما تبقى في حاجه مهمه قوي بقول لك ركز في الحاجه دي وذاكر كويس جدا اهو القائمه الثالثه اللي هناخدها النهارده ان شاء الله مش مهمه قوي او مش بنستخدمها كتير ممكن اه تستدعي فكرتك ان انت تستخدمها ولكن مش دايما او 90% مش هتستخدم القائمه دي فيكفي بس ان انت تكون عارفها مش اكتر تمام طيب القائمه دي اسمها دي ال ودي اختصار لكلمه ديسكربشن ليست ال القائمه دي مبنيه على فكره ان انت بيكون عندك بوينت وسكرب شن بيوصف البوينت دي فبوتي انت بتحطها عندك في دي تي ودي اختصار لكلمه ديسكربشن تيرم تيرم اللي هي النقطه الرئيسيه تمام باللغه العربيه طبعا يعني فلو كتبت لك هنا مثلا ايفون ده مثلا منتج موجود عندي في الموقع مثلا يعني دلوقتي انا عاوز اوصف المنتج ده انا كده عملت عندي النقطه الرئيسيه اللي هي التيرم عاوز دلوقتي اوصف النقطه دي فبت استخدم عندك الدي دي الدي الاخيره دي هي اختصار كلمه ديسكربشن وهي وصف للترم اللي فوق ده فجيل لك هنا مثلا وصف دلوقتي الترم ده واقول لك ان هو مثلا ذس از فون مثلا او اي حاجه يعني اكتب الوصف اللي انت عاوزه فلو جيت لك هنا وعملت لك دلوقتي ريلود فالنه الرئيسيه اللي هي الترم اللي هي كلمه ايفون دي بتكون راجعه لورا شويه اما الوصف بتاعها بيكون بعدها بالشكل اللي قدامك ده تمام ممكن تحط وصف تاني عادي جدا ممكن اقول لك مثلا ده هو برودكت تمام ايا يكن يعني فهعمل دلوقتي للود فاصبح دلوقتي الترم ده له دلوقتي وصفين تقدر تحط الوصف اللي انت عاوزه لو انا دلوقتي عاوز اعمل لك ترم تاني فبج لك هنا وبعمل لك دلوقتي دي تي فبيعمل لك ترم تاني او نقطه رئيسيه تانيه ممكن مثلا اكتب لك هنا ريلمي ايا يكن يعني واوصف لك دلوقتي النقطه دي ف بستخدم عندي الدي دي اللي هي اختصار لكلمه ديسكربشن اللي هي وصف الترم ده فجي لك هنا واكتب لك دلوقتي الوصف اللي انت عاوزه ايا يكن تعال كده لما نعمل عندنا لورم لان ما فيش اي كلمه بالي لورم خمسه مثلا خمس كلمات ايا يكن فدلوقتي هو عمل لك النقطه الرئيسيه دي وده هو الوصف للنقطه دي فهمتوا فهو ده باختصار الدي ال بتعمل عندك دي ال وبتحط عندك النقاط الراسيه في الدي تي وبتوصفيلي اسيه دي من خلال الدي دي وبكده نكون شرحنا عندنا الدي ال وقبلهم اليو ال وقبلهم الاو ال الكونتينر من الحاجات اللي انت مش هتعرف تشتغل بيها غير مع السي اس اس فلازم تكون متعلم سي اس اس علشان تقدر تشتغل بالكونتينر فانت يكفي فقط ان انت يكون عندك معلومات عنها بس مش اكتر فتعال دلوقتي لما نفهم مع بعض يعني ايه كونتينر علشان تفهم يعني ايه كونتينر في البرمجه المفروض ان انت تفهمها في الحياه الواقعيه لان هي هي نفس المعنى الكونتينر في المينا معناه حويه او مكان بنحوي في شيء في المينا بيكون في منتجات كتيره جدا او مواد كتيره جدا في مواد غذائيه في ملابس في هواتف في حاجات كتيره جدا فعشان الحاجات دي ما تتلخبطش مع بعض بنحط كل حاجه في كونتينر فبيكون عندنا كونتينر مثلا لللملابس عندنا كونتينر للمواد الغذائيه عندنا كونتينر للهواتف وهكذا فوظيفة علشان بقى الدنيا ما تدخلش في بعض وما يحصلش عندك تداخل والدنيا تسيح في بعض انت بتعمل عندك كونتينر لكل جزء في الموقع بتاعك ف الهيدر انت بتعمل لله كونتينر والنف بار انت بتعمله كونتينر والكونت انتت اللي هو المين انت بتعمله كونتينر والسيد بار بتعمل لله كونتينر والفوتر بتعمل له كونتينر وكل جزء في موقعك انت بتعمل له كونتينر الكونتينر في الاتش تي ام ال اسمه ديف انت بتستخدم عندك تاج الديف علشان تعمل عندك الكونتينر التاج ده انت ممكن ممكن تكتب جواه اي حاجه ممكن تحط جواه مثلا بارجراف ممكن تحط جواه اتش و صور فيديوهات اللي انت عاوزه ف الديف بيشتغل نفس شغلانه الحاويه بالظبط حاويه او كونتينر بتحوي مجموعه اكواد علشان ما يحصلش اي تداخل عندك في المقع بتاعك فبناء موقعك هيكون كالتالي انت دلوقتي هتعمل عندك اكواد الهيدر في ديف اللي هو الكونتينر اللي بيحو عندك كل اكواد الهيدر والنف بار كل اكواد الناف بار انت هتحطها عندك في ديف والكونت انتت الرئيسي اللي هو المين انت هتحطه عندك في ديف والفوتر هتحطه عندك في ديف والساد بار هتحطه عندك في ديف وهكذا كل مجموعه اكواد انت بتحطها عندك في كونتينر اللي هو ديف طيب جالك بعد كده في الاتش تي ام ال 5 وقال لك انا دلوقتي كل الكونتينر اللي عندي اسمهم ديف الهيدر اسمه ديف المين اسمه ديف السايد بار اسمه ديف الفوتر اسمه ديف طب ما انا كده ممكن اتلخبط او محركات البحث نفسها تتلخبط تبقى مش فاهم الكونتينر ده بيتكلم عن ايه فقال لك احنا هنعمل في الاتش تي ام ال 5 حاجه اسمها السيمانتك المنتس السيمانتك دي هي مجرد اسم منطقي بس انت بتعمله للديف فبدل ما الهيدر يكون له ديف لا الهيدر هيكون ليه هيدر تاج الهيدر زي الديف بالظبط ولكن انت لما تحط عندك محتويات الهيدر في تاج الهيدر افضل بكتير ومنطقيه ان انت تحطها عندك في تاج الديف ولكن الديف والهيدر الاثنين بيعملوا نفس الوظيفه بالظبط وهي الكونتينر تمام فال السيمانتك عملت لك تاج الهيدر للهيدر كمان عملت لك برض تاج الناف فمحتوى الناف بدل ما تحطها عندك في تاج الديف ده افضل لمحركات البحث علشان يفهم انت عامل ايه بالظبط كمان عندنا تاج للمين اللي هو المحتوى بتاعك كمان عندنا سكشن ده برده لو انت عندك سكشن في الموقع تقدر ان انت تحط فيه كل محتويات السكشن عندنا كمان تاج الارتكل اللي هو خاص بالمقالات فلو انت عندك مقاله تقدر ان انت تحطها في ارتيكل بدل ما تحطها عندك في ديف عندنا كمان الاي سايد وده اختصار لساي بار فانت ممكن تحط فيه كل محتويات السايد بار بتكون موجوده عندك في الموقع بتاعك كمان عندنا الفوتر وده الجزء السفلي في الموقع فبدل ما تحط محتويات الفوتر عندك في ديف تقدر ان انت تحطها عندك في فوتر كل اللي انا قلته لك ده انت تقدر ما تستخدمو وتستخدم الديف عادي جدا ولكن الافضل لمحركات البحث ان انت تستخدم عندك اسماء منطقيه لو حد سالك وقال لك ايه هي اهم حاجه في الاتش تي ام ال رد عليه وقول له ان هي الروابط او اللينكات وده ببساطه لان الموقع مقع بتاعك بيكون مكون عندك من صفحه مربوطه بصفحه مربوطه بصفحه والربط ده هو اللينكات الفكره الاساسيه للينكات هي انها بتكون حلقه الوصل ما بين نقطتين اول نقطه هو الصفحه او المكان اللي موجود فيه اللينك بتاعك وتاني نقطه هو المكان اللي انت عاوز توجه ليه المستخدم ممكن المكان ده او النقطه دي تكون مكان في نفس الصفحه بتاعتك او مكان في صفحه ثانيه في نفس الموقع او مكان في موقع ثاني او مثلا انت دلوقتي عاوز توجه المستخدم لبريد الكتروني علشان يكلمه او انت مثلا دلوقتي عاوز توجه المستخدم لرقم تليفون علشان يتصل بيه او انت عاوز توجهه لصوره او ايا يكن المكان اللي انت عاوز توجه ليه المستخدم علشان دلوقتي تعمل عندك لينك في الموقع بتاعك بتستخدم عندك دلوقتي واسم الاي واسم الاي هو اختصار لكلمه انكور او مرساه السفينه المرساه اللي بتوصلك لمكان معين ودلوقتي ما بين البدايه والنهايه لي بتكتب عندك جمله او كلمه او ايا يكن فالكلمه دي بتكون هي اللينك فدلوقتي انا لو عملت لك هنا ريلود ده شكل اللينك تعال كده لما نكبر ده شكل اللينك المفروض دلوقتي انا لو ضغطت على اللينك ده يوجهني لمكان معين المكان ده هو اللي انت بتحدده عندك في الاتش ار اي اف او هايبر تكست ريفرنس او المكان اللي انت عاوز توجه للمستخدم اللي هي النقطه التانيه هنا انت بتكتب المكان اللي انت دلوقتي عاوز توجه ل مستخدم تعال دلوقتي لما نوجه المستخدم مثلا لجوجل عاوز دلوقتي المستخدم لو ضغط هنا يروح دلوقتي لموقع جوجل ف هجيلك هنا في المكان ده وهكتب لك دلوقتي اتش تي تي بي اس وهقول لك ليه انا كتبت اتش تي تي بي اس ولكن اصبر معايا واكتبلك دلوقتي نقطتين ثم دبل سلاش او دبل فورورد سلاش وبعد كده www دو جوجل بالشكل ده دوت ك تمام تمام جدا جدا فلو انا جيت لك هنا وضغطت لك دلوقتي على اللينك ده ف وداني دلوقتي ل موقع جوجل طيب اكيد انت ملاحظ ان شكل اللينك مميز جدا جدا مميز من ناحيه لونه ومميز عندك من ناحيه الخط اللي تحت اللينك ده هتلاقي ان لون اللينك عندك باللون الازرق عاوزك تفهم ان انت لو ضغطت على اللينك ده ضغطه مطوله من غير ما تسيب ايدك فلون اللينك عندك بيكون عندك باللون الاحمر وهنا الحاله دي اسمها اكتف لينك لازم تفهم ان لون اللينك بيفضل عندك باللون الازرق طول ما انت ما ذهبت للينك ده طول ما انت ما ضغطت على اللينك ده لكن دلوقتي انت لو ضغطت على اللينك ده بيتحول لون اللينك للون الموف تعالى دلوقتي لما اثبت لك حاجه زي كده هنعمل دلوقتي عندنا لينك تاني ومش مهم دلوقتي هنكتب عندنا ايه في الاتش ار اي اف المهم ان ده لينك انا ما ذهبت ليه تعال دلوقتي لما نعمل عندنا ريفريش وبص دلوقتي لفرق اللون ما بين اللينك اللي انا ما ذهبت ليه ما ضغطت عليه واللينك اللي انا ضغطت عليه هتلاقي دلوقتي ان التست اثنين عندك باللون الازرق اما التست عندك باللون الموف كمان برض لازم تفهم ان الا a هو عنصر ان لاين فانا دلوقتي لو عملت عندي هنا مثلا عنصر ثالث فكلهم هيجوا عندك على نفس السطر لان الا a هو عنصر ان لاين طيب قبل ما اقول لك انا ليه كتبت الاتش تي تي بي او الاتش تي تي بي اس هقول لك يعني ما تقلقش يعني هقول لك دلوقتي على حاجه ثانيه مهمه جدا وهي التارجت وده اتربيوت مهم جدا جدا للاي وده من خلاله بتحدد هل اللينك اللي انت تفتحه ده هيتفتح في نفس التاب ولا في تاب جديده يعني انا دلوقتي لما بعمل لك هنا ريلود انا ما كتبتش حاجه اهو فالمفروض دلوقتي ان انا لو جيت لك هنا وضغط لك دلوقتي على اللينك ده هيفتح لك اللينك ده في نفس التاب في نفس التاب بتاعتك دي طيب افرض دلوقتي انا عاوز لما اضغط على الل لينك ده يفتحه لك في تاب جديده اللي بيتحكم لك في حاجه زي كده هو تارجت فلو انا جيت لك هنا تعال كده لما نفتح لو انا جيت لك هنا وكتبت لك دلوقتي اندر سكور سيلف دي القيمه الافتراضيه للينك ده هو الديفولت فو اللي هو سواء انت كتبتها او ما كتبتها فكده كده اللينك ده هيتفتح لك في نفس التاب فلو انا جيت لك هنا وعملت لك دلوقتي ريفريش وضغطت لك دلوقتي هنا على اللينك ده هيفتح لك اهو في نفس التاب بص في نفس التاب اللي قدامك دي كلام جميل جدا جدا بقى لو انا جيتلك هنا وبدل ما اكتب لك الاندر سكور سيلف كتبتلك الاندر سكور بلانك البلانك دي بتفتحلك اللينك ده تعال كده بتفتحلك دلوقتي اللينك ده في نيو تاب فلو انا جيتلك هنا تعال كده لما نفتح عملتلك دلوقتي ريفريش ركز دلوقتي على شكل التاب اللي فوق دي لو انا دلوقتي ضغطت لك هنا على اللينك ده فتح لك اهو في نيو تاب تمام جدا جدا طبعا الموضوع هو حريتك لو انت عاوز تع عملها في نفس التاب بتكتب عندك اندر سكور سيلف او ممكن ما تكتبها لان هي القيمه الافتراضيه اهو فسواء انت كتبتها او ما كتبتها هي كده كده هتفتح لك اللينك ده في نفس التاب تمام جدا جدا جدا ليه انا كتبت عندي اتش تي تي بي اس او اتش تي تي بي احيانا في مواقع ثانيه ببساطه لان ده موقع خارجي الصفحه اللي انا رايح لها دي مش في الموقع بتاعي طالما انت بتروح لموقع خارجي سواء بقى جوجل او حتى مثلا هنا فيسبوك تمام فهعمل لك دلوقتي هنا ريلود وضغط دلوقتي هنا على الكلمه دي تعال كده الانترنت بطيء جدا جدا عندي المهم ان هو دلوقتي اهو وصلك لموقع فيسبوك علشان بس ما تضيعش وقت تع كده لما نرجع لو انا دلوقتي مش كاتب عندك مثلا اتش تي تي بي اس تعال كده لما نكتب عندنا دبلي w. فيبو دوت ك او جوجل دوت ك او انستجرامد ك او ايا يكن لو انا دلوقتي دلوقتي عامها بالمنظر اللي قدامك ده وضغطت لك دلوقتي هنا على اللينك ده بص ايه اللي حصل الدنيا عندك باظت خالص هو دلوقتي اعتبر ان اللينك ده جزء من الموقع بتاعك اعتبر ان الدومين اللي انت كتبته عندك في الاتش ار اي اف صفحه من صفحات الموقع بتاعك وهي دي بقى التركيه كلها ف صفحات الموقع بتاعك انت مش بتعمل فيها اتش تي تي بي اس او اتش تي تي بي او ايا يكن فالبروتينات بتعملهم للمواقع الخارجيه فتعال دلوقتي لما نوجه المستخدم لصفحه من صفحات موقعنا اهو انا دلوقتي عندي هنا صفحه واحده بس وهي صفحه الاندكس دوت اش تي ام ال اللي هي الصفحه بتاعتي دي هاجيلك هنا في المكان ده وهعمل لك دلوقتي صفحه تانيه جنب صفحتي فجي لك هنا على نيو فايل وهسميها لك الصفحه دي مثلا تست دوت اش تي ام ال سميها انت بالاسم اللي انت عاوزه فدلوقتي التست دوت اش تي ام ال جنب الصفحه بتاعتي ف هجي لك هنا وهبني لك دلوقتي صفحه اتش تي ام ال على سبيل التجربه فهعمل لك دلوقتي علامه التعجب دي وهضطر فهبني لك صفحه اش تي ام ال بسيطه جدا تعال دلوقتي لما نمسح عندنا التاجين اللي اسمهم ميتا دول انا مش محتاجهم وتعال هنا لما نسمي التايتل ده مثلا تست او ايا يكن وهكتب لك هنا كلمه للدلاله بس على الصفحه دي انا بكتب الكلمه دي علشان لو تم توجيهي للصفحه دي تظهر لي الكلمه دي واتاكد ان انا فعلا في الصفحه دي تمام جدا جدا تعال بقى دلوقتي لما نرجع عندنا في الصفحه بتاعتنا جوه اللينك وهقول لك دلوقتي انا عاوز لما اضغط دلوقتي على الكلمه دي يتم توجيهي للصفحه اللي اسمها تست دوت اش تي ام ال بما ان الصفحه دي جنب صفحتك يبقى هي احد صفحات الموقع يبقى بتكتب عندك الاسم على طول تست دوت اش تي ام ال بدون اي بروتوكول بدون الاتش تي تي بي اس او الاتش تي تي بي او اي بروتوكول فلو انا جيت لك هنا تعال كده لو انا جيتلك هنا اهو وعملتلك دلوقتي ريفريش وضغط لك دلوقتي على الكلمه دي اللي هي كلمه تست نقلك دلوقتي للصفحه التانيه اللي كان موجود فيها الكلمه دي اللي التايتل بتاعها موجود فيه هنا كلمه تست فتعالوا لما نسهل الدنيا على نفسنا انت في الاتش ار اي اف بتكتب عندك اليو ار ال واليو ار ال ده مقسم عندك لنوعين نوع ابسليوت ونوع ريليف الابسليوت هو النوع المطلق هو المواقع الخارجيه وده يكون يو ار ال كامل مكون عندك من البروتوكول اللي هو الاتش تي تي بي اس او الاتش تي تي بي والفرق بين الانواع دي هنعرفها ان شاء الله في نهايه الدوره اللي انا دلوقتي عاوزك تعرفه هو ان انت لو عاوز دلوقتي تروح لموقع خارجي بتحط عندك يو ار ال كامل النوع الثاني و هوو الريليف الريليف هو المطلق وانت هنا ما بتحطش عندك يو ار ال كامل انت هنا بتحط المسار اللي انت عاوز تروح له في الموقع بتاعك فممكن تكون عاوز تروح لصفحه ثانيه في موقعك او ممكن تكون عاوز تروح روح لصوره معينه في موقعك هتقول لي ايه ده هو انا دلوقتي ممكن اروح لصور هقول لك بالظبط كده وتعال دلوقتي لما اوريلك ازاي بتعمل حاجه زي كده فهن دلوقتي اللي هي صفحه الاتش تي ام ال وهجي لك عندك هنا في المكان ده وهمسح لك دلوقتي اليور ار ال ده وهيجيلك عندك هنا جنب صفحه الاتش تي ام ال وضيف لك الصوره اللي انا كنت واخدها كوبي دي صوره عاديه جدا اسمها ايج دوت جي بي جي انا دلوقتي هضيف لك مسار الصوره دي جوه ملف الاتش تي ام ال في المكان ده فهاج لك هنا واكتب لك دلوقتي اسم الصوره اللي هو ايج دوت جي بي جي طالما الصوره دي جنب ملف الاتش تي ام ال انا كتبت الاسم على طول ولكن الصوره دي لو كانت في مجلد تاني كنت حط لك مسار الصوره دي لو انا جيت لك هنا وعملت لك دلوقتي ريلود خلي بالك طبعا انت ممكن تغير الاسم ده ممكن مثلا تسميه ايمدج ممكن تسميه الاسم اللي انت عاوزه علشان بس ايه ما نفضل مسمينها تيست وكده والناس تزهق انت عادي ممكن تسميها اللي انت عاوزه لو انا جيت لك هنا وضغطت لك دلوقتي على الكلمه دي هينقلك دلوقتي للصوره بتاعتنا اللي احنا كنا حطينها عندنا هنا في المكان ده تمام فانت دلوقتي ممكن تضيف عندك مسار لصفحه تانيه او صوره تانيه او اللي انت عاوزه اللي انت عملته ده اسمه ريليت يور ار ال او يور ار ال مطلق كمان في حاجه تانيه مهمه جدا دلوقتي احنا عملنا الكلمه دي لينك خلينا دلوقتي الكلمه دي عباره عن لينك انا ممكن اخلي لك كلمه وممكن اخلي لك صوره فممكن اجيلك هنا تعال كده لما نوسع الدنيا على نفسنا وممكن اجيل لك في المكان ده واعمل لك دلوقتي وسم الايمج علشان دلوقتي اضيف لك صوره تكون الصوره هي اللينك فممكن دلوقتي اضيف لك الصوره اللي احنا كنا عاملينها اللي هي الصوره دي فجي لك هنا واقول لك دلوقتي ضيف لي الصوره اللي هي ايج دوت جي بي جي بالشكل اللي قدامك ده وشيل لي دلوقتي الالت احنا مش عاوزينها لو انا دلوقتي عملت لك هنا ريلود فدلوقتي تعال كده بس لما نصغر الشاشه عشان بس ايه تكون باينه قدامكم فالصوره دي اصبحت عندك لينك الصوره دي موجود عندك دلوقتي جوه اللينك ده الكلام ده معناه ان اي يوار ال انت هتكتبه هنا هيكون هو الرابط اللي لو المستخدم ضغط هنا على الصوره دي هيتحول للرابط ده فلو انت دلوقتي كتبت عندك هنا رابط الفيسبوك دلوقتي اي مستخدم هيضغط هنا على الصوره دي هيتحول دلوقتي لموقع الفيسبوك فتعال دلوقتي لما نجرب مع بعض ونضيف مثلا لينك اللينك ده هيوجه هنا لصفحه تست دوت اش تي ام ال ممكن انت تضيف عندك اليو ال اللي انت عاوزه انا هجيلك هنا وهض لك دلوقتي تست دوت اش تي ام ال طيب لو انا جيتلك هنا وعملتلك دلوقتي ريلود وجيتلك هنا شايف دلوقتي شكل الماوس بالمنظر اللي قدامك ده لو انا دلوقتي ضغطت لك هنا على الصوره دي وجهني دلوقتي لصفحه تست دوت اشي ام ال ملخص الكلام انت دلوقتي اي حاجه هضيفها ما بين البدايه والنهايه للاي هتتحول عندك للينك اضفت عندك صوره اضفت عندك تست اضفت عندك اللي انت اضفته ايا يكن فاللي انت هتضيفه عندك هنا هيتحول وول عندك لرابط او لينك طيب كمان برض انا عندي حاجه تانيه مهمه جدا انا ممكن دلوقتي بدل ما يتم توجيهي لصفحه تانيه في الموقع بتاعي او موقع خارجي او صوره خارجيه انا ممكن اوجه المستخدم لجزء معين في نفس الصفحه يعني مش هنخرج من الصفحه بتاعتنا في نفس الصفحه دي هوجه المستخدم ل سكشن معين فعلشان ابين لك حاجه زي كده تعال دلوقتي لما نعمل عندنا كذا سكشن في الموقع ده تمام للتوضيح بس مش اكتر فجيل لك هنا وهعملك دلوقتي سكشن ممكن انت تعمل سكشن ممكن تعمل ارتيكل ممكن تعمل ديف ممكن تعمل اللي انت عاوزه تمام هجيلك هنا وهعملك دلوقتي عنوان لل سكشن ده هسميه مثلا سكشن 1 تمام بالشكل اللي قدامك ده وهكتب لك فيه دلوقتي اي كلام من خلال البراجراف ومن خلال الورم هكتبلك دلوقتي 30 كلمه بالشكل اللي قدامك ده تعال دلوقتي لما نشوف عندنا تاثير الكلام ده طبعا تاثير صغير جدا جدا فتعال دلوقتي لما نكبر عندنا الشاشه فده شكل السكشن ده تعال لما نعمل عندنا كذا سكشن علشان ابين لك الفكره بالظبط ولكن تعال كده لما نفصل عندنا كل سكشن باتش ار خط كده هوريزونتال رو علشان يعمل لنا الخط اللي قدامك ده تمام وهكر لك دلوقتي السكشن ده ده كده اول سكشن هعمل لك دلوقتي سكشن تاني وسمي لك دلوقتي العنوان بتاعه سكشن ت اوكي وعمل لك دلوقتي سكشن ا لاثه وهعمل لك دلوقتي سكشن اربعه اخر سكشن عندي تمام يبقى انا دلوقتي عندي هنا سكشن 1 ت 3 4 عاوز دلوقتي اعمل عندي هنا لينك لو ضغطت دلوقتي على اللينك ده يتم مثلا توجيه الاول سكشن او تاني سكشن او ثالث سكشن او اللي انا عاوزه اعمل الكلام ده ازاي باجي عندك هنا في المكان ده وبعمل دلوقتي عندك لينك عادي جدا سمي اللينك ده بالاسم اللي انت عاوزه انا سميه هنا مثلا او هكتب جواه هنا كلمه سكشن تمام فده شكل اللينك بتاعك الشكل اللي قدامك ده تعال كده بس لما نكبر ده الشكل اللي قدامك ده عاوز دلوقتي لو ضغطت لك هنا على الكلمه دي على كلمه سكشن يتم مثلا توجيهي لل سكشن التالث نعمل الكلام ده ازاي بنستخدم حاجه اسمها الاي دي فهيج لك هنا في السكشن الثالث في المكان ده وهدي دلوقتي لل سكشن ده حاجه اسمها اي دي الاي دي هو رقم البطاقه للعنصر او الرقم القومي للعنصر عارف انت رقم بطاقتك او رقم القومي اللي بيميزها قدام الدوله او الرقم القومي ده في حاجه زيه في الاتش تي ام ال اسمها الاي دي الاي دي تقدر تعتبره زي الرقم القومي او اسم العنصر او الحاجه اللي بتميز العنصر ده فدلوقتي انا لو كتبت لك هنا اي دي الاي دي ده بيمثل عندك العنصر ده فممكن اكتب لك هنا مثلا اي اي دي في الدنيا ممكن اكتب لك مثلا تست او بلاش تست على كده لما نكتب عندنا سك اختصار لكلمه سكشن سك لاه يبقى السيك ت دي هي الاي دي بتاع السكشن ده هو ده الرقم القومي بتاعه علشان دلوقتي اوصل لل سكشن ده بجيلك عندك هنا وبقولك دلوقتي انا عاوز اوصل لاي دي طالما اللي هكتبه هنا هيكون عنوان اي دي يبقى بتكتب عندك هنا هاش هقوللك دلوقتي انا عاوز اوصل للاي دي اللي اسمه سك ت الاي دي ده اوعى ما تكتبش هاش دلوقتي انا لو جيتلك هنا وضغط لك دلوقتي هنا على سكشن وجهني دلوقتي ل سكشن لاه تاني تعال كده هضغط لك دلوقتي هنا على سكشن وجهن دلوقتي ل سكشن لاثه ممكن دلوقتي مثلا اعمل الموضوع ده مثلا في سكشن اربعه هجي لك هنا وادي له دلوقتي اي دي هسميه اي حاجه سميه مثلا سك فور وهطلع لك هنا فوق اقول لك دلوقتي انا لو ضغطت لك على اللينك ده وجهني دلوقتي ل سك فور فدلوقتي انا لو جيت لك هنا وعملت لك دلوقتي ريلود وتعال كده بس لما نكبر علشان ابينها لك اكتر لو ضغطت لك دلوقتي هنا على السكشن وجيهك دلوقتي لل سكشن فور انا هنا مازلت في الصفحه بتاعتي فدي برض حاجه مهمه جدا امسح كده الكلام ده علشان ندخل دلوقتي في مثال تاني طيب عندنا حاجه ثانيه مهمه جدا وهي ان انت ممكن توجه المستخدم لايميل معين علشان يكلمه ممكن توجهه للايميل او رقم تليفون او اللي انت عاوزه فعلشان تعمل كده تعالى دلوقتي لما نكتب عندنا هنا مثلا كلمه منطقيه وهي كلمه ايميل انا دلوقتي مثلا عاوزه دلوقتي لو ضغط هنا على كلمه ايميل يوجهه لايميل معين فجيل لك هنا في الاتش ار اي اف وهقولك دلوقتي انا عاوزك تروح لميل 2 لازم تكتب عندك ميل 2 ثم نقطتين قبل الايميل وبعد كده تكتب اسم الايميل بتاعك فهكذا ضغطت لك دلوقتي هنا على الايميل ده هيفتحلك دلوقتي البريد بتاعك علشان تقدر دلوقتي ان انت تتواصل مع المستخدم ده او مع الايميل ده تمام طيب كمان برضو تقدر ان انت تتصل برقم تليفون فممكن اجيلك هنا اقوللك دلوقتي انا عاوز مثلا اتصل بفون نمبر مثلا او ايا يكن الكلمه دي هقول لك دلوقتي انا عاوز اتصل برقم تليفون طالما رقم تليفون يبقى بتكتب عندك لل ثم نقطتين الكلمه دي هي اللي بتعرف ان انت هتكتب دلوقتي رقم تليفون فجي لك هنا بعد النقطتين وهكتب لك دلوقتي اي رقم تليفون عشوائي في الدنيا ده مش رقم حد تمام طيب لو انا جيت لك هنا في المكان ده وعملت لك دلوقتي ريفريش وضغطت لك دلوقتي على الفون نمبر هيقوللك دلوقتي ميك ا كول فروم ايه بالظبط انت دلوقتي عاوز تتصل باي تطبيق بالظبط فبت اختار التطبيق اللي انت عاوز تتصل من خلاله كمان برض ممكن تضيف عندك كود جافا سكريبت والموضوع ده متقدم شويه ومش مطلوب ان انت انت تركز فيه الفكره بس كلها ان انت تفهم ان دي حاجه موجوده انا هشرحها لك علشان بس اكون لميت لك كل حاجه ان شاء الله علشان تكتب عندك كود جافا سكريبت بتكتب عندك هنا كلمه جافا سكريبت بالمنظر اللي قدامك ده ثم النقطتين دي اللي بتدل على ان اللي هتكتبه دلوقتي ده هو كود جافا سكريبت فانا دلوقتي هكتب لك كود وما تركزش في كود ال جافا سكريبت ده فكتب لك هنا اليرت مثلا هنا هكتب لك كلمه هلو او الكلمه اللي انت عاوزها ا يكن المهم ان ده كود جافا سكريبت عاوز دلوقتي اول ما اضغط هنا على الكلمه دي يوجهني دلوقتي للكود ده او يفتح لي الكود ده فهكذا جافا سكريبت اكتب هنا الكلمه اللي انت عاوزها لو انا جيت لك هنا تعال كده لما نفتح هعمل لك دلوقتي هنا ريلود الاول كده الكود اللي انا كتبته ده بيفتح لك نافذه منبثقه فيها الكلمه اللي انت كتبتها هنا فدلوقتي انا لو جيت لك هنا وضغطت لك دلوقتي على الكلمه دي فتح لك دلوقتي نافذه منبثقه فيها الكلمه اللي انت كتبتها هنا وممكن تكتب اي كود جافا سكريبت انا دلوقتي مش عاوزك تركز في الكود عاوزك تركز بس ان انت تقدر تكتب كود جافا سكريبت من خلال الاي الفورم او حقول الادخال هو المكان اللي انت بتطلب من المستخدم انه يدخل لك بيانات زي مثلا الفورم اللي من خلالها المستخدم يدخل لك اسمه او رقم تليفونه او الايميل او الباسورد او كل الكلام ده نفس فكره الفورم اللي موجوده عندك في فيسبوك فعندك في موقع فيسبوك فورم اللي هي تسجيل الدخول وعندك في موقع امازون فورم ثانيه لطريقه الدفع بندخل من خلالها طريقه الدفع اللي هو رقم البطاقه واسمك وعنوانك وكل الكلام ده وكل موقع بيكون ليه فورم خاصه بيه بيطلب من خلالها بيانات من المستخدم كلمه فورم ترجمتها نموذج او استماره وهي هي بالضبط نفس فكره الاستماره اللي موجو عندنا في الشركات الحكوميه او الاماكن الحكوميه فدلوقتي انت لو بتروح الاماكن الحكوميه دي هتلاقيهم هناك بيقدموا لك استماره انت المفروض ان انت تدخل بيانات في حقول البيانات اللي موجوده عندك في الاستماره دي نفس الفكره دي موجوده عندنا في الاتش تي ام ال فعندنا في الاتش تي ام ال حاجه اسمها استماره او نموذج او فورم علشان تعمل الفورم ده بتكتب عندك واسم الفورم الوسم ده طبعا موجود عندك هنا اتربيوت الاكشن مش هنستخدمه دلوقتي خالص هو وتربي تاني اسمه الميثود فالمي والاكشن هنستخدم ان شاء الله لما نتعلم لغات برمجه زي البي اتش بي او الجافا سكريبت او غيرها من لغات البرمجه الفورم مبدئيا كده انت ممكن تكتب فيها اي حاجه ممكن تكتب فيها عندك ديف اتش و برجراف اللي انت عاوزه كل اللي اتعلمناه قبل كده او اللي هنتعلم بعد كده ممكن تكتبه عندك دلوقتي جوه وسم الفورم طيب انا دلوقتي عاوز اعمل حقل لادخال البيانات علشان تعمل عندك حقل لادخال البيانات بتستخدم عندك وسم الانبوت اللي بيعتبر واحد من اهم الوسوم في الاتش تي ام ال الوسم ده هو سينجل تاج يعني مالوش بدايه ونهايه زي وسم الفورن هو وسم سينجل تاج الوسم ده بيعمل لك عندك هنا مربع لادخال البيانات ممكن تكتب هنا او المستخدم يكتب هنا البيانات اللي هو او اللي انت طالبها منه طيب دلوقتي المربع ده مربع مالوش اي معنى مالوش اي نوع ولا ده مربع نصوص ولا ده مربع ارقام ولا ده مربع ادخال الايميل ولا رقم التليفون ولا كل الكلام ده علشان دلوقتي تحدد عندك نوع المربع ده بتيجي عندك هنا في الانبوت وبتكتب عندك اتربيوت مهم جدا جدا وهو التايب التايب ده اللي بيحدد لك نوع الانبوت عندك انواع كتيره جدا جدا عندك نوع البوتون اللي بيحول لك الانبوت ده لزرار فلو انت عاوز تعمل زر في موقعك ممكن تعمله عندك من خلال البوتون عندك برض التشيك بوكس وهنتكلم عليها ان شاء الله شويه كده عندك الايميل وعندك الفايل اللي بيطلب من المستخدم فايل او صوره عندك برده كمان النمبر اللي بيطلب من المستخدم رقم او باسورد او راديو او رينج كل دي انواع مهمه جدا جدا هنتكلم عليهم ان شاء الله شويه كده ولكن هنبدا عندنا دلوقتي باهم نوع واشهر نوع وهو التكست وده بيعمل لك مربع نصي وده من خلاله انت بتطلب عندك نص من المستخدم ممكن المستخدم هنا يدخلك دلوقتي نص او رقم او سبيشال كراكتر او اي حاجه في الدنيا الفكره ان في مربع التك اللي موجود قدامك ده المستخدم بيدخل لك هنا نص طيب افرض دلوقتي انت عاوز من المستخدم ارقام بس مش عاوزه دلوقتي يدخل لك هنا نصوص الكلام ده انت بتحتاجه في حاجات كتيره جدا تخيل دلوقتي ان انت مثلا بتعمل عندك اله حاسبه فه الاله الحاسبه ما فيهاش نصوص فدلوقتي انا عاوز اكبر المستخدم ان هو يدخل لي هنا ارقام فبت استخدم عندك دلوقتي التايب اللي اسمه نمبر فمن خلال التايب ده لو انا جيتلك هنا وكتبتلك ارقام هتتكتب عندك لكن لو انا جيت لك هنا وكتبت لك دلوقتي هنا نصوص بص سمع دلوقتي الكيبورد ما فيش اي حاجه بتتكتب عندك الارقام بس اللي بتتكتب لكن اي نص هتيجي تكتبه مش هيتكتب عندك كمان هتلاقي دلوقتي في مربع النمبر الازرار اللي قدامك دي فالزر ده بيزود لك الارقام بالشكل ده والزرار ده بينقص لك الارقام بالشكل اللي قدامك ده الكلام ده ما كانش موجود عندك في التكست طيب افر انا دلوقتي باخد رقم سري من المستخدم او باسورد من المستخدم دلوقتي انا لو كتبت لك هنا اي كلمه في النمبر الكلمه دي هتكون ظاهره ليا وده مش منطقي لان انا ممكن يكون في واحد قاعد جنبي يعني انا دلوقتي ممكن اكون بكتب لك الباسورد وفي شخص قاعد جنبي يشوف دلوقتي الباسوورد وده غلط جدا المفروض ان مربع الباسورد الكلام اللي انت بتكتبه فيه يكون نجوم عندك بالشكل ده فانت بتعمل كده من خلال التايب اللي اسمه باسورد هيجيلك هنا واكتب لك دلوقتي الباسورد انا سبت النمبر قدامك علشان اوريلك الفرق ما بين النمبر وما بين الباسورد فلو انا جيتلك هنا وعملت لك دلوقتي ريلود ده مربع النمبر وده مربع الباسورد لو انا جيتلك في النمبر وكتبتلك هنا اي حاجه اي طبعا ارقام هتظهر عندك هنا بالشكل ده لكن لو انا جيت لك هنا في الباسورد وكتبت لك دلوقتي نصوص او ارقام او اي حاجه فاللي انت بتكتبه عندك هنا بيكون مخفي بالنجوم اللي قدامك ده وده طبعا منطقي لان ده باورد كمان عندك مربع تاني وهو مربع الايميل الغي كده الكلام ده وتعال دلوقتي لما نشوف عندنا الايميل الايميل انت لاول وهله هتقول ان مافيش اي فرق انا بكتب دلوقتي جوه كل حاجه ولكن لو انت جيت هنا وضغطت هنا على انتر فهقولك بليز انكلود ان علامه الاد اللي بتكون موجوده عندك في الايميل خلي بالك ده مش ايميل يا معلم اهو تاني اهو عشان لو انت ماخدتش بالك انتر بيقوللك خلي بالك ده مش ايميل انا دلوقتي ماقدرش ان انا ابعت البيانات دي لما انت تضغط هنا على انتر لكن لو انا جيتلك هنا وعملت لك اد وكتبتلك دلوقتي ايميل بشكل منطقي بالشكل ده وبعتلك دلوقتي البيانات دي من خلال انتر هتلاقيه دلوقتي فعلا بعت البيانات دي خلي بالك هو دلوقتي بعت البيانات دي وعمل لك ريلود للصفحه لو انا جيتلك هنا وعملتلك تست ا جيميل دوت ك ركز دلوقتي على البراوزر عندك لو ضغطت لك هنا على انتر هتلاقيه دلوقتي عمللك ريلود او بع البيانات دي تمام تمام جدا جدا طيب كمان برضو ممكن تاخد رقم تليفون من المستخدم ودي انت بتعملها من خلال الانبوت اللي من نوع تل وتيل اختصار لكلمه تليفون فلو انا جيتلك هنا اقدر دلوقتي او المستخدم يقدر دلوقتي انه يبعتلك هنا رقم التليفون بتاعه طيب كل ده احنا بس بنتعرف على الانبوت تعالى دلوقتي لما ناخد مثال عملي لنموذج او فورم من خلال الاتش تي ام ال انا دلوقتي عملت عندي هنا فورم او استماره والاستماره دي بيكون موجود جواها حق ادخال فتعال دلوقتي لما نعمل عندنا استماره لتسجيل الدخول مثلا فهاج لك هنا واقول لك دلوقتي انا عاوز اعمل هنا مربع لادخال اليوزر نيم ومربع لادخال الباسورد فجيل لك هنا وهعمل لك دلوقتي انبوت من نوع تكست الانبوت ده لليوزر نيم ليه انا عملته من نوع تكست لان المستخدم ممكن يدخل اسمه اللي هو احمد او جمال او عمرو او ساره او ايا يكن فالاسم ده من نوع تكست كمان برضو هنعمل عندنا هنا انبوت من نوع باسورد علشان ناخد الباسورد اللي المستخدم هيدخله لازم تفهم ان الانبوت ده هو عنصر ان لاين يعني ايه ان لاين يعني لو انا جيت لك هنا وعملت لك ريلود الاتنين جم جنب بعض على نفس السطر طيب دلوقتي المربع ده لليوزر نيم والمربع ده للباسورد ولكن هل المستخدم عارف يعني تخيل دلوقتي المستخدم دخل موقع جديد مثلا ايا يكن الموقع ده وبص لقى قدامه مربعين فاضيين هل دلوقتي هو عارف المربع ده بيعني ايه او المربع ده بيعني ايه لا هو ما يعرفش علشان كده هنتعلم حاجه تانيه وهي الليبل الليبل ده هو وصف الانبوت الليبل ده هو اللي بيوصف ايه اللي موجود عندك في الانبوت فبج لك هنا في الليبل هنا واقول لك مثلا ان ده هيكون لليوزر نيم مثلا يعني طبعا هقول لك يعني ايه فور وايه الفور اللي احنا كتبناها دي ولكن اصبر معايا هنا الليبل وصفت لك الانبوت ده خلي بالك ان الليبل برض هو عنصر ان لاين فتعال كده لما نعمل عندنا هنا ليبل للباسورد يوصف لنا دلوقتي الباسورد فهن كتب فيه بس كلمه باسورد وهجيلك هنا وهعمل لك دلوقتي ريلود فظهرت لك دلوقتي كلمه يوزر نيم وكلمه باسورد اللي انت عملتهم عندك من خلال الليبل ولكن خلي بالك دلوقتي ان الليبل [موسيقى] والانبوب دلوقتي دخلت موقع لقتهم كلهم كده على نفس السطر لا طيب نعمل ايه انا دلوقتي عاوز انزل الباسورد والمربع بتوعها في سطر جديد ممكن تعمل ده من خلال البي ار البي ار او اللاين بريك ممكن دلوقتي يعمل لك سطر جديد ولكن احنا ممكن يكون عندنا حاجه افضل من كده انا ممكن اجيل لك هنا واقول لك هي مش دي عناصر ان لاين هو انا دلوقتي مش لو عملت لك ريلود كلهم بيجوا عندك على نفس السطر طيب ما انا ممكن احط لك دول كده في كونتينر ودول كده في كونتينر الكونتينر وهو الديف وانا عارف ان الديف هو عنصر بلوك فلو انا جيت لك هنا وعملت لك دلوقتي ديف وحطيت لك في كل المحتويات دي اللي هو الليبل والانبوب اليوزر نيم كمان برض هاخد لك هنا محتويات الباسورد وحطها عندك هنا في ديف تمام بالشكل اللي قدامك ده يبقى دلوقتي اليوزر نيم محطوط عندك في ديف وكل محتويات الباسورد موجوده عندك في ديف الديف هو عنصر بلوك يعني ايه الكلام ده يعني لو انا جيت لك هنا وعملت لك دلوقتي ريلود فكل محتويات اليوزر نيم سواء الليبل او الانبوت جم عندك على نفس السطر ولكن كل محتويات الديف الثاني جم عندك على سطر مختلف لان الديف هو عنصر بلوك وبكده تكون حليت عندك المشكله دي ولكن في مشكله ثانيه وهي ان الليبل ده دلوقتي مالوش اي علاقه بالانبوب المفروض ان انت لما بتضغط دلوقتي على الليبل ده يفتح لك الانبوت ده ده هو المنطقي ولكن انا دلوقتي لما بضغط هنا على الليبل ده او الليبل ده ما فيش اي حاجه بتحصل ليه الكلام ده لان انت دلوقتي ما قلتش ان الليبل ده بيشرح الانبوت ده او له اي علاقه بالانبوب كده بتيجي عندك دلوقتي في الانبوت ركز وبتعمل دلوقتي اي دي اتكلمنا عن الاي دي ده قبل كده بتسمي دلوقتي الانبوت ده بالاي دي اللي انت عاوزه انا هسميه مثلا لاه اس او اي حاجه في الدنيا ممكن اسميه مثلا اسم منطقي وهو تي اكس تي اختصار لكلمه تكست ايا يكن الاسم اللي انت هتسميه دلوقتي للنبوت ده فانت بتحطه عندك هنا في الفو علشان كده قلتلك من شويه انا هقوللك اهميه الفور ففي الفور انت بتكتب عندك الاي دي اللي انت كنت كاتبه عندك او كنت مديه عندك ليه الانبوت طالما دلوقتي عندك الفور هو نفس الاي دي ده يبقى دلوقتي الليبل ده بيشرح الانبوت ده مش اي حاجه تانيه فلو انا جيتلك هنا وعملتلك دلوقتي ريلود وضغطت لك هنا على الليبل ده فتح لك الانبوت ده الكلام ده طبعا مش هيحصل عندك في الباسورد لو فضلت تكليك من هنا للصبح مافيش حاجه هنا هتتفتح علشان تعمل كده بتيجي عندك هنا في الليبل ده وبتديله دلوقتي ف سميه مثلا بس لازم الفور ده يكون هو الاي دي اللي موجود عندك في الانبوت ده وعملت دلوقتي نفس الاي دي اللي هو الاي دي ده هو اللي موجود عندك في الفور هنا فلو جيتلك هنا وعملتلك دلوقتي ريلود وضغطت لك هنا على الباسورد فتحلك دلوقتي الانبوت ده لان الليبل ده بيشرح الانبوت ده تمام جدا جدا ممكن تعمل عندك يوزر نيم ممكن تعمل عندك ايميل ممكن عمل عندك رقم تليفون ممكن تعمل اللي انت عاوزه انا بس بديلك فكره مصغره على اهميه الفورم والان بوت دلوقتي لو المستخدم جالك هنا وكتب لك في اليوزر نيم مثلا احمد وكتب لك دلوقتي باسورد وجيه دلوقتي علشان يبعت لك البيانات دي هل في زرار هنا لو ضغط عليه يبعت لك البيانات دي لا مافيش فتعال دلوقتي لما نعمل عندنا زرار الزرار ده انت بتعمله عندك برض بالانبوب جي عندك هنا في الانبوت وفي التايب بتحدد دلوقتي انو هيكون بمت طبعا احنا عندنا انواع ازرار كتيره جدا ولكن البمت ده هو النوع اللي بيبعت لك البيانات دي للفورم ده بمعنى ايه بمعنى دلوقتي لو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهر عندك الزرار ده اللي موجود فيه هنا كلمه سبمت هعلمك دلوقتي ازاي تغير الكلمه دي ولكن دلوقتي لو المستخدم جالك هنا وكتب لك هنا اي حاجه وجيت لك هنا وكتبت لك دلوقتي اي باسورد وجيت لك هنا وضغطت لك دلوقتي على البمت فالبيانات دي تم ارسالها للفورم طبعا الفورم دي انت ممكن بعد كده ترسلها للسيرفر او لقواعد البيانات دي حاجه ما تخصنا نهائي دلوقتي احنا كل اللي بنتعلم دلوقتي هو الشكل هو التصميم هو ان انت تعمل دلوقتي الشكل ده بالاتش تي ام ال طيب دلوقتي الزرار ده موجود فينا كلمه سبمت هل ده منطقي لا مش منطقي انا دلوقتي عاوز اغير الكلمه اللي موجوده عندنا في الزرار ده فجي لك هنا في الزرار ده في المكان ده وهستحمل ك دلوقتي اتربيوت اسمه فو لو انت دلوقتي ما كتبتش عندك حاجه في الاتربيوت ده يبقى دلوقتي الزرار ده مش هيظهر فيه هنا اي كلمه ممكن اجيل لك هنا واكتب لك دلوقتي كلمه بالانجليزي بالشكل اللي قدامك ده كليك او ممكن اكتب لك كلمه بالعربي ايا يكن الكلمه دي اضغط هنا مثلا وهاجي لك هنا واعمل لك دلوقتي ريلود فظهر لك الكلمه دي اكتب كلمه بالعربي اكتب كلمه بالانجليزي اللي انت عاوزه كمان برض في الانبوت انت عندك هنا الليبل بيشرحلك دلوقتي الانبوت ده ممكن الشرح ده يكون جوه الانبوت نفسه دي بنعملها من خلال حاجه اسمها بليس هولدر فلو انا جيتلك هنا جوه الانبوت هنا جو الانبوت اللي اسمه تكست في المكان ده واستخدمت لك دلوقتي الاتربيوت اللي اسمه بليس هولدر من خلال الاتربيوت ده لو انت كتبت هنا اي كلمه فالكلمه دي هتظهر عندك هنا بالشكل ده في الانبوت دي فانا ممكن اجيلك هنا واكتبلك مثلا يوزر نيم بحيث ان ده شرح للنبوت ده طيب هل البليس هولدر دي انت بتكتب فيها عنوان الفيلد بس لا طبعا انت ممكن تكتب فيها معلومات عن الفيلد نصيحه انت عاوز توجهها للمستخدم زي مثلا ان انت ممكن تكتب في الباسورد ان انا عاوزك يا مستخدم تكتب الباسورد يكون مكون من ثمان ارقام او ثمان حروف يعني طبعا ممكن يكون الباسورد مكون عندك من حروف كابيتال حروف سمول سبيشال كراكتر كل النصائح دي فتعال دلوقتي لما ناخد عندنا مثال تعال هنا في الباسورد هكتب لك هنا بليس هولدر فانا هقول له دلوقتي اعمل باسورد اكزامبل او وشبيه دلوقتي بالباسورد ده الباسورد مثلا يكون مكون عندك من ثمان ارقام ايا يكن يعني وممكن يكون في ارقام حروف سبيشال كراكتر حروف كابيتال حروف سمول انا بس بديلك فكره مش اكترر تمام طبعا احنا ما بنكتبها بالطريقه دي انا بس بديلك مثال مش اكتر فلو انا جيت لك هنا وعملت لك دلوقتي ريلود ظهرت دلوقتي النصيحه دي للمستخدم فانت ممكن تكتب النصيحه اللي انت عاوزها من خلال البليس هولدر البليس هولدر بتختفي بمجرد ما تبدا تكتب عندك في الفيلد ده اول ما تشيل عندك الكتابه دي تبدا البليس هولدر تظهر عندك للمستخدم الكلام ده موجود عندك هنا وموجود عندك هنا وموجود عندك في اي فيلد او في اي انبوت انت هتعمله عندك في الاتش تي ام ال ليه انا بقول لك الكلام ده انا بقول لك الكلام ده لان البليس هولدر انت ما تقدرش كمستخدم تعدل عليها والكلام ده معناه ان في حاجه ثانيه ممكن نعدل عليها او المستخدم ممكن يعدل عليها الحاجه دي زي البليس فولدر تعال كده لما نجيلك هنا في المكان مكان ده ونستخدم دلوقتي الفالو فدلوقتي انت لو جيت هنا في الانبوت اللي من نوع تكست واستخدمت في الفالو اللي انت استخدمتها فين اللي انت استخدمتها عندك في البمت نفس الفالو دي انت ممكن تستخدمها عندك هنا في الانبوت ده فلو انا جيت لك هنا وكتبت لك هنا اي كلمه وركز لو جيت لك هنا وعملت لك دلوقتي ريلود ظهرت عندك كلمه هنا ولكن الكلمه دي المستخدم ممكن يعدل عليها ممكن يمسح منها ممكن يضيف عليها ممكن يعمل اللي هو عاوزه ممكن يشيلها خالص عندك بالشكل ده الله هو انا كصاحب موقع ممكن استخدم حاجه زي كده هقول لك ايوه واستخداماتها كتيره جدا الفالو دي انت ممكن تستخدمها مثلا مثلا في مثال ان ممكن مستخدم يكون عاوز يعدل اسمه او يعدل البريد الالكتروني او اي معلومات عنه هن تخيل مثلا ان هو عاوز يعدل اليوزر نيم فهو اسمه في الاول كان احمد تمام هو عاوز يعدله بقى يخليه جمال يخليه حسن يخليه الاسم اللي هو عاوزه فدلوقتي هو طلب ان عدل اسمه فانت بتجيب له الفيلد اللي موجود فيه اسمه القديم هو حاب يعدله يعدله حاب يضيف عليه يضيف عليه حب يمسحه خالص ويكتب عندك اسم من اوله وجديد براحته المهم ان انت بتدي له الانبوت موجود في الفالو القديم اللي كان موجود عنده ده استخدام من استخدامات الفالو فلو انت عاوز تتحكم في الفالو وتضيف عندك فو بتيجي عندك في الفالو وبتكتب فيها اللي انت عاوزه لو جيت لك هنا هيكتب لك دلوقتي الكلمه دي طيب لو انت كتبت كلمه في الباسورد هتكون عندك على شكل النجوم تعال كده لما نعمل عندنا هنا فالو ونكتب هنا مثلا اي باسورد واح ا 3 ا لو عملت لك دلوقتي ريلود هتكون عندك بشكل النجوم عندك بالشكل ده في برض معلومه تانيه مهمه جدا تعال كده لما نمسح عندنا دلوقتي الفالو ده ونمسح برض الفالو ده وتعال برض نمسح عندنا الفالو ده اللي موجود عندك في البمت لو جيت لك هنا وعملت لك دلوقتي ريلود الانبوت ده فاضي وركز والانبوب لو انا جيت لك هنا وضغطت لك هنا على سبمت هيرسل لك البيانات دي فاضيه خلي بالك اهو لو انا كتبتلك هنا احمد وهنا دي فاضيه الباسورد فاضي لو انا جيت لك هنا وضغط لك على سبمت هيبعتلك احمد والباسورد فاضي هل ده منطقي لا ده مش منطقي المفروض ان اليوزر نيم مطلوب والباسورد مطلوب ازاي دلوقتي اجبر المستخدم ان ما يبعت البيانات غير لما يكون الفيلد ده في بيانات والفيل ده في بيانات الكلام ده بتعمله من خلال اتربيوت اسمه الريك وايرد هاجيلك هنا كتبلك دلوقتي ريك وايرد ريكوير يعني مطلوب تمام جيلك هنا برض واكتبلك هنا ريكوير فلو انا جيتلك هنا وعملتلك دلوقتي ريلود وضغطت لك هنا على بمت قاللك لا بليس فلوت ذس فيلد لو سمحت اكتب بيانات في الفيلد ده هنكتب عندنا هنا اي بيانات وهنيجي نبعت هيقوللك برض لا الفيلد ده كمان ريكوير تعال كده لما نكتب عندنا هنا اي بيانات هضغط لك هنا هيبعتلك دلوقتي البيانات دي فهنا انت اكبرت المستخدم ان هو يدخل لك هنا بيانات طيب كمان برضو عندك حاجه تانيه لو انا جيتلك هنا وخدت لك دلوقتي كل اللي في الفورم دي اخدته دلوقتي كات كنترول اكس وجيتلك هنا في المكان ده واستخدمت لك دلوقتي واسم الفيلد ست و حطيتلك دلوقتي كل المحتويات دي جوه الفيلد ست ايه بقى الفيلد ست ده الفيلد ست ده بيعملك مربع بالشكل اللي قدامك ده بيحوط لك دلوقتي الفورم دي بالمربع ده ممكن دلوقتي تيجي عندك هنا جوه الفي ست وتستخدم عندك وسم تاني اسمه لجند الوسم اللي قدامك ده لو انا جيتلك دلوقتي جوه الوسم ده وكتبتلك هنا اي كلمه الكلمه دي هتكون عنوان الفورم بتاعك فلو انا جيتلك هنا وعملتلك ريلود ظهرتلك هنا الكلمه دي ممكن تكتب هنا اي كلمه ممكن تكتب دلوقتي مثلا لوج ان يعني كلمه منطقيه يعني مش اكتر فلك هنا ريلود فظهرت لك دلوقتي الكلمه دي جوه المربع ده اتعلمنا الفورم عرفنا نعمل اليوزر نيم وعرفنا نعمل الباسورد وكمان عملنا زرار البمت ولكن في سؤال مهم جدا دلوقتي المستخدم لما بيكتب هنا اي حاجه وبيكتب هنا في الباسورد اي حاجه وبيضغط هنا على سبمت البيانات دي بتروح فين هو ده عنوان درس النهارده وقبل ما نتكلم اهو انا بقوللك ان المعلومات اللي هتتقال النهارده معلومات ادفانسد يعني انت مش مطالب ان انت تكون ملم بيها او ان انت تكون فاهمها بشكل عام يكفي بس ان انت تكون واخد فكره بس عنها مش اكتر دلوقتي احنا عندنا سؤال مهم جدا البيانات دي بتروح فين طيب قولا واحدا البيانات دي بتروح لمبرمج الباك اند ولكن ازاي الموضوع ده بيحصل تعالوا دلوقتي لما نشوفه من خلال المثال التالي دلوقتي الموقع بتاعك بيتعمل عندك من فرونت اند وباك اند الفرونت اند هو الجزء الخاص بالتصميم وده الجزء اللي انت مسؤول مول عنه هن تخيل ان انت بتعمل تصميم للوج ان او تسجيل الدخول فبتعمل عندك انبوت لليوزر نيم وبتعمل عندك انبوت للباسورد وفي النهايه بتعمل عندك زرار البمت اللي المستخدم هيضغط عليه علشان يبعت البيانات دي في الجنب الثاني مبرمج الباك اند مستني منك البيانات دي ولكن بيقول لك انا عاوز البيانات دي تروح لصفحه معينه ركز قوي في الكلمه دي تروح لصفحه معينه انت كمبرمج الفرونت اند ما يهمكش معلومات الصفحه دي ولا يهمك البيانات ده يحصل فيها ايه ولا اللي هيتعمل بالبيانات دي كل اللي يهمك هو عنوان الصفحه او عنوان المكان لانه ممكن ما يكونش صفحه ممكن يكون اي حاجه تانيه المهم ان مبرمج الباك اند بيديلك عنوان المكان اللي انت هتبعت له البيانات دي عليها في المكان ده مبرمج الباك اند بيكون عامل فيلد لكل انبوت يعني ايه الكلام ده يعني بيكون عامل عندك فيلت لليوزر نيم بحيث ان بيانات اليوزر نيم تتبعت عندك على الفيلد ده مش اي مكان تاني وعامل عندك برضو فيلد للباسورد بحيث ان بيانات الباسورد تتبعت عندك على الفيلد ده تخيل الموضوع زي جدول مثلا في خانه عندك هنا لليوزر نيم وفي خانه عندك هنا للباسورد فلما المستخدم بيكتب عندك اليوزر نيم والباسورد ويضغط عندك على سبمت فبيت ارسال البيانات دي كل واحده في الفيلد الخاص بها اليوزر نيم بتروح لليوزر نيم والباسورد بتروح للباسورد بنعمل الكلام ده ازاي تعالوا دلوقتي لما نشوف مع بعض انا عندي هنا انبوت لليوزر نيم وعندي هنا انبوت للباسورد دلوقتي لو انا عاوز اوجه البيانات دي لمكان معين او لصفحه معينه بروح عندك هنا في الفورم وبكتب لك هنا الاتربيوت اللي اسمه اكشن لو انت كتبت عندك هنا صفحه فهيت توجيه البيانات دي للصفحه دي تعالى دلوقتي لما نجرب مثلا ان احنا نكتب تست دوت ph اش بي تخيل دلوقتي ان انت عندك صفحه اسمها تست دو ph اش بي طبعا احنا ما عندناش الصفحه دي ولكن احنا بنعملها على سبيل التجربه مش اكتر لو انا جيتلك هنا وعملتلك دلوقتي ريلود وجيتلك هنا وكتبتلك اليوزر نيم وجيتلك هنا وكتبتلك الباسورد ايا يكن اليوزر نيم والباسورد وضغط لك هنا على بمت هينقلك وهوجه الصفحه دي لصفحه اسمها تست تعال كده اسمها تست دوت ph اش بي او المكان اللي انت كتبته عندك في الاكشن ايا يكن المكان اللي انت تكتبه هنا فهو المكان اللي هيتم توجيهك ليه بعد ما تضغط على زرار البمت تمام جدا جدا طبعا انت لو ما كتبتش هنا حاجه او حتى شلتها خالص فبيت توجيهك على نفس الصفحه اللي انت كنت واقف فيها فلو انا جيت لك هنا وعملت لك دلوقتي ريلود وكتبت هنا اي حاجه وكتبت هنا اي حاجه وضغطت لك هنا على بمت فخلي بالك عمل لك ريلود نقلك لنفس الصفحه تمام تمام جدا جدا طيب هو هو دلوقتي عمل لي توجيه وجهني دلوقتي لصفحه معينه ولكن هل هو بعت اليوزر نيم والباسورد للفيل او للمكان الخاص بيهم الاجابه لا طبعا انت اه وجهت المستخدم للصفحه اللي انت عاوزها ولكن انت ما قلتش ان البيانات دي هتروح فين بالظبط والبيانات دي هتروح فين بالظبط علشان تعمل كده بتيجي عندك دلوقتي في الانبوت اللي موجود في البيانات وبتعمل لكل انبوت نيم النيم هو اسم الفيلد اللي بيتبعت عليه البيانات اللي بتكون جايه لك في الانبوت ده فلو جيتلك هنا وكتبتلك هنا مثلا يوزر نيم على سبيل المثال طبعا ممكن تكتب هنا اكس ممكن تكتب يوزر نيم ممكن تكتب يو ممكن تكتب اللي انت عاوزه الاسم اللي انا كتبته هنا هو اسم الفيلد اللي عند مبرمج الباك اند اللي هو دلوقتي لو انا كتبتلك هنا اي حاجه وضغطت هنا على سبمت فالبيانات دي هتتبعت على النيم هتتبعت على النيم اللي اسمه يوزر تمام هشرحلك برض الفك الكره دي تعال كده لما نعمل عندنا هنا نيم للباسورد هنسميه برض باسورد ممكن انت تسميه بالاسم اللي انت عاوزه الانبوت ده له نيم اسمه يوزر والانو ده له نيم اسمه باسورد تعال دلوقتي لما اوريك البيانات دي بتتبعت ازاي لو انا جيتلك هنا وعملتلك دلوقتي ريلود وكتبتلك هنا مثلا جمال او اي حاجه وكتبتلك هنا 1 ا ت 4 ركز نظرك عندك هنا في اليور ال لو انا جيت لك هنا وضغطت لك دلوقتي على بمت فبص ايه اللي حصل قاللك دلوقتي ان انا بعتت لك هنا جمال مع ايه مع يوزر يوزر ده اللي هو اسم النيم اللي انت كتبته هنا اسم النيم ده قاللك دلوقتي ان اليوزر بيساوي جمال وايه تاني والباسورد بيساوي 1 ا 3 4 ممكن تشوف الموضوع ده بشكل اوضح لو انت جيت هنا كليك يمين ثم انسبكت وتعال كده لما ننزلها تحت بالشكل اللي قدامك ده هنروح دلوقتي هنا على نتورك وهنعمل عندنا هنا ريلود هنلاقي دلوقتي ان احنا عندنا الصفحه دي ظهرت عندنا لا تعال كده لما نجيبها تاني على الجنب على الجنب ده علشان تكون اوضح هنروح دلوقتي على باي لود بالشكل اللي قدامك ده هنلاقي هنا جمال ووا ا ت 4 ممكن اجيلك هنا وتعال كده لما نكتب اي حاجه تانيه هنكتب عندنا هنا احمد مثلا وهنكتب عندنا هنا 4 5 6 7 ايا يكن الرقم ده هضغط هنا على سبمت فتعال كده لما نروح هنا على اندكس ونفتح عندنا الباي لود هنلاقي عندنا هنا اليوزر بيساوي عندك احمد والباسورد بيساوي عندك 4 5 6 7 اللي احنا لسه مدخلين من شويه الكلام ده برض هتلاقيه ظاهر عندك فوق هنا في المكان ده جميل جدا جدا طيب هل الكلام ده صح هل صح دلوقتي ان اليوزر نيم والباسورد يكونوا موجودين عندك هنا في المكان ده قدام كل الناس الاجابه طبعا لا ما ينفعش وانت كده بتعرض بيانات المستخدم ده للخطار طيب هل ينفع دلوقتي اتحكم في ظهور الكويري سترينج دي اللي قدامك دي اسمها كويري سترينج عشان بس تكون فاهم مش اكتر الاجابه اه ينفع ان انت تتحكم عندك في الكويري سترينج الكلام ده انت بتعمله من خلال انك بتروح دلوقتي للفورم وبتستخدم عندك الاتربيوت اللي اسمها ميثود الاتربيوت دي ليها اثنين فالو رئيسيين وهما الجيت والبوست سيبك دلوقتي من الديالوج لان قصتها كبيره جدا جدا وما ينفعش تتقال دلوقتي الكلام ده انت هتعرفه ان شاء الله في مراحل متقدمه هنتكلم دلوقتي على الجيت والبوست الجيت بتظهر لك الكويري سترينج يعني كانك ما عملتش حاجه فلو انا جيت لك هنا تعال كده لما نلغيها وندخل دلوقتي على الصفحه دي ونكتب هنا اي بيانات احمد مثلا وبعد كده الباسورد 1 2 3 4 فلقيت هتظهر لك دلوقتي البيانات دي فلو انا جيت لك دلوقتي وضغطت لك على سبمت هيظهر لك البيانات دي وكانك ما عملتش حاجه ولكن انت عندك نوع تاني وهو البوست انت دلوقتي بتعمل عندك ميثود من نوع بوست بتديها دلوقتي للفورم دي معنى ان انت عملت كده يبقى دلوقتي البيانات دي مش هتظهر عندك في المكان ده هنيجي عندنا هنا وهنكتب دلوقتي نفس البيانات اللي هي احمد وهنا 1 ا ت 4 وهجيلك هنا [موسيقى] وهضطر عندك في المكان ده خلي بالك البيانات دي انت هتلاقيها موجوده عندك في النتورك لو انا جيتلك هنا ورحت لك دلوقتي للنتورك وعملتلك هنا ريلود وضغط لك هنا على اسم الصفحه اللي هي اندكس دوت اش تي ام ال لاقيلك دلوقتي موجود عندك في الباي لود اليوزر بتساوي احمد والباسوورد بتساوي 1 ا ت 4 ممكن اجربها تاني قدامكم هعمل لك هنا في اليوزر نيم علي وفي الباسورد 1 ا 3 بس خلي بالك ان مافيش حاجه هتظهر عندك هنا ولكن هتظهر عندك هنا في النتورك لو انا جيتلك هنا وضغطت لك دلوقتي على البمت مافيش حاجه ظهرت عندك فوق ولكن لو انا جيتلك هنا وضغطت لك دلوقتي على الصفحه دي هلاقي دلوقتي موجود عندك هنا في اليوزر علي وفي الباسورد واح اين ت ف اختصار كده ملخص الكلام ده الميثود اللي من نوع بوست بتحميلك البيانات مش بتظهر عندك في المكان ده ودي انت ممكن تستخدمها للبيانات الحساسه زي اليوزر نيم والباسورد او زي مثلا بيانات الدفع اللي هو الكريديت كارد الكلام ده فكل البيانات الحساسه احنا بنستخدم لها الميثود اللي من نوع بوست علشان ما نظهر عندنا البيانات دي في اللينك او اليور ال اللي موجود عندنا فوق في المكان ده ولكن البيانات العاديه زي مثلا انك تكون عامل مربع بحث مربع للسيرش مثلا فالمستخدم لو كتب هنا اي كلمه علشان يبحث عليها فالكلمه دي عادي جدا ان هي تظهر عندك في المكان ده عادي ان هي تظهر عندك في اليو ار ال ففي الحاله دي في البيانات اللي مش حساسه بنست استخدم عندنا الجيت هنبدا النهارده كلامنا بنوع مهم جدا وهو نوع الكر النوع ده بيمكنك من انه يختار لون موجود عندك تعالوا دلوقتي لما اوريكم الكلر ده بيعمل ايه هنكتب عندنا هنا في الليبل كلمه كر وهنكتب عندنا في الفور بتاعه الليبل كلمه كر وطالما كتبتها في الفور يبقى هتكتبها عندك هنا في الاي دي بنفس الطريقه بالظبط فلو رحتلك دلوقتي كده لو رحتلك دلوقتي للبراز وجيت لك كده تعال كده ده شكل الكر اللي بيعمل لك الانبوت اللي منو كر المربع اللي قدامك ده من خلال المربع ده انت ممكن دلوقتي تختار عندك لون بالطريقه دي بانك دلوقتي تحرك عندك الماوس بالطريقه دي او ان انت تختار عندك لون من خلال العلامه دي ممكن دلوقتي اختار عندي هنا اي لون اللون الابيض او ممكن اختار عندي مثلا تعال كده ممكن دلوقتي مثلا اختار اللون ده مثلا ايا يكن فممكن تختار اللون بالطريقه دي او ممكن تختار اللون من خلال ارقام الار جي بي او قيم الار جي بي او اي قيم انت عاوزها ممكن مثلا بطريقه الهيكسا ديسيمال تعال كده لما نعمل عندنا اللون الاخضر عندك طرق كتيره جدا تقدر من خلالها ان انت تختار اللون بتاعك طبعا الهيكس ديسيمال ده مش وقتها خالص نهائي دلوقتي ما تركزش فيها وما تهتمش خالص بالارقام دي كل اللي تهتم بيه هو ان انت تفهم ان الانبوت اللي من نوع كر بيعمل لك المربع اللي قدامك ده عندك كمان برضو نوع تاني وهو الفايل وده نوع مهم جدا جدا واستخداماته كتيره جدا جدا من خلال الفايل ده ممكن ان انت تختار عندك صوره من الجهاز بتاعك فممكن اجيلك هنا اختار صوره او فايل او اختار اللي انا عاوزه فممكن مثلا اختار الصوره دي لو جيت لك هنا وعملت سلكت على الصوره دي فظهر لك اسم الصوره عندك هنا في المكان ده وده ان دل على شيء فيدل ان انت اخترت الصوره دي من خلال الانبوت اللي اسمه فايل طيب بنستخدم الموضوع ده في ايه في مشروع من المشاريع اللي هنعملها ان شاء الله مع بعض وهو مشروع الفوتو ايديتور في الفوتو ايديتور احنا عملنا عندنا هنا الانبوت اللي من نوع فايل اللي من خلالها بنختار عندنا صوره او بنعمل ابلود لاي صوره فال الابلود اللي قدامك دي احنا عملناها عندنا من خلال الانبوت اللي من نوع فايل الشكل اللي قدامك ده هو بس مجرد كاستومايز من خلال السي اس اس فلو جيت لك هنا ممكن دلوقتي اختار عندي صوره تعال كده لما نختار نفس الصوره وهعمل دلوقتي سلكت فتم رفع الصوره طبعا موضوع عرض الصوره او رفع الصوره ده مش شغلتنا خالص دلوقتي الكلام ده احنا ممكن نعمله بلغه برمجه زي الجافا سكريبت انت هنا لما اخترت عندك صوره اتكتب بس اسم الصوره تعال كده اتكتب بس اسم الصوره عندك هنا لكن موضوع اظهار الصوره ده احنا بنعمله بلغه برمجه لو ركزت عندك هنا هتلاقي دلوقتي عندك الرينج اللي قدامك ده شايف الفلاتر اللي انت ممكن تعملها هنا دي اللي قدامك دي اهو الفلاتر دي او الرينج اللي قدامك ده انت ممكن تعمله من خلال الانبوت برضو فلو انا جيتلك هنا ورحت لك دلوقتي على الفيجوال استوديو كود وجيتلك هنا في الانبوت وجيتلك هنا وكتبتلك دلوقتي رينج اهو الانبوت اللي من نوع رينج بيعملك دلوقتي الرينج اللي كان موجود قدامك هنا من شويه الرينج اللي قدامك ده عاوزك تفهم تعال كده لما اوريك بس حاجه عاوزك دلوقتي تفهم تعال كده لما نختار عندنا هنا صوره عاوزك تفهم ان انت لما بتيجي عندك هنا وبتحرك الرينج ده فانت دلوقتي بتتحكم في الفالو بتاع الرينج ده الرينج ده بيتكون عندك من فو ممكن يبدا عندك مثلا من قيمه صفر لحد 100 او لحد 10 او لحد القيمه اللي انت كمبرمج بتحددها طيب الرينج اللي انا عملته ده بيبدا منين وبيروح فين هل بيبدا من صفر وبيروح ل 10 ولا 100 ولا ايه بالظبط في الحقيقه انت لسه ما حددت وعلشان تحدد الرينج ده بيبدا منين فبت استخدم عندك المن المن دي هو اللي انت بتقول من خلالها الرينج ده هيبدا منين بالظبط فانا مثلا هقول لك ان هو هيبدا من صفر طيب هينتهي فين فكتب لك هنا ماكس هقول لك مثلا هينتهي في 100 او 10 او القيمه اللي انت عاوزها تمام فدلوقتي الرينج بيبدا عندك من صفر او المين عندك من صفر والماكس عندك من 10 ا ركز دلوقتي في الاستبس او الحركه اللي بيتحرك من خلالها الرينج فهتلاقي دلوقتي ان الرينج بيمشي عندك في كل مره خطوه واحده بس يعني لو انت مشيته دلوقتي ادي مره انين 3 4 5 6 7 8 9 10 في كل مره بيمشي عندك خطوه طيب هل انا ممكن اتحكم في حاجه زي كده اه ممكن اجيل لك هنا واستخدم عندي دلوقتي اتربيوت اسمه ستيب الديفولت فالو بتاعه الاتربيوت ده هو واحد فسواء كتبتها او ما كتبتها هو كده كده بيمشي عندك خطوه واحده في كل مره ممكن اقول لك امشي عندك خطوتين او ثلاثه او اللي انت عاوزه فانا دلوقتي حددت ان الخطوات عندك هتكون ثلاثه تعال كده لما نجرب دلوقتي مع بعض فدلوقتي الخطوه الواحده اللي انت بتعملها الستيب الواحده بثلاثه فتعال كده لما نشوف ادي خطوه اثنين لاثه هتيجي تحركه بعد كده مش هيرضى يتحرك بص مش هيرضى يتقدم لان ما فيش ثلاث خطوات بعد كده انت دلوقتي وصلت عندك لرقم تسعه وطبعا الرينج عندك الماكس بتاعتها 10 فاللي متبقي عندك هنا واحد مش هيتحرك ممكن يرجع لورا لكن مش هيتقدم ثاني لقدام لان الستيب عندك هنا من ثلاثه طيب لو انت جيت هنا لو ركزت دلوقتي عندك هنا لو عملتلك دلوقتي ريلود هتلاقي دلوقتي ان في رينج عندك بادئ من النص وفي رينج بادئ عندك من الجنب ده طب هل انا ممكن اتحكم في كده ايوه ممكن اجيلك هنا خخليل لك بس الستيب دلوقتي واحد مؤقتا كده واقوللك دلوقتي اتحكم لي في مكان ظهور الرينج الكلام ده انت بتعمله عندك من خلال الفالو فلو انا كتبتلك هنا صفر ركز دلوقتي لو عملتلك هنا ريلود بدا عندك من صفر لو انا جيت لك هنا وقلت لك ابدا مثلا من 10 فلو انا جيت لك هنا وعملت لك ريلود بدا عندك من 10 ا ممكن اخليه مثلا يبدا عندك من خمسه تعال كده خمسه فلو عملتلك دلوقتي ريلود بدا عندك من المنتصف عاوز اقول لك ان المين والماكس والستيب والفالو ممكن تستخدمهم برض مع النمبر اتكلمنا قبل كده على النمبر ولكن ما تكلمناش على موضوع المين والماكس وكل الكلام ده انا كتبتها غلط يلا مش مشكله هاجي لك هنا وهكتب لك في الليبل نمبر وهكتب لك في الفور نمبر وهكتب لك في الاي دي نمبر للدلاله مش اكتر النمبر هو مربع لادخال الارقام ممكن تكتب فيه هنا ارقام والارقام دي ارقام لا نهائيه ممكن تزود زي ما انت عاوز ولكن انا ممكن دلوقتي من خلال المين والماكس اتحكم في الليمت بتاع نمبر ده فممكن اقوللك ان اقل رقم هيكون فيه هو صفر مثلا واكبر رقم رم هيكون مثلا مثلا خم على سبيل المثال طبعا لو انا جيتلك هنا وعملتلك دلوقتي ريلود وجيتلك هنا علشان اصغر ما بينزلش عندك عن صفر لكن لو جيت دلوقتي علشان اكبر واح ا 3 4 خ لو جيت دلوقتي ازود ما بيزود عندك طبعا انت ممكن تيجي عندك من الكيبورد وتكتب اللي انت عاوزه تعال كده بس لما نوسع عندنا الدنيا نكبر الماكس فيوصل عندنا المربع تعال كده انا بس عاوز اوريك ان انت ممكن تكتب هنا اي ارقام ولكن لو جيت هنا علشان تضغط دلوقتي على انتر هيقوللك ايه بقى هيقوللك دلوقتي ان الفو ماست بي ليس ذان ا ايكوال تو 10 يعني دلوقتي انت لازم تدخل value اقل من او يساوي رقم 10 اي رقم كبير انت هتدخله مش هيقبل عندك ومش هيبعتوا جميل جدا جدا كمان برضو انت ممكن تتحكم عندك في الستب يعني ايه الكلام ده لو انا جيت لك هنا وجيت دلوقتي علشان ازود بيزود واح اين 3 4 وده معناه ان هو بيزود عندك واحد في كل مره فممكن اتحكم في الموضوع ده من خلال الستيب طبعا الواحد ده هو الديفولت ممكن اخليه مثلا يزود لاه في كل مره اثنين في كل مره اللي انا عاوزه فلو جيت لك هنا وعملت لك دلوقتي ريلود وكتبت لك هنا مثلا لاه وجيت لك هنا علشان ازود بقت سته بقت تسعه بص بيزود عندك كام بيزود عندك لاثه في كل مره لو جيت اقلل برض بيقلل عندك لاثه في كل مره اهو بالمنظر اللي قدامك ده جميل جدا جدا جدا عندنا برض نوع ثاني وهو السيرش وده ما فيهوش كلام كتير لانه بيعمل لك مربع للبحث تعال كده لما اوريلك المربع ده مربع بحث عادي جدا ممكن المستخدم هنا يكتب اي كلمه ولكن الاضافه بس ان انت عندك هنا زرار الكانسل ممكن المستخدم يجي هنا ضغط دلوقتي على الزرار ده علشان يمسح عندك كل الكلام اللي بيتكتب عندك هنا في المكان ده طبعا احنا بنستخدم عندنا النوع ده علشان نعمل عندنا مربع بحث في الموقع بتاعنا عندنا كمان مربع ثاني او نوع ثاني وهو اليو ار ال برضو ما فيهوش كلام كتير تعال كده بس لما نعمل عندنا هنا كوبي ونحطه عندنا هنا وهنا وفي الاي دي عندنا في المكان ده الانبوت ده من اسمه كده ما بيقبلش عندك غير يو ار ال فلو انت كتبت هنا اي كلمه وضغطت دلوقتي هنا على انتر هيقوللك لا بليز انتر يوار ال لو سمحت دخل يور ال اللي انت كتبته ده مش يور ال لو انا اخدت لك اليور ال اللي فوق ده وحطيته عندك هنا في المكان ده انتر قبل منك اليور ال تعال كده لما اوريك اكترر هنجيب عندنا دلوقتي اي يور ال هقوللك دلوقتي كوبي لينك ادرس وهجيلك هنا وحط لك دلوقتي اللينك ده في المكان ده انتر فقبل اللينك ده منك فدلوقتي انت لو كتبت هنا اي حاجه مش لينك وضغطت دلوقتي هنا على انتر مش هيقبل منك البيانات دي لازم البيانات دي تكون عندك يو ار ال هنتكلم دلوقتي على نوع تاني وهو الهيدن او النوع المخفي تعال كده بس لما نكتب عندنا هنا هيدن وهنا هيدن وهنا هيدن دلوقتي انا لو عملتلك هنا ريلود عمللك انبوت مخفي خلي بالك انبوت مش ظاهر عندك هنا الكلمه دي هي الكلمه اللي ظهر عندك من خلال الليبل ده بدليل انا لو مسحتها وعملتلك دلوقتي ريلود مش هتلاقي حاجه عندك ظاهره عندك في المكان ده تمام هعمل لك دلوقتي ريلود وهجيلك هنا وهروح دلوقتي على انسبكت وهفتح لك دلوقتي هنا الديف هلاقي دلوقتي عندي هنا انبوت من نوع هيدن فلو جيتلك هنا انا ممكن دلوقتي احوله مثلا لتكست علشان بس اوريه لك مش اكتر دلوقتي ظهر عندي المربع ده طيب ليه انا ممكن احتاج ان انا اعمل عندي انبوت من نوع هيدن ببساطه لان انت ممكن يكون عندك معلومات مش عاوز تظهرها عندك في الديزاين ممكن يكون عندك مثلا اي دي بتاع المستخدم الاي دي ده انت مش عاوز المستخدم يعدل عليه او مش عاوز تظهره اصلا في التصميم بتاعك ولكن انت عاوزه يكون موجود عندك في الفورم علشان تبعته مثلا مع الفورم او مع البيانات اللي موجوده عندك فانت عاوز الانبوت يكون موجود ولكن ما يظهرش للمستخدم تمام فانت بتعمله عندك من خلال الانبوت اللي من نوع هيدن وهناخد ان شاء الله امثله عن الموضوع ده في المستقبل هنعمل هنا ديف نظبط بس الكود بتاعنا وجوه الديف هنا هنتحمل وقت فهن عندنا هنا ليبل للتنظيم بس مش اكتر هكتب جواه هنا ديت وهكتب لك هنا كلمه ديت وهجيلك هنا في الحاجه المهمه جدا جدا وهي الانبوت اللي انت لازم تركز فيها يعني كل اللي احنا بنعمله ده للتنظيم بس مش اكترر لكن الشرح كله هيكون عندنا في الانبوت ده مبدئيا طالما انت عملت الفور عندك ديت يبقى لازم تيجي عندك هنا وتعمل دلوقتي اي دي بنفس القيمه بالظبط القيمه اللي انت عملتها هنا هي اللي انت تعملها عندك هنا في الاي دي سيبك بقى من كل الكلام ده وركز عندك هنا في التايب هنكتب عندنا هنا في التايب ديت الديت ده بقى بيتحكم لك في الوقت فلو انا عملت لك هنا ريلود البراوزر عمل لك الشكل اللي قدامك ده تقدر هنا تتحكم عندك في الايام تختار اليوم اللي انت عاوزه وكمان تقدر تتحكم عندك في الشهر والسنه وكل اللي انت عاوزه فدلوقتي انت لازم تفهم ان الديت بيتحكم عندك في اليوم والشهر والسنه ليه انا بقول لك كده لان احنا عندنا نوع ثاني وهو المنس وده بيتحكم عندك في الشهر والسنه عكس الديت الديت كان بيتحكم عندك في اليوم والشهر والسنه المنس تعالى كده سريعا كده لما نكتب عندنا هنا مس وهنا مس وهنا مس فلو عملت لك هنا ريلود قال لك بص بقى قال لك انا هنا بتحكم عندك في الشهور يناير فبراير مارس ابريل اللي انت عاوزه والسنين عاوز تختار الشهر اللي انت عاوزه وممكن تيجي عندك هنا وتختار دلوقتي السنه اللي انت عاوزها سنه 23 او 24 25 السنين اللي انت عاوزها بالشكل اللي قدامك ده طيب عندك برض حاجه تانيه وهي التايم ودي بتتحكم عندك في الوقت اللي هو الساعه فلو انا جيتلك هنا بالشكل اللي قدامك ده سريعا كده وعملتلك هنا ريلود هيتحكم عندك هنا في الوقت سواء الساعه الساعه مثلا 7 او الدقائق بالشكل اللي قدامك ده ممكن اقوللك 7 و10 مثلا واختار صباحا ولا مساء اللي هو بي ام او اي ام فممكن اخليها مثلا اي ام فدلوقتي الساعه عندك 7عه و1 اي ام طيب انا عندي حاجه تانيه بتلم عندك كل ده بتلم عندك الوقت اللي هو الساعه وبتلم عندك اليوم والشهر والسنه وكل الكلام ده الموضوع ده انت بتعمله من خلال حاجه اسمها ديت تايم لوكال بالشكل اللي قدامك ده فهنا خدها دلوقتي كوبي سريعا كده ونحطها عندنا هنا وهجيلك هنا واعملك ريلود الديت تايم لوكال بتتحكم عندك في اليوم الشهر والسنه والوقت اللي هو الساعه والدقاق وكل الكلام ده فلو انا جيت لك هنا هتلاقي هنا اليوم وهتلاقي عندك هنا الشهر والسنه وهتلاقي عندك هنا الساعه بالشكل اللي قدامك ده مثلا الساعه خسه الدقائق وصباحا ولا مساء وكل الكلام ده الكلام ده بتعمله من خلال الديت تايم لوكال كمان في حاجه تانيه احنا مش بنستخدمها كتير ولكن انا هقولها لك ربما فكرتك تستدعي ان انت تستخدمها وهي الويك حكم في الاسبوع تعال كده لما ناخدها كبي ويحطها عندك هنا ويحطها كمان عندك هنا في الفور وكمان حطها عندك هنا في الايدي التايب اللي اسمه ويك بيتحكم عندك في الاسبوع مفيش طبعا اي اختلاف هي هي نفس الفكره لو ضغطت عندك هنا بتختار الاسبوع اللي يناسبك وكليك عليه وبكده تكون حددت عندك الاسبوع ده الموضوع ما فيهوش كلام كتير ولكن بس انا بوريه لك وبديل فكره على انواع الانبوت مش اكتر من كده النهارده ان شاء الله هنتكلم على انواع مختلفه من الانبوت وهما الراديو والتشيك بوكس علشان تفهم ايه هو الراديو وايه هو التشيك بوكس تخيل دلوقتي المواقع اللي بيكون فيها اسئله انت دلوقتي مثلا عندك في الموقع بتاعك سؤال وعاوز دلوقتي اجابه السؤال ده تكون اختيارات متعدده المستخدم مثلا يختار ما بين اجابه والتانيه والثالثه والرابعه مثلا فانت دلوقتي عندك سؤال وفي عندك هنا اربع اختيارات زي فكره من سيربح المليون بالظبط فكان عندهم في البرنامج ده سؤال وكان في اختيارات متعدده طيب دلوقتي انت عندك هنا نوعين عندك نوع اسمه ريديوسر اما التشيك بوكس فتقدر تختار عندك كذا خيار في نفس الوقت ممكن المستخدم يعلم عندك على اول اجابه وتاني اجابه وثالث اجابه ورابع اجابه في نفس الوقت عارف ان انت لسه مش فاهم فتعالى دلوقتي لما نشوف مثال عملي من خلال الويندوز فلو انا جيت لك هنا هتلاقي دلوقتي عندك هنا اجابتين دول اختيارات متعدده لكن هنا انت ما تقدرش تختار غير اختيار واحد بس فلو علمت هنا هيعلم لك على العلامه دي بس او الاجابه دي بس لو اخترت ده هيعلم لك على الاختيار ده بس النوع ده اسمه ريديوسر ممكن يعلم على الخيار ده ولو عنده كذا اجابه تانيه ممكن برض يعلم على كل واحده فيهم دي اسمها التشيك بوكس يعني ممكن يختار كذا اجابه في نفس الوقت عارف برض ان انت لسه مش فاهم فتعال دلوقتي لما نشوف الموضوع ده من خلال الكود تعالى دلوقتي لما نكتب عندنا هنا سؤال في الفورم ده ممكن تكتب السؤال عندك بش 2 اتش 3 برجراف اللي انت عاوزه انا هقوللك دلوقتي مثلا وات از يور فيفوريت لانجوج انا دلوقتي بقوللك ايه هي اللغه المفضله ليك ممكن تكون مثلا اللغه دي اش تي ام ال سي اس اس جافا سكريبت ايا يكن فدلوقتي احنا هنعمل عندنا اختيارات متعدده كل خيار هيتحط عندك في ديف ليه لان كل خيار بيتكون عندك من انبوت وليبل بيشرح الانبوت ده فكل خيار هيتعمل عندك في ديف فلو انت هتعمل عندك لات خيارات هتعمل عندك لاثه ديف وهنشوف دلوقتي الكلام ده ان شاء الله مع بعض ولكن لازم تفهم ان الديف ده لتنظيم الكود مش اكتر يعني هو مش اجباري عاوز تعمله اعمله مش عاوز تعمله ما تعملوش احنا بنعمله لتنظيم الكود مش اكترر تعالى دلوقتي بس لما نشوف عندنا شكل ال الراديو فهن عندنا انبوت من نوع راديو فاجي لك هنا واكتب دلوقتي راديو بالشكل ده لو انا جيت لك هنا وعملت لك دلوقتي ريلود فده شكل الراديو الدايره اللي قدامك دي اللي انت ممكن تعلم عليها او تتشيك عليها نفس الشكل بالظبط اللي كان موجود عندنا في الويندوز الشكل بتاع الراديو اللي قدامك ده الدايره اللي قدامك دي طبعا ده شكل التشيك بوكس هتلاقي برض موجود عندنا لو احنا رحنا عندنا هنا وشوفنا دلوقتي شكل التشيك بوكس تمام لو انا جيت لك هنا وعملت لك دلوقتي ريلود ده شكل التشيك بوكس انا بس بوريل لك الشكل علشان تكون فاهم الفرق بس مش اكتر تعالى دلوقتي بقى لما ناخد مثال عملي عن الراديو هنتكلم عن الراديو في الاول وبعد كده ان شاء الله هنتكلم عن التشيك بوكس دلوقتي انا عاوز اعمل عندي هنا كذا اختيار اتش تي ام ال وسي اس اس وجافا سكريبت فاول اختيار هيكون عن الاتش تي ام ال يبقى هجي لك هنا وهعمل لك دلوقتي فالو وهكتب لك في الفالو ده اتش تي ام ال الفالو ده مش عشان يظهر لك هنا انت دلوقتي لو عملت ريلود مافيش حاجه ظهرت عندك هنا الفالو ده علشان لو المستخدم اختار عندك الاختيار ده يتبعت الفالو ده لمبرمج الباك اند طيب انا دلوقتي عاوز اكتب عندي هنا كلمه تشرح الاجابه دي عاوز اكتب كلمه اش تي ام ال او الكلمه اللي انا عاوزها فالكلمه دي انت بتكتبها عندك من خلال الليبل فجيل لك هنا وهكتب هنا في الليبل كلمه اتش تي ام ال لاحظ ان انا كتبت الليبل تحت الانبوت وده ببساطه لان عاوز الانبوت يجي عندك في الاول وبعد كده الكلمه تيجي عندك بعد الانبوت لو انت مش عاوز كده جيب دلوقتي الليبل ببساطه وحطه عندك هنا في المكان ده الموضوع حريتك انت الشخصيه في الحاله دي الكلام هيجي عندك قبل الانبوت ولكن انا ما بفضل ش حاجه زي كده فهن خي دلوقتي الانبوت عندنا في المكان ده هنيجي هنا في الفور وهنكتب عندنا اتش تي ام ال وطالما كتبنا هنا في الفور كلمه اتش تي ام ال يبقى هنيجي عندنا هنا وهنعمل دلوقتي اي دي نكتب فيه كلمه اتش تي ام ال الدف ده هو عباره عن خيار ممكن اجيل لك هنا واعمل دلوقتي خيار تاني يكون موجود فيه مثلا هنا سي اس اس بنفس الطريقه واحط لك هنا سي اس اس وهنا سي اس اس وفي الفالو دي مهمه جدا بتحط عندك هنا سي اس اس هجيلك هنا وهعملك دلوقتي خيار تت الخيار ده هكتبلك فيه هنا جافا سكريبت تمام ايا يكون طبعا وهكتب للك هنا في الفور جافا سكريبت وفي الاي دي جافا سكريبت وفي الفالو جافا سكريبت طيب تعال دلوقتي لما نعمل عندنا هنا ريلود واقوللك او ك مشكله مهمه جدا بتظهر عندنا في الراديو لو انا جيت لك هنا علشان اعلم لك على الخيار ده هيعلم عندك وم م لكن لو جيت دلوقتي علشان اعلم عندك على الخيار ده هتلاقيه دلوقتي اعلم لك على الاثنين في نفس الوقت وده غلط جدا كمان برض لو انا علمت لك هنا هتلاقيه دلوقتي علم لك على الثلاثه في نفس الوقت طيب هل ده صح او منطقي اصلا المفروض ان ده ريديوسر ليه دلوقتي هو اختار لك الثلاثه دول مع بعض ببساطه وباجاج لان الاختيار ده مالوش اي علاقه بده مالوش اي علاقه بده انت عملت عندك خيار وعملت فيه اش تي ام ال وعملت عندك خيار ثاني عملت فيه سي اس اس وعملت عندك خيار تالت عملت فيه جافا سكريبت ولكن ده مالوش اي علاقه بده مالوش اي علاقه بده ده في وادي وده في وادي وده في وادي تاني انت الموقع بتاعك اصلا ممكن يكون فيه 1000 رديو ايه اللي يثبت ان الخيار ده له علاقه بده له علاقه ده المفروض ان انت تربطهم ببعض طيب انا عاوزك بس تكون فاهم يعني مش اللي هو بتاخد الاجابه كده وبتاخد الكود وخلاص علشان تربط ده بده بده المفروض ان انت تكون فاهم ان دول اختيارات متعدده لاجابه واحده بس هي دي الفكره كلها المفروض ان دول اختيارات متعدده لاجابه واحده بس المستخدم هيختار اجابه واحده بس من كل الاختيارات دي فعشان دلوقتي اربط لك الاختيار ده بالاختيار ده بالاختيار ده فجي لك هنا في الانبوت ده بتاع الاتش تي ام ال في المكان ده وفي الانبوت بتاع السي اس اس وفي الانبوت بتاع الجافا سكريبت وهدي لهم نفس النيم بالظبط اكتب في النيم اللي انت عاوزه اكتب اكس اكتب اللي انت عاوزه انا هخلي النيم دلوقتي هنا لانج النيم هو اسم الفيلد اللي هيتبعت عليه الاجابه اللي المستخدم هيختار من الاختيارات دي فدلوقتي المستخدم لو اختار عندك الاتش تي ام ال هتكون قيمه اللانج قيمه النيم هي اتش تي ام ال طب لو اختار سي اس اس هتكون قيمه اللانج هي سي اس اس وهكذا في الجافا سكريبت فلو انا جيت لك هنا وعملت لك دلوقتي ريلود فلو اخترت الاتش تي ام ال اختارها لو اخترت السي اس اس اختارها ولو اخترت الجافا سكريبت اختارها واصبح عندك الراديو شغال عندك بالمنظر اللي قدامك ده تعالى دلوقتي لما ناخد مثال عملي من خلال ان احنا نحط عندنا زرار الزرار ده هعمله عندك من الانبوت من خلال ان النوع اللي اسمه سبمت طيب الزرار ده وظيفته ان انت لما تختار عندك هنا اي خيار وتضغط هنا على سبمت يتم ارسال البيانات دي للنيم اللي انت عملته عندك هنا فلو انا جيت لك هنا واخترت مثلا السي اس اس ركز دلوقتي في اللينك اللي فوق ده لو انا جيتلك هنا على البمت هنا هتلاقيه دلوقتي بيقوللك ايه بيقوللك ان اللانج بيساوي عندك سي اس اس طب لو اخترت الجافا سكريبت سبمت هتلاقي بيقوللك ان اللانج بيساوي عندك الجافا سكريبت الموضوع ده انت ممكن تشوفه بشكل اوضح من خلال النتورك لو انا جيتلك هنا على ريلود واخترت لك هنا الصفحه دي هتلاقيه بيقوللك ان اللانج بيساوي جافا سكريبت لو انا اخترت الاتش تي ام ال وعملت لك هنا سبمت هتلاقيه دلوقتي هنا بيقوللك ان اللانج بتساوي اتش تي ام ال فده ببساطه هو الراديو الرديو ان انت بيكون عندك كذا اختيار ممكن ان انت تختار اختيار واحد بس من الاختيارات دي واي اختيار انت بتختاره بيتم اضافته عندك للنيم اللي انت عملته اللي هو اللانج اللانج ده اللي هو اسم النيم اللي انت عملته عندك هنا في المكان ده عندك حاجه تانيه غير الراديو وهي التشيك بوكس في الراديو انت بتختار عندك اختيار واحد بس التشيك بوكس نفس الحوار بالظبط ولكن بتختار عندك كذا اختيار فهتي عندك هنا في الانبوت نفس الموضوع بالظبط ولكن بدل ما تعمل عندك ريديوسر نفس اللي انت عملته هنا بالظبط كل حاجه الفالو والنيم وكل اللي انت عملته ده طيب هجيل لك هنا برض في السي اس اس وهخلي الانبوت بتاعها يكون من نوع تشيك بوكس وهجيلك هنا للجافا سكريبت وهروح هنا للنبوت وهخلي دلوقتي التايب بتاعها من نوع التشيك بوكس نفس القيم بالظبط وهجيلك هنا وهعمل لك دلوقتي ريلود هتلاقي دلوقتي تعال كده لما نكبر هتلاقي دلوقتي الشكل اختلف عندك بالشكل اللي قدامك ده و كمان تقدر تختار كذا اختيار في نفس الوقت فلو انت اخترت اختيار واحد وعملت عندك هنا سبمت هتلاقيه بيقول لك هنا ان اللانج اللي هو النيم بيساوي عندك اتش تي ام ال ولو انت جيت عندك هنا هيقول لك ان اللانج بيساوي عندك اتش تي ام ال كمان ممكن تختار كذا اختيار في نفس الوقت فلو عملت لك دلوقتي سبمت هتلاقي هنا بيقول لك ان اللانج بيساوي عندك اتش تي ام ال وبرده اللانج بيساوي عندك سي اس اس وبرده اللانج بيساوي عندك جافا سكريبت ولو انت جيت عندك هنا هتلاقي برده بيقول لك ان اللانج بيساوي عندك اتش تي ام ال وبيسا عندك سي اس اس وبيسا عندك جافا سكريبت فمن خلال التشيك بوكس تقدر ان انت تختار كذا اختيار في نفس الوقت بالمناسبه علشان في ناس ممكن تسال الديف مش شيء اجباري علشان في ناس ما تسالش وتقول لي هو لازم ان انا اكتب ديف لا مش لازم احنا كتبنا الديف لتنظيم الكود مش اكتر لكن لو انت مش عاوز تكتب عندك الديف ولا يهمك يا معلم شيل الديف اهو من المكان ده ولا كانك كتبته بالظبط الفكره ان احنا كنا بنظم الكود علشان ما يجوش كلهم على نفس السطر فلو انا جيت لك هنا وعملت لك دلوقتي ريلود هتلاقى بس شكلهم اتغير ولكن عادي شغالين و 100 م فلو انا جيت لك هنا واخترت لك الاتش تي ام ال والسي اس اس والجافا سكريبت واخترت لك هنا البمت وجيتلك هنا على الصفحه دي هتلاقي بيقوللك ان اللانج بيساوي عندك اتش تي ام ال وسي اس اس وجافا سكريبت والدنيا شغاله عندك ووم م الفكره في الدف ان انت بتنظم مش اكتر كمان برض الاجابات اللي بتروح هنا هي الفالو هي الفالو اللي انت كتبتها عندك تعالى كده اللي انت كتبتها عندك هنا فانت ممكن مثلا مثلا تكون كاتب عندك هنا 3ه اس علشان بس مافيش حد يفكر ان الليبل هو اللي بيروح عندك هنا في المكان ده لا اللي بيروح عندك هنا هو الفالو فشوف انا كاتب لك هنا في الليبل جافا سكريبت لكن كاتب لك في الفالو 3 اس لو انا جيت لك هنا وعملت لك دلوقتي ريلود واخترت لك الجافا سكريبت وعملت لك دلوقتي مت هتلاقي دلوقتي بيقوللك ان اللانج اللي راح لها ايه اللاه اس او القيمه اللي موجوده عندك في الفالو تمام علشان بس تكون فاهم دور الفالو بشكل اوضح طيب اخر حاجه ان شاء الله هنتكلم عليها وهي التجد والتشيد دي انت ممكن تستخدمها مع التشيك بوكس وممكن تستخدمها مع الريدي التشيك دي دي هو ان انت كمبرمج بتكون معلم او مختار خيار بشكل اوتوماتيك يعني دلوقتي انت بتقول للمستخدم اول ما تعمل هنا ريلود انا مثلا ككون معلم لك على الخيار ده او ده او ده او ايا يكن الموضوع ده انت بتعمله مع التشيك بوكس او مع الراديو علشان تعمل كده انا ممكن مثلا اقول لك دلوقتي ان انا هخلي السي اس اس دي تكون خيار افتراضي مثلا فهاج لك هنا في الانبوت وهستحمل ك دلوقتي الاتربيوت اللي اسمه اشكد لو انا جيت لك هنا وعملت لك ريلود فالسي اس اس عندك هنا اشكد الكلام ده انت ممكن تعمله مثلا مع اش تي ام ال فهتي عندك هنا هنا في المكان ده وتكتب عندك اتربيوت الت تشكت لو انا جيت لك هنا وعملت لك ريلود اصبحت دلوقتي الاتش تي ام ال معمول عليها تشكت طبعا المستخدم ممكن يشيل الكلام ده ويقوللك يا عم انا مش مهم عندي الكلام ده وهختار دلوقتي السي اس اس والجافا سكريبت النهارده ان شاء الله هنتكلم على عنصر مهم جدا وهو السلكت والاوبشن الاتنين دول ببساطه بيعملوا لك قائمه منسدله من الاختيارات المتعدده يعني مثلا دلوقتي انت بتسال المستخدم انت من دوله ايه بالظبط فعاوز دلوقتي تعمل له قائمه منسدله من الدول من مصر والمغرب والسعوديه وشويه دول عاوز تحط الدول دي في قائمه منسدله طبعا المستخدم بيختار الدوله اللي هو عاوزها من القائمه دي الكلام ده انت بتعمله من خلال عنصر السلكت العنصر ده بيكون ليه بدايه بالشكل ده وبيكون له نهايه بالشكل ده وما بين البدايه والنهايه انت بتحط عندك الاوبشنز الاختيارات هنتكلم عن الاوبشن دي دلوقتي ولكن خلينا في السلكت النيم ده مهم جدا جدا لان هو اللي بيتبعت عليه البيانات هو اللي بيتبعت عليه الخيار اللي المستخدم بيختاره فجيل لك هنا في النيم وهكتب لك هنا كانتري او ممكن انت تكتب اللي انت عاوزه انا دلوقتي هعمل عندي قائمه منسدله من الدول في الاي دي انت ممكن تكتب عندك هنا ليبل ممكن نيجي عندنا هنا ونعمل ليبل وفي الليبل هنا ككتب هنا سي ان تي اختصار لكلمه كانتري ممكن تكتب هنا اللي انت عاوزه وطالما دلوقتي انت كتبت الكلمه دي في الفور يبقى هتحطها عندك هنا في الاي دي وهكتب لك هنا مثلا وات از يور كانتري مثلا او الكلمه اللي انت عاوزها لو انا جيتلك هنا انا لسهو ما حطيتش خيارات جوه السلكت لو انا جيتلك هنا وعملتلك دلوقتي ريلود فده شكل السلت طبعا مافيش اي اختيارات جوه السلكت فعشان كده فاضيه عندك بالشكل ده تعال دلوقتي لما نحط عندنا اختيارات الاختيارات دي انت بتحطها عندك من خلال وسم الاوبشن بتيجي عندك هنا ما بين البدايه والنهايه في المكان ده وبتكتب عندك الاختيار ممكن دلوقتي نعمل عندنا هنا مثلا ايجيبت ونعمل عندنا هنا المغرب اللي هي موروكو ونعمل الجزائر مثلا تمام فدلوقتي انا عندي هنا لاث دول لو جيتلك هنا وعملت لك دلوقتي ريلود عندك هنا مصر والمغرب والجزائر ممكن تحط عدد الاختيارات اللي انت عاوزه طيب اهم حاجه بقى هو الفالو بتاع الاوبشن ليه الكلام ده لان انا لو جيتلك هنا وعملتلك دلوقتي زرار انبوت زرار من نوع سبمت خلي بالك بس انا عاوز اوريك اختصار مهم جدا لو انت جيت هنا على انبوت بالشكل ده وعملت عندك النقطتين اللي فوق بعض ممكن دلوقتي تكتب عندك النوع اللي انت عاوزه فممكن اكتبلك هنا بمت فالنقطة ضغط لك هنا على انتر هيعمل لك دلوقتي انبوت من نوع بمت لان النقطتين اللي انت كنت كاتبهم دول كانوا بيعني طيب طيب جميل جدا جدا تعال دلوقتي لما نشيل عندنا الفالو وافهمك اهميه الفالو بتاعه الاوبشن دي لو انا جيت لك هنا و عملت لك دلوقتي ريلود وجيت هنا اخترت هنا اي حاجه مثلا المغرب وجيت دلوقتي علشان اختار او ادوس دلوقتي على بمت قال لك دلوقتي ان الكانتري هنا بتساوي ايه بتساوي فراغ برغم ان انت اخترت المغرب ولكن لكن انت ما كنتش كاتب حاجه في الفالو بتاعه المغرب فه جيلك هنا مثلا في مصر واكتب لك ايجي انا كتبتها بس مختلف عن التكست علشان اعرفك ان الفالو هو اللي بيتبعت للنيم بيتبعت عندك هنا مع النيم بتاع التكست وهكتب لك هنا في المغرب مور اختصار لماركو وهكتب لك هنا في الجزائر كلمه الج اختصار لكلمه الجزائر لو جيتلك هنا وعملتلك دلوقتي ريلود تعال كده لما نكبر اختر مثلا الجزائر و هضغط هنا على سبمت فقال لك دلوقتي ان الكانتري بتساوي عندك الج اللي هي الحاجه اللي انت كتبتها عندك في الفالو فاللي بيتبعت هو الفالو مش التكست اللي انت بتكتبه خد بالك من الموضوع ده طيب دلوقتي انا لو جيت لك هنا تعال كده لو انا جيتلك هنا انت هنا بتختار اختيار واحد بس طيب افرض دلوقتي انا عاوز المستخدم يختار كذا اختيار لو انت عاوز تعمل كده بتيجي عندك هنا في السلكت وبتستخدم عندك اتربيوت اسمه مالتيبل المتبل ده بيسمح للمستخدم انه يختار كذا خيار ولكن لو جيت عشان اضغط هنا وجيت علشان اضغط هنا على المغرب فمافيش كذا خيار ولا حاجه هو خيار واحد بس لكن لو انت جيت هنا على كنترول من الكيبورد هيختار لك هنا الاختيارات اللي انت عاوزها هيعملك دلوقتي مالتيبل ف ببساطه كده انت بتيجي عندك هنا على زرار الكنترول وبتختار عندك كذا خيار فلو ضغطت لك هنا على بمت قاللك دلوقتي ان الكانتري بتساوي عندك ايجي وكمان بتساوي عندك ام او ار اللي هي اختصار للمغرب الكلمه اللي احنا كاتبين عندنا هنا في الفالو فدلوقتي انت ممكن تختار عندك كذا خيار جميل جدا جدا طيب دلوقتي انا عاوز اعمل عندي خيار افتراضي يعني دلوقتي اول ما المستخدم يعمل عندك هنا ريلود يكون متعلم على خيار افتراضي على المغرب او مصر او الجزائر او ايا يكون فده انت بتعمله عندك من خلال حاجه اسمها السلكت تعال كده بس لما نشيل المتبول عشان بس اوريها لك بشكل اكبر لو انا جيت لك هنا مثلا على المغرب وعملتلك دلوقتي هنا سلكتد سلكتد دي انت بتحطها فين بتحطها في الاوبشن لو انا جيت لك هنا وعملت لك دلوقتي ريلود اللي متعلم عليها هو المغرب تمام ممكن تعملها عندك على الجزائر بالشكل ده لو عملتلك دلوقتي ريلود فمين اللي متعلم عليها هي الجزائر طبعا المستخدم ممكن يغير ويعمل اللي هو عاوزه دي حريته الشخصيه عندنا حاجه تانيه وهي الاوبشن جروب يعني ايه الكلام ده يعني انا دلوقتي ممكن ان انا اقسم لك الاختيارات اللي موجوده عندك هنا عندك مثلا الدول العربيه ممكن بعد كده نعمل هنا دول اجنبيه دول اوروبيه ايا يكن فبتحب كل مجموعه اختيارات في مجموعه او في جروب فده انت ممكن تعمله من خلال الاوبشن جروب فلو خدت لك دلوقتي الدول دي وحطيتهم عندك هنا في اوبشن جروب بالشكل اللي قدامك ده حطيت لك دلوقتي الاختيارات دي جوه اوبشن جروب تعال كده لما نعمل عندنا اوبشن جروب تاني فهعمل لك دلوقتي اوبشن جروب هحطلك فيه دلوقتي مجموعه دول مثلا هنحط عندنا هنا جوردن اللي هي الاردن وهنحط عندنا هنا مثلا الامارات وهنحط عندنا هنا امريكا مثلا يو اس اي وهكتب لك هنا في الفالو مثلا جور اللي هي الاردن والامارات زي ما هي وامريكا برض زي ما هي جميل جدا جدا لو انا جيتلك هنا وعملتلك دلوقتي ريلود فبص الشكل اللي قدامك دول متقسمين مع بعض ودول متقسمين مع بعض ممكن كمان تعمل عنوان لكل جروب فالكلام ده انت بتعمله عندك من خلال اتربيوت اسمه ليبل بتروح عندك في الاوبشن جروب وبتستخدم عندك اتربيوت اسمه ليبل وبتكتب فيه العنوان اللي انت عاوزه انا ممكن اكتبلك كده بس على سبيل التجربه سكشن 1 وجيلك هنا في الاوبشن جروب وهعملك هنا ليبل وهكتب لك هنا سكشن 2 على س التجربه مش اكتر لو عملتلك هنا ريلود ف السكشن 1 في الثلاث دول دول والسكشن 2 في الثلاث دول دول طبعا مش محتاج اقوللك ان انت ما ينفعش تختار اسم الجروب انت اصلا لما بتقف عليه بالماوس مش بيتعلم عليه بالشكل اللي قدامك ده طيب عندنا نوع تاني من السلكت وعلشان تفهم النوع ده لو انا جيتلك هنا في السلكت وكتبت لك هنا حرف الام هيبحث لك دلوقتي عن مروك او هيجيب لك الكلمه اللي بتبدا عندك بحرف الام لو كتبت كبت لك حرف الاي هيجيب لك عندك هنا الجزائر لو كتبت لك حرف الجي هيجيب لك الاردن لو كتبت لك حرف اليو هيجيب لك الامارات لو كتبته تاني هيجيب لك اليو اللي بعده اللي هو يو اس اي لو كتبت لك هنا الاي هيجيب لك ايجيبت والى اخره فانت لما بتكتب عندك اي حرف من الكيبورد بيجيب لك الكلمه اللي بتبدا عندك بالحرف ده ولكن مافيش هنا مربع بحث انت ممكن تشوف في الكلمه اللي انت بتكتبها انا دلوقتي عاوز اكتب كلمه والكلمه دي تظهر عندي هنا الكلمه دي ابحث فيها عن الاوبشنز الموجوده عندك هنا في السلكت الكلام ده مش بتوفره لك النوع ده من السلكت علشان كده في اتش تي ام ال 5 في الاصدار الجديد قاللك لا احنا هنعمل عندنا نوع جديد من السلكت اسمه داتا سلكت تعال كده لما نوسع الدنيا على نفسنا عندنا هنا السلكت اللي فوق احنا هنسيبها السلكت اللي قدامنا دي وعندنا هنا زرار البمت سبنا تحت وفي المكان ده هنعمل عندنا السلكت الجديده تعال كده بس لما نعمل عن عندنا هنا بي ار ونعمل عندنا هنا اتش ار بحيث بس ان يعملك هنا هوريزونتال رو بالشكل اللي قدامك ده تعال دلوقتي بقى لما نعمل عندنا داتا سلكت علشان تعمل النوع ده بتكتب عندك انبوت عاديه جدا ولكن الانبوت دي ما بيكونش فيها طايب امال بيكون فيها ايه بيكون فيها ليست اللي انت بتكتبه في الليست ده هو اللي انت هتربط بال الداتا ليست وفهمك دلوقتي فنكتب هنا مثلا كانتري او تعال كده لما نغير المثال شويه نكتب مثلا لانجويج مجموعه لغات مثلا تمام فانا دلوقتي هعمل عندي ليست بتضم عندك مجموعه من اللغات سي وسي بلس بلس وسي شارب وبايثون وكل اللغات دي فهيك تبلك هنا في النيم مثلا كلمه لانج اللي انت بتكتبه في النيم ده هو اللي بيتم ارسال البيانات دي عليه طيب انا دلوقتي محتاج ان انا اعمل عندي الداتا ليست الداتا ليست بتكتبها عندك في داتا ليست واسم اسمه داتا ليست جوه الداتا ليست بتحط حط عندك الاوبشنز بتاعتك طبيعي جدا فجيل لك هنا واحط عندك الاوبشنز بالشكل ده ولكن قبل بس ما نحط عندنا الاوبشنز انا دلوقتي عاوز اربط الداتا ليست دي بالانبوب شان تربطه بتكتب عندك اللي موجود عندك في الليست هنا في اي دي بتحطه عندك للداتا ليست فاللي انت كتبته هنا ايا يكن بتحطه عندك هنا في الاي دي طالما انت عملت كده يبقى انت دلوقتي ربطت عندك الانبوت ده بالداتا ليست من خلال الانبوت ده انت ممكن تبحث وفي الداتا ليست بيكون موجود عندك الاوبشنز فتعال كده لما نعمل عندنا هنا اوبشن الاوبشن ده مش لازم يكون ليه كلوزنج تاج مش لازم تقفل عندك التاج لان اللي بتكتبه عندك في الفالو المره دي هو اللي بيظهر فلو انت كتبت هنا اي حاجه هي الحاجه دي اللي هتظهر عندك في البراوزر تعال كده لما ناخد عندنا نسخه سي شارب مثلا وتعال كده لما ناخد عندنا برض نسخه تانيه ونقولك سي بلس بلس وناخد عندنا نسخه برض بعد كده للغه مثلا بايثون مثلا ونسخه تانيه للغه بي اتش بي وتعال برض كده لما نعمل عندنا الجافا واخيرا هنعمل عندنا الجافا سكريبت تمام تمام جدا يبقى انا دلوقتي عملت عندي داتا ليست جواها مجموعه من الاوبشنز او الاختيارات وعندك هنا انبوت مربوط عندك بالداتا ليست تعال كده لما نشوف عندنا الشكل اللي قدامك ده هو ده شكل الداتا ليست ظهر عندك دلوقتي داتا ليست موجود فيها هنا عناصر بالشكل اللي قدامك ده شكلها في الجوجل كروم غير شكلها في متصفح ثاني وهو الايدج اللي قدامك ده فبص ده شكلها في الايدج وده شكلها في الجوجل كروم وممكن تلاقي شكلها متغير في متصفحات ثانيه المهم ان انت لما بتيجي عندك هنا على العلامه دي بينز لك دلوقتي السلكت او عناصر السلكت ممكن بقى ان انت تيجي عندك هنا في مربع البحث اللي هو الانبوت ده وتبحث عن اي حاجه انت عاوزها الحرف اللي انت بتكتبه بيجيب لك كل العناصر اللي بتتضمن الحرف ده مش شرط تكون بتبدا بالحرف ده انت لما كتبت عندك بي جاب لك دلوقتي جافا سكريبت لان ف حرف البي ممكن تبحث عن اللي انت عاوزه تكتب عندك جافا هيجيب لك الجافا والجافا سكريبت ممكن تكتب عندك بي هيجيب لك البايثون والبي اتش بي والجافا سكريبت لو كتبت عندك السي هيجيب لك كل العناصر اللي فيها حرف السي انت هنا في المكان ده بتشوف الكلام اللي انت بتكتبه فلو انا مثلا كتبت لك هنا بايثون انا دلوقتي شايف الكلام اللي انا بكتبه لان انا دلوقتي بكتب فين انا دلوقتي بكتب عندي في انبوت المكان اللي انا ببحث فيه هو انبوت ممكن من خلاله ان انا اشوف عندي انا عملت ايه ممكن من خلاله ان انا اشوف عندي الكلام اللي انا بكتب فيه لو جيتلك هنا وضغطت لك دلوقتي على بمت خلي بالك انا مختار هنا بايثون لو جيتلك هنا وضغطت لك دلوقتي على بمت هيقوللك دلوقتي ان اللانج بتساوي ايه بيقوللك دلوقتي ان اللانج بيتساوي عندك بايثون وهو ده المطلوب النهارده ان شاء الله هنتكلم عن الازرار في الاتش تي ام ال وهنقول لك الانواع المختلفه للازرار واحد دلوقتي هيقول لي هي الازرار دي ليها انواع مختلفه هقول لك ايوه وهنقول لهم دلوقتي ان شاء الله مع بعض اول نوع عندنا هو البوتون وده زرار عادي جدا تاني نوع هو البمت وده اللي بنستخدمه مع الفورم وهقوله لك دلوقتي عندنا برض نوع ثالث وهو الريسيت وده برض بنستخدمه مع الفورم ما تيجوا دلوقتي نشوفهم مع بعض تعالوا دلوقتي لما نشوفهم مع بعض هنكتب عندنا هنا انبوت وهنيجي عندنا هنا في التايب وهنكتب عندنا هنا بوتون البوتون ده بيعمل لك زرار عادي جدا ولكن بيعمل لك زرار بدون اي كتابه فلو انا جيت لك هنا وعملتلك دلوقتي ريلود مافيش اي كتابه دلوقتي على الزرار ده لو انت دلوقتي عاوز تكتب على الزرار ده اي كلمه ف بتتي عندك هنا في الانبوت وبتستخدم الاتربيوت اللي اسمه فو وبتكتب هنا الكلمه اللي انت عاوزها هتظهر على الزرار فانا كتبت كليك لو عملت لك دلوقتي ريلود ظهر عندك هنا كليك ممكن تكتب كلمه بالعربي بالانجليزي باللي انت عاوزه جميل جدا جدا النوع ده اللي هو البوتون ده بنستخدمه في ايه النوع ده انت ممكن تستخدمه في اي حاجه اي زرار انت عاوز تعمله في الموقع ممكن تعمله عندك من خلال البوتون لو انت عاوز تعمل زرار للمنيو عندك منتج وعاوز تعمل له زرار للدفع عاوز تعمل زرار لاي حاجه في الدنيا ممكن تستخدم لها ال بوتون البوتون ده انت مش لازم تستخدمه مع الفورم ولكن البمت والريسيت احنا بنستخدم مع الفورم يعني ايه الكلام ده يعني دلوقتي انت لو هنا عندك فورم فورم عاديه جدا تعال كده لما نشيل الاكشن وهنيجي هنا في الفورم وهنعمل بس انبوت من نوع تكست على سبيل التجربه بس مش اكتر وهنيجي عندنا هنا وهنعمل لها نيم هنسميه يوزر يبقى انا دلوقتي بعمل عندي انبوت لليوزر وهكتب بس عليه كده من بره من خلال البليس هولدر كلمه يوزر علشان بس يظهر عندك هنا كلمه يوزر جميل جدا هعمل برضو عندك هنا انبوت للباسورد فكتب هنا باسورد بالشكل اللي قدامك ده وحطها هنا في النيم وحطها هنا في البليس هولدر يبقى انا دلوقتي عندي هنا انبوت لليوزر وانبو هنا للباسورد طيب دلوقتي المستخدم لما بيكتب عندك هنا بيانات وبيكتب عندك هنا بيانات في الباسورد فعلشان يبعتلك البيانات دي بتستخدم عندك هنا زرار البمت فتعال دلوقتي لما نشوف الفرق ما بين البمت وما بين البوتون مع الفورم اللي قدامك دي لو انا جيتلك هنا ركز لو انا جيتلك هنا وعملتلك دلوقتي زرار من نوع سبمت زرار عادي جدا البمت بيكون مكتوب عليه كلمه بمت هتلاقي دلوقتي الكلمه دي قدامك هنا ممكن ان انا اغير الكلمه دي من خلال الاتربيوت تعال كده الاتربيوت اللي اسمه فو ممكن اكتب عليه اي كلمه تعال كده لما نكتب عندنا هنا كلمه سند تعال دلوقتي بقى لما نشوف الفرق لما بجيلك هنا وبكتب هنا اي حاجه ايا يكن وبكتب عندك هنا اي حاجه في الباسورد انا كتبت 1 ا 3 4 لما بضغط هنا على بمت طالما الزرار ده من نوع سبمت يبقى بيلم لك البيانات اللي موجوده عندك في اليوزر والبيانات اللي موجوده عندك هنا في الباسورد وبيبعت م لك لو بصيت عندك فوق هنا هتلاقي دلوقتي ان يوزر اللي هي ايه اللي هي النيم اللي انت عملتها هنا مبع فيها البيانات اللي هي احمد والباسورد مبع فيها البيانات اللي هي 1 ا 3 4 ممكن نجرب الموضوع تاني عشان لو انتم ماخدتوش بالكم تعال كده هكتب لك هنا مثلا علي وهكتب لك هنا في الباسورد 1 ا 3 لو ضغطت لك هنا على زرار البمت بعت لك هنا فوق مع اليوزر كلمه علي وبعت لك مع الباسورد واحد اين ت لو انا بقى كنت مستخدم عندي بدل البمت الزرار اللي هو من نوع بوتن بص بقى ايه اللي هيحصل علشان تكون فاهم الفرق بشكل اوضح لو انا جيت لك هنا وكتبت لك احمد وكتبت لك هنا واح ا 3 ايا يكن وضغطت لك دلوقتي على الزرار ده مافيش حاجه بتتبعت بص اصلا هنا البيانات ما بتروحش فلما بضغط هنا على الزرار ده مافيش اي حاجه بتتبعت ليه لان الزرار ده من نوع بتون علشان تبعت البيانات دي فانت بتستخدم عندك الزرار اللي من نوع سبمت لو جيت لك هنا لو عملت لك دلوقتي ريلود وكتبت لك هنا اي حاجه و كتبتلك هنا اي حاجه وضغطت لك على الزرار اللي من نوع سبمت فبعت لك البيانات دي تمام جدا جدا طيب عندنا زرار تاني من نوع ريست الزرار ده علشان تعمله وبتيجي عندك في النوع وبتكتب عندك ريسيت الزرار ده بيكون مكتوب عليه كلمه ريسيت لو انت عاوز تغير الكلمه دي بتيجي عندك هنا وبتكتب دلوقتي اي حاجه تعال كده لما نكتب كلير على الزرار ده ايه ريسيت بتعمل لك كلير بتنظف لك البيانات موجوده عندك هنا في الفورم فلو انا جيت لك هنا وعملت لك دلوقتي ريلود لو انت عندك هنا بيانات في الانبوت ده وبيانات عندك في الانبوت ده وعندك 1000 انبوت موجود فيهم بيانات فممكن دلوقتي تمسح كل البيانات من خلال الزرار ده فالزر ده بينضف لك كل البيانات اللي موجوده عندك تمام فلو انت كاتب هنا حاجات كتيره جدا وكاتب هنا حاجات كتيره جدا وعندك 1000 انبوت ومكسل انك تمسح كل البيانات دي فممكن من خلال ال ريسيت ان انت تمسح كل البيانات اللي موجوده عندك في الفورم ف باختصار شديد احنا عندنا لاث انواع من الازرار عندنا زرار من نوع بوتون وزرار من نوع بمت وزرار من نوع ريسيت الزرار اللي من نوع سبمت والزرار اللي من نوع ريسيت بنستخدم في الفورم فقط اما الزرار اللي من نوع بوتون ده انت ممكن تستخدمه في اي حاجه تانيه في الموقع لو انت عاوز تعمل زرار للشكل مش اكتر عاوز تعمل زرار علشان تنفذ فكره معينه مش لازم تستخدم فيها الفورم فانت بتستخدم في الحاله دي الزرار اللي من نوع بوتون لكن لو انت عامل فورم وعاوز ترسل البيانات اللي في الفورم بتستخدم عندك الزرار اللي من نوع سبمت اما لو انت عاوز تعمل كلير للبيانات اللي موجوده عندك في الفورم فبت استخدم عندك الزرار اللي من نوع ريس انا عاوز اقوللك ان الازرار هي عناصر ان لاين فلو انا جيت هنا وعملت دلوقتي هنا زرار ده زرار من نوع بوتون وهعمل لك دلوقتي زرار من نوع ريسيت وهعمل لك دلوقتي زرار من نوع سبمت تمام واعمل لك هنا زرار من نوع سمت الازرار دي بتكون عندك من نوع ان لاين او بتيجي عندك على نفس السطر لازم تفهم الحته دي كويس جدا طيب احنا دلوقتي عملنا عندنا الازرار من خلال وسم الانبوت انت ممكن تعمل الازرار دي والثلاث انواع دول من خلال وسم تاني اسمه بتن الوسم ده بيعمل لك زرار عادي جدا الزرار اللي قدامك ده وما بين البدايه والنهايه للعنصر ما بين البدايه والنهايه انت بتكتب الحاجه اللي بتظهر عندك على الزرار فلو انا دلوقتي عملتلك هنا ريلود ظهرلك الكلمه دي على الزرار ممكن تكتب هنا الحاجه اللي انت عاوز تظهرها اللي انا عمال اكتبه ده الحاجه اللي انت عاوز تظهرها على الزرار تمام بالشكل اللي قدامك ده الزرار ده ممكن تحدد النوع بتاعه من خلال الاتربيوت اللي اسمه طايب ممكن تستخدم عندك نوع البوتون وممكن تستخدم عندك نوع الريسيت بنفس الموضوع بالظبط تمام وممكن تستخدم عندك نوع البمت هي هي بالظبط تعال كده لما نكتب عندنا هنا مثلا بوتون وتعال لما نكتب عندنا هنا بس ريسيت للدلاله بس مش اكتر وتعال لما نكتب عندنا هنا بمت اللي انت بتكتبه هنا هو اللي بيظهر عندك على الزرار فلو انا دلوقتي عملتلك هنا ريلود عمل لك زرار من نوع بوتون وعمل لك زرار من نوع ريسيت وعمل لك زرار من نوع بمت وهي هي بالضبط اللي موجوده عندك في الانبوت كل اللي قلناه في الانبوت هو اللي بينطبق دلوقتي على الازرار اللي انت بتعملها من نوع بوتون فالزر ده انت ممكن تستخدمه لاي حاجه في الموقع اما الزر اللي من نوع ريسيت ده انت بتستخدمه لحذف الداتا اللي موجو عندك في الفورم والزرار اللي من نوع سبمت ده انت بتستخدمه ل البيانات اللي موجوده عندك في الفورم فهي هي بالظبط احنا عرفنا يعني ايه انبوت عرفنا ان الانبوت اللي من نوع تكست بيعملك حقل ادخال عادي جدا ممكن ان المستخدم يدخل فيه عندك هنا تكست انا عاوز اقوللك ان احنا عندنا حقل تاني اسمه تكست اريا تكتب عندك هنا تكست اريا بالشكل اللي قدامك ده سيبك من كل الحاجات دي هنتكلم عليها دلوقتي تعال كده بس لما نعمل عندنا هنا بي ار علشان بس نفصلهم نخلي ده في سطر وده في سطر وتعال هنا لما نعمل لك هنا ريلود هتلاقي دلوقتي ان انت عندك حقل ادخال ممكن ان انت تكتب في اي بيانات انت عاوزها وممكن ان انت تتحكم في السايز بتاع حقل الادخال ده اللي قدامك ده اسمه تكست اريا وده احنا بنستخدمه علشان نكتب فيه كلام كتير جدا لو انت عاوز المستخدم يكتب عندك ديسكربشن لو انت عاوزه يكتب مقاله عاوزه ب كونتنت كبير جدا فبت لله التكست اريا عكس طبعا الانبوت العادي جدا اللي انت بتكتب فيه حاجات بسيطه زي عنوان زي ايميل زي اي حاجات بسيطه من الحاجات دي طيب هل ينفع ان انا اتحكم في حجم التكست اريا يعني هل ينفع اتحكم في الطول والعرض ايوه ينفع من خلال حاجه اسمها كولز وروز يعني الصفوف والاعمده او الاعمده والصفوف فبت جي عندك هنا وبتكتب كولز ودي انت بتتحكم فيها في الاعمده تعال تعال كده بس الاول لما نشوف الحجم بدون اي حاجه ده حجمها الاصلي بالشكل اللي قدامك ده طيب لو انا جيت لك هنا وكتبت لك هنا كولز الكولزا فالو بتاعتها 20 فسواء انت كتبت 20 او ما كتبتش فهي هي بالظبط فلو انا عملت لك هنا ريلود مافيش اي تغيير حصل على التكست اريا ممكن ان انا اصغرها اخليها لك مثلا 10 فهت نقص عندك النص الكولزا او من الشمال لليمين فلو انا عملت لك هنا ريلود نقصت عندك النص من الشمال لليمين ومع ذلك المستخدم برض ممكن ان هو يتحكم فيها بالشكل ده انا لما بقول لك ان انا بتحكم فيها فانا بتحكم فيها لما المستخدم بيعمل لك هنا ريلود طيب دلوقتي انا كمان برض ممكن اتحكم عندك في الروز الروز هي الصفوف اللي هي من فوق لتحت ممكن اكتب لك هنا اثنين وده الديفولت فالو فلو عملتلك هنا ريلود مافيش اي تغيير ممكن ان انا اكبرها اخليها مثلا خمسه تعال كده هنخليها هنا خمسه عملل لك ريلود فبقيت عندك بالشكل ده كبرت من فوق لتحت او ممكن بقى ان انا اخليها 10 او الرقم اللي انا عاوزه فلو عملت لك دلوقتي ريلود كبرت عندك بالشكل ده ومع ذلك برض المستخدم ممكن يعدل فيها بالشكل اللي قدامك ده طيب بنستخدمها في ايه تعال دلوقتي لما نشوف مثال عملي عن استخدام التكست اريا احنا دلوقتي هنعمل عندنا فورم او نموذج ل عمل مقاله مثلا هيكون عندنا انبوت لادخال عنوان المقاله وهيكون عندنا تكست اريا لادخال محتوى المقاله فتعال كده لما نعمل عندنا العنوان في ديف ممكن نعمله ليبل وممكن ما نعملش عادي جدا المهم ان انا بعمل عندي انبوت من نوع تكست علشان ادخل لك في التايتل وهعمل لك هنا بليس هولدر هكتب لك فيه بس كلمه تايتل بالشكل اللي قدامك ده جميل جدا جدا هعمل لك هنا نيم والنيم ده هكتب لك فيه كلمه تايتل علشان يتم ارسال البيانات على النيم ده وبكده اكون عملت عندي التايتل ممكن اعمل لك ليبل او ما عملش اللي انت عاوزه تعال كده لما نعمل عندنا بي ار علشان بس نعمل مسافه وتعال كده لما نعمل عندنا التكست اريا او محتوى المقاله المحتوى ده هنحطه عندنا في تكست اريا لانه محتوى كبير جدا سيبك انت بقى من كل الكلام ده هنعمله دلوقتي بايدينا ولكن تعال بس لما نشوف الشكل اللي ظهر قدامنا ده شكل التكست اريا هنيجي عندنا هنا بس وهنعمل عندنا نيم هنكتب فيه مثلا كونتنت وهنعمل عندنا هنا بليس هولدر هنعمل دلوقتي كلمه تظهر عندنا هنا على التكست اريا فنكتب هنا كونتنت ولا لاث نقط كده بس علشان ايه يدل ان في حاجه هتتكتب عندك هنا في المكان ده جميل جدا جدا ممكن بس نزود الصفوف نجيلك هنا ونعمل دلوقتي روز ممكن بس نيجي كده شويه خلي بالك انا ممكن الفت نظرك لحاجه مهمه انت ممكن تنزل عندك الاتربيوت بالشكل اللي قدامك ده تمام كنوع من تنظيم الكود مش اكترر فلو انت اشتغلت بالشكل ده عادي ولو انت اشتغلت بالشكل ده عادي جدا ده احنا بنعمله لتنظيم الكود علشان بس نكون شايفينه مش اكتر ولكن هي هي بالظبط طيب تعال كده لما نتحكم عندنا في الروز ونخليها مثلا لاثه نكبرها بس صف واحد بس فلو عملت لك هنا ريلود هتكبر بس صف واحد لان الديفولت فالو بتاعتها بتكون اثنين طيب تعال في الاخر كده لما نعمل عندنا زرار فجيل لك هنا وهعمل لك هنا زرار من نوع بمت بب مت جميل جدا جدا هنتكلم دلوقتي على حاجه مهمه جدا في الانبوت وهي الديشنكان اللي داخله لك دلوقتي لو المستخدم ساب لك البيانات فاضيه وضغط لك هنا على بمت هيتم ارسال البيانات دي طبعا الكلام ده غلط فانا عاوز اقول له ما ترسل الفورم دي غير لما يكون في هنا بيانات وفي هنا بيانات فعلشان تعمل كده هجيلك دلوقتي في الانبوت ده او في الحقل ده واقوللك ان الحقل ده مطلوب يعني ريكوا فبتحب هتيجي عندك هنا في التكست اريا في المكان ده وهتحط عندك هنا الريك وايرد يبقى التكست اريا مطلوب وال الانبوت عندك برض مطلوب فلو انا جيتلك هنا وعملتلك دلوقتي ريلود وجيتلك هنا وضغط قك على البمت مش هيتم ارسال البيانات هيقوللك بليز في اووت ذس فيلد لو سمحت دخل بيانات في الفيلد ده فه نخل دلوقتي بيانات هنا ونيجي دلوقتي نضغط على سبمت هيقوللك برض الفيلد ده مطلوب فهت دخل هنا اي بيانات وهتيجي هنا تضغط على بمت هيتم ارسال البيانات دي تم ارسالها لان انت كتبت فيها بيانات جميل جدا جدا طيب هنتكلم على موضوع تاني مهم جدا وهو المين لينس والماكس لنس دلوقتي انا ممكن اتحكم في عدد الحروف اللي المستخدم بيدخلها في الانبوت وفي التكست اريا دلوقتي المستخدم ممكن يكتب لك هنا حروف كتيره جدا ممكن يكتب لك 300 حرف يكتب لك قصيده هل الكلام ده صح لا الكلام ده مش صح فانا ممكن اقول لك مثلا ان اقصى حروف هتتكتب عندك هنا هي 10 حروف او 20 حرف او اللي انت عاوزه الكلام ده بتعمله من خلال حاجه اسمها الماكس لنس فهتي عندك هنا في الانبوت اللي اسمه ماكس لنس بالشكل اللي قدامك ده فلو انا كتبت لك هنا 10 ده معناه ان اقصى حروف هتتكتب عندك في الحقل ده هم 10 حروف فلو جيت لك هنا وعملت لك دلوقتي ريلود ركز وكتبت لك حرف 2 3 4 5 6 7 8 9 10 بص بص انا بكتب اهو عمال اكتب وما بيدخل لكش اكت من 10 حروف نفس الكلام ده ممكن تستخدمه مع التكست اريا فممكن اجي لك هنا في التكست اريا واقول لك ان الماكس لنس بتاعتها هتكون مثلا 10 برده او 20 او خمسه او اللي انت عاوزه فلو جيت لك هنا وعملت لك ريلود بنفس الطريقه بالظبط ودخلت لك حرف 2 3 4 5 6 7 8 9 10 11 بص اهو ما بيدخل ما بيدخل لكش اكتر من 10 برض ممكن تتحكم عندك في المين لينز اللي هي اقل حروف ممكن تدخل عندك تخيل دلوقتي انت عامل عندك مثلا حقل لادخال الباسورد عاوز دلوقتي المستخدم يعمل لك باسورد فالمستخدم جالك هنا وكتب لك واحد اللي هو يا راجل جاي تكتب الباسورد بتاعك واحد طبعا الكلام ده غلط جدا فانت مثلا هتقول له ان انت عاوز اقل عدد حروف يكون مانيه مثلا او 6 او 10 او الرقم اللي انت عاوزه فالكلام ده انت بتعمله من خلال حاجه اسمها المين لينس تعال كده بقى لما ننزل عندنا الاتربيوت دي بالشكل اللي قدامك ده نظم بس عندنا الكود علشان نكون شايفين كل الاتربيوت اللي قدامك دي زي ما عملناها هنا في التكست اريا بنعملها عندنا هنا في الانبوت انا بعملها علشان بس تكون شايف الكود مش اكتر لكن لو انت عملت كده او ما عملتش عادي جدا طيب هاجيلك هنا وهكتب لك دلوقتي من لنس اقل عدد حروف ممكنه فانا هكتب لك هنا مانيه يبقى الكلام ده معناه ان الانبوت اللي هو تعال كده الانبوت اللي فيه تايتل ده ما ينفعش ادخل فيه اقل من مان حروف فلو انا جيتلك هنا وكتبت لك حرفين ايا يكن وكتبت لك هنا اي حاجه بس عشان الالدي شن وضغطت لك هنا على بمت هيقول لك لا انت المفروض تكتب عندك ممان حروف او اكتر مان كراكتر اور مور تمام انت يا معلم كاتب هنا حرفين وده غلط جدا فلو انا كتبت لك هنا ممان حروف تعالى كده 1 2 3 4 5 6 7 8 لو ضغطت لك هنا على سبمت هيرسل لك البيانات دي بعتها لك لان انت التزمت عندك بالفال شن طيب دلوقتي اللي انت عملته عندك ده اسمه فالديشن التاكد من صحه البيانات دي الموضوع ده بيكون اختياري انت ممكن تخلي المين لينس مان حروف واحد تاني يخليه 10 حروف واحد تلي تخليه 100 حرف اللي انت عاوزه كل الكلام ده اسمه فالديشن فاحنا عملنا عندنا هنا مين لينس وعملنا عندنا هنا ماكس لينس وعملنا عندنا هنا ريكوير في التايتل وريك وايرد في التكست اريا بحيث ان انت لازم تكون مدخل هنا بيانات طيب دلوقتي افرد انا مش عاوز ولا اي فالديت من اللي انت عملته ده يشتغل ولا المين لينس ولا الماكس لينس ولا الريك وايرد يعني برغم ان انت كاتب عندك هنا ماكس لينس وكاتب عندك هنا ريكوير وعملت عندك هنا مين لينس برغم كل الفديت اللي انت عملته ده انت مش عاوز اي حاجه فيهم تشتغل عاوز دلوقتي لو المستخدم جالك هنا وضغط هنا على سبمت يرسل البيانات دي برغم كل الفديت اللي انت عملته بتعمل الكلام ده من خلال ان انت بتروح هنا للفورم وبتستخدم حاجه هنا اسمها نو فديت يعني ما تشغليش اي فالديت من اللي انت عملته هنا ولا الماكس لينز ولا المين لينز ولا الريك وايرد ولا اي حاجه من كل اللي انت عملته ده فلو انا جيتلك هنا وعملتلك هنا ريلود وضغطت لك هنا على بمت هيبعتلك البيانات دي اهو بص بعتلك البيانات فاضيه برغم كل الفديت اللي انت عملته جميل جدا جدا طيب تعال كده نتكلم على شويه تنسيقات جميله جدا اللي انت بتعمله هنا لما بتيجي تفتح الانبوت ده او بتفتح الحقل ده ده اسمه فوكس على الحقل ده انت بتفو عليه علشان تكتب انا ممكن اعمل اوتو فوكس يعني انا من خلال الاتش تي ام ال ممكن اخلي البراوزر يعمل لك فوكس بشكل اوتوماتيك طيب بنعمل الكلام ده ازاي انا هقوللك مثلا عاوز لما اعمل لك هنا ريلود الانبوت ده يتعمل له اوتو فوكس او ده يتعمل له اوتو فوكس فبتعمل الكلام ده من خلال اتربيوت اسمه اوتو فوكس ممكن نعمله عندنا هنا في الانبوت اجيلك هنا وستخدم عندي اتربيوت اسمه اوتو فوكس بالشكل اللي قدامك ده طالما استخدمته عندك هنا في الانبوت فلو انا جيت لك هنا وعملت لك هنا ريلود فبيعمل لك اوتو فوكس بص لو عملت لك هنا ريلود هيعمل لك اوتو فوكس من نفسه على الانبوت ده ممكن ان انا اشيلها عندك من هنا واحطها عندك هنا في كست اجيلك هنا واقولك دلوقتي اعمللي اوتو فوكس بالشكل ده فلو انا جيتلك هنا وعملتلك هنا ريلود بيعملك اوتو فوكس على التكست ايا بص اهو بيعملك اوتو فوكس طيب عندنا برض حاجه تانيه اسمها الري تعال كده لما اوضحلك علشان انت ممكن تتلخبط ما بينهم بص يا معلم هنجرب دلوقتي الموضوع ده في الانبوت هنا فلو انا جيتلك هنا وكتبتلك هنا اون بص شوف ايه اللي هيحصل دلوقتي هيقوللك خلي بالك ان الانبوت ده للقراءه فقط يعني ما ينفعش تكتب فيه بص اهو ما ينفعش تكتب ما بيكتبش نفس الموضوع ده انت بتعمله من خلال حاجه اسمها ديسيبل فلو انا جيتلك هنا وعملت لك هنا ريلود لو جيت هنا علشان اكتب الانبوت اصلا مقفول عندك بالشكل ده فانت ما تقدرش ان انت تكتب فيه بيانات طيب ايه الفرق ما بين الريد اونلي وما بين البلد بص يا معلم افهم بقى الحته دي كوي ك جدا انت هنا ممكن تكون عامل اصلا ديفولت val يعني ممكن تكون جايلك هنا وعامل دلوقتي فو كاتب فيه هنا اي تايتل تعال كده لما نكتب هنا كلمه هلو اي حاجه يعني مش مشكله انا بكتبلك بس اي حاجه علشان افهمك ايه هو الريد اونلي الريد اونلي انت هنا ما تقدرش تعدل على الفو ده فلو جيت تكتب من الكيبورد ما بيكتبش لو جيت تمسح مبيمسحش حتى لو جيت هنا كليك يمين تدور هنا على اي ديليت هنا مافيش اي ديليت تقدر ان انت تعمله كل اللي انت تقدر تعمله هو ان انت تنسخ بس الكلام ده طيب ده الريد اونلي الريد اونلي بيبعت لك البيانات دي مع الفورم افهم الحته دي كويس جدا فلو انا جيت لك هنا وضغطت لك هنا على بمت بعت لك الكلمه دي اهي مع التايتل فاهم فهو بعت لك الديفولت فالو اللي انت كنت عامله لما انت ضغطت على بمت عكس الموضوع ده هو الديس بلد فلو انا جيت لك هنا وعملت دي ديسبل لو انا عملت لك هنا ريلود اول ملاحظه ان الكلام بقى لونه ميوت كده اللي هو لون جراي اللون بتاعه هده شويه كمان لو انت جيت تكتب مش هتقدر تكتب ده الديسيبل ولا بتقدر تكتب ولا بتقدر تعدل ولا بتقدر تمسح ولا بتقدر تعمل كل اللي انت كنت بتعمله في الريد اونلي فهي زيها زي الريد اونلي طيب ايه الفرق الفرق ان الكلام اللي موجود هنا ما بيتبع مع الفورم ايه ده يعني ايه الكلام ده يعني لو انت جيت هنا وكتبت هنا اي حاجه ايا يكن وضغطت لك هنا على بمت ففين التايتل التايتل مش موجوده لو بصيت هنا هتلاقي دلوقتي ان الكونتنت بيساوي تست التست اللي انت كنت كاتبها هنا مش اكتر من كده فين التايتل التايتل معمول لها ديسيبل يعني البيانات اللي فيها مش بيتم ارسالها مع الفورم طيب ايه استخدامات البلد البلد انت بتستخدمها مع البيانات اللي انت مش عاوز تعدلها زي الاي دي بتاع المستخدم او الايميل بتاع المستخدم او لو انت مش عاوز تعدل رقم التليفون بتاع المستخدم او اي بيانات انت مش عاوز تعدلها تمام عاوز تظهرها له بس بشكل ديس بلد ولكن انت مش عاوز البيانات دي يتم ارسالها للفورم انت مش عاوز يتم ارسالها لان انت مش عاوز تعدلها اصلا فاهم في الحاله دي انت بتستخدم عندك البلد ومعلومه مهمه جدا الديسبل والريد اونلي ممكن تستخدمهم برض مع التكست اريا فلو انا جيت لك هنا وكتبت لك هنا الديسبل وعملت لك هنا ريلود نفس القصه بالظبط ما تقدرش حتى ان انت تعمل هنا اي حاجه كذلك برض ممكن تستخدم عندك الريد اونلي بالشكل ده في التكست اريا فلو عملتلك هنا ريلود برضو ما تقدرش ان انت تكتب ولا تقدر ان انت تعمل اي حاجه جميل جدا جدا عندك حاجه تانيه برضو وهي التارجت هتقول لي التارجت انا بشبه على الاسم ده هقوللك بالضبط كده فاكر التار اللي كنا بنستخدمها مع الاي مع اللينك اللي كان بيبقى ليها قيمه بلانك وقيمه سيلف اللي كانت بتفتح عندك في تاب جديده او في نفس التاب نفس الفكره دي بالضبط موجوده عندك في الفورم فانت ممكن تتحكم لو المستخدم ضغط هنا على سبمت يتم ارسال البيانات دي في نفس التاب ولا في تاب جديده فممكن اجيلك هنا واخليها لك دلوقتي اندر سكور سيلف وده الديفولت فو فلو انا جيت لك هنا وسبتها هنا زي ما هي وكتبت لك هنا اي اي حاجه وضغطت هنا على بمت بعت البيانات دي في نفس التاب في نفس التاب اللي انت واقف فيها ولكن لو انا خليت لك التارجت بتساوي عندك اندر سكور بلانك بالشكل اللي قدامك ده فالكلام ده معناه ان هو هيرسل لك البيانات دي تعال كده نشيل دي الكلام ده معناه ان هو هيرسل لك البيانات دي ولكن في تاب جديده عندك هنا تعال دلوقتي لما نجرب هنكتب هنا اي حاجه عشان بس الالدي شن بمت ارسل لك البيانات دي ولكن في تاب جديده بالشكل ده لو انت فتحت عندك التاب القديمه هتلاقي موجود فيها البيانات زي ما هي بالمنظر اللي قدامك ده ولو انت ضغطت على سبمت تاني هيفتح لك تاب جديده ثانيه بالمنظر اللي قدامك ده رجعنا من تاني يا صديقي في فيديو مهم جدا احنا النهارده هنشرح ثلاثه تاجز بيعملوا حاجات كتيره جدا من خلالهم ممكن ان انت تفتح صوره هتقول لي عبد الرحمن صباح الفل صوره ايما واسم الايمدج بيفتح لنا صوره هقول لك ودول كمان بيفتحوا صوره ممكن من خلالهم ان انت تفتح فيديو ممكن ان انت تفتح ملف بي دي اف ممكن ان انت تعمل تضمين لموقع تاني في موقعك يعني ممكن مثلا تجيب موقع ويكيبيديا الموقع ده بالكامل كده تعمل له تضمين في الموقع بتاعك كل ده تقدر تعمله من خلال الثلاثه تاكز دول كمان برضو انت ممكن تعمل تضمين لصفحه تانيه من نفس موقعك في الصفحه بتاعتك وممكن تعمل تضمين لفيديو من اليوتيوب في الموقع بتاعك وحاجات تانيه كتيره جدا الكلام ده انت بتعمله من خلال لاثه تاجز اول واحد فيهم اسمه الاي فريم التاني اسمه الاوبجكت الثالث هو الانب الاول وهله انت ممكن تفتكر ان التلاته دول زي بعض بالظبط لان هم فعلا بيعملوا نفس الشيء ولكن اكيد في اختلاف فتعال دلوقتي لما نشوفهم ونشوف ايه الاختلافات اللي ما بينهم ويلا بينا لما نبدا اول تاج عندنا هو الاي فريم التاج ده مهم جدا جدا طبعا التاج ده بيكون ل اوبنينج تاج وكلوز تاج بالشكل ده طيب تعال كده لما نشوف شكل الاي فريم لو انا دلوقتي عملتلك ريلود شايف عندك الاي فريم هتلاقي عندك دلوقتي بوردر مربع ظاهر عندك بالشكل ده طيب بنعمل ايه بالاي فريم بنعمل حاجات كتيره جدا تعال دلوقتي لما نتكلم على اول حاجه وهي ان احنا نعمل تضمين لموقع تاني في الموقع بتاعنا فعلشان تعمل كده بتاخد دلوقتي لينك الموقع ده انا دلوقتي هعمل تضمين لموقع ويكيبيديا في الموقع بتاعي فها اخد دلوقتي لينك موقع ويكيبيديا كوبي وهروح دلوقتي للاي فريم وهجيلك هنا وهستحمل وقتي اتربيوت اسمه اس ار سي جوه الاتربيوت اللي اسمه اس ار سي بتحط عندك اللينك بتاع الموقع اللي انت عاوز تعمله تضمين في الموقع بتاعك بتحط عندك اللينك بالكامل جوه الاس ار سي في الاي فريم وبكده انت عملت تضمين للموقع ده في الصفحه بتاعتك فلو انا جيت لك هنا وعملت لك دلوقتي ريلود هننتظر طبعا مع بعض لان هو بيحمل الموقع وبمنظر اللي قدامك ده هتلاقي دلوقتي حمل لك موقع ويكيبيديا بالكامل وطبعا مش محتاج اقول لك ان انت ممكن تتصفح الموقع ده جوه الاي فريم عادي جدا جدا جدا طيب اول حاجه هتاخد بالك منها في الاي فريم هو البوردر بتاع الاي فريم اللي قدامك ده هو الخط بتاع الاي فريم الخط ده انت ممكن تتحكم فيه من خلال اتربيوت اسمه فريم بوردر بوردر بتتكتب كده بوردر طيب الاي فريم بتاخد منك قيمتين يا اما صفر يا اما واحد صفر يعني ما بيكونش عندك بوردر للاي فريم اما واحد بيكون عندك بوردر للاي فريم ومالقيش واحد بقى كتبلي انين او 10 او 100 ههم يا اما صفر يا اما واحد تمام طيب لو لو انا جيت لك هنا تعال كده الاول بس لما نخليها صفر يعني ما يكونش عندنا بوردر للفريم وشايف دلوقتي البوردر اللي قدامك ده لو انا جيت لك هنا وعملت لك دلوقتي ريلود فين البوردر البوردر عندك مش موجود وده لان انت خليت قيمه الفريم بوردر بالصفر لو انت خليت قيمتها واحد عندك بالمنظر ده وعملتلك دلوقتي ريلود هتلاقي دلوقتي ان الاي فريم ظهر لك ليها بوردر او خط عندك بالشكل اللي قدامك ده فممكن تتحكم في الخط من خلال الفريم بوردر كمان برض ممكن تتحكم عندك في الطول والعرض للاي فريم تعال كده لما نرجع عندنا البراوزر للاصل نخليه 100% بالمنظر ده فده شكل الاي فريم الطبيعي ده الطول والعرض انا ممكن اجيل لك هنا واتحكم لك هنا في الطول من خلال الهايت الرقم اللي انت بتكتبه هنا ده بالبيكسل فلو انا كتبت لك 10 دي معناها 10 بيكسل لو انا كتبت لك هنا مثلا 400 دي 400 بيكسل فلو انا جيت لك هنا ركز دلوقتي في الطول اللي قدامك ده لو انا جيت لك هنا وعملت لك دلوقتي ريلود فده طول الاي فريم اصبح عندك الطول 400 بيكسلز ممكن اصغرها لك علشان بس تفهم هخليها لك دلوقتي 40 طبعا 40 ده رقم صغير جدا وممكن ما تبانش منه الاي فريم بص شوف صغير جدا جدا بالمنظر اللي قدامك ده انا بس بكبر لك وبصر لك علشان تفهم ان انت ممكن تتحكم في الطول طيب هنخليها 400 زي ما هي وكمان هجيلك هنا وهتحب لك دلوقتي في العرض هخليلك العرض مثلا 100 تمام طبعا ده عرض صغير برضو فلو انا جيتلك هنا العرض عندك 100 بيكسل بالمنظر اللي قدامك ده ممكن اخليها لك هنا 500 لا مش 5600 500 وهعمل لك هنا ريلود فاصبح العرض عندك 500 والطول عندك 400 بيكسل زي ما انا كتبتلك هنا طيب ده جميل جدا جدا هل بقى موضوع التضمين ده معتمد عليه يعني ده انا كده مش مهم ان انا ابرمج بقى يعني فاهم ده انا جيب تضمين مثلا لموقع انستجرام عندي اجيب تضمين لموقع فيسبوك عندي اجيب تضمين لاي موقع تاني عندي ومش مهم بقى ان انا ابرمج انا اعتمد بقى على المواقع الثانيه انا عاوز اقوللك ان الموضوع ده مش معتمد عليه قوي لان اصلا اغلب المواقع ما بتسمح ان يتعمل لها تضمين فلو انا جبتلك مثلا موقع انستغرام تعال كده لما نجيب اللينك بتاعه تمام وهنروح عندنا هنا في الاي فريم وهحط لك لينك انستجرام عندك هنا في الاس ار سي بتاعه الاي فريم لو انا جيت لك هنا وعملت لك دلوقتي ريلود هيقول لك دلوقتي ان موقع انستغرام ما بيسمح ان يتعمل له اي فريم لو انا اخدت لك موقع فيسبوك كوبي وحطيته لك هنا في نفس المكان ده اهو وجيت لك هنا وعملت لك دلوقتي ريلود هيقول لك ان موقع فيسبوك ما بيسمح انه يتعمل له تضمين لو خدت لك اكاديميه نوفل برض نفس الموضوع وحطيتها لك هنا سريعا يعني عشان ايه الفكره وصلت اصلا فلو خدتها لك هنا وعملت لك دلوقتي ريلود هيقول لك دلوقتي ان اكاديميه نوفل ما بتسمح اني تعمل لها تضمين هنا المبرمجين اللي عملوا المواقع دي عملوا حمايه من التضمين قال لك يا عم انا ما بسمعش انك تعمل تضمين للموقع بتاعي في اي موقع ثاني تمام فالموضوع ده ما يعتمد عليه قوي قشطه قشطه جدا جدا جدا هنشيل الكلام ده عندنا حاجتين تانيين برضو بيعملوا نفس الوظيفه بالظبط وهم الاوبجكت والانبات فتعال دلوقتي لما نتكلم عليهم اول تاج عندنا وهو الاوبجكت وده ليه اوبنين تاج وكلوز تاج وعندنا برضو تاج تاني وهو البد ولكن ده مالوش كلوزنج تاج ده سينجل تاج بالمنظر ده ولكن ده بيعمل نفس اللي بيعمله الاوبجكت بيعمل نفس اللي بيعمله الاي فريم فتعال كده لما نجيب عندنا لينك موقع ويكيبيديا تمام احطلك اللينك ده في الاي فريم عندك في الاس ار سي علشان اعمل لله تضمين عندك في الموقع قشطه طيب علشان اعمل تضمين من خلال الاوبجكت بستخدم عندي حاجه اسمها داتا وبحط فيها اللينك ده بجيب اللينك وبحطه عندك هنا في الداتا ف الداتا بتساوي عندك الاس ار سي افهم الحته دي كويس جدا الاثنين بيعملوا نفس الموضوع بالظبط الثنين بيعملوا تضمين لاي موقع خارجي تعال حتى كده قبل ما نشوف البد لما اجيلك هنا واعملك دلوقتي ريلود فاللي قدامك دي هي الاي فريم او الواحده دي هي الاي فريم والتانيه دي هي الاوبجكت الاتنين زي بعض بالظبط ولكن الاي فريم بتستخدم عندك الاس ار سي اما الاوبجكت بتستخدم عندك الداتا الانب بتستخدم عندك الاس ار سي يعني زي الاي فريم بالضبط وبتحط فيها اللينك عادي جدا وهتعمل لك تضمين بالظبط ده هتقول لي شبه بعض هقول لك خلي بالك ان الاي فريم بص الاي فريم ليها بوردر فريم اما الاوبجكت والمبيد مالهمش بوردر فريم ده اول اختلاف سجله عندك طيب كمان برض زي ما انت قادر ان انت تعمل تضمين لموقع خارجي في الموقع بتاعك انت ممكن تعمل تضمين لصفحه ثانيه من نفس موقعك في الصفحه بتاعتك يعني انت ممكن يكون عندك صفحه اش تي ام ال تانيه جنب الصفحه بتاعتك دي وتعملها تضمين من خلال الاي فري او الاوبجكت او الب فتعال دلوقتي لما نعمل عندنا صفحه اش تي ام ال جيلك هنا كليك يمين ثم نيو فايل او على فكره ممكن اجيلك هنا على العلامه دي بتعملك على طول فايل فسمي دلوقتي الفايل ده تست دوت اشي ام ال سميه انت بالاسم اللي انت عاوزه ولكن لازم يكون بامتداد اتش تي ام ال هضغط هنا على انتر وهكتب هنا جواها اي كلمه للدلاله بس مش اكتر علشان لما نفتحها يعني وكده وهقفل لك دلوقتي الصفحه دي بالشكل ده هجيلك هنا جوه الاي فريم وهعمل دلوقتي تضمين للصفحه دي جوه الصفحه بتاعتي فجيل لك هنا في الاس ار سي كل شغلنا هيكون في الاس ار سي هجيلك هنا واكتبلك اسم الصفحه او مسار الصفحه لو ما كانتش موجوده جنب الملف يعني لو هي كانت موجوده في مجلد تاني فبحط عندك المسار هنا في الاس ار سي طيب جميل جدا جدا حطها عندك برضو هنا في الاوبجكت وهحطها عندك هنا برض في الانب فانا دلوقتي عملت تضمين من خلال التلاته تاجز لو انا جيت لك هنا وعملتلك دلوقتي ريلود ده شكل الصفحه بتاعتك اهو من خلال الاي فريم وده شكل الصفحه عندك من خلال الاوبجكت وده من خلال البد ملاحظ طبعا الفريم بوردر بتاع الاي فريم ومافيش عندك هنا فريم بوردر ل الاوبجكت ولا البد كمان برضو ممكن ان انت تفتح عندك صوره او فيديو او ملف صوت وتعال دلوقتي لما نجرب مع بعض انا عندي هنا ملف ميديا في صور وملف بي دي اف وصوت وحاجات كتيره جدا فتعال كده ل لما نحط عندنا صوره جنب ملف الاتش تي ام ال تمام مؤقتا كده علشان تكون الصوره بس جنب الملف على طول ممكن دلوقتي تعمل تضمين للصوره دي من خلال الاي فريم فكتب لك هنا اسم الصوره ايج دوت جي بي جي تمام من خلال الاي فريم ومن خلال الاوبجكت ومن خلال الابد وهنا هتلاحظ اول اختلاف ما بين الاي فريم وبين الاوبجكت والانبات لو انا جيت لك هنا وعملت لك دلوقتي ريلود بص شوف بالشكل ده هتلاقي دلوقتي ان الاوبجكت والمبيد محافظين على الابعاد بتاعتهم لكن الاي فريم عندك الدنيا بايظه خالص ممكن مثلا نعمل شويه تعديلات يعني ممكن يدينهم كلهم نفس الطول فه جيلك هنا تعال كده وفي الاوبجكت وفي البيد هدي لهم كلهم نفس الطول وليكن مثلا 250 بيكسل علشان بس احاول ان انا اظبط الدنيا عندي بس مش اكترر فتمام الطول عندك يتظبط ولكن تشوف الدنيا عندك هنا مش مظبوطه عندك هنا فريم بوردر ممكن نشيله برضو من خلال الاي فريم فلو انا جيتلك هنا ممكن استخدم دلوقتي الفريم بوردر علشان اشيلك الفريم بوردر طبعا انا خليت قيمتها صفر عندك بالمنظر ده فلو انا جيتلك هنا وعملتلك دلوقتي ريلود اتشال عندك الفريم بوردر ممكن برضو اشيلك الاكرولين ده انا بحاول بس اظبط الدنيا واخلي الاي فريم تساوي عندك الاوبجكت والمبيد فجيل لك هنا واشيلك دلوقتي الاكرولين ده من خلال اتربيوت اسمه سكرولينج الاتربيوت ده لو انت خليت القيمه بتاعته نو هيشيلك الاكرولين ده الخط اللي معمول عندك هنا ده فلو انا دلوقتي عملتلك هنا ريلود اتشل لك الاكرولين ده برضو انت يعني الدنيا عندك مش متظبطه في عندك مسافه عندك هنا في المكان ده ممكن دي نظبطها من خلال ان احنا نوحد عندنا العرض هو هنا عرض الاي فريم زياده فممكن اجيلك هنا وندي لهم كلهم نفس العرض تس مثلا مثلا 200 اي رقم يعني مش مشكله لو عملتلك دلوقتي ريلود يعني الدنيا ظبطت عندك في الثلاثه احنا بنجرب بس الدنيا وبنحاول نفهم الفرق ما بين الاي فريم وما بين الاوبجكت وما بين البد ممكن برضو ان انت تعمل تضمين لفيديو عندك تعال كده لما نجيب عندنا فيديو ونحط عندنا جنب ملف الاتش تي ام ال بالشكل اللي قدامك ده يبقى انا دلوقتي عندي هنا فيديو اهو جنب ملف الاتش تي ام ال بتاعي فلو انا جيتلك هنا في الاس ار س وكتبت لك هنا فيديو دوت ام بي ف واخدتها لك هنا وبرضو عملت لها تضمين من خلال الاوبجكت وعملت لها تضمين من خلال البد لو جيت لك هنا وعملت لك دلوقتي ريلود عمل لك تضمين للفيديو لو شغلته لك هنا في الاي فريم شغال لو شغلته لك هنا في الاوبجكت شغال لو شغلته لك هنا في الابد شغال برضو ممكن ان انت تعمل تضمين لملف صوت ممكن اجيب لك ملف الصوت ده واحط عندك هنا تمام واجيلك هنا واعمل لك دلوقتي تضمين للملف ده كان اسمه ميوزك دوت امبي 3 هعمل لله تضمين في الاي فريم وهعمل له تضمين في الاوبجكت وهعمله تضمين في الامب 3 خلي بالك من العلامه السودا اللي هتظهر عندك على الملف الصوت خلي بالك برض في علامه سودا اهي من فوق ومن تحت دي انت ممكن تظبطها لو انت ظبطت الطول والعرض بتاع الفيديو برضو العلامه دي هتلاقيها ظهر عندك هنا في ملف الصوت ده الاي فريم وده الاوبجكت وده الانب طيب كمان برضو ممكن ان انت تعمل تضمين لملف بي دي اف فان عندي هنا ملف بي دي اف هجيبه لك هنا جنب ملف الاتش تي ام ال يبقى دلوقتي ملف البي دي اف ده جنب ملف الاتش تي ام ال يبقى ممكن دلوقتي اعمل لله تضمين هنا تمام كان اسمه سي اس 50 دوت بيدي ا انا بس بعرفك ان انت ممكن تعمل تضمين لاي حاجه وكل حاجه تقريبا تمام فهعمل لك تضمين في الاي فريم والاوبجكت والبد فلو انا جيتلك هنا وعملتلك دلوقتي ريلود فعمل لك تضمين لملف البيدي اف تعال كده بس لما نكبر علشان يظهر لنا كل الفيتشرز او ممكن على فكره نكبر عندنا من خلال الويتس اخليها لك مثلا 100% تمام خيلك 100% من حجم البراوزر و اخدها هنا كوبي واحطها هنا واحطها هنا قشطه يبقى هتكون عندك 100% تعال كده بس لما نصغر واعملك هنا ريلود اول واحد ده هو الاي فريم هتلاقي عندك هنا كل الفيتشرز بتاعه ملف البي دي اف تقدر ان انت تتصفح عندك الملف ده هو 194 صفحه وممكن ان انت تعمل له داونلود من هنا ممكن تعمل له داونلود لو عملتلك دلوقتي سيف هيعمل لك دلوقتي داونلود لملف البي دي اف نفس الكلام ده تقدر برضو تلاقيه عندك هنا في الاوبجكت هتلاقي عندك الملف وهتلاقي عندك كل الفيتشرز وهتلاقيها برض عندك هنا في البد تقدر ان انت تفتح ملف البي دي اف وتعمله تضمين في الموقع بتاعك زي ما انت عاوز من خلال الثلاث عناصر طيب انا عارف دلوقتي ان انت بتسال نفسك سؤال وبتقول لي عبد الرحمن انت علمتنا الوسم اللي هو اسمه ايج بتاع الصور وسم الفيديو وسم الاوديو لما احنا عندنا الاي فريم والاوبجكت والبت اللي هم بيعملوا نفس الحاجات بالظبط ليه يا عبد الرحمن علمتنا ايه الكلام ده هقوللك ببساطه وبكل هدوء الاوبجكت والابد خصوصا سيبك دلوقتي من الاي فريم الاوبجكت والمبيد لا يعتمد عليهم في تشغيل الميديا يعني ببساطه كده انت لو شغلت من عليهم ميديا مثلا فيديو اوديو ايا يكن الميديا دي فالمي بتاعه الاوبجكت والمبيد بتعتمد في تشغيلها على مكونات اضافيه وابلكيشن من الجافا الحاجات دي ما بقتش موجوده في المتصفحات الحديثه وخصوصا في الاجهزه المحموله يعني لو انت دلوقتي مثلا فتحت فيديو ممكن يشتغل معاك عادي زي ما اشتغل معانا من شويه لكن لو رحت علشان تفتحه من متصفح المستخدم مثلا وكان المستخدم ده فاتح موبايل الفيديو ده ممكن ما يفتحش عندهم لو انت رحت على موقع دبليو 3 سكولز وفتحت عندك درس البد هسيب لك على فكره كل اللينكات دي ان شاء الله تراجع كده وتذاكر كده مع نفسك هتلاقيه هنا عامل لك تحذير كبير جدا هيقول لك بص يا معلم اغلب المتصفحات ما بقتش بتدعم تطبيقات الجافا وما بقاش فيها المكونات الاضافيه اللي كانت بتشغل عندك الميديا وسايب لك هنا اقتراح بيقول لك بص يا معلم لو انت عاوز تشغل عندك صوره ما تستخدم عندك البيد امال تعمل ايه قال لك الافضل ان انت تستخدم عند الامج طب لو انت عاوز تشغل ملف اش تي ام ال اللي هو عاوز تعمل تضمين لموقع خارجي مثلا موقع ويكيب بيديا او عاوز تعمل تضمين لصفحه اتش تي ام ال من نفس موقعك قال لك بقى تعمل ايه قال لك ما تستخدم ولا البد ولا الاوبجكت امال نعمل ايه يا معلم قال لك استخدم الاي فريم وهقول لك ليه دلوقتي بنستخدم الاي فريم طيب لو انا عاوز اشغل فيديو او اوديو قال لك انت ما تشتغلش بالمبيد ولا الاوبجكت امال نعمل ايه يا معلم قال لك اشتغل بوسم الفيديو ووسم الاوديو نفس الكلام ده على فكره لو انت رحت هنا للاوبترا بالضبط هو نفس الكلام ده تعال كده لما نفتح عندنا الاوبجكت وننزل عندنا هنا هنلاقي عندنا هنا تعال كده نفس التحذير بالظبط اغلب المتصفحات ما بقتش بتدعم تطبيقات الجافا والمكونات الاضافيه وعا لك هنا الاقتراح اللي بيقول لك لو انت عاوز تشغل صوره اشتغل عندك بالاج وكل الكلام اللي قلناه من شويه تمام فنفس الكلام اللي قلناه على الاوبجكت هو نفس الكلام اللي قلناه على البد طيب ليه بقى الاي فريم متميز شويه عنهم ها ليه لان الاي فريم ما بيشتغلش عندك بالمكونات الاضافيه القديمه والكلام ده كله الاي فريم بيروح يشوف المتصفح بتاع المستخدم بيشتغل بايه وبيشتغل زيه يعني ببساطه كده الاي فريم بيروح كده يسال المتصفح ازيك سلام عليكم انت بتشتغل بايه النهارده فبيقول له والله انا بشتغل بكذا فالاي فريم يقول له طيب شغل لي الميديا بالحاجه اللي انت بتشتغل بيها تمام فالاي فريم هيشغل لك الميديا ايا كان المتصفح وايا كان النظام اللي المستخدم بيشتغل عليه علشان كده يوتيوب معتمد على الاي فريم فدلوقتي انا لو عاوز اعمل تضمين لفيديو من على اليوتيوب في الموقع بتاعي فاليوتيوب بيعتمد هنا على الاي فريم علشان تعمل تضمين لاي فيديو بتختار طبعا الفيديو بتاعك زي ما انت عاوز وبتيجي عندك هنا كليك يمين ثم نسخ رمز التضمين او كوبي امبد كود لو هي بالانجليزي طبعا كوبي انبد كود طبعا تكون عندك العلامه دي اول ما انت بتعمل نسخ اللي انت نسخته دلوقتي ده هو كود اي فريم فلو انا جيت لك هنا تعال كده لما نشوف احنا نسخنا ايه امسح كده كل الكلام ده لو عملت لك هنا بيست تعال كده ننسخ الكود اللي احنا كنا واخدينه او نلصق الكود اللي احنا كنا واخدينه هنلاقيه دلوقتي حاطط لنا كود اي فريم الكود اللي انت كنت واخده نسخ من الفيديو ده هو كود اي فريم يوتيوب عملته لك وظبطت لك ظبطت لك العرض وظبطت لك الطول وحطيت لك عندك هنا الاس ار سي خلي بالك ان اللينك ده مش هو اللينك بتاع الفيديو او معلومه ادفانسد شويه لو انت ما فهمتهاش مش مشكله ولكن انا بس هشرحها لك برض اللينك اللي انا اخدته لك دلوقتي ده هو نفس اللينك ده باستثناء كلمه وتش شايف كلمه وتش دي بتشيلها وبتحط مكانها كلمه انبد فلو انا شلتلك الكلمه دي اهو كلمه انبت وحطيتها لك هنا مكان وتش بالشكل ده الحته دي كده كلها اللي هي وتش علامه الاستفهام والكا رمز اللي بعدها دول شلتهم وحطيت مكانهم كلمه انبد طبعا بالسلا بتاعتها هتلاقي ان الكود ده هو هو نفس الكود اللي انت بتاخده عندك من البت المعلومه دي ادفانسد ولو انت ما فهمتهاش مش مشكله طبعا اليوتيوب مظبطين هم الاي فريم حاطين له هنا اتربيوت اسمه تايتل اتكلمنا قبل كده عن الاتربيوت ده وعرفنا ان هو جلوبال اتربيوت وكلمه جلوبال اتربيوت يعني ممكن تستخدمه مع اي عنصر ممكن تستخدمه مع الاي فريم ممكن تستخدمه مع الاتش 1 البراجراف اي عنصر التايتل بيعمل لك عنوان للعنصر ده جميل جدا جدا كمان برض مستخدمين عندنا هنا فريم بوردر مخلينه صفر وكمان عاملين لك هنا الفيوتشرز بتاعه الفيديو الحاجات دي على فكره ما تفيدك بحاجه ومش مهم خالص ان انت تتعلمها دلوقتي مش وقتها يعني ولكن انا بس بعرفك هم عاملين ايه علشان تبقى انت فاهم كده الدنيا ماشيه ازاي الاتربيوت اللي اسمه الاو وده من خلاله بتضيف عندك الفيوتشرز بتاعه الميديا فهم عاملين لك هنا اوتو بلاي ده خاصيه في الفيديو بتعمل لك اوتو بلاي وعاملين لك هنا مقياس السرعه وعاملين لك هنا البكتشر ان بكتشر تعال كده لما نشوفها اكيد عاملينها اهي البكتشر ان بكتشر المهم ان هم بيضيفوا عندك هنا الفيوتشرز بتاعه الفيديو وكمان برضو حطين لك هنا الالو فول سكرين ودي اتاحه ان يكون عندك فول سكرين في الفيديو تعال كده لما اوريها لك علشان برضو تكون فاهم لو انا جيت لك هنا هتلاقي دلوقتي الفيديو لو انا دلوقتي فتحت لك الفيديو هتلاقي هنا ان في عن عندك هنا امكانيه ان انت تعمل فول سكرين المربع ده لو انت ضغطت عليه هيعمل لك فول سكرين او ملق للشاشه الملق ده انت بتعمله من خلال الاتربيوت اللي اسمه الاو فول سكرين لو انا لغيت لك الاتربيوت ده وجيت لك هنا وعملت لك دلوقتي ريلود انا بس بفهمك هم عاملين الاتربيوت دي ليه بالظبط فلو انا دلوقتي شغلت لك الفيديو ده مش هتلاقي عندك هنا المربع ده بص لو انا ضغطت لك عليه مش هيفتح لك دلوقتي الفول سكرين وهتلاقيه هنا كاتب لك بيقوللك ايه تعال كده وهتلاقيه كاتب لك هنا بيقوللك وضع ملق الشاشه غير متاح يعني انت ما تقدرش تعمل فول سكرين وده بسبب ان انت ماستخدمتش الاتربيوت اللي اسمه الاو فول سكرين خلي بالك ان الفيديو ده انت ممكن تعرضه عندك بالاي فريم او بال الاوبجكت او بالمبيت فلو انا خدتلك الكود ده تعال كده لو انا خدتلك اللينك ده اللي موجود عندك هنا في الاس ار سي ومسحت لك هنا الاي فريم دي هنشتغل عندنا بالاي يم تمام هنعرض دلوقتي الفيديو اللي من على اليوتيوب هنحطه على طول عندنا هنا في الاس ار سي نفس الموضوع ده تقدر تعمله عندك هنا في الاوبجكت فلو انا جيتلك هنا وكتبتلك هنا اوبجكت تمام وعملتلك هنا داتا وحطيت لك فيها نفس اللينك ده تمام حطيته لك هنا في الاوبجكت ونفس القصه دي عملتها لك هنا في الابد وجيتلك هنا وعملت لك هنا اس ار سي وحطيت لك هنا نفس اللينك ده فهنا هيعرض لك فيديو اليوتيوب وهنا هيعرض لك نفس الفيديو وهنا هيعرض لك نفس الفيديو فلو انا جيتلك هنا وعملتلك هنا ريلود فده الاي فريم وده الاوبجكت وده الانب التلاته بيعرضو ك نفس الفيديو ولكن اليوتيوب بتعتمد عندك على الاي فريم ليه الاي فريم لان الاي فريم بيعرض لك المحتوى حي المحتوى مباشر بيشوف المتصفح بتاع المستخدم بيشتغل ازاي وبيشتغل زيه بالظبط بعكس الاوبجكت والمبيد تمام وصلت اظن تقريبا انت مش هتلاقي شرح باللغه العربيه فصلها لك بالشكل ده النهارده هنتكلم على الداونلود وهنتكلم على اللايف سيرفر هنعرف ازاي بنفتح الملف ده من خلال اللايف سيرفر تعال نبدا كلامنا بالداونلود انا دلوقتي عاوز اعمل عندي هنا لينك لو المستخدم ضغط على اللينك ده يحمل له صوره او فيديو او ملف بي دي اف او ملف ام بي 3 او حتى ملف اتش تي ام ال عادي جدا ازاي بنعمل كده وايه المشاكل اللي هتقابل انا تعالوا دلوقتي لما نشوف مع بعض علشان تعمل عندك لينك بتعمل عندك وسم الاي واسم الا a هو اللي بيعمل لك لينك هيجي لك هنا ما بين البدايه والنهايه لوسم الاي وهكتب لك هنا اي كلمه عاوز الكلمه دي تكون لينك لو المستخدم ضغط على الكلمه دي فهعمل لك هنا ريلود طبعا انت ممكن تكتب هنا الكلمه اللي انت عاوزها الكلمه دي بتتحول عندك هنا للينك انا دلوقتي عاوز لو المستخدم ضغط على اللينك ده يحمل له مثلا الصوره دي نعمل الكلام ده ازاي بتروح عندك هنا للاتش ار اي اف وبتكتب عندك مسار الصوره فجيل لك هنا واكتب لك دلوقتي ايج دوت جي بي اي جي زي ما مكتوب عندك هنا وطبعا طالما هي جنب الملف فبتكون وكلكم عارفين لو انا ضغطت لك دلوقتي على اللينك ده هيفتح لك الصوره انا مش عاوز افتحها انا عاوز اعمل لها داونلود بنعمل الكلام ده ازاي علشان تعمل عندك داونلود ف بتيجي عندك هنا في واسم الاي وبتقول له بدل ما تفتح الصوره اعمل لها داونلود بنعمل الكلام ده ازاي بنعمل الكلام ده من خلال اتربيوت اسمه داونلود الاتربيوت ده بيخلي لك الملف اللي جوه الاتش ار اي اف يتعمله وداونلود مش يتفتح فاهم انت الاول كنت لما بتضغط على اللينك ده بيفتح لك الملف ده لكن مع الداونلود مش هيفتح لك الملف هيعمل لك داونلود للملف وجوه الداونلود انت بتكتب عندك اسم الملف اللي انت عاوز يتعمل له داونلود فمثلا انا دلوقتي عاوز لما الصوره دي يتعمل لها داونلود يكون اسمها مثلا فوتو تمام او الاسم اللي انت عاوزه وممكن ما تكتبش حاجه خالص ممكن نشيلها كده ونخليها د دون ل بالشكل ده وبكده دلوقتي هيعمل لك داونلود للملف ده بنفس الاسم بتاعه الاصلي طيب دلوقتي هل انت كاتب الكود ده صح وهل هيشتغل الاجابه انا كاتبه صح ولكن مش هيشتغل وتعالوا دلوقتي لما نشوف ليه ونعالج المشكله دي مع بعض هجيلك هنا تمام وهعمل لك دلوقتي ريلود وهضطر هنا على اللينك ده هيفتح لك الصوره يا عم انا بقول لك اعمل لها داونلود اعمل لها تحميل بتفتحها ليه هل انا كاتب بالكود بشكل غلط الاجابه لا الكود اللي مكتوب قدامك ده صحيح بنسبه 100% طيب ازاي الكود ده صح وازاي هو هنا ماحم لكش الصوره ازاي لما انا ضغطت لك هنا على اللينك ده فتح لك الصوره ما حملها الداونلود ما بتشتغلش مع الملفات المفتوحه بشكل عادي بالشكل اللي انت فتحته ده الداونلود بتشتغل مع الملفات اللي مفتوحه من خلال سيرفر يعني ايه الكلام ده انا دلوقتي فتحت الملف ده ازاي ملف الاتش تي ام اللي ده الملف اللي شغال قدامنا ده انا فتحته بشكل عادي جدا رحت لك هنا على الملف بتاعي ده وضغطت لك هنا دبل كليك ففتح لي الملف الطريقه اللي انت فتحت من خلالها الملف ده ما بتشغل لكش الداونلود الله طب امال الداونلود دي بتشتغل ازاي الداونلود دي بتشتغل لما الملف ده يكون مفتوح عندك من سيرفر ركز دلوقتي في اللينك بتاع الملف ده قبل ما نتكلم على السيرفر دلوقتي الملف ده مفتوح بشكل عادي جدا فلو انا جيت لك هنا على اللينك هتلاقي دلوقتي ان اللينك بتاعه هو فايل بيبدا عندك بفايل لان الملف ده هو ملف عادي جدا على الكمبيوتر بتاعك فبيبقى عندك بفايل ثم مسار الملف ركز قوي في اللينك ده لينك الملف اللي مفتوح عندك من سيرفر بيختلف عن اللينك ده طيب ازاي افتح لك الملف ده من خلال السيرفر ببساطه الفيجوال استوديو كود وفرت لك اداه مهمه جدا وهي اللايف فمن خلال اللايف سيرفر ممكن ان احنا نفتح الملف بتاعنا ده اللي هو ملف الاتش تي ام ال من خلال لايف سيرفر فعلشان تثبت عندك الاداه دي بتروح عندك هنا للاكستنشن او الاضافات وبتيجي عندك هنا في السيرش وتبحث عن اداه اسمها لايف سيرفر بالشكل اللي قدامك ده هيظهرلك دلوقتي اول اداه اللي هي قدامك دي هضغط لك هنا عليها وهجيلك هنا وهعملها ستول بالشكل ده اول ما تتثبت عندك بتيجي عندك هنا انا دلوقتي خلاص ثبت عندي اللايف سيرفر هاجيلك هنا على الملف اللي انا عاوز افتحه من خلال اللايف سيرفر وضغط هنا كليك يمين ثم اوبن وز لايف سيرفر انا دلوقتي عاوز افتحلك الملف ده من خلال اللايف سيرفر فه دغط لك هنا عليها وركز قوي في الملف ده اول حاجه هتركز عليها هو الدومين او اللينك اللي ظاهر قدامك هنا بص شكل اللينك ده وبص شكل لينك الملف العادي بتاعك ده لينك الملف العادي اللي بيبدا عندك بفايل ثم مسار الملف مسار الملف لان انت فاتح الملف ده بشكل طبيعي عادي جدا لكن اللايف سيرفر بتلاقي عندك الدومين بشكل مختلف بالمنظر اللي قدامك ده فده اول اختلاف ما بين الفايل العادي وما بين اللايف سيرفر تاني اختلاف هو ان اللايف سيرفر بيعمل ريلود من نفسه ده بغض النظر طبعا عن موضوع داونلود اللي احنا هنتكلم عليه دلوقتي ان شاء الله ولكن خلينا نتكلم على اللايف سيرفر نفسه فاللايف سيرفر بيعمل لك ريلود من نفسه يعني اي تغيير انت هتعمله عندك هنا اي حاجه تعال كده لما نصغر علشان بس اوريك اي تغيير انت هتكتبه عندك هنا لو كتبت لك دلوقتي اتش 2 وجواها مثلا اي كلمه فالكلمه دي هتظهر لك هنا بشكل مباشر في اللايف سيرفر الكلام ده مش هتلاقيه في الملف العادي بتاعك مش هتلاقي التغيير ده غير لما تعمل عندك هنا ريلود يبدا التغيير يظهر عندك طبعا لو انا جيت لك هنا في اللايف سيرفر وعملت لك هنا اي تغيير عندك في الملف اي تغيير فالتغيير ده هيظهر عندك هنا في اللايف سيرفر بدون ما انت تعمل ريلود لكن الملف العادي لو انا جيت لك هنا مش هلاقي كل التغييرات اللي انت عملتها دي غير لما تيجي هنا وتعمل دلوقتي ريلود فتعالوا دلوقتي لما نتكلم على اهم موضوع وهو الداونلود طبعا الملف العادي لو انا جيت لك هنا وضغطت لك هنا على اللينك ده مش هيعمل لك داونلود هيفتحلك بس الملف لكن لو انا فتحتلك اللايف سيرفر وضغط لك هنا على اللينك ده هيعمل لك داونلود للصوره بص عمل لك داونلود للصوره طبعا انت في الداونلود بتكتب عندك اسم الفايل فهو هنا لما عمل لك داونلود عمل لك داونلود لفايل اسمه ايج دوت جي بي جي اللي هو اسم الملف الاصلي لكن انا ممكن اجي لك هنا واقول لك مثلا سميه فوتو او سميه تست سميه الاسم اللي انت عاوزه فلو انا جيت لك هنا هو طبعا بيعمل ريلود من نفسه فلو انا جيت لك هنا وضغطت لك هنا على اللينك ده هيعمل لك دلوقتي داونلود لملف اسمه ايه لملف اسمه فوتو طبعا البراوزر بيعرف لك الامتداد من نفسه لو ضغطت لك عليها هيفتح لك دلوقتي الملف ده طبعا مش محتاج اقول لك ان انت ممكن تحمل عندك تعال كده ممكن تحمل عندك صوره او فيديو او صوت او ملف بي دي اف او ملف اتش تي ام ال او اللي انت عاوزه فتعال هنا لما نغير بس الاسم بس علشان يكون منطقي هسميها بس داونلود طبعا هو بيتعمل له ريلود من نفسه طبعا الملف العادي مش بيتعمل له ريلود من نفسه فهتلاقي زي ما كان قبل كده داونلود ايمج مش هتغير غير لما تعمل له ريلود خلينا دلوقتي شغالين في اللايف سيرفر انا ممكن اجيلك هنا جنب الملف و اجيب لك مثلا فيديو هنقل لك بس الفيديو علشان بس يكون جنب الملف مش اكتر من كده فدلوقتي الفيديو اللي اسمه ديمو دوت ام بي ف جنب الملف بتاعك فجيل لك هنا جوه الاتش ار اي اف وهكتب لك دلوقتي اسم الملف اللي هو الفيديو بتاعك اللي هو ديمو دوت ام بي4 وهنا بتكتب عندك اسم الملف فانا ممكن مثلا اسميه فيديو ممكن انت تسميه الاسم اللي انت عاوزه لو انا جيت لك هنا وضغطت لك دلوقتي على داونلود فهن لقي دلوقتي حمل لك فيديو حمل لك فيديو اسمه فيديو دوت ام بي4 البراوزر عرف الامتداد بشكل تلقائي لو انا دغط لك هنا هيجيب لك دلوقتي فيديو اهو بالمنظر اللي قدامك ده طبعا ممكن تحمل عندك فيديو او صوت طبعا انا عندي هنا صوت تعال كده لما نجيبه سريعا بس كده انا بس بوريك ان انت ممكن تحمل اللي انت عاوزه فممكن احمل لك دلوقتي صوت اسمه ميوزك دوت ام 3 ممكن اسميه مثلا هنا ساوند تمام لو ضغطت لك هنا على اللينك ده هيحمل لك دلوقتي الصوت اللي اسمه سوند دوت امبي 3 عرف الامتداد بشكل تلقائي ممكن احمل لك اللي انت عاوزه ممكن اجيلك هنا تعال كده لما نجيب عندنا ملف البي دي اف ممكن كمان برضو احمل لك ملف البي دي اف عادي جدا فبتكون انت عاوزه ممكن اسميه مثلا سي اس ي تمام وهاجي لك هنا وضغط لك هنا على اللينك ده فهحس بي دي اف لو فتحته لك هلاقي ملف بي دي اف عادي جدا جدا طيب جميل جدا ممكن برض تحمل عندك ملف اتش تي ام ال فممكن اجيلك هنا كليك يمين ثم نيو فايل واعمل لك دلوقتي ملف اتش تي ام ال عادي هسميه تست دوت اتش تي ام ال فدلوقتي انا عندي هنا ملف اش تي ام ال جنب الملف بتاعي مش مهم اكتب اي حاجه جواه عادي جدا انا بس احمله مش اكترر فهاج لك هنا واكتب لك مسار الملف وهنا انت بتكتب عندك اسم الملف اللي انت عاوز تحمله طبعا انت لو ما كتبتش حاجه بيتم تحميله باسمه الاصلي فلو انا جيت لك هنا وعملتلك دلوقتي داونلود ف اللي اتحمل عندك اللي اتحمل عندك ملف اسمه تست دوت اش تي ام ال ولو انا فتحته ففتح لك ملف عادي جدا تعال كده لما اوريك فتح لك ملف اتش تي ام ال عادي جدا اهو قدامك هنا فايل ومسار الملف اللي اسمه عندك تست دوت اش تي ام ال بالمنظر اللي قدامك ده فانت دلوقتي تقدر ان انت تحمل عندك اي حاجه من خلال الداونلود وطبعا لازم تكون فاتح عندك اللايف سيرفر طبعا انت في الموقع بتاعك لما يكون عندك موقع ان شاء الله مش هتحتاج للايف سيرفر لان ساعتها الموقع بتاعك هيكون مرفوع على سيرفر هوست بجد انت هتكون ساعتها رفعه على هوست او سيرفر بجد فساعتها الداونلود دي هتشتغل عندك بدون اي مشاكل