تطوير موقع ويب باستخدام JavaScript مع HTML وCSS
تفاصيل العمل
الهيكل الأساسي للصفحة (HTML)
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>موقعي التجريبي</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>مرحباً بك في موقعي</h1>
</header>
<main>
<p>اضغط الزر لرؤية رسالة تفاعلية:</p>
<button id="myButton">اضغطني</button>
<p id="message"></p>
</main>
<script src="script.js"></script>
</body>
</html>
2️⃣ تنسيق الصفحة (CSS)
CSS
/* style.css */
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px 0;
margin-bottom: 30px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#message {
margin-top: 20px;
font-weight: bold;
color: #ff5722;
}
3️⃣ البرمجة التفاعلية (JavaScript)
JavaScript
// script.js
// اختيار الزر والعنصر لإظهار الرسالة
const button = document.getElementById('myButton');
const message = document.getElementById('message');
// إضافة حدث عند الضغط على الزر
button.addEventListener('click', () => {
message.textContent = "لقد ضغطت الزر! ?";
});
✅ ما الذي يفعله الموقع الآن؟
صفحة ويب بسيطة بها عنوان وترحيب.
زر عند الضغط عليه يظهر رسالة تفاعلية باستخدام JavaScript.
الألوان والتنسيق تم باستخدام CSS لجعل الموقع جذاب.
? التطوير التالي الممكن:
إضافة نموذج تسجيل دخول.
عمل قائمة تنقل (Navigation bar).
إضافة ألوان ديناميكية أو صور متحركة.
ربط الموقع بقاعدة بيانات باستخدام Node.js أو Firebase.