lecture2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نيجي نفوت على البدي. قلنا البدي هي تاج البداية وتاج النهاية. أي شيء بدي أعرضه عندي في صفحة الويب، كله بكون عارضينه في تاج البدي. اليوم حنتعرف على أهم التاجات الأساسية اللي موجودة في صفحة الاتش تي إم إل. أول تاج عنا، عنا التاج اللي بحكي عنهم أنواع الهيدين. عنا تاج من إتش 1 لإتش 6. يعني خليني أكتبهم هيك. هي مثلاً كلمة ويلكم. نفس التاج. هي إتش 2، إتش 3، هي إتش 4، هي إتش 5. شوفوا، بغير في تاج البداية، بتغير مباشرة في التاج النهاية، لأنه بتكونوا منزلين الأوتورينيم تك. إيش بتقولي؟ مش بحجم الخط؟ هون أنا بغير في البداية، بتغير باي ديفولت بالنهاية، عشان موضوع الأوتورينيم، إنه نحن بنصلها. الخط عندكم واضح؟ صح ولا أكبره شوية؟ تمام.

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

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

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

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

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

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

الإن لاين المنت، البيسترم. تمام؟ طيب، الـ عنصر البدي وعنصر الهيد، برايكم يعتبروا بلوك ولا إن لاين؟ بلوك المنت. عنصر الهيد وعنصر البودي كتاجات أساسية يعتبروا تبروا بلوك المنت. نحن لحتى الآن اللي أخذناهم، أنواع الإتش 1 والبي، حكينا بلوك المنت. البي الثانية والسترونج يعتبروا إن لاين المنت.

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

في عنا هذا كله اللي بنحكي فيه، إتش تي إم إل فورماتين. في عنا تاج اسمه مارك. حد بيعرف شو بيعمل؟ اه تفضل. ممتاز، بيعطيني الباك جراوند كل باللون الأصفر على الكلمة اللي أنا بكتبها بهذا الشكل. برضه يعتبر من العناصر الإن لاين. في عندي بي وصب. هي صبولى، وهي صب الثانية. مين بيعرف إيش الفرق بينهم؟ تمام، واحدة للاس، وواحدة للي تحت. طيب، مين اللي للاس، ومين اللي للي تحت؟ مين اللي لأس؟ يعني الأس؟ تمام. وهذه؟ أنا صراحة كيف كيف تميزوهم؟ إنه البي هذه لفوق، فبنعمل لها للاس. البي اللي لتحت، للي تحت. زي إيش؟ للي تحت؟ الاتش 2 مثلاً كمثال، صح ولا لا؟ طيب كيف بنعملهم؟ هلا ركزوا معي. أنا بحكي إنه أنا في عندي هي مثلاً إتش 2 مكتوبة بهذا الشكل. هل أحط كل الكلمة بداخل الصب، ولا بس أحط الرقم؟ ممتاز، بس بحط الرقم هو اللي بداخل السب. طيب وباقي الجملة بايش بحطها؟ بداخل تاج أنا بدي إياه. بي إتش 1، إتش 2، طبعاً إتش 1 لا، إتش 2، إتش 3 وهكذا. نفس الحاجة لو أنا عندي خمسة أس اثنين. الأس طالع لفوق، فهو اللي بحطه بداخل الصب، وباقي الكلام بحطه على نفس السطر. تعالوا نجربها. هلقيت أنا في البداية حنسى إنه في عندي هذا الشيء. بدي أعمل بي مثلاً، بدي أحكي له: 2o. تمام، خليها كابيتال. هت باجي بحكي إنه رقم اثنين هي اللي جاية لتحت معي، صح ولا لا؟ فباجي هون بمسك رقم اثنين هذا، عشان تكونوا شايفين الفرق. بمسك رقم اثنين هذا، وايش بعمل معه؟ سب بهذا الشكل، زي هيك. تعال نعمل ريفريش. شفتوا إيش اللي صار؟ بهذا الشكل. وين الشيء اللي بدي إياه هو اللي بضيفه عندي بداخل السط. نفس الحاجة في خمسة أس اثنين، كمثال. باجي بحكي لو بدي أعملها بداخل إتش 5 مثلاً. عندي خمسة أس اثنين. طيب الأس بده يجي مكانها ها، فبستخدم معها بي، هيها البيل اللي فوق، وباجي بحط.

