Home
تطبيق عملي على HTML و CSS
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 2
تعلم HTML و CSS: البداية الحقيقية لتصميم مواقع الويب
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 2
عشان تفهمي تطوير الويب صح، لازم تعرفي إن HTML و CSS بيكملوا بعض وبيشتغلوا مع بعض في أي موقع.
أولًا: ما هو HTML؟
HTML اختصار لـ HyperText Markup Language
وهو المسؤول عن بناء هيكل الصفحة.
يعني بيحدد:
العناوين
الفقرات
الصور
الأزرار
الروابط باختصار: HTML = الهيكل (Skeleton)
ثانيًا: ما هو CSS؟
CSS اختصار لـ Cascading Style Sheets
وهو المسؤول عن شكل الصفحة وتنسيقها.
يعني بيحدد:
الألوان
الخطوط
حجم العناصر
أماكن العناصر
الخلفيات
باختصار: CSS = الشكل والتصميم
الفرق بينهم ببساطة
HTML
CSS
يبني الصفحة
يجمّل الصفحة
محتوى
تصميم
نصوص وصور
ألوان وخطوط
كيف يعملوا مع بعض؟
HTML ينشئ العناصر، وCSS ينسقها.
مثال بسيط:
1) ملف HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>موقعي الأول</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>مرحباً بكم</h1>
<p>أنا أتعلم HTML و CSS</p>
</body>
</html>
2) ملف CSS
CSS
body {
background-color: #f0f0f0;
text-align: center;
font-family: Arial;
}
h1 {
color: blue;
}
p {
color: gray;
}
النتيجة؟
HTML أنشأ العنوان والنص
CSS غير اللون والخلفية والشكل
مع بعض أصبح عندك صفحة ويب بسيطة ومنظمة
مثال تشبيه سهل
تخيلي:
HTML = بيت مبني (حائط + سقف + غرف)
CSS = الدهانات والديكور والإضاءة
الخلاصة
HTML = هيكل الموقع
CSS = تصميم الموقع
الاثنين معًا = موقع كامل وشكل احترافي
فيديو شرح JavaScript: فهم الأساسيات بطريقة بسيطة وواضحة
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 2
شرح JavaScript للمبتدئين: كيف تجعل صفحات الويب تفاعلية وذكية
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 1
بعد تعلم أساسيات HTML لبناء هيكل الصفحة، وCSS لتنسيق الشكل والتصميم، تأتي مرحلة JavaScript، وهي الخطوة الأهم لتحويل الموقع من صفحة ثابتة إلى موقع تفاعلي قادر على التفاعل مع المستخدم.
JavaScript هي لغة برمجة تعمل داخل المتصفح، وتُستخدم لإضافة الحركة والتفاعل والتحكم في عناصر الصفحة بشكل ديناميكي أثناء تشغيل الموقع.
ما هي JavaScript؟
JavaScript هي لغة مسؤولة عن “سلوك” الصفحة، أي أنها تتحكم في ماذا يحدث عندما يضغط المستخدم زر، أو يكتب في حقل، أو يتفاعل مع الموقع بأي شكل.
بمعنى أبسط:
HTML = هيكل الصفحة
CSS = شكل الصفحة
JavaScript = تفاعل الصفحة
كيف تعمل JavaScript داخل الموقع؟
عندما يفتح المستخدم موقعًا، يقوم المتصفح بقراءة HTML وCSS، ثم يقوم JavaScript بالتدخل لتغيير المحتوى أو تنفيذ أوامر حسب تفاعل المستخدم.
المتغيرات (Variables)
المتغيرات تستخدم لتخزين البيانات داخل الكود.
مثال:
JavaScript
let name = "Ali";
let age = 22;
يمكن استخدام هذه البيانات لاحقًا داخل البرنامج.
أنواع البيانات
JavaScript تتعامل مع عدة أنواع من البيانات مثل:
نصوص (Text)
أرقام (Numbers)
قيم صحيحة/خطأ (True / False)
مثال:
JavaScript
let isStudent = true;
let price = 50;
let city = "Cairo";
الجمل الشرطية (If Statement)
تُستخدم لاتخاذ قرارات داخل البرنامج.
مثال:
JavaScript
let age = 18;
if (age >= 18) {
console.log("You can enter");
} else {
console.log("Access denied");
}
الدوال (Functions)
الدوال تساعد على تنظيم الكود وإعادة استخدامه.
مثال:
JavaScript
function greet() {
console.log("Hello User");
}
greet();
التعامل مع عناصر HTML (DOM)
واحدة من أهم استخدامات JavaScript هي التحكم في عناصر الصفحة.
مثال:
JavaScript
document.getElementById("title").innerHTML = "Welcome to My Website";
هذا الكود يغير النص داخل عنصر موجود في الصفحة.
الأحداث (Events)
الأحداث هي التفاعل مع المستخدم مثل الضغط على زر.
مثال:
JavaScript
button.addEventListener("click", function() {
alert("Button clicked!");
});
الخلاصة:
JavaScript هي الخطوة التي تجعل الموقع حي وتفاعلي. بدونها يكون الموقع مجرد شكل ثابت، لكن معها يمكن بناء تطبيقات ومواقع ذكية تتفاعل مع المستخدم في الوقت الحقيقي.
الصفحة 2 من 7