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

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

هذي مهمة تنسيق النصوص ,ملاحظة خاصية زخرفة النص حاولت اطبقها في بيئة العمل لم تعمل معي ما المشكلة ؟ ارجو اطلاعي على الأخطاء :herb:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>king Tips</title>
		<link href="https://fonts.googleapis.com/css?family=Merriweather:400i,700&display=swap" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css?family=Courgette|Merriweather:400i,700|Rokkitt&display=swap" rel="stylesheet">  
		<link href="https://fonts.googleapis.com/css?family=Courgette|Kaushan+Script|Merriweather:400i,700|Rokkitt&display=swap" rel="stylesheet"> 
		<style>
            body{
                background-color:#B0C4DE;
				
            }
			 h1 {
			   padding:10px;
			   background-color:#302895 ;
               width:600px;		 
			   color:#FFD700;			   
		       text-align:center;
			   line-height:80px;
			   font-size:40px;
			   font-family: 'Merriweather', serif;
			   letter-spacing:1px;
			   text-transform:uppercase;
			   text-decoration-line: underline; 
			   text-decoration-style: wavy;
			   text-decoration-color:#B0C4DE;		   }
           p{	
                background-color:#E6E6FA  ;
                padding:10px;
                text-align: center;
                width:450px;
                color:#006400 ;
                line-height:33px;
                font-size:23px;
                font-style: italic;
                font-family: 'Courgette', cursive;
                letter-spacing:2px;
                text-transform:capitalize; 
            }
		  div p{
                text-align:center;
                background-color:#dbece9 ; 
                color:#9c5816;		
                width:450px;
                padding:10px;
                line-height:33px;
                font-size:23px;
                font-weight: bold;
                font-family: 'Kaushan Script', cursive;
                letter-spacing:2px;
                text-transform:capitalize; 
			}
         ul li{
            list-style-type:square;
			font-size=35px;
			font-weight:bold;
			color:#FFD700;
			
              }
		 ol li{
		   list-style-type:circle;
		   color:#ffffff;
		 }	  
		 a{
		      text-decoration-line: underline; 
			  text-decoration-style: wavy;
			  text-decoration-color: #FFD700;
		 }
        </style>
   </head>
    
   <body  dir='ltr'>
	  
         <ul>
         	<li><h1>Tips of today:-</h1></li>
	     </ul>
         <ol>			
	      <li>
		     <p>Never give up. Today is hard, tomorrow will be worse, but the day after tomorrow will be <a href="http://fabquote.co/wp-content/uploads/Let-the-sun-shine-on-your-soul-1-794x1412.jpg" target="_blank" title="sunshine"><u>sunshine</u></a></p>
          </li>  
		  <li>
		   <div>		   
    		 <p><b>If you work just for money, you'll never make it, but if you love what you're doing</b><a href="https://sial.school/wp-content/uploads/2018/12/believing-in-yourself-is-the-secret-to-success.jpg" target="_blank" title="success"><u>success</u></a> will be yours</p> 
		   </div>
		  </li>
   	     </ol>   
         <hr/>
   </body>

</html>
1 Like
#63

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

وهذه ملاحظاتي:

  • قمتي بإستخدام الخاصية font-weight بالقيمة italic، هذه القيمة ليست من قيم هذه الخاصية وإنما من قيم الخاصية font-style.

  • قيمة اللون في الخاصية التالية background-color:#9d; غير صحيح فلا يوجد هيكس كود للألوان بالقيمة 9d# أعتقد بإنه حرف سقط عليك سهواً.

  • نقس الملاحظة في التطبيق الأول بخصوص السمة align حيث أشرت بأنها لم تعد مدعومة في لغة HTML5.

  • نفس الملاحظة بخصوص وضع العنصر h1 كإبن مباشر للعنصر ul وكذلك وضع العنصر div كإبن مباشر للعنصر ol، ضعيهم بداخل li كم وضحت لك في ملاحظات تطبيقك السابق.

خاصية زخرفة النص حاولت اطبقها في بيئة العمل لم تعمل معي ما المشكلة

صحيحة لا يوجد فيها أي مشكلة، قمت بتجربتها كذلك على بيئة العمل وإشتغلت عندي بالشكل المطلوب قومي بمحاولة ذلك مرة أخرى ربما كانت بيئة العمل معلقة عندك، وقولي لي بالنتيجة

وأحييك على مجهودك الرائع وطريقتك في التطبيق بشكل خارج عن المألوف :clap:

1 Like
#64

تم التعديل…

لم يشتغل, اعتقد ان الخلل من الجهاز بما اني جربته على الnotpad .
ساحول التجربة مرة أخرى

1 Like
#65

المهمة المطلوبة:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
        
        <style>
            body{
                background-color:#FF5733;
            }
            p{
                width:400px;
                background-color:#AFA5A3;
                font-size: 30px;
                font-family: 'Indie Flower', cursive;
                text-align: center;
                text-transform: capitalize;
                line-height: 50px; 
            }
           div p{
                width:400px;
                background-color:#0E0907;
                color:#ffffff;
            }
        </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>
#66 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>التدرب على لغة التنسيقات</title>
	<link href="https://fonts.googleapis.com/css?family=Oswald:400,500&display=swap" rel="stylesheet">
	<style >
		body{
			background-color: #b2bec3;
			font-family: 'Oswald', sans-serif;
			

			font-size: 20px;
			text-align: center;
			text-transform: capitalize;
		
			letter-spacing: 1px;
			line-height: 65px;

	}
		
	

		p{
			
			color: white;
			background-color: #2c3e50;
			height: 150px;
		
			width: 70%;

			
			
		
		}
		div p{
			background-color: #b71540;
			color: #F8EFBA;
			

		}
		a{
			text-decoration: none;
			color: #fff200;
		}
		
	</style>
</head>
<body>
	
	<p>
    Never give up. Today is hard, tomorrow will be worse,
    but the day after tomorrow will be<a href="#"> sunshine</a>
	</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>

work2
work2.PNG978×483 17.8 KB

#67 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{
        background-color:#ffe3c7;
            
        }
        p{
            background-color:#4b0063;
             width:340px;
             color:#d1e3a5;
            font-family: 'Liu Jian Mao Cao', cursive;
        }
        div p{
            background-color:#460f0fd1;
            width:341px;
            color:#67deea;
            font-family: 'Liu Jian Mao Cao', cursive;
            text-decoration-line: underline;
            
        }
    </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
