تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: تطبيق


الصفحة السابقة
  1. أنشأ ملف واطلق عليه اسم index.html
  2. أنشأ ملف واطلق عليه اسم style.css
  3. انسخ داخل الملف index.html الكود التالي
  4. 
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Les cupcakes</title>
        </head>
    
        <body>
            <h1>Vive les cupcakes</h1>
            
            <p>J'ai découvert les cupcakes lors d'un voyage à 
                <a href="https://fr.wikipedia.org/wiki/New_York">
                    New York
                </a>
                ... et depuis c'est une véritable passion. Sur mon site, vous saurez 
                <strong>tout</strong> sur les cupcakes !</p>
            
            <p>Un cupcake ? C'est ça :</p>
            
            <figure>
            <img src="cupcake.jpg" alt="Cupcake" />
            <figcaption>Un cupcake</figcaption>
            </figure>
            
            <p>Délicieux non ? Sur mon site, je vous présenterai :</p>
            
            <ul>
            <li>Les différentes variétés de cupcakes</li>
            <li>Leur histoire</li>
            <li>Leurs recettes</li>
            </ul>
            
        </body>
    </html>        
    
  5. اختر صورة واطلق عليها اسم cupcake.jpg و ضعها في المجلد المناسب بحيث تظهر داخل الصفحة بدون ان نغير في الكود HTML
  6. أضف علامة لربط ملف CSS بملف HTML
  7. ضع عرض العنوان h1 باللون الأحمر
  8. كبر حجم العنوان h1 لمنحه حجم em2
  9. ضع الصورة مع وصفها في الوسط
  10. أضف حدًا مستمرًا من الحجم واللون الذي تختاره حول القائمة النقطية
  11. أضف ظلًا إلى الإطار حول القائمة النقطية
  12. أظهر الروابط بالخط العريض عند التمرير مؤشر الماوس فوقها

النتيجة المنتظرة ستكون بهذا الشكل مع تغيير في الألوان


css html file

الحل المقترح


  • السؤال 5:
    
        <link href="style.css" rel="stylesheet">        
    
  • السؤال 6:
    
    h1{
        color:red;
    }
    
  • السؤال 7:
    
    font-size:2em;
    
  • السؤال 8:
    
    figure{
        text-align:center;
    }      
    
  • السؤال 9:
    
    ul{
      border:solid 1px red;
    }           
    
  • السؤال 10:
    
    box-shadow:6px 6px 0px grey;        
    
  • السؤال 11:
    
    a:hover{
     font-weight:bold;
    }