هون الـ "اس" بداخلها بهذا الشكل. تعال نعمل ريفريش. زي ما أنتم شايفين، لاحظت صوا أنه الـ "صب" الأولى والـ "صب" الثانية من العناصر الـ "بلوك المنت" ولا لا؟ كل واحدة اجت معي في سطر جديد، صح؟ فكل الـ "اتش تي ام ال" الـ "فورماتين" يعتبروا "ان لاين"، ما عدا الـ "بي" هذول الاثنتين. يعني يفترض اجي هان على الـ "بلوك المنت" وأضيف "صب" و"صب". تمام؟ لازم يكونوا عارفين وحافظين مين العناصر الـ "بلوك المنت" ومين العناصر الـ "ان لاين المنت". لحتى الآن تمام؟ حدا عنده سؤال؟

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

في عننا "تاج" ثاني اسمه "سنتر". بقدر من خلاله أواسط الكلمات اللي أنا بدي اياها. يعني مثلا، أنتم شايفين هنا أي كلمة أنا بضيفها في صفحة الـ "براوزر" كلها جاية من اليسار لليمين، صح ولا لا؟ بدون أي بس بدون أي حاجة. لو أنا في عندي كلمة معينة وبدي إياها تيجي هون في نص الصفحة، مبدئيا حنستخدم "تاج" اسمه "سنتر". مثلا، أجي أحكي "أحمد". فمباشرة حيجي عندي توسيط "أحمد" في نص الصفحة زي ما أنتم شايفين. طبعا هذا مبدئيا. الـ "سنتر" حناخذه في الـ "سي اس اس" 10 طرق من خلالها أعمل توسيط للعناصر. وكل طريقة من هذول الطرق لها استخدام معين. في عننا كثير طرق في الـ "سي اس اس"، بالـ "واسط" (flexbox)، في الـ "جريد" (grid)، في الـ "بوزيشن" (position). تمام؟ في الـ "ترانسفورم" (transform) برضه بنعمل توسيط للعناصر. في الـ "ترانزليت" (translate) بنعمل توسيط للعناصر. فكل ه الأشياء إن شاء الله حناخذها مب بشكل يعني لقدام. لكن مبدئيا، أي نص بدي أعمل له توسيط، في عننا "تاج" أساسي اسمه "سنتر". بقدر من خلاله أعمل توصيط للعناصر زي ما أنتم شايفين. بدل ما يبدأ معي من اليسار لليمين، اجا معي بالنص.

هل الـ "اتش تي ام ال فورماتين" هدول اللي كنا نحكي فيهم؟ أنا حبعث لكم اليوم الكتاب. حتلاقوهم موجودين في الكتاب. تمام؟ في هذا الصفحة. في عننا كمان الـ "انس" (ins) ما حكينا عنه. الـ "انس" بحكي لي لو أنا حطيت أي كلمة بداخله، هي مثلا كلمة "ويلكم" (welcome). بجيب لي خط تحت الكلمة. تعال نعمل ريفريش. هي الـ "انس". خط تحت الكلمة. نفس هذا الـ "تاج" في عندي "تاج" ثاني بيعمل هذا الكلام اسمه "يو" (u). اختصار لكلمة "اندرلاين" (underline). حط داخله كلمة "ويلكم". حيعمل لي نفس الشيء بهذا الشكل. الـ "انس" والـ "يو" الاثنين بيعملوا خط يكون عندي تحت الكلمة. حناخذ في الـ "سي اس اس" خاصية برضه بتعمل هذا الكلام، أنه أنا أقدر أحط خط تحت الكلمة. لحتى الآن تمام؟ بالنسبة للـ "اتش تي ام ال فورماتين". موجودين معكم هنا. حابعث لكم الكتاب عشان تشوفوهم اليوم. هذول كل الـ "اتش تي ام ال فورماتين" اللي حكينا فيهم. بيهمني جدا أعرف مين عناصر منهم "بلوك المنت"، مين عناصر "ان لاين المنت". كلهم يعتبروا "ان لاين" ما عدا الـ "بي" والـ "صب". تمام؟ بالاضافة أنه في عندي عناصر "ان لاين المنت" ثانيين، اللي هي حكينا عفوا "بلوك المنت" اللي هم الـ "بي" وأنواع الـ "هيدينج" (heading).

نيجي الآن ناخذ كيف نضيف صورة في صفحة الـ "ويب" تبعتي. بحكي لي لاضافة صورة في عندي "تاج" اسمه "إيمج" (img). طبعا إذا كنتم منزلين الـ "إكستنشنز" (extensions)، في كثير "تاجات" حتستخدموها. مش حتروحوا تكتبوا الـ "أتربيوت" (attribute) أنتم لحالكم. لا، البرنامج من حاله حيعطيكم إياهم. فعندي "تاج" الـ "إيمج" معه تو "أتربيوت" مهمين جدا. "أتربيوت" اسمه "إس آر سي" (src) اختصار لكلمة "سورس" (source). و"أتربيوت" اسمه "ألت" (alt) اختصار لكلمة "ألترنيتيف" (alternative). نص. حدا بيعرف ايش بيعملوا هذول الـ "أتربيوت"؟

ممتاز.

طيب، هلقيت الـ "إس آر سي" مسار الصورة. ايش يعني مسار الصورة؟ يعني وين الصورة موجودة، صح ولا لا؟ يعني أنا بإمكاني هون إذا الصورة موجودة على الـ "ديسك توب" (desktop) أحكي له الـ "إس آر سي" عندي "ديسك توب" سلاش مثلا موجودة في مجلد اسمه "إيمجز" (images). أحكي له اسم المجلد "إيمجز" سلاش اسم الصورة مثلا اسمها "إكس" دوت الامتداد تبعها مثلا "بي إن جي" (png)، "بي جي" (jpg). مش عارف هذا كله بنحكي عنه مسار الصورة، صح ولا لا؟ أو أحيانا بكون بدي أجيب صورة من موقع خارجي. يعني كمثال، أفضل مواقع أنكم تجيبوا منهم الصور. الموقع الأول اسمه "بيكسل باي" (Pexels). سلوهم عندكم. حابعث لكم اليوم الروابط تبعتهم. وموقع اسمه "شاتر ستوك" (Shutterstock). تمام؟ موقع "بيكسل باي" 70% من أفضل المواقع اللي بنجيبه. في أي مثلا بتبحثوا ه عن الصورة اللي بدكم إياها، بس بالانجليزي البحث يكون. مثلا بدي أقول له "ويب سايت" (website). تمام؟ حيجيب لي كل الصور المتعلقة في الشيء اللي أنت بحثت فيه. لنفرض أنه أنا عجبتني هذه الصورة بدي أضيفها عندي في الموقع. عادي بقدر أجيب الرابط تبعها زي هيك، أعمل له "كوبي بيست" (copy paste) وأيش أعمل؟ أضيفها هون في الـ "إس آر سي". فمسار الصورة عندي شغلتين. يا إما أني أجيبه كرابط بهذا الشكل، أستدعي الصورة من مكان معين أو من موقع معين. أو أنه أنا أجيب الصورة من الجهاز تبعي. الصورة هذه موجودة على الـ "سي" (C)، على الـ "دي" (D)، مش عارفة إيش. ولكن لازم يكون عندي طريقة صحيحة لوصولي للصور. كيف يعني؟ هذه الصورة موجودة في مجلد، موجودة في مجلد ثاني، مثلا موجودة على الـ "سي"، على الـ "ديسك توب"، على الـ "دي"، مش عارفة إيش. لازم آخذ المسار تبعي كامل. هذا الشيء صح. ولكن احنا الطريقة الأصح لي أنه أنا عملت مجلد أصلا سميته "إيمجز"، صح ولا لا؟ فلازم، أو الأفضل، أنه أنا أجمع كل الصور اللي أنا بدي أستخدمهم بداخل هذا المجلد. مين يحكي لي ليش؟

