مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
تمارين في HTML و CSS: تصميم صفحات الويب
HTML و CSS هما أساس تصميم صفحات الويب. هذا الدرس يقدم تمارين شاملة في إنشاء وتنسيق صفحات الويب باستخدام HTML5 و CSS3.
أولا: هيكل صفحة HTML الأساسية
كل صفحة HTML تبدأ بالهيكل التالي:
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحبا بالعالم!</h1>
<p>هذه صفحتي الأولى.</p>
</body>
</html>
ثانيا: الوسوم الأساسية
العناوين: h1 إلى h6 — الفقرات: p — الروابط: a — الصور: img — القوائم: ul, ol, li — الجداول: table, tr, td.
مثال 1: إنشاء صفحة تعريف شخصية.
<h1>أحمد بن علي</h1>
<p>طالب في السنة الثالثة ثانوي</p>
<h2>المهارات</h2>
<ul>
<li>البرمجة بلغة بايثون</li>
<li>تصميم صفحات الويب</li>
</ul>
<a href="https://example.com">موقعي الشخصي</a>
ثالثا: CSS – تنسيق الصفحات
CSS تستخدم لتنسيق مظهر الصفحة: الألوان، الخطوط، الهوامش، الخلفيات، التوزيع.
/* تنسيق الصفحة */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #0066cc;
text-align: center;
border-bottom: 2px solid #0066cc;
padding-bottom: 10px;
}
.card {
background: white;
border-radius: 8px;
padding: 20px;
margin: 15px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
رابعا: تصميم متجاوب (Responsive)
استخدام Media Queries لجعل الصفحة متجاوبة مع جميع أحجام الشاشات:
/* للأجهزة المحمولة */
@media (max-width: 768px) {
body { font-size: 14px; padding: 10px; }
.card { margin: 10px 0; }
}
تمارين تطبيقية
- أنشئ صفحة HTML تحتوي على: عنوان رئيسي، فقرة تعريفية، قائمة منسقة، وصورة.
- أضف جدولاً بسيطاً يعرض جدول الحصص الأسبوعي.
- استخدم CSS لتغيير ألوان الصفحة وإضافة خلفية جميلة.
- أنشئ بطاقة (Card) لعرض معلومات شخصية باستخدام HTML و CSS.
- اجعل الصفحة متجاوبة باستخدام Media Queries.
- أنشئ نموذج تسجيل (Form) يحتوي على: الاسم، البريد الإلكتروني، كلمة المرور، زر الإرسال.
خلاصة
HTML و CSS أساسيات تصميم الويب. HTML يحدد هيكل الصفحة ومحتواها، بينما CSS تتولى التنسيق والمظهر الجمالي. إتقان هاتين التقنيتين ضروري لأي مطور ويب.
دروس مشابهة
- HTML: الوسوم الأساسية (عنوان، فقرة، رابط، صورة، جدول)
- CSS: تنسيق صفحات الويب (الألوان، الخطوط، الهوامش، الخلفيات)