#68

image

تنسيقات جميلة والأكواد مضبوطة :+1:

1 Like
#69

شكرا لك :heart::heart:

1 Like
#70 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{background-color:#DAF7A6;}
        p{
            width:400px;
            background-color:#C70039;
            text-transform: uppercase;
            font-family: 'Liu Jian Mao Cao', cursive;
            letter-spacing: normal;
            
            
        }
        div p{
            background-color:#09BF67;
            text-transform: capitalize;
            font-family: 'Anton', sans-serif;
            font-size:25px;
            text-align: center;
            letter-spacing: 5px;
            text-decoration-line: underline;
        }
        
    </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
#71

عمل رائع :grin::clap:

image

1 Like
#72 
<!Doctype html>
<html>
    <head>
        <meta charset ="utf-8">
        <style>
            p{width: 400px;}

            body{background-color: fuchsia ;}
            p{color: blue ; background-color: aliceblue; font-size: 50px; text-align: center ; text-decoration: none; text-transform: none; font-family: <link href="https://fonts.googleapis.com/css?family=Cairo:600&display=swap&subset=arabic" rel="stylesheet">;}
            div p{color: blueviolet ; background-color: black;font-size: 80px; text-align: center ; text-decoration: underline; text-transform: none; font-family: <link <link href="https://fonts.googleapis.com/css?family=Lalezar&display=swap" rel="stylesheet">;}
            
        </style>
        <title>
            task1 css
        </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>
1 Like
#73

مية مية يا أميرة فقط عندي ملاحظة واحدة:

قمتي بإضافة أكواد خطوط قوقل بداخل اكواد الـ CSS

