حجر الأساس لأي موقع إلكتروني
- محمد زينة شقة
- 31 مارس
- 2 دقيقة قراءة
بقلم المهندس محمد زينة شقة - المتخصص في الحلول البرمجية والتسويق الإلكتروني الإحترافي
مقدمة
إذا كنت تحلم ببناء موقع إلكتروني احترافي، فإن HTML و CSS هما حجر الأساس الذي لا غنى عنه. في هذه المقالة، سأشرح لك كل ما تحتاج معرفته عن هاتين التقنيتين الأساسيتين، وكيفية استخدامهما لبناء مواقع جذابة ومتجاوبة.
ما هو HTML؟
HTML (HyperText Markup Language) هي لغة التوصيف التي تُستخدم لبناء هيكل صفحات الويب. تخيلها كالهيكل العظمي للموقع.
عناصر HTML الأساسية:
html<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>عنوان الصفحة</title>
</head>
<body>
<header>
<h1>عنوان رئيسي</h1>
</header>
<main>
<p>فقرة نصية</p>
</main>
<footer>
<p>حقوق النشر</p>
</footer>
</body>
</html>
أهم وسوم HTML:
الوسم | الوصف | الاستخدام |
<h1> إلى <h6> | العناوين | تنظيم المحتوى هرمياً |
<p> | الفقرات | النصوص العادية |
<a> | الروابط | التنقل بين الصفحات |
<img> | الصور | عرض الصور |
<div> | الحاويات | تنظيم العناصر |
<form> | النماذج | جمع بيانات المستخدمين |
ما هو CSS؟
CSS (Cascading Style Sheets) هي لغة التنسيقات المسؤولة عن مظهر الموقع. إذا كان HTML هو الهيكل، فإن CSS هو الجلد والملابس.
مثال على CSS:
cssbody {
font-family: 'Readex Pro', Arial, sans-serif;
background-color: #EADED2;
color: #6A6258;
margin: 0;
padding: 0;
}
.header {
background-color: #6A6258;
color: #EADED2;
padding: 20px;
text-align: center;
}
.button {
background-color: #6A6258;
color: #EADED2;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
خصائص CSS الأساسية:
الألوان: color, background-color
الخطوط: font-family, font-size, font-weight
التباعد: margin, padding
الأبعاد: width, height
التخطيط: display, flex, grid
تصميم متجاوب (Responsive Design)
في عصر الأجهزة المتعددة، يجب أن يعمل موقعك على جميع الشاشات.
Media Queries:
/* للهواتف */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
/* للأجهزة اللوحية */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
width: 90%;
margin: 0 auto;
}
}
/* للشاشات الكبيرة */
@media (min-width: 1025px) {
.container {
width: 1200px;
margin: 0 auto;
}
}
أفضل الممارسات في HTML & CSS
✅ افعل:
استخدم وسوم دلالية (<header>, <nav>, <main>, <footer>)
احافظ على ترتيب وتنظيم الكود
استخدم أسماء كلاسات ذات معنى
اختبر موقعك على متصفحات متعددة
اهتم بإمكانية الوصول (Accessibility)
❌ لا تفعل:
لا تستخدم وسوم قديمة (<font>, <center>)
لا تفرط في استخدام !important
لا تكتب CSS داخل HTML (Inline Styles)
لا تهمل تحسين الأداء
أدوات أنصح بها
الأداة | الغرض | الرابط |
VS Code | محرر الأكواد | |
Chrome DevTools | فحص وتصحيح | مدمج في Chrome |
CodePen | تجربة الأكواد | |
Canva | تصميم الواجهات | |
موقعي الشخصي | مقالات متخصصة |
مشروع عملي للمبتدئين
ابنِ صفحة تعريفية شخصية تتضمن:
صورة شخصية
نبذة عنك
مهاراتك
وسائل التواصل
نموذج اتصال
هذا المشروع سيطبق كل ما تعلمته وسيمكنك من إضافته إلى معرض أعمالك.
الخلاصة
HTML و CSS هما البوابة الأولى لعالم تطوير الويب. إتقانهما يفتح أمامك مسارات متعددة في البرمجة والتصميم. ابدأ اليوم ومارس يومياً.
📞 تواصل معي للاستشارة
للاستفسار عن خدمات تطوير المواقع أو الاستشارة التقنية:
🌐 الموقع الإلكتروني: www.muhammedshakka.com
📱 الأرقام للتواصل:
🇹🇷 تركيا: 00905383858412
🇸🇾 سوريا: 00963948968610
بقلم المهندس محمد زينة شقة المتخصص في الحلول البرمجية والتسويق الإلكتروني الإحترافي
تعليقات