رحلتك الأولى في تطوير الويب تبدأ هنا

كل موقع تراه على الإنترنت مبني بـ HTML (الهيكل) و CSS (التنسيق). HTML هي العظام والعضلات، و CSS هو الملابس والمظهر. في هذا الدليل، ستبني صفحة ويب كاملة من الصفر وتتعلم كل ما تحتاجه للبدء.

HTML: بناء هيكل الصفحة

الهيكل الأساسي لأي صفحة HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحتي الأولى</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- محتوى الصفحة هنا -->
</body>
</html>

شرح كل سطر:

<!DOCTYPE html> — يخبر المتصفح أن هذا ملف HTML5
lang="ar" dir="rtl" — اللغة العربية مع اتجاه من اليمين لليسار
<meta charset="UTF-8"> — ترميز يدعم الأحرف العربية
<meta name="viewport"> — يجعل الصفحة متجاوبة مع الموبايل

أهم عناصر HTML

<!-- العناوين: من h1 (الأكبر) إلى h6 (الأصغر) -->
<h1>العنوان الرئيسي — واحد فقط بالصفحة</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>

<!-- الفقرات والنصوص -->
<p>فقرة نصية عادية</p>
<p>نص <strong>غامق (مهم)</strong> ونص <em>مائل</em></p>

<!-- الروابط -->
<a href="https://example.com">زيارة الموقع</a>
<a href="about.html">صفحة من نعمل</a>
<a href="#section1">انتقل لقسم معين</a>

<!-- الصور -->
<img src="photo.jpg" alt="وصف الصورة" width="300">

<!-- القوائم -->
<ul> <!-- قائمة غير مرتبة (نقاط) -->
  <li>عنصر أول</li>
  <li>عنصر ثاني</li>
</ul>

<ol> <!-- قائمة مرتبة (أرقام) -->
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
</ol>

العناصر الهيكلية (Semantic HTML)

<header>
  <nav>شريط التنقل</nav>
</header>

<main>
  <section>قسم محتوى</section>
  <article>مقال مستقل</article>
  <aside>محتوى جانبي</aside>
</main>

<footer>تذييل الصفحة</footer>

النماذج (Forms)

<form action="/submit" method="POST">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name" placeholder="أدخل اسمك" required>
  
  <label for="email">البريد:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">الرسالة:</label>
  <textarea id="message" name="message" rows="4"></textarea>
  
  <select name="subject">
    <option value="">اختر الموضوع</option>
    <option value="support">دعم فني</option>
    <option value="sales">مبيعات</option>
  </select>
  
  <button type="submit">إرسال</button>
</form>

CSS: تنسيق الصفحة وتجميلها

طرق إضافة CSS

<!-- 1. ملف خارجي (الأفضل) -->
<link rel="stylesheet" href="style.css">

<!-- 2. داخل الصفحة -->
<style>
  h1 { color: blue; }
</style>

<!-- 3. مباشرة على العنصر (تجنبه) -->
<h1 style="color: blue;">عنوان</h1>

المحددات (Selectors)

/* محدد العنصر */
h1 { color: #333; }

/* محدد الفئة (class) — الأكثر استخداماً */
.card { background: white; }

/* محدد المعرف (id) */
#header { position: fixed; }

/* محددات مركبة */
.card .title { font-size: 1.2rem; }
.card:hover { transform: translateY(-3px); }
.btn.primary { background: #e94560; }

Box Model: أساس التخطيط

/* كل عنصر HTML هو صندوق يتكون من: */
.box {
  /* المحتوى */
  width: 300px;
  height: 200px;
  
  /* الحشو الداخلي */
  padding: 20px;
  
  /* الإطار */
  border: 2px solid #ddd;
  
  /* الهامش الخارجي */
  margin: 10px;
  
  /* مهم! يجعل padding و border داخل العرض */
  box-sizing: border-box;
}

/* تطبيق box-sizing على كل العناصر (ضروري!) */
*, *::before, *::after {
  box-sizing: border-box;
}

الألوان والخطوط

body {
  /* خط عربي جيد */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* الألوان: عدة طرق */
.element {
  color: red;                    /* اسم اللون */
  color: #e94560;               /* Hex */
  color: rgb(233, 69, 96);      /* RGB */
  color: rgba(233, 69, 96, 0.8); /* RGBA مع شفافية */
}

مشروع تطبيقي: بناء بطاقة شخصية

<!-- index.html -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>بطاقتي الشخصية</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <div class="card-header">
      <img src="avatar.jpg" alt="صورتي" class="avatar">
    </div>
    <div class="card-body">
      <h1>أحمد محمد</h1>
      <p class="title">مطور واجهات أمامية</p>
      <p class="bio">مطور ويب شغوف ببناء تجارب مستخدم رائعة</p>
      
      <div class="skills">
        <span class="skill">HTML</span>
        <span class="skill">CSS</span>
        <span class="skill">JavaScript</span>
        <span class="skill">React</span>
      </div>
      
      <div class="links">
        <a href="#" class="btn">GitHub</a>
        <a href="#" class="btn btn-outline">LinkedIn</a>
      </div>
    </div>
  </div>
</body>
</html>

/* style.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #0f3460, #16213e);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: white;
  border-radius: 15px;
  width: 350px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.card-header {
  background: linear-gradient(135deg, #e94560, #0f3460);
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  transform: translateY(50px);
  object-fit: cover;
}

.card-body {
  padding: 60px 30px 30px;
  text-align: center;
}

h1 {
  font-size: 1.5rem;
  color: #1a1a2e;
  margin-bottom: 5px;
}

.title {
  color: #e94560;
  font-weight: 600;
  margin-bottom: 10px;
}

.bio {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.skill {
  background: #f0f0f0;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #333;
}

.links {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn {
  padding: 10px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  background: #0f3460;
  color: white;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-outline {
  background: transparent;
  border: 2px solid #0f3460;
  color: #0f3460;
}

ملخص المهارات المكتسبة

بناء هيكل HTML صحيح مع عناصر دلالية (Semantic)
إنشاء نماذج مع أنواع مختلفة من الحقول
فهم Box Model وكيفية التحكم في الأبعاد والمسافات
استخدام المحددات المختلفة (عنصر، فئة، معرف)
تطبيق الألوان والخطوط والتدرجات
بناء مشروع عملي كامل من الصفر

الخطوة التالية: تعلم CSS Flexbox و Grid لبناء تخطيطات متقدمة، ثم أضف JavaScript لجعل صفحاتك تفاعلية.

أساسيات HTML وCSS للمبتدئين: بناء أول صفحة ويب من الصفر