ITSkillsCenter
تطوير الويب

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

9 دقائق للقراءة

مقدمة في HTML و CSS

تُعد HTML (HyperText Markup Language) و CSS (Cascading Style Sheets) الركيزتين الأساسيتين لبناء أي صفحة ويب. HTML تحدد هيكل الصفحة ومحتواها من عناوين وفقرات وصور وروابط، بينما CSS تتحكم في المظهر المرئي من ألوان وخطوط وتخطيطات وتأثيرات حركية. كل موقع ويب تزوره، من أبسط المدونات إلى أعقد التطبيقات مثل Facebook و YouTube، يبدأ بهاتين التقنيتين.

في هذا الدليل الشامل، سنبني صفحة ويب كاملة من الصفر خطوة بخطوة، مع تعلم أهم عناصر HTML وخصائص CSS التي ستحتاجها في مشاريعك. سنركز على الممارسات الحديثة والمعايير المعتمدة في 2024 لضمان بناء صفحات متوافقة مع جميع المتصفحات والأجهزة.

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

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="وصف الصفحة لمحركات البحث">
  <title>عنوان الصفحة</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <header>
    <nav>شريط التنقل</nav>
  </header>
  <main>
    <section>المحتوى الرئيسي</section>
  </main>
  <footer>تذييل الصفحة</footer>
  <script src="app.js"></script>
</body>
</html>

كل صفحة HTML تبدأ بـ <!DOCTYPE html> الذي يخبر المتصفح بنوع المستند. العنصر <html> هو الجذر، وداخله <head> للبيانات الوصفية و <body> للمحتوى المرئي. استخدام lang="ar" و dir="rtl" ضروري للصفحات العربية لضمان اتجاه النص الصحيح.

عناصر HTML الأساسية

العناوين والفقرات

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

<!-- الفقرات والتنسيق النصي -->
<p>هذه فقرة نصية عادية. يمكنك وضع <strong>نص عريض</strong> 
أو <em>نص مائل</em> أو <mark>نص مميّز</mark> داخلها.</p>

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

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

الروابط والصور

<!-- الروابط -->
<a href="https://example.com">رابط خارجي</a>
<a href="/about.html">رابط داخلي</a>
<a href="#section-id">رابط لقسم في نفس الصفحة</a>
<a href="mailto:email@example.com">رابط بريد إلكتروني</a>
<a href="tel:+212600000000">رابط هاتف</a>
<a href="doc.pdf" download>تحميل ملف</a>

<!-- الصور -->
<img src="photo.jpg" alt="وصف الصورة للقارئات" 
     width="800" height="600" loading="lazy">

<!-- صور متجاوبة -->
<picture>
  <source media="(max-width: 768px)" srcset="photo-sm.jpg">
  <source media="(max-width: 1200px)" srcset="photo-md.jpg">
  <img src="photo-lg.jpg" alt="صورة متجاوبة">
</picture>

النماذج (Forms)

<form action="/submit" method="POST">
  <!-- حقل نصي -->
  <label for="name">الاسم الكامل:</label>
  <input type="text" id="name" name="name" required 
         placeholder="أدخل اسمك" minlength="2" maxlength="50">

  <!-- بريد إلكتروني -->
  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email" required>

  <!-- كلمة المرور -->
  <label for="password">كلمة المرور:</label>
  <input type="password" id="password" name="password" 
         minlength="8" required>

  <!-- قائمة منسدلة -->
  <label for="country">الدولة:</label>
  <select id="country" name="country">
    <option value="">اختر دولتك</option>
    <option value="ma">المغرب</option>
    <option value="dz">الجزائر</option>
    <option value="tn">تونس</option>
    <option value="eg">مصر</option>
    <option value="sn">السنغال</option>
  </select>

  <!-- منطقة نصية -->
  <label for="message">رسالتك:</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <!-- خانة اختيار -->
  <label>
    <input type="checkbox" name="terms" required>
    أوافق على الشروط والأحكام
  </label>

  <button type="submit">إرسال</button>
</form>

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

