مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
تصميم موقع ويب متكامل — HTML و CSS خطوة بخطوة — الإعلام الآلي — السنة الرابعة متوسط — المنهاج الجزائري
درس تطبيقي شامل حول تصميم موقع ويب متكامل باستخدام HTML و CSS. مشروع عملي لتلاميذ السنة الرابعة متوسط.
المحتوى العلمي
1. إنشاء الهيكل الأساسي لصفحة HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>مدرستي</title>
</head>
<body>
<!-- المحتوى هنا -->
</body>
</html>
2. إضافة التنسيقات باستخدام CSS
/* داخل الوسم style أو في ملف خارجي */
body {
font-family: "Arial", sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
color: #333;
}
header {
background-color: #4472C4;
color: white;
padding: 20px;
text-align: center;
border-radius: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
section {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
footer {
text-align: center;
color: #777;
margin-top: 30px;
}
3. مشروع متكامل: موقع المدرسة
<body>
<header>
<h1>مدرستي المتوسطة</h1>
<nav>
<a href="#">الرئيسية</a>
<a href="#">الأقسام</a>
<a href="#">النشاطات</a>
<a href="#">اتصل بنا</a>
</nav>
</header>
<section>
<h2>أهلاً بكم في موقع مدرستنا</h2>
<p>نرحب بكم في موقع مدرستنا المتوسطة. هنا تجدون كل المعلومات حول المناهج والنشاطات والفعاليات المدرسية.</p>
</section>
<section>
<h2>أحدث الأخبار</h2>
<article>
<h3>رحلة علمية إلى محمية طبيعية</h3>
<p>نظمت المدرسة رحلة علمية إلى محمية طبيعية لتلاميذ السنة الثالثة متوسط.</p>
</article>
<article>
<h3>مسابقة الرياضيات السنوية</h3>
<p>اختتام مسابقة الرياضيات بمشاركة 50 تلميذا من مختلف المستويات.</p>
</article>
</section>
<footer>
<p>جميع الحقوق محفوظة © 2026 مدرستي المتوسطة</p>
</footer>
</body>
تمارين تطبيقية
- أنشئ صفحة HTML تعريفية بنفسك تحتوي على: اسمك، عمرك، هواياتك، صورتك (placeholder).
- أضف قائمة منسقة (CSS) تحتوي على روابط لمواقع تعليمية مفيدة.
- صمم بطاقة تعريفية (card) لمعلم باستخدام CSS: صورة، اسم، مادة، شهادة.
- أنشئ نموذج تواصل (Contact Form) مع تنسيق جذاب.
- اجمع كل ما سبق في موقع متكامل من صفحة واحدة.
خلاصة
تصميم مواقع الويب مهارة قيمة في العصر الرقمي. HTML يبني الهيكل و CSS يضيف الجمال والتنظيم. بالممارسة والتجربة، يمكنك إنشاء مواقع ويب احترافية لمدرستك أو مشاريعك الشخصية.
دروس مشابهة
- الإعلام الآلي — أنظمة التشغيل: إدارة العمليات والذاكرة والملفات مع تمارين — الثا
- الإعلام الآلي — لغات البرمجة (تمارين وحلول) — السنة الثالثة متوسط
- الأمن السيبراني وحماية المعلومات — التهديدات الإلكترونية وطرق الوقاية — الإعلام