كيف أغير لون أو صورة الخلفية في HTML؟

2 يونيو 2016

كيف أستطيع تغيير لون أو صورة الخلفية في HTML؟ وهل من طريقة تعمل على الإصدار الجديد من HTML (HTML 5)؟

2 يونيو 2016

بالنسبة لإصدارات HTML القديمة، ما قبل الإصدار الخامس، فلإضافة خلفية تحتاج إلى استخدام صفة background من وسم <body> حيث ستضع مسار الصور التي تريد جعلها كخلفية أو اللون المطلوب كما في المثال التالي:

 <html>
<body background="bgimage.jpg">
<h1>Hello world!</h1>
<p>Academy.Hsoub.com</p>
</body>
</html>

أما في الإصدار الخامس من HTML فلقد تم حذف صفة background نهائيا ولإضافة خلفية ستحتاج إلى استخدام CSS كما في المثال التالي:

<body style="background-image:url(bgimage.jpg)">

للمزيد من المعلومات حول هذه الصفة أنصحك بالإطلاع على هذا الدرس.

3 يونيو 2016

لتغيير لون الخلفية background لعنصر -وسم- أو للصفحة ككل نستعمل خاصية background-color داخل ملف التنسيق css، حيث نعطيها قيمة للون المُراد إظهاره كخلفية، ويتم ذلك بإحدى الطريقتين:

إعطاء كود Hexadecimal للون مثال: 000000# للون الأبيض، FFFFFF# للون الأسود...
إعطاء اسم اللون باللغة الانجليزية: Green،Gold، Red...

مثال:

 <!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

فيما يخص وضع صورة كخلفية لن أضيف شيئا عن ما تفضل هشام بشرحه، سوى هذا المثال:

element{
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

26 فبراير

كيف استطيع قيام ببرمجة 6 عناوين بأحجام مختلفة وكل عنوان لون ومحاذاة مختلفة؟

27 فبراير

بتاريخ 3 ساعة قال Gamella Saeed:

كيف استطيع قيام ببرمجة 6 عناوين بأحجام مختلفة وكل عنوان لون ومحاذاة مختلفة؟

في HTML يوجد عنصر h من أجل العناوين، وتترواح أحجامه بدءًا من h1 إلى h6 حيث 1 هو العنوان الرئيسي ويقل حجمه إلى أصغر فأصغر حتى h6

أما المحاذاة فنستخدم خاصية text-align في CSS ولها القيم التالية:

center: تضع النص في المنتصف.
right: النص في اليمين.
left: النص في اليسار.
justify: تضبط النص وتوزعه بالتساوي وذلك يظهر تأثيره في النصوص الطويلة.

قومي بتجربة الكود التالي:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>6 عناوين مختلفة</title>
</head>
<body>

    <h1 style="color: red; text-align: center;">
        1. العنوان الأول (أكبر حجم)
    </h1>

    <h2 style="color: blue; text-align: right;">
        2. العنوان الثاني (حجم كبير)
    </h2>

    <h3 style="color: green; text-align: left;">
        3. العنوان الثالث (حجم متوسط)
    </h3>

    <h4 style="color: purple; text-align: justify;">
        4. العنوان الرابع (حجم عادي). تم استخدام محاذاة الضبط (justify) هنا، وهي مفيدة إذا كان النص طويلاً حيث تجعل حواف النص متساوية من اليمين واليسار.
    </h4>

    <h5 style="color: orange; text-align: right; padding-right: 25%;">
        5. العنوان الخامس (حجم صغير) - تم إزاحته بنسبة 25% من اليمين لتكون محاذاته مختلفة.
    </h5>

    <h6 style="color: brown; text-align: left; padding-left: 20%;">
        6. العنوان السادس (أصغر حجم) - تم إزاحته بنسبة 20% من اليسار.
    </h6>

</body>
</html>

لاحظي خيارات المحاذاة الأساسية هي يمين، يسار، وسط، لذا قمت باستخدام خاصية padding-right و padding-left في العنوانين الخامس والسادس لإعطائهما محاذاة مخصصة ومختلفة عن البقية عبر إزاحتها بنسب مئوية.

كيف أغير لون أو صورة الخلفية في HTML؟

السؤال

TheBrain

4 أجوبة على هذا السؤال

Recommended Posts

هشام رزق الله

E.Nourddine

Gamella Saeed

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية