يعد إنشاء موقع ويب طريقة رائعة للتعبير عن نفسك. على الرغم من وجود العديد من أدوات بناء مواقع الويب ، إلا أن كتابتها بنفسك طريقة ممتعة لمعرفة المزيد حول كيفية عمل مواقع الويب خلف الكواليس. مشروع جيد للمبتدئين هو إنشاء موقع ويب وإضافة صورة خلفية باستخدام CSS. هذا المشروع سوف يجعلك تعمل مع كل من HTML و CSS.
ما هو CSS؟
يرمز CSS إلى ورقة الأنماط المتتالية. إنها لغة برمجة تسمح لك بتصميم لغات الترميز. إحدى لغات الترميز هذه هي HTML أو Hyper-Text Markup Language. يستخدم HTML لإنشاء مواقع الويب. على الرغم من أنه يمكنك التحكم في بعض أنماط موقع الويب باستخدام HTML ، فإن CSS توفر المزيد من خيارات التحكم والتصميم.
إنشاء موقع أساسي باستخدام HTML
نظرًا لأن CSS هي مجرد لغة نمط ، لاستخدامها ، نحتاج أولاً إلى شيء لتصميمه. سيكون موقع الويب الأساسي كافيًا لنا لبدء اللعب باستخدام CSS. ستعرض صفحتنا "Hello World".
مرحبا بالعالم
إذا لم تكن معتادًا على استخدام لغة HTML ، فلنراجع سريعًا ما تفعله جميع العناصر. كما ذكرنا ، HTML هي لغة ترميز ، مما يعني أنها تستخدم علامات لتمييز ماهية النص. كلما رأيت كلمة محاطة بها
<> إنها علامة. هناك نوعان من العلامات ، علامة تحدد بداية القسم باستخدام <> والأخرى تحدد نهاية القسم باستخدامفي مثالنا ، لدينا أربع علامات. ال لغة البرمجة تشير العلامة إلى العناصر التي تشكل جزءًا من موقع الويب. ال رئيس تحتوي العلامة على معلومات الرأس التي لا يتم عرضها على الصفحة ولكنها مطلوبة لإنشاء الصفحة. تقع جميع العناصر المعروضة بين ملف جسم العلامات. لدينا عنصر واحد معروض فقط ، وهو ص بطاقة شعار. يخبر متصفح الويب أن النص عبارة عن فقرة.
متعلق ب: 10 أمثلة بسيطة لرموز CSS يمكنك تعلمها في 10 دقائق
هل تريد معرفة المزيد عن استخدام CSS؟ جرب أمثلة كود CSS الأساسية هذه لتبدأ ، ثم قم بتطبيقها على صفحات الويب الخاصة بك.
إضافة CSS إلى HTML
الآن بعد أن أصبح لدينا صفحة بسيطة ، يمكننا تخصيص النمط باستخدام CSS. صفحتنا بسيطة جدًا في الوقت الحالي ، ولا يوجد الكثير مما يمكننا القيام به ، ولكن لنبدأ بجعل فقرتنا مميزة حتى نتمكن من تمييزها عن الخلفية عن طريق إضافة حد.
مرحبا بالعالم
الآن ، سيتم إحاطة فقرتنا بحد أسود. أدت إضافة وصف نمط في CSS إلى علامة الفقرة الخاصة بنا إلى إخبار موقع الويب بكيفية تصميم الفقرة. يمكننا إضافة المزيد من الأوصاف. دعنا نزيد المساحة البيضاء ، أو الحشو ، حول فقرتنا ونركز النص.
مرحبا بالعالم
يبدو موقعنا الإلكتروني أفضل ، لكن HTML الخاص بنا بدأ يبدو فوضوياً مع كل تلك الأوصاف في علامة الفقرة. يمكننا نقل هذه المعلومات إلى رأسنا. العنوان الخاص بنا هو للمعلومات التي نحتاجها لعرض الموقع بشكل صحيح.
مرحبا بالعالم
الآن أصبح HTML الخاص بنا أسهل في القراءة. ستلاحظ أنه كان علينا تغيير بعض الأشياء. تخبر علامة النمط معلومات نمط متصفح الويب ، ولكن أيضًا تخبر النمط الذي تريده. في مثالنا ، استخدمنا طريقتين مختلفتين لنخبرها بما يجب أن تصممه. ال ص في علامة النمط تخبر متصفح الويب بتطبيق هذا النمط على جميع علامات الفقرات. ال # فقرة يخبره القسم فقط بعناصر النمط ذات المعرف فقرة لدينا. لاحظ أن بطاقة تعريف تمت إضافة المعلومات إلى علامة p في أجسامنا.
استيراد ملف CSS إلى موقع الويب الخاص بك
تؤدي إضافة معلومات النمط إلى الرأس إلى تسهيل قراءة التعليمات البرمجية الخاصة بنا. ومع ذلك ، إذا أردنا تصميم العديد من الصفحات المختلفة بنفس الطريقة ، فعلينا إضافة هذا النص إلى أعلى كل صفحة. قد لا يبدو هذا كثيرًا من العمل ، يمكنك نسخه ولصقه بعد كل شيء ، ولكنه يخلق الكثير من العمل إذا كنت تريد تغيير عنصر لاحقًا.
بدلاً من ذلك ، سنحتفظ بمعلومات CSS في ملف منفصل واستيراد الملف لتصميم الصفحة. انسخ المعلومات والصقها بين علامات الأنماط في ملف CSS جديد ourCSSfile.css.
ص {
محاذاة النص: مركز
}
#ourParagraph {
نمط الحدود: صلب ؛
الحشو: 30 بكسل ؛
}ثم قم باستيراد الملف إلى ملف HTML.
مرحبا بالعالم
إضافة صورة خلفية باستخدام CSS
الآن بعد أن أصبح لديك قاعدة صلبة في HTML و CSS ، فإن إضافة صورة خلفية ستكون بمثابة قطعة من الكعكة. أولاً ، حدد العنصر الذي تريد إعطاء صورة خلفية له. في مثالنا ، سنضيف خلفية للصفحة بأكملها. هذا يعني أننا نريد تغيير نمط جسم. تذكر أن علامات النص تحتوي على جميع العناصر المرئية.
جسم{
صورة الخلفية: url ("sky.jpg") ؛
}
ص {
محاذاة النص: مركز
}
#ourParagraph {
نمط الحدود: صلب ؛
الحشو: 30 بكسل ؛
}لتغيير نمط الجسم في CSS ، استخدم أولاً ملف جسم كلمة رئيسية. ثم أضف الأقواس المتعرجة كما فعلنا من قبل {}. يجب أن تكون جميع معلومات النمط الخاصة بالجسم بين الأقواس المتعرجة. سمة النمط التي نريد تغييرها هي الصورة الخلفية. هناك العديد من سمات النمط. لا تتوقع أن تحفظها جميعًا. المرجعية أ ورقة الغش في خصائص CSS بسمات تريد أن تتذكرها.
متعلق ب: 8 تأثيرات HTML رائعة يمكن لأي شخص إضافتها إلى موقع الويب الخاص به
بعد السمة ، استخدم النقطتين للإشارة إلى كيفية تغيير السمة. لاستيراد صورة ، استخدم عنوان url (). يشير إلى أنك تستخدم ارتباط للإشارة إلى الصورة. ضع موقع الملف بين قوسين بين علامات التنصيص. أخيرًا ، قم بإنهاء السطر بفاصلة منقوطة. على الرغم من أن المساحة البيضاء ليس لها معنى في CSS ، استخدم المسافة البادئة لتسهيل قراءة CSS.
مثالنا يبدو كالتالي:
إذا لم يتم عرض صورتك بشكل صحيح بسبب حجم الصورة ، يمكنك تغيير الصورة مباشرة. ومع ذلك ، هناك سمات نمط الخلفية في CSS يمكنك استخدامها لتغيير الخلفية. سيتم تكرار الصور الأصغر من الخلفية تلقائيًا في الخلفية. لإيقاف ذلك ، أضف تكرار الخلفية: لا تكرار; إلى عنصرك.
هناك أيضًا طريقتان لجعل الصورة تغطي الخلفية بأكملها. أولاً ، يمكنك ضبط حجم الخلفية على حجم الشاشة باستخدام حجم الخلفية: 100٪ 100٪ ؛، ولكن سيؤدي ذلك إلى تمدد الصورة وقد يؤدي إلى تشويهها كثيرًا. إذا كنت لا تريد تغيير نسب الصورة ، يمكنك أيضًا ضبط حجم الخلفية على التغطية. الغلاف سيجعل صورة الخلفية تغطي الخلفية ، لكنه لن يشوه الصورة.
تغيير لون الخلفية
دعونا نغير شيئًا أخيرًا. الآن بعد أن أصبح لدينا خلفية ، من الصعب قراءة فقرتنا. لنجعل خلفيتها بيضاء. العملية متشابهة. العنصر الذي نريد تعديله هو #ourParagraph. يشير # إلى أن "ourParagraph" هو اسم معرف. بعد ذلك ، نريد ضبط لون الخلفية ينسب إلى الأبيض.
جسم{
صورة الخلفية: url ("sky.jpg") ؛
}
ص {
محاذاة النص: مركز
}
#ourParagraph {
لون الخلفية: أبيض؛
نمط الحدود: صلب ؛
الحشو: 30 بكسل ؛
}أفضل بكثير.
الاستمرار في تصميم موقع الويب الخاص بك باستخدام CSS
الآن بعد أن عرفت كيفية تغيير نمط عناصر HTML المختلفة ، فإن السماء هي الحد الأقصى! الطريقة الأساسية لتغيير سمات النمط هي نفسها. حدد العنصر الذي تريد تغييره ، ووصف كيفية تغيير السمة. أفضل طريقة لمعرفة المزيد هي اللعب بسمات مختلفة. تحدى نفسك لتغيير لون النص الخاص بك بعد ذلك.
هل تريد تعلم HTML لترميز مواقع الويب والتطبيقات الخاصة بك؟ استخدم أمثلة صفحات الويب هذه وكود المصدر لتعليم نفسك HTML و CSS.
- برمجة
- لغة البرمجة
- تصميم المواقع
- CSS
ج. سيتون كاتب علوم متخصص في تحليل الموضوعات المعقدة. حاصلة على دكتوراه من جامعة ساسكاتشوان. ركز بحثها على الاستفادة من التعلم القائم على الألعاب لزيادة مشاركة الطلاب عبر الإنترنت. عندما لا تعمل ، ستجدها معها تقرأ أو تلعب ألعاب الفيديو أو تعمل في البستنة.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
خطوة أخرى أيضا…!
يرجى تأكيد عنوان بريدك الإلكتروني في البريد الإلكتروني الذي أرسلناه لك للتو.
