الدرس الثامن حنتكلم هنا ان شاء الله عن تكملة الدرس السابقهو تنسيق كلام وصفحة الاتش تى ام ال واللى بيطلق عليها استايل الصفحة او مقدما حنطلق عليها css الصفحة بقى علشان نبقى محترفين، اولا انا عاوز اعرف اية شكل السى اس اس دة بيكون عامل ازاى يعنى؟ تعالى اوريلك مثال

 

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

 

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

 

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

 

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

ثالثا: انى اعمل للاتربيوت استايل والاتربيوت زى ما شرحناة قبل كدة هوخاصية من خصائص عنصر الاتش تى ام ال بتدينى معلومات عنة زيادة زى ما شرحنا مثلا الهايبر لينك انا عاوز اخلى الهايبر لينك دة خلفيتة لون معين وليكت زتونى فاتح مثلا
 

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

 

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

This is a heading
This is a paragraph.
The old bgcolor attribute only works on the body element.
For future proof HTML, use styles instead:

اللى كنا واتكلمنا عنة فى المثال الثانى لاستعمال الاستايل فى ال html
اللى طلعلى الصفحة صفراء والخلفية الهيد حمراء وخلفية البراجراف خضراء ، طيب تعالى مثلا نشوف كود قديم علشان اخلى بس الخلفية صفراء ودة كانوا بيستخدموة فى اتش تى ام ال 1.2.3

This is a heading
This is a paragraph.
The old bgcolor attribute only works on the body element.
For future proof HTML, use styles instead:

بص كدة على النتيجة بقى؟

 

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

A heading
A paragraph.

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

 

طيب نكمل برضو على انى مثلا لو عاوز الكلام يبقى فى النصف زى السنتر كدة بتتكتب ازاى

Center-aligned heading
This is a paragraph.

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

فعلا الكلام جة فى النصف ، طيب زمان بقى الكود فى النصف كان شكلة اية تعالى نشوف كدة حتلاقى الطريقة مختلفة

This is a heading
The heading above is aligned to the center of this page.

ظيب النتيجة ؟ نفس النتيجة بس انا غيرت الكلام بس تعالى نشوف

 

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

 

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