استخدام العناصر الدلالية يحسّن إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO):

<header>  <!-- ترويسة الصفحة أو القسم -->
<nav>     <!-- شريط التنقل -->
<main>    <!-- المحتوى الرئيسي (واحد فقط) -->
<article> <!-- محتوى مستقل (مقال، تعليق) -->
<section> <!-- قسم ذو عنوان -->
<aside>   <!-- محتوى جانبي مكمّل -->
<footer>  <!-- تذييل الصفحة أو القسم -->
<figure>  <!-- محتوى مرئي مع توضيح -->
<figcaption> <!-- توضيح للصورة -->
<time>    <!-- تاريخ أو وقت -->
<details> <!-- محتوى قابل للطي -->
<summary> <!-- عنوان المحتوى القابل للطي -->

أساسيات CSS

المحددات (Selectors)

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

/* محدد الفئة - الأكثر استخداماً */
.card { background: white; border-radius: 12px; }
.card.featured { border: 2px solid #3b82f6; }

/* محدد المعرّف */
#main-header { position: sticky; top: 0; }

/* محددات السمات */
input[type="email"] { direction: ltr; }
a[href^="https"] { color: green; }
a[href$=".pdf"]::after { content: " (PDF)"; }

/* المحددات الزائفة */
a:hover { color: #3b82f6; text-decoration: underline; }
li:first-child { font-weight: bold; }
li:nth-child(even) { background: #f5f5f5; }

/* محددات مركبة */
.nav > li { display: inline-block; }     /* أبناء مباشرون */
.card + .card { margin-top: 1rem; }       /* أخ مجاور */
.card ~ .card { border-top: 1px solid; }  /* إخوة */

نموذج الصندوق (Box Model)

/* كل عنصر HTML هو صندوق يتكون من: */
.box {
  /* المحتوى */
  width: 300px;
  height: 200px;

  /* الحشوة - المسافة بين المحتوى والحدود */
  padding: 20px;
  padding: 10px 20px 15px 25px; /* أعلى يمين أسفل يسار */

  /* الحدود */
  border: 2px solid #333;
  border-radius: 8px;

  /* الهامش - المسافة خارج الحدود */
  margin: 20px auto; /* أعلى/أسفل و يمين/يسار */

  /* ⭐ مهم: جعل padding و border داخل العرض */
  box-sizing: border-box;
}

/* تطبيق box-sizing على جميع العناصر (أفضل ممارسة) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Flexbox – التخطيط المرن

/* حاوية Flex */
.flex-container {
  display: flex;
  justify-content: space-between;  /* توزيع أفقي */
  align-items: center;             /* محاذاة عمودية */
  flex-wrap: wrap;                 /* التفاف عند الحاجة */
  gap: 1rem;                       /* مسافة بين العناصر */
}

/* شريط تنقل متجاوب */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #1a1a2e;
}
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

/* بطاقات متساوية الارتفاع */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 300px;                 /* نمو، تقلص، حد أدنى */
  display: flex;
  flex-direction: column;
}
.card-body { flex: 1; }           /* المحتوى يأخذ المساحة المتبقية */

CSS Grid – التخطيط الشبكي

/* تخطيط شبكي أساسي */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 أعمدة متساوية */
  gap: 1.5rem;
}

/* تخطيط الصفحة الكامل */
.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* شبكة متجاوبة بدون Media Queries */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

التصميم المتجاوب (Responsive Design)

/* نقاط الانقطاع الشائعة */
/* الهاتف - الأسلوب الافتراضي (Mobile First) */
.container {
  width: 100%;
  padding: 0 1rem;
}

/* الأجهزة اللوحية */
@media (min-width: 768px) {
  .container { max-width: 720px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* الحواسيب */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* الشاشات الكبيرة */
@media (min-width: 1280px) {
  .container { max-width: 1200px; }
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* إخفاء وإظهار حسب الشاشة */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 768px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}

تنسيق النصوص والألوان

/* المتغيرات المخصصة (CSS Custom Properties) */
:root {
  --primary: #3b82f6;
  --secondary: #10b981;
  --text: #1f2937;
  --text-light: #6b7280;
  --bg: #ffffff;
  --bg-gray: #f9fafb;
  --radius: 8px;
  --shadow: 0 4px 6px rgba(0,0,0,0.1);
  --font-ar: "Cairo", "Tajawal", sans-serif;
}

/* تنسيق النص العربي */
body {
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.8;           /* ارتفاع السطر أكبر للعربية */
  color: var(--text);
  background: var(--bg);
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; color: var(--primary); }
p { margin-bottom: 1rem; color: var(--text-light); }

/* الوضع الداكن */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #f9fafb;
    --text-light: #d1d5db;
    --bg: #111827;
    --bg-gray: #1f2937;
  }
}

مشروع تطبيقي: بناء صفحة هبوط كاملة

لنبني صفحة هبوط احترافية متجاوبة تجمع كل ما تعلمناه:

<!-- 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>
  <header class="navbar">
    <a href="/" class="logo">أكاديمية التقنية</a>
    <nav>
      <ul class="nav-links">
        <li><a href="#courses">الدورات</a></li>
        <li><a href="#features">المميزات</a></li>
        <li><a href="#contact">تواصل معنا</a></li>
      </ul>
    </nav>
    <button class="menu-btn">☰</button>
  </header>

  <main>
    <section class="hero">
      <h1>ابدأ رحلتك في عالم البرمجة</h1>
      <p>تعلّم أحدث التقنيات مع مشاريع عملية حقيقية</p>
      <a href="#courses" class="btn btn-primary">ابدأ الآن</a>
    </section>

    <section id="courses" class="courses">
      <h2>الدورات المتاحة</h2>
      <div class="auto-grid">
        <article class="card">
          <img src="html.jpg" alt="دورة HTML" loading="lazy">
          <div class="card-body">
            <h3>HTML و CSS</h3>
            <p>أساسيات بناء صفحات الويب</p>
          </div>
        </article>
      </div>
    </section>
  </main>

  <footer>
    <p>جميع الحقوق محفوظة 2024</p>
  </footer>
</body>
</html>

التأثيرات الحركية والانتقالات

تضيف الانتقالات (Transitions) و الرسوم المتحركة (Animations) حيوية إلى صفحات الويب وتحسّن تجربة المستخدم بشكل كبير عند استخدامها بحكمة:

/* انتقالات سلسة */
.btn {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.btn:active {
  transform: translateY(0);
}

/* انتقال القائمة المنسدلة */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* رسوم متحركة */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

/* تأثير النبض */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.notification-badge {
  animation: pulse 2s infinite;
}

/* تأثير الدوران للتحميل */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

تقنيات CSS المتقدمة

الظلال والتدرجات

/* ظلال الصناديق */
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* ظلال النصوص */
.hero-title {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* تدرجات لونية */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* تدرج شعاعي */
.spotlight {
  background: radial-gradient(circle at center, #3b82f6 0%, transparent 70%);
}

/* خلفية زجاجية (Glassmorphism) */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

المكونات الشائعة

/* بطاقة منتج */
.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.product-card:hover {
  transform: translateY(-4px);
}
.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.product-info {
  padding: 1.5rem;
}
.product-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* شارة (Badge) */
.badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }

/* حقل إدخال مخصص */
.input-group {
  position: relative;
  margin-bottom: 1.5rem;
}
.input-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.input-group input:focus {
  outline: none;
  border-color: var(--primary);
}
.input-group label {
  position: absolute;
  top: -10px;
  right: 12px;
  background: white;
  padding: 0 4px;
  font-size: 0.85rem;
  color: var(--primary);
}

إمكانية الوصول (Accessibility)

بناء صفحات يمكن لجميع المستخدمين الوصول إليها، بما فيهم ذوي الإعاقات البصرية والحركية، أمر أساسي وليس اختيارياً:

  • استخدم العناصر الدلالية: استبدل <div onclick> بـ <button> و <div> الفارغ بـ <section> أو <article> المناسب
  • أضف alt للصور: كل صورة يجب أن تحتوي على نص بديل وصفي يشرح محتواها لقارئات الشاشة
  • تباين الألوان: تأكد أن نسبة التباين بين النص والخلفية لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير
  • التنقل بلوحة المفاتيح: تأكد من إمكانية الوصول لجميع العناصر التفاعلية باستخدام Tab و Enter و Space
  • خصائص ARIA: استخدم aria-label و aria-expanded و role عند الحاجة لتوضيح وظائف العناصر المخصصة
  • حجم الخط والتباعد: لا تستخدم حجم خط أقل من 16px للنص الأساسي واحرص على تباعد أسطر مريح 1.6-1.8

أدوات مساعدة للمطورين

  • Chrome DevTools: أداة مدمجة في المتصفح لفحص العناصر وتعديل CSS مباشرة واكتشاف الأخطاء في الوقت الفعلي
  • VS Code مع Live Server: محرر أكواد مجاني مع إضافة تعرض التغييرات فوراً في المتصفح عند الحفظ
  • Can I Use (caniuse.com): موقع للتحقق من دعم المتصفحات لخصائص CSS و HTML قبل استخدامها
  • Emmet: اختصارات لكتابة HTML و CSS بسرعة فائقة، مثل كتابة ul>li*5 لإنشاء قائمة بـ 5 عناصر
  • Lighthouse: أداة في Chrome لقياس أداء الصفحة وإمكانية الوصول وأفضل الممارسات وتحسين محركات البحث
  • Color Contrast Checker: أدوات للتحقق من نسبة تباين الألوان لضمان إمكانية الوصول

أخطاء شائعة يجب تجنبها

يقع المبتدئون في أخطاء متكررة عند تعلم HTML و CSS. تجنب هذه الأخطاء سيوفر عليك ساعات من التصحيح والبحث عن المشاكل:

  • عدم استخدام box-sizing: border-box: بدونها، يضيف padding و border إلى العرض المحدد مما يسبب تخطيطات غير متوقعة. أضفها دائماً للعنصر * كقاعدة أساسية
  • استخدام px فقط للأحجام: استخدم rem و em للخطوط و% و vh/vw للتخطيطات لضمان تجاوبية أفضل مع مختلف أحجام الشاشات
  • تجاهل الأداء: ضغط الصور واستخدام loading= »lazy » واختيار التنسيق المناسب (WebP بدلاً من PNG/JPEG) يحسّن سرعة التحميل بشكل ملحوظ
  • عدم اختبار RTL: عند بناء صفحات عربية، تأكد من اختبار التخطيط من اليمين لليسار واستخدام خصائص منطقية مثل margin-inline-start بدلاً من margin-left

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

  • بناء صفحات HTML صحيحة المعايير مع العناصر الدلالية
  • إنشاء نماذج تفاعلية مع التحقق من صحة البيانات
  • إتقان محددات CSS المختلفة ونموذج الصندوق
  • استخدام Flexbox و CSS Grid لبناء تخطيطات مرنة
  • بناء صفحات متجاوبة تعمل على جميع الأجهزة
  • استخدام المتغيرات المخصصة لتنظيم الأنماط
  • تطبيق أفضل ممارسات إمكانية الوصول والـ SEO
  • بناء صفحة هبوط كاملة من الصفر

الخطوة التالية

بعد إتقان HTML و CSS، انتقل إلى تعلم JavaScript لإضافة التفاعلية إلى صفحاتك. تعلم أيضاً CSS المتقدم مثل الرسوم المتحركة (Animations) والتحولات (Transitions) و CSS Grid المتقدم. استكشف أطر عمل CSS مثل Tailwind CSS و Bootstrap لتسريع تطوير الواجهات الأمامية.

Besoin d'un site web ?

Confiez-nous la Création de Votre Site Web

Site vitrine, e-commerce ou application web — nous transformons votre vision en réalité digitale. Accompagnement personnalisé de A à Z.

À partir de 350.000 FCFA
Parlons de Votre Projet
Publicité

مقالات مشابهة