تصميم علم مصر بال Html and Css
سوف نتعرف على كيفيه تصميم علم مصر بال Html & Css وكمان هنتعرف على إزاى تبدأ تصميم صح من غير عشوائية وبنظام
| webPrey سوف نتعرف على كيفيه تصميم علم مصر بال Html & Css وكمان هنتعرف على إزاى تبدأ تصميم صح من غير عشوائية وبنظام سليم خليكم معانا.
محتويات المقال
المقدمة .
كيف نعد للتصميم.
ملف ال Html.
ملف ال Css.
الخلاصة ( هات من الأخر).
هنتعلم مع بعض فى هذا المقال كيفية تصميم علم مصر بلغتى Html And Css وسوف نتعرف على التصميم خطوة خطوة وهنبدأ مع بعض وحدة وحدة وكمان الكود هيكون متوفر للى حابب يتعلم منة؟
طبعأ علشان تشتغل وتكتب أكواد لازم يكون عندك برنامج لتحرير النصوص مثل Notepad ولكن هذا البرنامج لا يوجد بة أى إمكانيات تساعدك أثناء التكويد.إشتغل على برنامج Visual Studio Code ولو مش عندك حملة من على الإنترنت .
او ممكن تحمله من الموقع الرسمى من هنا
مميزاته
برنامج سهل وبسيط.
بيساعدك على كتابة الكود.
لو نسيت خاصية وفاكر أول كام حرف منها بيكملهالك.
بيعمل خط أحمر تحت الكلمة اللى فيها خطأ.
بينسق الكود ويخلية منظم بحيث يسهل قراءتة.
ومميزات تانية كتير.
كيف نعد للتصميم
كيف نبدأ عملية الإعداد للتصميم , فية أكثر من طريقة لتبدأ عملية التصميم الصحيحة .
أول طريقة
إنك تعمل فولدر وتسمية بأسم المشروع وليكن سميتة Flag.
داخلة الفولدر دة هتحط الملفات والملحقات اللى هستخدمها فى التصميم بتاعك بجانب بعضها.
ودى طريقة عشوائية جداُ وهتسببلك توهان ولغبطة خصوصاً لو إنتة شغال على مشروع كبير.
ثانى طريقة
إنك تعمل فولدر وتسمية بنفس إسم المشروع مثلاً سميتة Flag.
داخلة أعمل folder للصور ,وأعمل folder لملفات ال Css بمعنى أصح أخصص لكل حاجة فولدر خاص بيها.
ودة هيخلى شغلك مرتب أكتر ومش هتتلغبط ولا هتوه فى حاجة.
سواءً إتبعت الطريق الأولى أو الثانية بعد عمل الفولدر الخاص بالمشروع وملفات التصميم هنتوجة لبرنامج Visual Studio Code ومن قائمة File هنختار Open Folder وتفتح فولدر المشروع بتاعنا علية ونبدأ التصميم.
ملف ال Html
وهنا هنكتب كود ال Html لعلم مصر والعلم يتكون من ثلاث ألوان أحمر , أبيض , أسود , ويحتوى على نسر فى منتصف العلم.
إسم ملف ال Html هو egypt.html g لو حابب تغير الأسم براحتك .
الكود
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>egypt flag</title> <link rel="stylesheet" href="eg.css"> </head> <body> <div class="flag"> <span class="one"></span> <span class="two"> <img src="bird.png" alt="bird"> </span> <span class="three"></span> </div> </body> </html>
ملف ال Css
ملف ال Css يحتوى على التنسيقات والألوان الخاصة بالتصميم .
إسم ملف ال Css هو eg.css لو حابب تغير الأسم براحتك .
الكود
body{ background-color: white;} .flag{ box-shadow: 0 2px 15px rgb(0 0 0 / 10%); width: 90%; height: 400px; background-color: #f5f5f5; margin: 191px auto;} .flag span{ width: 100%; height: calc(400px/3); display: block;} .flag .one{ background-color: red; } .flag .two{ background-color: white; position: relative; }.flag .three{ background-color: black;} .flag .two img{ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transition: 0.3s; transform: translate(-50%, -50%);} .flag .two img:hover{ border: 1px solid red; border-radius: 6px; }
}
width: 90%;
background-color: #f5f5f5;
}
height: calc(400px/3);
}
}
position: relative;
.flag .three{
}
height: 100px;
left: 50%;
transition: 0.3s;
}
border-radius: 6px;
الخلاصة ( هات من الأخر)
- تصميم علم مصر بسيط جداً وسهل .
- عرفنا إزاى نبدأ التصميم صح وإزاى ننظم شغلنا علشان منتلغبطش خصوصاُ لو كان المشروع كبير.
- إتعرفنا على كود ال Html وكود ال Css لعلم مصر.
- ألوان علم مصر : أحمر - أبيض - أسود .
- شكل علم مصر : عبارة عن ثلاثة ألوان ( أحمر - أبيض - أسود ) ويحتوى على نسر فى المنصف.
- وطبعاُ أوعى تنسة صورة نسرعلم مصر وتحطها فى التصميم إسمها bird.png
ملحوظة هامة
لازم تسمى الملفات بنفس الأسماء اللى قولتلك عليها سواء كان ملف ال Html أو ال Css أو الصورة علشان التصميم يشتغل معاك من غير مشاكل .أو ممكن تغير فيهم براحتك بس دة إذا كنت فاهم إنتة بتعمل إى.
وكدة نكون إنتهينا من موضوعنا اليوم أتمنى لو الموضوع أعجبك تدعمنا بلايك ومتابعة والسلام عليكم ورحمة الله وبركاتة .
ومتنساش تتابعنا على صفحتنا على الفيسبوك من هنا
