كيف تصمم صفحة تسجيل دخول بـاستخدام html و css

السلام عليكم
سأقدم لكم درس عمل صفحة تسجيل دخول بـاستخدام html و css

نتيجة الدرس

 

نبدأ على بركة الله

نفتح برنامج  ++notepad نقوم بفتح عمل جديد عن طريق ctrl + n او بالضغط على الايقونة الخاصة بذلك على البرنامج

نختارمن القائمة العلوية   Language ثم نختار H بعدها نضغط على HTML ، هكذا ... 

 

وذلك لنُعلم البرنامج بأننا سنكتب أكواد لغة html

- الان نضع الوسوم الرئيسية لصفحة html بهذا الشكل 

 مخطط الصفحة التي سنصممها كالتالي :

لذا سنحتاج الوسوم التالية : 

 الوسم <header> وهو سيكون بداية الصفحة كما بالمخطط

الوسم <footer> و سيكون عبارة عن نهاية الصفحة

الوسم <section> الذي سنضع به الفور

الان لنضع كل هته الوسوم داخل الـ body هكذا

نحتاج الان لوضع فورم تسجيل الدخول داخل الـ section ، لذا سنستعمل وسم <form> و وسم <input> لعمل خانتي الاسم و كلمة المرور وسنستعمل وسم <p> كذلك ، ثم سنستخدم وسم <button> لعمل زر تسجيل الدخول ، هكذا

انتهينا من جزأ الـ Body و من كل الـ html اللازم لصفحتنا اليوم ، لذا سننتقل الى جزأ الـ head لنبدأ كتابة الـ css الخاص بالصفحة
أولا نضع وسم <style> داخل جزأ الـ head

ثم سنبدأ بالـ body و الـ header سيكون الـ css الخاص بهم هكذا

في السطر رقم 11 مع أنه غير واضع ، و اعتذر على هذا ، ضع عنوان الصورة التي تريد .

ثم سنضع الان css الخاص بـ section و form و input و p

سنضع css للــ button

بعدها سنضع هذا التاثير للـ button لكن لن يظهر الا عندما يمر عليه الماوس 

لم يتبقى سوى الـ footer  وسيكون هكذا

الان انهينا العمل ، لذا سنقوم بحفظة هكذا

نعطيه اسما ثم نقوم بفتحه عبر المتصفح ، و النتيجة كالتالي

فيكم من سيحصل على هته النتيجة ، مشكلة ظهور الرموز الغريبة كما أن الكتابة من اليسار الى اليمين

 لاتقلقوا الحل هو

ثم احفظوا العمل من جديد و هكذا ستتخلصون من مشكلة الرموز الغريبة
و لتعديل جهة الكتابة من اليمين الى اليسار قوموا بالتالي : توجهو الى الوسم <html> و أكتبوا هذا

 

احفظوا العمل ثم ، النتيجة

Read more