كيفية عمل خلفية ضبابية

Read more

صمم نافبار بطريقة جميلة و بسيطة باستعمال html و css

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

النتيجة


نفتح برنامج  ++notepad و نفتح عمل جديد ، نغير اللغة الى html و نكتب التالي

الان نكتب هذه الأكواد

نحفظ العمل و نفتحه في المتصفح و النتيجة


سلام .
Read more

كيف تصمم زر أنيق بـ html و css فقط

السلام عليكم

نتيجة الدرس
نفتح برنامج  ++notepad ثم نفتح عمل جديد ، نغير اللغة الى html و نكتب ما يلي
 
نحفظ العمل و نفتحه عبر المتصفح ، النتيجة



Read more

كيف تصمم زر دائري بـ html و css

السلام عليكم

سنتعرف اليوم على كيفية عمل زر دائري

ساريكم النتيجة أولا



كالعادة نفتح برنامج  ++notepad ثم نفتح عمل جديد ، نغير اللغة الى html و نكتب ما يلي

الان نكتب التالي في الـ head


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

سلام .


Read more

حل مشكلة ظهور الرموز الغريبة

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

و بهذا يتم حل المشكل .
طبعا البرنامج المستعمل هو ++notepad
انتهى الشرح، سلام .
Read more

كيفية تصميم زر منحني على الجانبين

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

النتيجة التي سنصل اليها

لانبدأ العمل ، نفتح برنامج  ++notepad و نفتح عمل جديد ، نغير اللغة الى html و نكتب التالي 




االان نكتب أكواد الـ css التالية بين وسمي الـ head هكذا



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

أي استفسار أنا في الخدمة .
سلام .

Read more

كيف تصمم نافبار navbar بسيط بالـ html و css فقط

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


 نفتح برنامج  ++notepad و نفتح عمل جديد ، نغير اللغة الى html و نكتب هته الاكواد التالية


الان سنكتب الـ css و هو كالتالي 


نحفظ العمل و نفتحه عبر المتصفح و النتيجة

أي استفسار ضعوه في التعليقات .
Read more

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

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



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

نفتح برنامج  ++notepad و نفتح عمل جديد ، نغير اللغة الى html و نضع بالصفحة أكواد الـ html الاساسية بهذا الشكل

كالمعتاد سأضع لكم مخطط للصفحة التي سنعمل عليها ، و ذلك لتتضح الفكرة لديكم ، المخطط بسيط جدا و هو كالتالي

اذن سنحتاج الى section و بداخله سنضع section و form الـ section الثاني سنضع به الصورة و الفورم سنضع به خانتين خاصتين بالاسم و كلمة السر و سنستعمل لذلك و سم input و p و سنضيف زر بواسطة وسم button .
و عليه سيكون الكود كالتالي

الان لنكتب الـ css الخاص بالصفحة و الذي سيكون بهذا الشكل

في السطر رقم 17 ضع عنوان الصورة التي تريد ، في حالتي كانت الصورة التي استعملتها في نفس مكان ملف الصفحة
لذا وضعت اسم الصورة وكتبت الامتداد ، و أنت ضع عنوان الصورة التي تريد أياً كان مكانها .
 ثم

الان لنحفظ العمل و نفتحه في المتصفحة و النتيجة


Read more

طريقة تصميم موقع شخصي بسيط

السلام عليكم و رحمة الله و بركاته
مرحبا ، اليوم سنصمم موقع شخصي نسنتطيع من خلاله وضع سيرة ذاتية لنا و بعض الروابط

النتيجة النهائية التي سنخرج بها 


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

نفتح برنامج  ++notepad كالمعتاد ثم نفتح عمل جديد ، نغير اللغة الى html و الذي لا يعرف كيف يفعل ذلك يرجع الى بداية هذا الدرس كيف تصمم صفحة تسجيل دخول بـاستخدام html و css

سيكون مخطط الموقع الذي سنصممه بهذا الشكل

اظن أنكم فهمتم الفكرة الان ، لعمل هذا الموقع نحتاج لتقسيمه الى قسمين ، قسم يمين نضع به الصورة و الروابط
و قسم يسار نضع به النص ، لذا سنحتاج الى aside نضعه الى اليمين و section نضعه الى اليسار و في aside اليمين سنضع به section يحتوى على الصورة و آخر يحتوى على الروابط التي سنضعها بدورها في وسم ul ، لذا يجب ان تُبَرمج الصفحة بهذا الشكل

طبعا يمكنك تغيير نص عنصر <a> من كملة " رابط " الى النص الذي تريده مثلا " الصفحة الرئيسية " او " راسلنا "
كذلك لجعل الرابط مثلا يأخذ الى جوجل او اي موقع او صفحة اخرى اكتب مكان رمز الهاش " # " عنوان الـ url الخاص باي صفحة او موقع تريد ان يذه اليه الزائر على سبيل المثال اكتب " https://www.google.com " و عند الضغط على الرابط من طرف الزائر سياخذه مباشرة الى google .

الان سنكتب الـ css الخاص بالصفحة و سيكون بهذا الشكل 

في السطر رقم 25 ضع عنوان الصورة التي تريد .


يتبع ...


احفظ العمل ثم افتحه على المتصفح و النتيجة


لمن لا يعرف كيفية حفظ الصفحة يعود الى الدرس كيف تصمم صفحة تسجيل دخول بـاستخدام html و css في آخره سيجد الطريقة كذلك من ظهرت له مشكلة الرموز الغريبة او مشكلة الكتابة من اليسار الى اليمين يعود الى ذات الدرس " كيف تصمم صفحة تسجيل دخول بـاستخدام html و css " و سيجد به الحل .

أي استفسار اطرحه بالتعليقات .

سلام  ^^
Read more

كيف تصمم صفحة تسجيل دخول بـاستخدام 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
 
تعريب : قوالبنا للبلوجر