ليش أصح؟

ممكن نحذف الصورة من الموقع.

ممتاز جدا. لنفرض أنه الصورة انحذفت في الموقع هذا، الموقع نفسه كله سكر، وأنا مستخدمة الرابط هذا. بالتالي الصورة مش حتظهر عندي، صح ولا لا؟ لكن لو أنا الصورة منزلاها تنزيل في مجلد الصور تبعي، في مجلد المشروع اللي أنا شغالة فيه. وين ما كانت هذه الصورة، وين ما انحذفت، هي أوريدي موجودة عندي هون في المجلد. فإيش ما يصير فيها مش حت يعني حتضلها أوريدي دائما معي وحتظهر معي دائما. تمام؟ فمبدئيا، بدي أعمل تنزيل لهذه الصورة في المجلد تبعنا اللي نحن سميناه أصلا "فرونت إند" (front end). انسكس. صح؟ عملنا مجلد اسمه "ميديا" (media). بداخله مجلد اسمه "إيمجز". هذا الكلام بس للاختصار. بدي اسمي أغير اسم الصورة لكلمة "إكس" وأعملها "سيف". هلقيت فعليا هذه الصورة ايش اسمها؟ "إكس دوت جي بي جي" (x.jpg)، صح ولا لا؟ نوع الصورة الموجود معي بهذا الشكل. فالآن لما بدي أجي أستدعيها، بستدعيها بشكل كثير مباشر. هي حتى إذا بتلاحظوا، تعالوا هون على مجلد الـ "ميديا". تعالوا هون على مجلد الـ "إيمجز". شايفين الصورة صارت أورريدي محفوظة عندي. فهان الـ "إس آر سي" تبعي ايش حيكون؟ اسم المجلد سلاش اسم الصورة، صح ولا لا؟ بقول لي بدل ما تكتبي هذا الكلام لحالك، أي مسار بدكم تجيبوه، سواء لصور أو لروابط، اعملوا "كنترول مسطرة" (Ctrl + Space). "كنترول مسطرة" بتبين لكم كل الملفات تبعت المشروع تبعتكم. ولكن أحيانا ممكن ما يتعرف على مجلد الصور اللي أنتم شغالين فيه. طيب، ايش الحل؟ الحل أني أحكي له نقطتين سلاش (../). زي ما أنتم شايفين، هيه فعليا جاب لي كل مجلدات المشروع تبعي. فباجي بقول له عندي في الـ "ميديا" مجلد اسمه "إيمجز". بداخله صورة اسمها "إكس دوت جي بي جي". تمام؟ إذا مسار الصورة كيف بجيبه؟ أو مسار لأي شيء؟ "كنترول مسطرة". في حال مش كل الملفات ظهرت معكم، بس اعملوا نقطتين سلاش، بيظهر معكم كل الملفات تبعتهم. تعال نعمل ريفريش. زي ما أنتم شايفين، هي الصورة ظهرت معي. طبعا أي صورة أنا بستخدمها، شو الحجم الافتراضي تبع هذا الصور بينعرض معي؟ هذا. تمام؟ بقدر أتحكم فيها؟ ايش الحجم تبع الصورة حينعرض معي؟ هذا. عشان أتحكم فيها، حناخذ في الـ "سي اس اس" خاصية الـ "هاي" (height) وخاصية الـ "ويدث" (width) اللي بقدر من خلالهم أتحكم في الصورة. بقدر بما أنه نحن ربطنا "سي اس اس"، أحكي له الـ "إيمج" الـ "هاي" مبدئيا حنتعامل في الـ "بكسل" (pixel) 100 بكسل. والـ "ويدث" مثلا 100 بكسل. فهلت لما أعمل ريفريش، حيغير لي حجم الصورة لـ 100 بكسل طول و100 بكسل عرض، زي ما أنتم شايفين. تمام؟ هذول كخصائص في الـ "سي اس اس". بحكي لي الـ "هاي" والـ "ويدث" برضه موجودين كـ "أتربيوت". يعني أعمل "كومنت" (comment) لهم. هيه وقفته. تمام؟ أجي أعمل ريفريش هون. الصورة رجعت للوضع الطبيعي تبعها. لو أنا استخدمتهم كـ "أتربيوت" في الـ "إيمج"، يعني جتها قلت له في عندي "أتربيوت" اسمه "هاي" 100 بكسل. وفي عندي "أتربيوت" اسمه "ويدث" 100 بكسل. حيتعامل معهم كـ "أتربيوت". والصورة حياخذ لي إياها الـ "هاي" 100 بكسل في 100 بكسل، زي ما أنتم شايفين. تمام؟ إذا ثلاث "أتربيوت" للصور. الـ "إس آر سي" أحدد مسار الصورة. الـ "ألت"، الـ "هاي" والـ "ويدث" أحدد الطول والعرض تبعه. نيجي لـ فكرة الـ "ألت". بحكي لي الـ "ألت" عبارة عن "تكست" (text) نص بديل. بستخدمه في حال أنا بدي أكتب شيء بدل الصورة، لو الصورة هذه صار لها شيء معين. كيف يعني؟ لنفرض أنه أنا الصورة حذفتها من المجلد، أو مثلا اجيت هان كتبت بدل كلمة "إكس" واحد. في عندي مجلد؟ في عندي صورة اسمها "إكس واحد"؟ لا. تغير المسار تبعتها. هلقيت لما أعمل ريفريش، الصورة مش حتظهر معي بهذا الشكل. بين لي طبعا ليش ظهر الإطار مع الصورة؟ لأنه حطاهم بداخل "تاج" اسمه "إيمج". فهون بفهم المستخدم أنه هون عبارة عن صورة. ولكن الصورة هذه المسار تبعها مش مضبوط، مش صحيح. فبهي الحالة بروح بكتب في الـ "ألت" نص بديل. مثلا "ذس از إيمج" (this is image). أي حاجة بدي إياها، بحيث أنه هذا النص يظهر بديل عن الصورة اللي مش موجودة بهذا الشكل. هي راح بين لي أنه في عندي هون صورة، ولكن الصورة المسار تبعها غلط. وبين لي ايش الـ "ألترنيتيف تكست" اللي أنا كاتبه، النص البديل اللي أنا كاتبه عن الصورة. لحتى الآن تمام؟ مين عنده سؤال؟ الأمور تمام؟

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

