Learn HTML In Arabic 2021 - #11 - Formatting Elements

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

نبدأ مع بعض بالأول حاجة عندنا هي LP من Bold خلينا كده نكتب comment هنا يخلينا نتعلم الحاجات دي كده في السكة وفي نفس الوقت نطبق على فكرة الcomment زي ما اتفقنا

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

مميزة عن التانيين والخط بولد بشكل ده وكمان لو انت غيرت نوع الخط ده لنوع تاني هتلاقي كمان مميزة اكتر من كده طيب عندنا تاج تانية بتعمل نفس الكصة دي هننزل دي تحت كده نسخة منها وعندنا تاج تانية اسمها سترونج سترونج بتعمل نفس الكصة بالزبط شايفين يا شباب نفس الكصة الفرق بينهم يعني بحاجة ادفانسد شوية لكن هنقولها ان شاء الله عشان برضو مفيش معلومات يعني

تبقى بعيدة عنك خلص البولد هو بولد لمجرد البولد السترونج هو important text هكتبلك كده جنبها important text هتقول لي ايه الفرق بين ده وده ما هو ده كمان important لا ده مش important

لو دخلت موقع مثل امازون و وجدت كتابا اريد اشتراه و وجدت اسم الكاتب معمول بخط عريض بلد عادي ليس مهم ان اعرف اسم الكاتب او اسم البياع بلاش الكاتب اللي هو اصلا ليس مهم خالص تعرفه

لكن هناك نص آخر بولد يتحدث عن ملحوظة مهمة أن هذا الكتاب لا يتشحن المصر لا تشتريه لأنه لا يتشحن المصر مثلاً فمن هم الـ Important Text؟ Important Text هو النص الذي يقول لك أن هذا الكتاب لا يتشحن ليس اسم البياع فممكن أن تجد اسم البياع بولد لمجرد بولد لأن التصميم يريد ذلك لكي يظهر لكن الآخر Important Text لذلك يضع في Strong Tag التعامل معه

محركات البحث برضو بيدوروا على المعلومات عن طريق ال strong tag دي فيفضل جدا ان انت تفرق بينهم لما تيجي تستعملهم وطبعا مش محتاج اقولك ان لما تتعلم لغة CSS هتقدر تعمل البولد دي من غير الحاجة لان انت تحط ال B ولا ال strong ولا الكلام دا كله

لدينا شيء يسمى I من الـ italic الـ italic يجعل لك نص مايل و لدينا شيء يسمى EM و هذا عبارة عن تكست تقصيصي نفس الكثرة الـ italic و الـ emphasize يجعل لك نفس الكثرة يجعل لك نص مايل دعني أخذ نسخة من هذا الكلام و أقوم بهذا

انا عايز احط I هي I و بعدين /I عشان نشوف كده الفرق بينهم هما التلاتة هتلاقي البوكستور بقت ميلة الكلمة ميلة دي بيستعملوها في حاجات كتير جدا و اغلى بالوقت بتشوف الكلام ده في الحكم لما حد بيكتب حكمة بتلاقي النص بتاع الحكمة ميل كده سنة نفس الكس لو عملنا هنا ال E M هتعمل نفس الموضوع زي ما اتفقنا

بالشكل ده وبالمناسبة الفرق بينهم نفس الفرق اللي حكيناه هنا ده مجرد نص مايل وده الـ emphasize text ده برضو بيكلم عن حاجة معينة زي ما اتفقنا نفس الفروق بينهم بالزبط مفيش اختلاف طيب كتبت انا جملة زي كده

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

لدينا شيء يسمى "U" دعونا نأخذ نسخة منهم و "U" وهي "Underlined" دعونا نكتب هنا "Mark" ونكتب جنبه "Marked Text" أو "Highlighted Text" مثلاً بعدها على طول "U" "Underlined" سنرى معاً كذا "U" كما ترون يعملون "Underlined" كثير جداً يعني

لا يوجد أحد يستخدم هذه الحركة لأنها تقوم بإعادة التعليم على حدود المستخدمين لتعلمها لعلّا وعسى في يوم القادم ممكن تكون محتاجة هذا كلام عظيم لدينا تاج اسمه small small يعني smaller text سأخذ هذا الكلام نسخة منه نسخة واحدة وسأكتب هنا small

كلمة "Welcome" ما هو الفرق بين كلمة "Welcome" وكلمة "Welcome"؟ "SmallD" ببساطة جداً لديك "Prograph" يوجد بعض الكلام الزريف ويوجد أيضاً كلام صغير يريد أن يظهر بشكل أصغر لأنه ليس من ضمن المحتوى لأي سبب ما "SmallD" تصغر لك حجم الكلام أصغر من الكلام الموجود في المحتوى معها

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

