عشان تفهمي تطوير الويب صح، لازم تعرفي إن 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 = تصميم الموقع
الاثنين معًا = موقع كامل وشكل احترافي