حنستكمل برضه الـ "اتش تي ام ال فورماتينج" اللي هم قلنا "تاجات" بقدر من خلالها أتحكم في النصوص تبعت الـ "اتش تي ام ال". في عننا "تاج" مهم جدا وكثير بنستخدمه اسمه "بي آر" (br). "بي آر" اختصار لكلمة "بريك لاين" (break line). من خلال هذا الـ "تاج" أنا بحكي له أنه انزل لي سطر جديد. هي معناته "بريك لاين". خلي لي إياه في سطر جديد. هذا وين بنستخدمه؟ لو أنا عاملة "بي" (p) وحاطة فيها جملة الـ "لورم" (lorem) كلها. تمام؟ زي ما أنتم شايفين. طبعا الـ "لورم" شفنا أنه بتظهر معاي بهذا الشكل، صح ولا لا؟ لو أنا بدي الكلام ينزل سطر جديد، مثلا عند هذه الكلمة، ايش بروح بعمل؟ بس علي أحط قبليها "بي آر". فمثلا لو اجيت هان، هيها. بس علي أكتب له "بي آر". هيه "تاج" بداية. بس "بي آر". بي أي بهذا الشكل. تمام؟ نعمل ريفريش. هلقيت حتلاحظوا أنه الكلام هي شايفين نزل سطر جديد. بدي ينزل سطر جديد برضه قبل هذه الكلمة. باجي هان بدور وين كلمة الـ "أد" (add) هان وبحط "بي آر". تمام؟ بي. هلقيت حلاقيه نزل سطر جديد عند هذه الكلمة بهذا الشكل. تمام؟ فأي نص موجود عندي، فقرة كبيرة وبدي ينزل قبليها سطر جديد، بس علي أحط "تاج" الـ "بي آر". اختصار لكلمة "بريك لاين".