font-family: <link href="https://fonts.googleapis.com/css?family=Cairo:600&display=swap&subset=arabic" rel="stylesheet">;

font-family: <link <link href="https://fonts.googleapis.com/css?family=Lalezar&display=swap" rel="stylesheet">;

قومي بمراجعة درس الخطوط وإصلاح هذه المشكلة بحيث تكون القيمة في الخاصية font-family هي فقط اسم الخط.

إذا تحتاجي اي مساعدة او توضيح اكثر كلميني

1 Like
#74 
<html>
    <head>
        <meta charset ="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Cairo:600&display=swap&subset=arabic" rel="stylesheet">
        <link <link href="https://fonts.googleapis.com/css?family=Lalezar&display=swap" rel="stylesheet">
        
        <style>
            p{width: 400px;}

            body{background-color: fuchsia ;}
            p{color: blue ; background-color: aliceblue; font-size: 50px; text-align: center ; text-decoration: none; text-transform: none; font-family: 'Cairo' ;}
            div p{color: blueviolet ; background-color: black;font-size: 80px; text-align: center ; text-decoration: underline; text-transform: none; font-family: 'Lalezar' ;}
            
        </style>
        <title>
            task1 css
        </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>
1 Like
#75

مية مية :star_struck::ok_hand:

فقط شيلي الكلمة <link <link المتكررة في الكود الثاني الخاص بالخط

1 Like
#76 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet">
    </head>
    <style>
        body{
            background-color: #827f7e;
        }
        p{
            width: 400px;
            height: 80px;
            font-size: 22px;
            background-color: #726f6f;
            color: #D8BFD8;
            font-family: 'Shadows Into Light', cursive;
            line-height: 27px; 
            letter-spacing: 2px;
            text-decoration: underline dashed #C70039 ;
            text-align: center;
        }
        div p{
         background-color: #5f5c5c;
         color: #ADFF2F; 
         font-family: 'Shadows Into Light', cursive;
         letter-spacing: 1px; 
         text-decoration: none;
        }
    </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>![image|690x469](upload://tN6CjIVwH47UbICvUnGc1AhuEwQ.png)

image
image.png878×598 30.3 KB

1 Like
#77

مية مية أبو حمزة :ok_hand:

#78

في الخاصية font-family ليش القيمة اللي عم نعطيها للخاصية بهذا الشكل ‘Shadows Into Light’, cursive

1 Like
#79

@Abu_Hamza

لماذا عندنا أكثر من إسم خط في الخاصية؟

بنعطيها خطين أو أكثر وكل خط يفصلة عن الاخر فاصلة، والسبب هو علشان يكون مثل الـ backup فمثلاً إذا الخط الأول 'Shadows Into Light' مش موجود لسبب من الاسباب سيتم تطبيق الخط الثاني cursive وفي حال كان الخط الثاني كذلك غير موجود في هذه الحالة سيتم تطبيق الخط الإفتراضي الموجود على جهاز المستخدم

font-family: 'Shadows Into Light', cursive;

لماذا القيمة الأولى معها إشارتي تنصيص؟

لو تلاحظ القيمة 'Shadows Into Light' عندها علامتي تنصيص مفردة وسبب قيامنا بإعطائها تلك العلامتين هو وجود مسافات فارغة بين الكلمات المكونة لإسم الخط.

هل يوجد شئ أخر تحتاج لأن أقوم بتوضيحة؟

1 Like
#80

شكراً للتوضيح

1 Like
#82

2

الصفحة الرئيسية body { background-color:violet; } p { color: black; background-color: white; width: 400px; font-family: 'Press Start 2P', cursive; padding: 17px; letter-spacing: -2px; font-size: 15px; line-height: 25px; 
    }

    div p
    {
        color:white;
        background-color: black;
        width:400px;
        font-family: 'Sriracha', cursive;
        padding: 5px;
        letter-spacing: 0px;
        font-size: 18px;
        line-height: 28px;
        text-decoration: underline wavy darkcyan;
        font-size: 20px;
        line-height: 34px;
        
    }
</style>

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

<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>

</body>
1 Like