أول حاجة: يعني إيه موقع ويب؟
أي موقع على الإنترنت هو عبارة عن:
شكل (Design)
محتوى (Text / Images)
حركة وتفاعل (Interactivity)
والتلات حاجات دول بيتقسموا على 3 لغات:
الجزء
اللغة
وظيفته
المحتوى
HTML
بناء الصفحة
الشكل
CSS
تصميم الصفحة
التفاعل
JavaScript
تشغيل الصفحة
أولًا: HTML (الأساس اللي بيتبني عليه كل حاجة)
HTML هي إيه؟
هي لغة بتستخدم عشان “نبني الصفحة” زي ما بنبني بيت.
بتعمل إيه؟
HTML بتحدد:
العناوين (Headings)
الفقرات (Paragraphs)
الصور (Images)
الروابط (Links)
الأزرار (Buttons)
النماذج (Forms)
مثال صفحة HTML بسيطة:
HTML
<!DOCTYPE html>
<html>
<head>
<title>أول موقع لي</title>
</head>
<body>
<h1>مرحبًا بيكي </h1>
<p>دي أول صفحة HTML</p>
<img src="/image.jpg" alt="صورة">
<button>اضغط هنا</button>
</body>
</html>
شرح مهم:
<h1> = عنوان كبير
<p> = فقرة
<img> = صورة
<button> = زرار
يعني HTML = “العظم” أو الهيكل الأساسي للموقع
ثانيًا: CSS (الشكل والتصميم)
CSS هي إيه؟
هي اللغة اللي بتخلي الموقع شكله جميل ومرتب.
بتعمل إيه؟
ألوان
خطوط
أحجام
مسافات
ترتيب العناصر
تأثيرات (Shadow, Hover)
مثال CSS:
CSS
body {
background-color: #f5f5f5;
font-family: Arial;
}
h1 {
color: darkblue;
text-align: center;
}
button {
background-color: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
شرح بسيط:
background-color = لون الخلفية
color = لون النص
padding = مسافة داخل العنصر
text-align = محاذاة النص
CSS = “الديكور والشكل الخارجي”
ثالثًا: JavaScript (العقل والحركة)
JavaScript هي إيه؟
هي اللي بتخلي الموقع “يتحرك ويتفاعل”.
بتعمل إيه؟
تغير محتوى الصفحة
تتعامل مع الأزرار
تعمل تنبيهات
تتحقق من البيانات
تعمل تطبيقات كاملة
مثال بسيط:
HTML
<button onclick="changeText()">اضغط هنا</button>
<p id="text">النص قبل التغيير</p>
<script>
function changeText() {
document.getElementById("text").innerHTML = "تم التغيير ";
}
</script>
شرح:
onclick = لما تضغط على الزر
function = وظيفة أو أمر
getElementById = يجيب عنصر من الصفحة
innerHTML = يغير النص
JavaScript = “العقل اللي بيشغل الموقع”
التلاتة مع بعض بيعملوا إيه؟
مثال حقيقي:
لو عندك زرار:
HTML:
بيعمل الزرار نفسه
CSS:
يخليه شكله حلو
JavaScript:
يخليه يشتغل لما تدوسي عليه
مثال مشروع كامل (مهم جدًا)
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial;
background-color: #f0f0f0;
}
button {
padding: 10px;
background-color: blue;
color: white;
border: none;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>مشروعي الأول 🚀</h1>
<p id="msg">اضغطي على الزر</p>
<button onclick="changeMessage()">اضغط هنا</button>
<script>
function changeMessage() {
document.getElementById("msg").innerHTML = "تم التغيير بنجاح ";
}
</script>
</body>
</html>
الخلاصة الكبيرة
أي موقع في العالم قائم على:
HTML = بناء
CSS = شكل
JavaScript = تفاعل
نصيحة مهمة جدًا
لو عايزة تبقي مطورة ويب:
ابدئي بـ HTML
بعده CSS
بعده JavaScript