هالاتهام بدنا نتطرق لشغلة مهمة جدا. أنه المرة اللي فاتت قلنا أنه في عندي أنواع الـ "تاجات" نوعين، "سنجل تاج" (single tag) و"بيري تاج" (pair tag)، صح ولا لا؟ الـ "بي آر" يعتبر شو؟ زي ما أنتم شايفين، "سنجل تاج". ما في له "تاج" نهائي. أجي أحكي له زي هيك. فش "تاج" هيك. شايفين؟ هي حتى بيعطيني "إيرور" (error) لما بعمل هذا الكلام. إذا "تاج" الـ "بي آر" يعتبر من الـ "تاجات" اللي "سنجل تاج". برضه كمان "تاج" الـ "ميتا" (meta) يعتبر من الـ "تاجات" اللي "سنجل تاج".

كمان في شغله مهمة. بحكي لي أنه الـ "اتش تي ام ال" تعتبر "كيس سنسيتيف" (case sensitive). شو يعني "كيس سنسيتيف"؟ not case sensitive. عفوا. ايش يعني؟

غير حساسة.

ايش يعني؟

يعني لو فيها كابيتل.

ممتاز. يعني "تاجات" الـ "اتش تي ام ال" بيحكي لي بتتعامل مع الأحرف الـ "كابيتل" (capital) والأحرف الـ "سمول" (small) نفس الحاجة. يعني لو جيت هنا على الـ "اتش 2" (h2) وكتبتها بهذا الشكل، صح. لو اجيت على الـ "بي" (p) كتبتها بهذا الشكل، صح. لو اجيت على الـ "آي إم" (i.e.) مثلا كتبتها زي هيك، برضه صح. ف الـ "اتش تي ام ال" تعتبر not case sensitive. يعني الأحرف الـ "سمول" فيها أو الأحرف الـ "كابيتل" بنتعامل فيهم الاثنين زي بعض. هذا الشيء بخلاف لغات برمجة ثانية. لغة البرمجة الثانية الحرف الـ "إكس" الـ "سمول" مختلفة عن الـ "إكس" الـ "كابيتل"، صح ولا لا؟ لكن الـ "اتش تي ام ال" تعتبر case sensitive. ممتاز جدا.

كمان في عننا "تاج" اسمه "إتش آر" (hr). اختصار لكلمة "هوريزنتال لاين" (horizontal line). ايش يعني "هوريزنتال لاين"؟ يعني خط أفقي. بيحكي لي من خلال هذا الـ "تاج" أنا بنشئ خط أفقي عندي في الصفحة. ريفريش. بهذا الشكل. شايفين هذا الخط؟ هذا عبارة عن "إتش آر". طبعا هذا مبدئيا. في الـ "سي اس اس" أنا هذا الـ "إتش آر" بقدر أتحكم في الـ "بوردر ريديس" (border radius) تبعه، بتحكم في العرض تبعه، في الطول، في اللون تبعه، في الـ "باك جراوند كر" (background color) تبعته. أي شيء بدي أتحكم في هذا الخط، حأقدر من خلال الـ "سي اس اس" أتحكم فيه. لكن مبدئيا، أكون عارفة أنه لما يكون في عندي خط، سواء تحت كلمة أو خط بفصل ما بين مجموعة من الأقسام، أو خط موجود تحت صورة، اسم الـ "تاج" تبعه "إتش آر". تمام؟ في طبعا طرق ثانية بقدر من خلالها أعمل الخط. حناخذها لما ناخذ الـ "سي اس اس". زي مثلا الـ "بوردر بوتوم" (border-bottom) إذا حد متطرق له. بقدر من خلاله برضه أعمل خط بهذا. تمام؟ مبدئيا، إذا الـ "إتش آر" عبارة عن خط أفقي زي ما أنتم شايفين، بيفصل الكلام بهذه الطريقة. ممتاز جدا.

