هل تحلم ببناء موقع الويب الخاص بك ولكنك لا تعرف من أين تبدأ؟ هل تبدو كلمات مثل "وسوم" و "أنماط" غامضة ومعقدة؟ لا تقلق! إن بناء هيكل وتصميم صفحة ويب أبسط مما تتخيل، والسر يكمن في فهم لغتين أساسيتين: HTML و CSS.
يعتبر تعلم HTML و CSS نقطة البداية المثالية لأي شخص يرغب في دخول عالم تطوير الويب. هما الأساس الذي تُبنى عليه جميع المواقع. في هذا الدليل المفصل من KamalZone، سنأخذك خطوة بخطوة لفهم دور كل لغة وكيف يعملان معًا لخلق تجارب ويب مذهلة.
ما هما HTML و CSS؟ (الهيكل العظمي والأناقة!)
تخيل أنك تبني منزلاً:
- HTML (HyperText Markup Language): هي بمثابة الهيكل الإنشائي للمنزل. تحدد الغرف والجدران والأبواب. في الويب، تحدد HTML المحتوى وبنيته: العناوين، الفقرات، الصور، الروابط.
- CSS (Cascading Style Sheets): هي بمثابة الديكور والألوان والأثاث. في الويب، تحدد CSS تصميم ومظهر المحتوى: الألوان، الخطوط، التخطيط.
باختصار: HTML تعطي البنية، و CSS تعطي الأناقة. ولاحقاً، تأتي JavaScript لإضافة التفاعلية (مثل الكهرباء والأجهزة في المنزل).
الأدوات التي تحتاجها لهذا الدرس
لتطبيق ما ستتعلمه، جهزنا لك كل ما تحتاجه (لا داعي لتثبيت أي برامج!):
- محرر الويب المباشر V3.0: هذا هو "ملعبك". ستكتب الكود هنا وترى النتيجة فوراً.
- مدقق الأكواد الاحترافي V3.0: هذا هو "المعلم". إذا واجهتك مشكلة أو خطأ، سيساعدك على اكتشافه.
القسم الأول: تعلم HTML (الهيكل)
HTML هي لغة توصيف تستخدم "الوسوم" (Tags) لتحديد أنواع المحتوى. الوسم هو ببساطة كلمة مفتاحية بين قوسين (مثل <p>).
الخطوة 1: الهيكل الأساسي للصفحة
كل صفحة HTML يجب أن تبدأ بهذا الهيكل الأساسي. هذا الكود يخبر المتصفح أن هذه صفحة ويب، ويدعم اللغة العربية، ويجهزها للشاشات المختلفة.
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- هام جداً للتجاوب -->
<title>صفحتي الأولى الرائعة!</title>
</head>
<body>
<!-- محتوى الصفحة المرئي يوضع هنا -->
</body>
</html>
<head>: يحتوي على معلومات "خلف الكواليس" (مثل العنوان والترميز).- وسم
viewport: هذا الوسم حاسم! إنه يخبر المتصفحات (خاصة الهواتف) أن تجعل عرض الصفحة مساوياً لعرض الشاشة. <body>: هذا هو المكان الذي نضع فيه كل المحتوى المرئي.
الخطوة 2: إضافة المحتوى (العناوين والفقرات)
لنضف محتوى مرئي داخل <body>. استخدم <h1> للعنوان الأكبر (يجب أن يكون هناك واحد فقط في الصفحة غالباً) و <p> للفقرات.
<body>
<h1>مرحباً بالعالم في صفحتي الأولى!</h1>
<p>هذه أول صفحة ويب أقوم ببنائها باستخدام HTML.</p>
<p>أنا <strong>أتعلم تطوير الويب</strong> وهو أمر ممتع جداً!</p>
</body>
الخطوة 3: إضافة صورة ورابط
لا يكتمل الويب بدون صور وروابط. نستخدم <img> للصور (src للمصدر و alt للنص البديل - هام جداً لـ SEO) و <a> للروابط (href للوجهة).
<body>
<!-- ... المحتوى السابق ... -->
<img src="https://placehold.co/300x150" alt="صورة تجريبية 300x150">
<p>للمزيد، يمكنك زيارة <a href="https://www.kamalzone.com/" target="_blank">مدونة KamalZone</a>.</p>
</body>
✨ تطبيق عملي: أضف هذه الأكواد الجديدة إلى <body> في المحرر وشاهد صفحتك تنبض بالحياة!
ماذا لو لم تعمل الصفحة أو ظهر خطأ؟
هذا طبيعي جداً! ربما نسيت إغلاق وسم (مثل </p>) أو أخطأت في كتابة src. لا تضيع وقتك في البحث!
الحل: انسخ كود HTML بالكامل والصقه في مدقق الأكواد الاحترافي الخاص بنا. سيخبرك فوراً بمكان الخطأ وكيفية إصلاحه.
افحص الكود الآنالقسم الثاني: تعلم CSS (الأناقة والتنسيق)
صفحتك الآن لها هيكل، لكنها تبدو مملة. حان وقت CSS. تعمل CSS عن طريق "استهداف" عناصر HTML (مثل p) وتطبيق "قواعد النمط" عليها.
الخطوة 4: ربط ملف CSS
أفضل ممارسة هي وضع CSS في ملف منفصل (مثلاً style.css). (في محررنا المباشر، يمكنك الكتابة مباشرة في تبويب CSS). لربطهما يدوياً، أضف هذا السطر داخل <head>:
<head>
<!-- ... الوسوم الأخرى ... -->
<link rel="stylesheet" href="style.css"> <!-- الربط بملف الأنماط -->
</head>
الخطوة 5: كتابة قواعد CSS (الألوان والخطوط)
في ملف style.css (أو تبويب CSS في المحرر)، لنقم بتغيير لون الخلفية والعنوان والخطوط.
body {
font-family: 'Arial', sans-serif; /* تغيير الخط الافتراضي */
background-color: #f4f7f9; /* لون خلفية رمادي فاتح */
color: #333; /* لون نص داكن */
margin: 20px; /* هامش حول الصفحة */
}
h1 {
color: #0056b3; /* لون أزرق داكن للعنوان */
text-align: center; /* توسيط العنوان */
}
ملاحظة سريعة حول الوحدات (px, em, rem)
لاحظ أننا استخدمنا 20px (بكسل). هناك وحدات أخرى مثل em و rem. قد يكون التحويل بينها مربكاً في البداية. استخدم الحاسبة التقنية الشاملة لدينا لتسهيل هذه العملية.
الخطوة 6: إضافة لمسة جمالية للصورة والرابط
لنضف حداً وظلاً للصورة ونغير شكل الرابط.
img {
display: block;
margin: 25px auto; /* توسيط الصورة وإضافة هامش */
border: 5px solid white;
border-radius: 10px; /* حواف دائرية */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ظل ناعم */
}
a {
color: #007bff;
text-decoration: none; /* إزالة الخط السفلي */
font-weight: bold;
}
a:hover {
text-decoration: underline; /* إظهار الخط عند التمرير */
}
الخطوة 7 (هامة): استهداف عناصر محددة (Class و ID)
ماذا لو كان لديك عدة فقرات <p> وتريد تلوين واحدة فقط؟ هنا يأتي دور class (يمكن استخدامه عدة مرات) و id (يجب أن يكون فريداً في الصفحة).
في HTML:
<p class="special-text">هذه فقرة مميزة.</p>
<p>هذه فقرة عادية.</p>
في CSS (نستخدم . للكلاس):
.special-text {
color: green;
font-style: italic;
}
هل تحتاج إلى أكواد جاهزة؟
قد يكون بناء عناصر معقدة مثل (البطاقات، الأزرار، الجداول) متعباً في البداية. استخدم أداة منشئ الأكواد V2.0 للحصول على أكواد HTML و CSS احترافية وجاهزة للنسخ واللصق في مشروعك.
جرب منشئ الأكوادالخلاصة: أنت الآن مطور واجهة أمامية!
تهانينا! لقد خطوت خطوة كبيرة اليوم. تعلمت كيف تستخدم HTML لبناء الهيكل و CSS لإضافة لمسة جمالية، وتعرفت على أهمية فصل الملفات، ووسم viewport، وكيفية استهداف العناصر بـ class.
هذه هي الأساسيات المطلقة التي تبنى عليها كل المواقع الحديثة. استمر في الممارسة والتجربة في محررنا المباشر.
هل أنت جاهز للخطوة التالية؟
لقد أتقنت الأساسيات، حان وقت اختبار معرفتك والانتقال إلى المستوى التالي.
1. اختبر معلوماتك:
ابدأ اختبار HTML و CSS2. أضف التفاعلية إلى موقعك:
انتقل إلى الدرس التالي: تعلم JavaScript✍️ كتب بواسطة KamalZone