deleted text جميل قوي deleted text ده وفكرة بسيطة جدا وظريفة وهنتعلمها ان شاء الله اعملي دلوقتي انا بكتب رد على موقع زي stack overflow مثلا

أو كتبت مقال وفيه شوية معلومات في المقال ده جوجل دخل المحركات البحث عملت archiving أو عملت يعني crawl للموقع بتاعك خدوا المحتوى كله و تمام وأي حدا يبحث عن الكلمة يخش يلاقيها عندك لو أنت كل شوية بتغير في المحتوى بتحذف منه ده بيعمل مشكلة في صداقتك مع محركات البحث ما بيبقاش فيه trust ما فيش ثقة لأن أنت عمال كل شوية تغير في المحتوى

طيب أنا دلوقتي كنت كاتب جملة هبدة حلوة هبدة دي الناس تحب الهبدة يعني

فالجملة الهابتة دي أنا عايز أشيلها وعايز أحط الجملة الصحيحة بتاعتها هل أشيل القديمة وأحط الجديدة؟ لا أنا بسيب القديمة وحطها في تاج اسمه دل اللي هو deleted text ده نص محزوف خلاص ما بقاش valid مش صح الكلام التاني أنا كتبته وصححته بس بسيب ده for reference عشان اللي جاي في مرة ومسلا راجع المقال عشان اللي مثلا كتب السؤال عايز شوف أنا كنت كتب إيه قبل كده لأي سبب ما ساعتها هتلاقي أن الdeleted text موجود

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

دل وقت فيه 100 ده دليل تاكست ده السعر القديم والجديد 80 ده 100 خلاص مشتوب عليه ده دليل تاكست وده الجديد فكده الشخص فعلا عارف الفرق بينهم وعارف ان كان فيه سعر قديم وكله تمام طيب عندنا نص اسمه او عندنا انس اللي اسمه انسرت تاكست

نفس الموضوع اللي احنا عملناه قبل كده خلينا ناخد نسخة من دي كده ونخلي ده بدل ما هو دل نخليه انس بشكل ده

طيب هنا ايه اللي حصل الـ Inserted Text بيحطلك العلامة دي ليه؟ عشان نفس اللي انت عملته او عكس الـ Delete Text ده Inserted Text ده Text محتود تبقى عارف انه هو اضاف جديد انت عملت اقرا في المكالا كل يوم وكل يوم تقرا منها شوية وعملت انزل ففي حد اضاف حاجة جديدة في المكالا او عمل حاجة معينة جديدة اضاف مثلا تعديل اعمل اي حاجة الـ Inserted Text بيعرفك ان النص ده مضاف ما كانش موجود قبل كده

حسناً أعطيك مثال آخر ممكن يكون أكيماً من هذا المثال أنا كتبت offer في منتدى و بعد أن قمت بعمل هذا الـ offer رحت يوم آخر وضعت شيء لم يكن موجوداً ممكن أن يجعل هذا الشيء يتلغبط و يشعر أنني غيرت في الـ offer عندما أضع الـ insert a text معناه أن الشخص يعرف أن هذا الشيء جديد و لا يوجد فيه

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

2O الرمز ده اللي احنا عملناه في الكورس اللي فات عايز اكتبه زي ما بيكتبوه بالضبط مثلا في الناس شغالة في الكيميا او اي حد شغال في الموضوع ده هكتب مثلا هنا التاج بتاعتي سب هنجرب بس دي ونجرب دي زي ما انتم شايفين ال 2 طبعا مفروض بتبقى تحت فهنعمل هنا

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

السابدي اللي هي السوبر سكريب كده انت بتقوله اتنين قصة اتنين زي ما انتم شايفين دي بعض الـFormatting Elements اللي ممكن انت تستعملها وممكن لا غالبا يعني دول نادرا ان انت تستعملهم يعني لو انت مش شغال في مواقع مثلا فيها معادلات او رياضة او الكلام ده كله دي يا جماعة العناصر الاساسية اللي انت تقدر تـFormat بيها او تعمل الـFormatting الخاص بالـHTML بدون تدخل الـJavaScript او الـCSS او اي حاجة من الحاجات دي نهائيا

يا رب يا جماعة درسي يكون بسيط وسهل وعجبكم اشوفكم ان شاء الله في درس جديد والسلام عليكم