السلام عليكم
سأقدم لكم درس عمل صفحة تسجيل دخول بـاستخدام html و css
نفتح برنامج ++notepad نقوم بفتح عمل جديد عن طريق ctrl + n او بالضغط على الايقونة الخاصة بذلك على البرنامج
الان لنضع كل هته الوسوم داخل الـ body هكذا
نحتاج الان لوضع فورم تسجيل الدخول داخل الـ section ، لذا سنستعمل وسم <form> و وسم <input> لعمل خانتي الاسم و كلمة المرور وسنستعمل وسم <p> كذلك ، ثم سنستخدم وسم <button> لعمل زر تسجيل الدخول ، هكذا
انتهينا من جزأ الـ Body و من كل الـ html اللازم لصفحتنا اليوم ، لذا سننتقل الى جزأ الـ head لنبدأ كتابة الـ css الخاص بالصفحة
أولا نضع وسم <style> داخل جزأ الـ head
ثم سنبدأ بالـ body و الـ header سيكون الـ css الخاص بهم هكذا
الان انهينا العمل ، لذا سنقوم بحفظة هكذا
نعطيه اسما ثم نقوم بفتحه عبر المتصفح ، و النتيجة كالتالي
فيكم من سيحصل على هته النتيجة ، مشكلة ظهور الرموز الغريبة كما أن الكتابة من اليسار الى اليمين
لاتقلقوا الحل هو
ثم احفظوا العمل من جديد و هكذا ستتخلصون من مشكلة الرموز الغريبة
و لتعديل جهة الكتابة من اليمين الى اليسار قوموا بالتالي : توجهو الى الوسم <html> و أكتبوا هذا
سأقدم لكم درس عمل صفحة تسجيل دخول بـاستخدام html و css
نتيجة الدرس
نبدأ على بركة الله
نختارمن القائمة العلوية Language ثم نختار H بعدها نضغط على HTML ، هكذا ...
وذلك لنُعلم البرنامج بأننا سنكتب أكواد لغة html
- الان نضع الوسوم الرئيسية لصفحة html بهذا الشكل
مخطط الصفحة التي سنصممها كالتالي :
لذا سنحتاج الوسوم التالية :
الوسم <header> وهو سيكون بداية الصفحة كما بالمخطط
الوسم <footer> و سيكون عبارة عن نهاية الصفحة
الوسم <section> الذي سنضع به الفور
الان لنضع كل هته الوسوم داخل الـ body هكذا
أولا نضع وسم <style> داخل جزأ الـ head
في السطر رقم 11 مع أنه غير واضع ، و اعتذر على هذا ، ضع عنوان الصورة التي تريد .
ثم سنضع الان css الخاص بـ section و form و input و p
سنضع css للــ button
بعدها سنضع هذا التاثير للـ button لكن لن يظهر الا عندما يمر عليه الماوس
لم يتبقى سوى الـ footer وسيكون هكذا
نعطيه اسما ثم نقوم بفتحه عبر المتصفح ، و النتيجة كالتالي
فيكم من سيحصل على هته النتيجة ، مشكلة ظهور الرموز الغريبة كما أن الكتابة من اليسار الى اليمين
و لتعديل جهة الكتابة من اليمين الى اليسار قوموا بالتالي : توجهو الى الوسم <html> و أكتبوا هذا
احفظوا العمل ثم ، النتيجة
9 التعليقات:
ياخي في غلط وين هو كود الزر ؟؟
وكمان الترتيب مش صح ممكن اميلك او رقمك
لو سمحت انا عملت الاكواد بس مفيش ولا حاجة اتنفذت ومش عارفة اللى انا عملتو صح ولا لا ممكن حضرتك تنزل الاكواد فى صورة واحدة
منووور ي احزين انقدتنا
حضرتك الي هو عملة دا اسمة تصميم لكن عشان تطورية محتاجة لغة php
هكتب input قبل وبعد البرقراف والا بعدو بس ؟
هذا هو كود css مع إضافة بعض التعديلات عليه body{
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-image: url();
}
footer{
height: 127px;
background-color: blue;
border-top: 75px solid;
}
header{
height: 150px;
background-color: blue;
border-bottom: 5px solid;
}
section{
height: 200px;
width: 500px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
border-radius: 20px;
box-shadow: 20px 2px 20px #000;
}
section form{
height: 140px;
width: 350px;
border-radius: 0px;
padding: 5px 75px 5px 75px;
background-color: blue;
}
section form input{
height: 30px;
width: 200px;
border-radius: 20px;
border: 1px solid;
margin: 10px;
}
section form p{
display: inline;
}
section form button{
margin-right: 130px;
margin-top: 50px;
background-color: blue;
height: 30px;
border-radius: 50px;
}
جزاكم الله خيرا
كيف يتم ادخال التعليمات البرمجية لاسم المستخدم وكلمة المرور
هل ب JAVA
ام
PHP
Wynn Resorts Casino & Hotel - JamBase
For 남원 출장샵 all of your senses, the Wynn Resorts 보령 출장안마 Casino & Hotel has got a 제천 출장안마 rich and rich 제이티엠허브출장안마 casino experience. You can relax, 김해 출장마사지 eat, and dine at every stop of
إرسال تعليق