تصميم موقع باستخدام html و css
Asmaa Saleh
·
Posted: 27 Jul, 2022
من أفضل تطبيقات البرمجة تصميم موقع إلكتروني وأكثرهم طلبًا بين المبرمجين ومطوري الويب. ومن أولى لغات البرمجة المستخدمة في هذا هي html وcss. تصميم موقع باستخدام html و css أصبح سهلًا باتباع هذه الخطوات.
تعرف على خطوات تصميم موقع باستخدام html و css وجميع الخطوات للانتقال من شاشة فارغة إلى موقع إلكتروني يعمل بشكل جيد وجذاب في نفس الوقت.
ما هو HTML و CSS؟
هي لغات تستخدم عند تصميم موقع الكتروني بشكل أساسي وتقوم بالآتي:
- يحدد HTML البنية الأساسية لصفحة الويب ومحتوياتها وكيف يتم وضع العناصر فيها.
- أما ال CSS يحدد التصميم والشكل التقديمي لصفحة الويب والعناصر الموجودة عليها.
لا يمكن الاعتماد على واحدة دون الأخرى حيث يعمل الاثنان معًا لتكوين صفحة الويب النهائية وتحديد تصميمها والمحتوى الموجود عليها.
أساسيات تصميم موقع باستخدام html و css
- أول شيء تحتاجه حتى قبل تصميم موقع ويب كامل html css هو استضافة جيدة، تقدم شركات استضافة الويب العديد من خطط الاستضافات المتنوعة، يمكنك البحث عن ذلك على جوجل واختر المناسب لك.
- الشيء التالي الذي تحتاجه هو اسم المجال أو الدومين.
- معرفة أن العنصر الرئيسي لبنية HTML هو علامة HTML وهي تبدو كالتالي:
<b> شيء </ b>
هنا، نحن نتعامل مع <b>علامة و سيظهر هذا الجزء بخط غامق بين علامة الفتح (<b>) وعلامة الإغلاق (</b>)، في هذه الحالة، هذا الجزء من النص هو SOMETHING ولكن هناك علامات أخرى، على سبيل المثال:
<i>...</i> سيحدد النص بخط مائل بين علامتي الافتتاح والختام
<u>...</u> سوف يؤكد ذلك
<p>...</p> هي فقرة من النص
<h1>...</h1> هو العنوان الرئيسي في الصفحة
- فهم بنية مستند HTML عند تصميم موقع باستخدام html و css، يتم التفكير في صفحة HTML الخاصة كما لو كانت مبنية من Legos أو مكعبات حيث تضع مكعبات مختلفة فوق بعضها البعض لتنتهي ببنية أكبر ولكن بدلاً من مكعبات Lego، تحصل على علامات HTML وإليك أبسط بنية مستند HTML:
<! Dictype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> مرحبًا بكم! </ title>
</head>
<الجسم>
<h1> مرحبًا بكم! </ h1>
<p> صفحتي الأولى على الويب </ p>
</body>
</html>
يمكن أخذ الكود أعلاه ونسخه ولصقه في ملف جديد وحفظ المستند باسم index.html، وستكون صفحة HTML صالحة تمامًا.
- تعرف على محددات CSS، تمامًا مثل HTML لها علاماتها، فإن CSS بها محددات، وتصف المحددات كيف يجب أن يتصرف عنصر معين من حيث المظهر. فيما يلي مثال على محدد CSS:
ص {
حجم الخط: 18 بكسل ؛
}
تصميم موقع باستخدام html و css
تثبيت Bootstrap
بعد التعرف على أساسيات تصميم واجهة موقع بلغة html و css، فحان الوقت لمعرفة كيفية تصميم موقع بلغة html و css جاهز، فمن الممكن جعل تصميم مواقع الويب باستخدام html عن طريق تعلم تصميم HTML و CSS أسهل بكثير، فبدلاً من تعلم كل شيء من الصفر، يمكن تثبيت Bootstrap.
Bootstrap هو عبارة عن مجموعة أدوات مفتوحة المصدر لإنشاء موقع ويب باستخدام HTML و CSS، فيهتم Bootstrap بالبنية الأساسية لملف ال HTML وورقة أنماط CSS نيابة عنك، كما إنه يوفر إطارًا يتأكد من أن المقالات الرئيسية لصفحة الويب الخاصة جاهزة ومُحسَّنة لمزيد من التطوير.
في الأساس يتيح لك Bootstrap عدم البدء من نقطة الصفر عند تصميم موقع باستخدام html و css، وبدلاً من ذلك الانتقال مباشرة إلى الجزء الممتع، باستخدامه ، لن تضطر إلى العمل في المراحل المبكرة غالبًا لإنشاء موقع ويب باستخدام HTML و CSS.
هناك مساران يمكن اتباعهما:
- الخيار الأول: تعلم Bootstrap - انتقل إلى صفحة Bootstrap الرئيسية، وقم بتنزيل حزمة Bootstrap الرئيسية وابدأ في البناء فوقها.
- الخيار الثاني: خذ اختصارًا - احصل على حزمة بداية لـ Bootstrap بتصميم جيد المظهر وصفحة ويب تجريبية تم إنشاؤها بالفعل.
اختيار تصميم الموقع
عند تصميم موقع باستخدام html و css أو تصميم موقع باستخدام html، فهناك حرية في استخدام أي قالب Bootstrap تريده، ولاختيار قالب التصميم بعد تصميم موقع باستخدام html و css ،انقر فوق الزر تنزيل مجاني الموجود على اليمين والقيام بحفظ الحزمة المضغوطة على سطح المكتب ثم القيام بفك ضغط الحزمة ونقل محتوياتها إلى الدليل الرئيسي لخادم الويب المحلي أو حساب استضافة الويب الخاص وهنا يتم افتح هذا الموقع من خلال متصفح الويب الخاص وستتم رؤية نسخة المخزون من القالب وهنا حان الوقت الآن لتعلم كيفية استخدام HTML و CSS لجعل التصميم كما تريده بالضبط.
إضافة المحتوى
أول شيء تريد القيام به بعد تصميم موقع ويب بلغة html هو تغيير عنوان الصفحة ويتم تغيير العنوان، يتم البحث عن علامة العنوان في قسم الرأس واستبدل النص الموجود بين العلامات بشيء خاص بك: <title> موقع HTML الخاص بي </title> ولتغيير العنوان الرئيسي ، ما عليك سوى تغيير هذا:
<h1 class = "text-uppercase text-white font-weight-bold"> المفضلة ... </ h1>
إلى شيء مثل ما يلي:
<h1 class = "text-uppercase text-white font-weight-bold"> معجب بموقع HTML على الويب! </ h1>
يمكنك أن تفعل الشيء نفسه مع جميع الفقرات والعلامات الأخرى على الصفحة.
إنشاء صفحات إضافية
الآن بعد أن تم تخصيص الصفحة الرئيسية في تصميم موقع ويب html، حان الوقت لبدء العمل على بعض الصفحات الإضافية ثم ربطها بالصفحة الرئيسية، عند تصميم موقع باستخدام html و css، يمكن إنشاء أي عدد من الصفحات الفرعية ثم ربطها جميعًا معًا.
في القالب الخاص بالتصميم، سننشئ صفحة جديدة عن طريق القيام بإنشاء نسخة من index.html الملف وإعادة تسميته about.html ولتسهيل تمييز الصفحات في هذه المرحلة المبكرة، يمكن القيام بتحرير about.html الملف الجديد وتغيير ما هو موجود في <title> العلامة، على سبيل المثال، <title>About Me</title>.
وبذلك قد تعرفنا على كيفية تصميم موقع باستخدام html و css.
Posted: 27 Jul, 2022
Asmaa Saleh
Read Also
بالخطوات والتفاصيل تعرف على تطوير المواقع الالكترونية
كيف اسوي منصه الكترونية
تطوير موقع الكتروني
منصة الكترونية
تطوير مواقع الويب
