مشاركة حلول: مهمة التدرب على لغة التنسيقات

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
#112

تنسيق الصفحة بإستخدام ال Css

<html>
    <head>
        <meta charset="UTF-8" >
        <title>Page</title>
        <style>
            body{
                background-color: #32775e;
            }
            header{
                color:#fff;
                background-color: #e00;
                width:400px;
            }
            div{
                background-color: #ffd526;
                width:400px;
            }
        </style>
    </head>
    <body>
        <header >
            <p>
                Never give up. Today is hard, tomorrow will be worse,
                but the day after tomorrow will be sunshine
            </p>
        </header>

        <div >
            <p>
                If you work just for money, you'll never make it, but if you
                love what you're doing success will be yours
            </p>
        </div>
    </body>
</html>
1 Like
#113

عمل رائع ي محمد :+1:

1 Like
#114

اجابة سؤال التنسيق

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{
            background-color:#48D1CC;
        }
        p{
            background-color:#4682B4;
            width:400px;
            color:white;
        }
        div p{
            background-color:#5F9EA0;
        }
    </style>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine
        </p>
        <div>
            <p>
                If you work just for money, you'll never make it, 
                but if you love what you're doing success will be yours
            </p>
        </div>
    </body>
</html>
1 Like
#115 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        
    </style>
    <body>
        
        <p class="p1">
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine
        </p>
        
        <p class="p2">
            If you work just for money, you'll never make it, 
            but if you love what you're doing success will be yours
        </p>
        
    </body>
</html>

body {
    background-color: #333;
}

p {
    width: 400px;
    color: #f4f4f4;
}

.p1 {
    background-color: red;
}

.p2 {
    background-color: blue;
}

Capture

1 Like
#116

مية مية أنس، عمل ممتاز :+1:

#117

عمل إحترافي محمد :+1:

#119 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hi</title>
</head>
<body>

		
	 <p>Never give up. Today is hard, tomorrow will be worse,
		but the day after tomorrow will be sunshine<p>
		
		<div>
			<p> If you work just for money, you'll never make it, but if you
				 love what you're doing success will be yours</p>
		</div>

</body>
</html>
<style>
	body{
		background:  #3d442b ;
		}
 p  {
		color: #00bdff;
		background-color:#f6f4ea;
		width:400px;
		}
	div p {
		color:#f87e4d;
		width:400px;
		background-color:#faecb9;
		}
</style>
1 Like
#120

عمل رائع ي أحمد :clap:

أرجوا منك كذلك الإطلاع على مرجع إستخدام المحرر لوضع الأكواد بالشكل الصحيح:

#122
ما الخطأ هنا ؟ body{ background-color:#DAF7A6; } p{ color:white; width:400px; background-color:#EE3A14; } div p{ color:black; width:400px; background-color:#C7CDD4; }
#123

وهل عمل الكلاسات امر جيد ام سىء ؟

2 Likes
#124
لغة التنسيقات p{ width: 400px; background-color: #ED8561; color: white; } 
	body{
		background-color: #CBF198;
	}

	div p{
		background-color: #4A68EC;
	}

</style>

Never give up. Today is hard, tomorrow will be worse, but the day after tomorrow will be sunshine

If you work just for money, you'll never make it, but if you love what you're doing success will be yours

2 Likes
#126

مهمة التدرب على لغة التنسيقات

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body {
            background-color: #1A1C1E;
        }
        p {
            background-color: #282B2D;
            color: #fff;
        }
        div p {
            background-color: #484D51;
            color: #fff;
        }
    </style>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse,
            but the day after tomorrow will be sunshine
        </p>

        <div>
            <p>
                If you work just for money, you'll never make it, but if you
                love what you're doing success will be yours
            </p>
        </div>
        
    </body>
</html>
2 Likes
#127 
<!DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title>مهمة التدرب على لغة التنسيقات</title>
    <style>
    body{
      background-color: #D39F93;
      color:#31456E;
      font-size: 18px;
    }
    p{
      background-color: #FFE4C4;
      width: 400px;
    }
      div p{
        background-color: #AFC3ED;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <p>
      Never give up. Today is hard, tomorrow will be worse,
      but the day after tomorrow will be sunshine
  </p>
  <div>
       <p>
           If you work just for money, you'll never make it, but if you
           love what you're doing success will be yours
       </p>
  </div>
  </body>
</html>
2 Likes
#128

‏لقطة الشاشة ١٤٤١-٠٧-٠٩ في ٨.١٣.٢١ م
‏لقطة الشاشة ١٤٤١-٠٧-٠٩ في ٨.١٣.٢١ م1440×900 29.3 KB

2 Likes
#129

مهمة التدرب على لغة التنسيقات :wink::blush:::
1- الكود:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body {
            background-color: #0E5C86;
        }
        p {
            width: 400px;
            background-color: aqua;
            color: blueviolet;
        }
        div p {
            width: 400px;
            background-color: blueviolet;
            color: aqua;
        }
    </style>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine
        </p>
        <div>
            <p>
                If you work just for money, you'll never make it, 
                but if you love what you're doing success will be yours
            </p>
        </div>

    </body>
</html>

2- صورة:

مهمة تدريب على لغة التنسيقات
مهمة تدريب على لغة التنسيقات1366×724 22.6 KB

2 Likes
#130
مهمة التدرب على لغة التنسيقات p{ width:400px; color:black; } body{ background:#900C3F; } 
</style>
<body>
    
    <p style="background:#DAF7A6">
        Never give up. Today is hard, tomorrow will be worse, 
        but the day after tomorrow will be sunsahine
    </p>
    
    <p style="background:#89DF70">
        If you work just for money, you'll never make it, 
        but if you love what you're doing success will be yours
    </p>
    
</body>
1 Like
#131

أمر جيد أستاذ محمد يقصد انك استخدمت الكلاسات وهذا شيء متقدم ما شاء الله

1 Like
#132

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

1 Like
#133

جيد جدا لا تنس اعطاء الفقرة النصية width بقيمة 400px

1 Like
#134

مراجعة أكوادك من قبل المدربين المختصين متاحة فقط للمسجلين في مخيم كورتابز :point_left: coretabs.net