كيفيه تعلم انشاء موقع بلعة javascript .CSS.HTML علي استديو كود 2024
كيفيه تعلم انشاء موقع بلعة javascript .CSS.HTML علي استديو كود 2024
1. إنشاء مشاريع المشروع
قم بوجود مجلد جديد على جهاز الكمبيوتر الخاص بك، ثم أنشئ ثلاثة مل
index.html(لكstyle.css(script.js(لإ
<!DOCTYPE html>
<html lang="en">
<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>
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">عنّا</a></li>
<li><a href="#">تواصل معنا</a></li>
</ul>
</nav>
<main>
<p>هذا هو موقعي الأول باستخدام HTML وCSS وJavaScript!</p>
<button id="myButton">اضغط هنا</button>
</main>
<footer>
<p>حقوق الطبع © 2024</p>
</footer>
<script src="script.js"></script>
</body>
</html>
/* تنسيق عام */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
/* رأس الصفحة */
header {
background: #4CAF50;
color: white;
text-align: center;
padding: 1rem 0;
}
/* شريط التنقل */
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
background: #333;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 10px 20px;
}
nav ul li a:hover {
background: #4CAF50;
border-radius: 5px;
}
/* المحتوى الرئيسي */
main {
padding: 20px;
text-align: center;
}
/* الفوتر */
footer {
background: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
// إضافة حدث عند الضغط على الزر
document.getElementById('myButton').addEventListener('click', function () {
alert('مرحبًا! شكرًا لزيارتك.');
});
No comments