في عننا "تاجين" من تاجات الـ "اتش تي ام ال" المهمين جدا. "تاج" اسمه "بري" (pre) و"تاج" اسمه "كود" (code). وهي من التاجات الجديدة اللي في الـ "اتش تي ام ال فايف" (HTML5). حدا بيعرف عنهم شيء أو شو الفرق بينهم؟

الـ "بري" والكود. الـ "بري" أظن بتطلع نفس.

ممتاز جدا. والكود؟

طيب، ممتاز. هل تلاحظوا معي؟ هي أنا عندي جملة الـ "بي" هذه الكبيرة، الفقرة الكبيرة. لو أنا جيت هذه نزلتها، هيها في السطر جديد. شوفوا عملت سبيس بينهم. واجيت هون شوفوا عملت سبيس بهذا الشكل. واجيت هون عملت سبيس بهذا الشكل. اجيت عملت ريفريش هان. هي الفي هذا. هي ريفريش. هل لاحظتوا أي فرق؟ فرق بينهم؟ لا. ليش؟ لأنه بحكي لي الـ "فيجوال ستوديو كود" (Visual Studio Code) بتجاهل أي سبيس وأي أسطر أنت بتكتبيها. تمام؟ فهي السبيس الموجودة هون تجاهلها في على الـ "براوزر". لكن لو مسكت الكود هذا نفسه وبدل ما هو "بي" كتبت عليه "بري". هي "تاج" بداية "بري". وهي "تاج" نهاية "بري". "بري" اختصار لـ "بري فورماتد تكست" (preformatted text). ايش يعني نص منسق؟ يعني حاافظ على التنسيق اللي أنت كتبتيه. كوبي بيست نفس ما أنت كتبتي على البرنامج بيظهر عندي على الـ "براوزر". إن شاء الله عملت خمس أسطر بينهم، عملت سبيس ما بين الكلمات، نفس التنسيق اللي أنت كتبتيه. يعني لو جيت هي الـ "لورم". شوفوا هي سبيس هيك. وهي هذه بدي أنزلها في سطر. وهي هذه بدي أنزلها في سطر. نفس التنسيق اللي كتبته على البرنامج. هلقيت لما أعمل ريفريش، حلاقيه ظهر عندي هنا على الـ "بي" بهذه الطريقة. شايفين هذه التنسيقات اللي نحن عملناها على البرنامج؟ هي نفسها ظهرت معي على الـ "بري". فالـ "بري" بيحكي لي أنه أنا بحافظ على التنسيق اللي بتكتبيه على البرنامج، بعرض لك إياه نفسه على الـ "براوزر". لكن الـ "كود". هذا الكلام وين بنستخدمه؟ في الأكواد البرمجية. مثلا لو أنا اجيت عملت زي هيك. هي "كود". "بري". مثلا في الـ "جي إس" (JS). اجيت قلت له "ليت إكس تساوي خمسة" (let x = 5). "ليت واي" (let y) مثلا تساوي تساوي تسعة. "ليت" (let) كمثال "زد تساوي إكس زائد واي" (z = x + y). شايفين كل واحدة حطيتها في السطر. لما أعمل ريفريش، حيظهروا معي كل واحدة في سطر بنفس التنسيق اللي أنا كتبته بهذه الطريقة. هذا هو "كود البري". "تاج" لـ "بري" أنه حاافظ على التنسيق زي ما أنا كاتبه بالضبط. لو أنا كاتباهم كل واحدة في سطر. هي "كنترول إكس" (Ctrl + X). بهذا الشكل. هي شايفين كل واحدة في السطر. أعمل ريفريش، حيظهروا معي كل واحدة في السطر بهذه الطريقة. "تاج" الـ "كود" بيحكي لي أنا بحافظ على التنسيق. ولكن بنستخدمه في الأكواد البرمجية. شوفوا الفرق بينهم. لو مسكت هذا وحطيته هون. تمام؟ شايفين كلهم على نفس السطر. هلقيت حيجوا معي على نفس السطر. ولكن شوفوا ايش الفرق بينهم؟ أنه عمل شوية سبيسز ما بين كل جملة والجملة الثانية. بين لي أنه هذا عبارة عن كود. لو مسكت هذول الـ "كود" وحطيت كل واحدة في السطر لحال. هي هيك. وهي "ليت زد". كل واحدة في السطر. وهي الـ "تاج" الـ "كود" البداية والنهاية. أجي أعمل ريفريش، حيضلوا معي على نفس السطر زي ما أنتم شايفين. بس لاحظت أنه صار شوية إزاحة ما بينهم. وصار في شوية مسافة ما بين كل جملة وكل والجملة الثانية. عشان يبين لي أنه هذا عبارة عن كود برمجي. تمام؟ هذول التاجين كثير مهمين. الـ "بري" والـ "كود". مثلا أنا عندي فقرة معينة وكل فقرة في سطر لحال. بدل ما بدي أحط في كل عفوا، كل سطر في سطر لحال. بدل ما أحط "بي آر" في كل مرة ما بينهم، بقدر أستخدم "تاج" الـ "بري". وعلى البرنامج نفسه أنزل السطر الجديد اللي أنا بدي إياه. أو مثلا عندي كلمة فيها السبيس هذه بهذه الطريقة. هذه ما في شيء في الـ "سي اس اس" بيعمل لي إياه هذا الكلام. لو بدي أعمله في الـ "سي اس اس" بدي أخلي الـ "لوريم" "تاج" والـ "أبسوم" "تاج" عشان أعمل المسافة اللي ما بينهم. هي عبارة عن "مارجن" (margin) بنحكي عنها. ف أنا عشان أختصر على حالي هذا الكلام، اجا "تاج" الـ "بري" اللي حكى لي بتقدري من خلاله، ايش التنسيق اللي بدك إياه يظهر على الـ "براوزر"، اعمليه على برنامج الـ "فيجوال ستوديو كود" بنفس الطريقة بيعمل لك إياه على الـ "براوزر". "تاج" الـ "كود" بيعمل لي نفس التنسيق. ولكن بخلي لي إياه في نفس السطر. ما بخلي لي إياه كل واحد في السطر لحال. لحتى الآن حدا عنده سؤال؟ الأمور تمام؟

ضل آخر تاقين نحكي فيهم اليوم. "تاج" اسمه "بلوك كوت" (blockquote) و"تاج" اسمه "كيو" (q). حدا بيعرف لايش بنستخدمهم وشو الفرق ما بينهم؟ "بلوك كوت" و"كيو". هدول التاجين بحكي لي بنستخدمهم في عملية الاقتباس. ايش يعني الاقتباس؟ عندي كلمة معينة أو جملة معينة وأنا مقتبساها من مكان معين. فبيحكي لي الأصح أنك تحطي اسم المقتبساه منه بداخل "بلوك". يعني أنا لو اجيت مثلا حكيت حت لهون كلمة أي حاجة "أحمد محمد" مثلا. تمام؟ في الـ "بلوك كوت". تعال نعمل ريفريش. بهذا الشكل. ايش بتلاحظوا؟

حط سبيسز.

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