السلام عليكم ورحمة الله وبركاته معكم عبد الرحمن جمال والنهاردة هنكتب اول كود HTML بادينا وبشكل فعلي علشان تكتب كود HTML فانت المفروض تلتزم بقواعد وقوانين HTML القواعد والقوانين دي اسمها سينتاكس فانت لو التزمت بالسينتاكس دي هتعرف تكتب كود اتش تيم إل مزبوط ولو انت ملتزمتش بالسينتاكس دي مش هتعرف تكتب كود اتش تيم إل الموضوع عامل زيه زي اللغات البشرية بالزبط فإحنا عندنا في اللغات البشرية حاجة اسمها القواعد النحوية اللي نقدر نشبهها بالسينتاجز نفس الموضوع موجود عندنا في الـ HTML ولحصن الحظ فالسينتاجز بتاعت الـ HTML سهلة جدا الـ HTML معتمدة على الـ Tags يعني إيه الـ Tags؟ دلوقتي هي المواقع بتاعتنا دي بتتكون من إيه؟ المواقع ممكن يكون فيها عنوان، ممكن يكون فيها برغراف، ممكن يكون فيها صورة، ممكن يكون فيها فيديو ممكن يكون فيها أزرار يكون فيها ممكن يكون فيها حاجات كتيرة جدا. طيب انا عاوزك تفهم ان كل الكلام اللي قدامك ده كل الحاجات اللي قدامك دي هي عبارة عن اضافات او انت بتضيفهم فاحنا في عندنا اضافة او لعنوان. وعندنا اضافة او لباراجراف. وعندنا تاج للصور وعندنا تاج للفيديو وتاج للأوديو وتاج للازرار وكل حاجة في الموقع بيكون لها في فالتاج.
الـ HTML مبنية على التاجز وطريقة كتابة التاجز مش صعبة جدا انت بتكتب عندك علامة الأصغر من وبعد كده بتكتب عندك اسم التاج وبعد كده بتكتب عندك علامة الأكبر من دي كده اسمها فتحة التاج وبتيجي عندك في النهاية وبتقفل عندك التاج بالشكل ده بإنك بتضيف عندك اللي سلاش بالشكل ده وبكده بتكون فتحت عندك التاج وقفلت عندك التاج بالشكل اللي قدامك ده وبتكتب عندك المحتوى ما بين البداية وما بين النهاية لالتاج عارف انك لسه مش فاهم فهات على دلوقتي لما نفهم مع بعض من خلال خلال الكود. لو انا جيت لك هنا في صفحة الفضية اللي قدامك دي وكتبت لك دلوقتي اي كلمة. الكلمة اللي انا بكتبها دي مش تاج اتش تيم ال. دي كلمة عادية جدا.
لو انا جيت لك هنا وعملت لك دلوقتي الكلمة دي ظهرت عندك هنا. طيب ازاي دلوقتي الكلمة دي ظهرت وده مش تاج اتش تيم ال. دلوقتي انا عاوزك تفهم ان صفحة دي بتعامل معاملة بتعامل معاملة المستند الكتابي زيه زي اي ملف كتابي موجود عندك.
فلو انت جيت هنا وكتبت دلوقتي اي كلمة في الدنيا الكلمة دي هتظهر عندك هنا. ولكن الكلمة دي مش من مكونات الموقع. يعني الكلمة دي مش عنوان للموقع ولا هي براجراف ولا هو عنوان بوست ولا سبان ولا اي حاجة من مكونات الموقع دي كلمة عادية جدا. علشان تحول الكلمة دي لاحد مكونات الموقع بتستخدم عندك التاجز.
وهي دي الفكرة كلها. فتعالى دلوقتي لما نجرب مع بعض دي نحول الكلمة دي لعنوان الموقع انا دوري دلوقتي مش ان انا اعلمك العنوين او مش وليس أني أعلمك تاج العنوان أنا دولي دلوقتي أني أنا أفهمك يعني بس كلمة تاج دلوقتي تاج العنوان هو تاج الهيد وتاج الهيد دي ده أنت علشان تعمله بتفتح عندك دلوقتي علامة أصغر من وحرف الـH حرف الـH ده بيرمز عندك للهيد فلو أنت عاوز تعمل عندك عنوان الموقع بتستخدم عندك الـH عاوز تعمل عنوان بوست عاوز تعمل عنوان مقالة عنوان لأي حاجة في الدنيا بتستخدم عندك الـH الـ HD المقاسات اللي فيها بتتقسم عندك من 1 و 2 و 3 و 4 و 5 و 6 واحد ده هو اكبر مياس وستة هو اصغر مياس. فلو انا دلوقتي جربت لك تعالى دلوقتي لما هنجربه.
لو انا جيت لك هنا وقفلت لك ده هتلاقي دلوقتي عمال لك هو القفلة بتاعة فانت ما بين البداية للتاج وما بين النهاية بتحط عندك بتحط عندك الجملة اللي انت عاوزها تكون عنوان للموقع ده. فلو انا جيت لك هنا وكتبت لك دلوقتي نفس الكلمة لمجرد الاختبار بس مش اكتر. عاوزك دلوقتي تاخد اخد بالك من مقاس الكلمة دي لو عملت تقسيم الهاتف فهذا هو مقاس الكلمة العادية وحجمها متغير التأثير الذي حصل هو تأثير تاج الهاتف لو قمت بقسيمه أكثر فهذا هو مقاس الكلمة العادية ولكن هذا مقاس الـ H1 ويوجد أيضا الـ H2 وهذا حجمها أصغر من الـ H1 من تعالى كده لما نجرب.
فدلوقتي احنا عندنا وعندنا هي اكبر من. لو انا جيت لك هنا وعملت لك دلوقتي فده حجم ده حجم. كمان برضو عندنا وفور وفايف وسكس. تعالى دلوقتي لما هنكتبهم مع بعض سريعا كده. هنا وهنا وهنا وهنا.
لو انا جيت لك هنا وعملت لك دلوقتي فده حجم الـH1 ده الـH2 ده 3 اشتركوا 6 طيب احنا كده قطعنا شوت كويس عملنا إنجاز كويس فهمنا تركيبة التاجز خلي بالك احنا مش بنتعلم الـ H1 و الـ H2 و كل الكلام ده كل الكلام اللي كل تاج الهيد القدامك ده هيكون إن شاء الله دروس بعد كده أنا دلوقتي أعلم تركيبة التاجز. احنا دلوقتي فهمنا شكل واحد بس من التاجز. وهي التاج اللي بيكون لبداية وبيكون ليه نهاية.
تمام جدا ومية مية. انا بقى عاوز اكتفها من احنا عندنا شكل تاني من التاج. التاج المرضى ما بيكونش ليه ولا بداية ولا نهاية بيكون single tag تعالى كده لما ناخد مثال على tag الـ HR التاج اللي قدامك ده ملوش ولا بداية ولا نهاية هو بيتكتب بالشكل اللي قدامك ده طيب ليه ملوش ولا بداية ولا نهاية ببساطة لإن مفيش محتوى تضيفه عندك جوه التاج ده يعني إحنا هنا كان عندنا بداية والنهاية لإن في محتوى تقدر أن أنت تضيفه عندك ما بين بداية ونهاية التاج لكن الـ HR ده هو بيعملك سطر تعالى كده لنورها لك علشان تكون فاهم شايف السطر اللي قدامك ده سطر او هي اصلا كلمة هي اختصار لكلمة تمام? فانت مش محتاج ان انت تقفل عندك التاج علشان تضيف عندك محتوى.
تمام? لان ما فيش اصلا محتوى تقدر ان انت تضيفه عندك ما بين. نفسها هي عبارة عن محتوى. هي نفسها عبارة عن اضافة.
انا عاوز اقول لك ان اللي هي بتكون انت ممكن تكتبها عندك بالشكل ده وممكن تكتبها عندك بالشكل ده. في ناس بتميز عناصر بالشكل اللي قدامك ده. فكده صح وكده برضو صح تمام جدا جدا طبعا هي بتعملك سطر لو انت قررتها تعملك سطر تاني هكذا ولو قررناها تالت هتعملك برضو سطر تالت زي ما موجود قدامك هنا طيب انت دلوقتي تعلمت الفرق ما بين التاج العادي وما بين السنجل تاج فيه كمان شوية تيبس مهم جدا ان انت تكون عارفهم دلوقتي لو انت كتبت عندك الكود بالشكل ده كتبت دلوقتي عندك سطر كود وكتبت دلوقتي سطر كود تاني تحته لقد قمت بالرلو الاتنين في الاوتبوت جم كل واحدة فيهم على سطر.
كمان برضو لو انت كتبتهم عندك على نفس السطر مش هيحصل فرق عندك في الاوتبوت. كل واحدة فيهم برضو هتيجي عندك على سطر لوحدها. فلو دلوقتي انا جيت لك هنا وعملت لك دلوقتي مفيش اي اختلاف.
ليه? لان الاتش ون ده هو عنصر بلوك. ومعنى كلمة عنصر بلوك طبعا احنا هنشرح ان شاء الله بعد كده يعني كلمة بلوك دي.
ولكن بشكل مبداي العنصر البيوك بياخد سطر كامل لوحده. فسواء انت كتبته هنا على سطر لوحده. كتبتو عندك هنا بالشكل ده.
او كتبتهم على نفس السطر. فكده كده كل واحدة فيهم هتاخد سطر عندك في الاوتبوت. الاوتبوت اللي هو البروزر بتاعك ده. تمام جدا جدا.
كمان برضو المسافات. تعالى كده. المسافات اللي انت بتعملها هنا. كل المسافات دي بيتم تجاهلها في الاوتبوت.
فلو انا جيت لك هنا وعملت لك دلوقتي ولا في اي اختلاف حصل. لو انا جيت لك هنا وجبت لك عربية نص صنع اللي مليانة مسافات وحاططها هنا ولا في أي اختلاف هيحصل عندك في فتاخد بالك جدا برضو من المواضيع دي. تمام?
تعالى كده لما نشيل عندنا كل المسافات دي. نفس الكلام اللي انا قلته لك ده. تقدر برضو ان انت تطبق عندك جوال تاج نفسه.
جوال تاج عندك هنا كل المسافات دي بيتم تجاهلها. لو انا جيت لك هنا وعملت لك دلوقتي عمل لك مسافة واحدة بس. تعال كده لما بيانها لك اكتر. شل دلوقتي كل المسافات دي.
وتعال لي هنا في وعملك كل المسافات دي. شايف كل المسافات دي هيتم تجاهلها. وهي عامل لك مسافة واحدة بس لو عملت لك دلوقتي reload فهي مسافة واحدة بس اللي اتعملت عندك تمام؟ تمام جدا جدا فناخد بالنا دلوقتي من الموضوع ده تعالي كده طيب افرد دلوقتي انا عاوز اعمل مسافة افرد دلوقتي انا عاوز انزل سطر يعني انا دلوقتي عاوز الكلمة دي تكون في سطر وعاوز الكلمة دي تكون في سطر طبعا انا لو عملت لك دلوقتي reload مافيش اي حاجة هتحصل طيب اعملها ازاي عندنا تاج بيعملك الموضوع ده التاج ده ده اسمه وده.
ده بيدفلك لو انا دلوقتي وقفت لك عليه هيقول لك تعالى كده. هيقول لك دلوقتي ان انا بضف لك عندك يعني بضف لك عندك سطر جديد. لو انا جيت لك هنا وعملت لك دلوقتي نزل لك في سطر جديد. لو انا قررت دلوقتي تاني هنزل لك برضو في سطر جديد. وخلي بقى لو انت قررته على نفس السطر مش هيفرق احنا اتكلمنا في الموضوع ده.
فلو عملت لك دلوقتي ما فيش اي اختلاف حصل. تمام? فاكتبهم على نفس السطر أو في سطر الوحدة ومش هيفرق. لو انا عملت لك دلوقتي بي ار تانية هنزل لك سطر جديد.
لو عملت لك بي ار اه رابعة هنزل لك برضو سطر جديد. وصلت? طبعا خلي بالك انا هنا مش باعلمك البي ار والاتش وان والاتش ار والكلام ده.
انا بس بفهمك تركيبة الاتش تيم ال. كل الكلام ده ان شاء الله يتشرح في المستقبل لحد كده انت تمام اتمنى يا رب تكونوا فهمتوا واشوفكم ان شاء الله في فيديو جديد وسلام عليكم