1. الإنترنت والمواقع — ببساطة

الهدف: تفهم ماذا يحدث عندما تكتب عنوان موقع في المتصفح.

الموقع ليس تطبيقاً سحرياً — هو ملفات (HTML، CSS، صور) مخزّنة على جهاز يسمّى سيرفر، والمتصفح يحمّلها ويعرضها.

HTML يصف المحتوى: «هذا عنوان، هذا فقرة، هذا رابط». CSS يصف الشكل: «اللون أزرق، الخط كبير، الهامش 20 بكسل».

كمستقل أو موظف مبتدئ، أول مهارة عملية هي بناء صفحة واحدة واضحة — بطاقة تعريف، معرض أعمال، أو صفحة تواصل. هذا المسار يوصلك لها خطوة بخطوة.

المتصفح يطلب الملفات من السيرفر عبر الإنترنت
HTML = المحتوى والهيكل، CSS = التنسيق والمظهر
صفحة واحدة جيدة أفضل من موقع معقّد نصف مكتمل

صورة ذهنية

المستخدم
   │
   ▼
[ المتصفح ] ──طلب──▶ [ السيرفر ]
   │                      │
   │◀── HTML + CSS + صور ─┘
   ▼
[ صفحة مرئية ]

مختبر — أول ملف HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>أول صفحة</title>
</head>
<body>
  <h1>مرحباً من Mesue Learn</h1>
  <p>هذا ملف HTML — المتصفح يعرضه كصفحة.</p>
</body>
</html>

انسخ الكود في ملف index.html وافتحه بالمتصفح (نقر مزدوج). لا تحتاج سيرفر في البداية.

مهمة عملية

غيّر العنوان والفقرة ليعكسا اسمك وهدفك (مثلاً: «أتعلّم بناء المواقع»).

اختبر فهمك

أي لغة تتحكم في لون النص وحجمه؟

HTML CSS PDF Excel

2. هيكل HTML — الصفحة من الداخل

الهدف: تكتب هيكلاً صحيحاً لأي صفحة عربية.

كل صفحة HTML تبدأ بتصريح DOCTYPE ثم عنصر html. داخل head نضع معلومات الصفحة (العنوان، الترميز). داخل body المحتوى الذي يراه الزائر.

للصفحات العربية أضف lang="ar" و dir="rtl" حتى يظهر النص من اليمين لليسار.

العناوين h1 إلى h6: h1 مرة واحدة للعنوان الرئيسي، h2 للأقسام الفرعية. لا تستخدم h1 للتنسيق فقط — استخدم CSS لذلك.

<!DOCTYPE html> + <html lang="ar" dir="rtl">
<head> للمeta والعنوان، <body> للمحتوى
h1 واحد رئيسي، h2/h3 للأقسام
meta charset="UTF-8" ضروري للعربية

صورة ذهنية

<html>
 ├── <head>
 │     title, meta
 └── <body>
       h1, p, sections

مختبر — هيكل كامل

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحتي</title>
</head>
<body>
  <header>
    <h1>اسمي — مطوّر واجهات</h1>
  </header>
  <main>
    <h2>عني</h2>
    <p>أبني صفحات بسيطة واحترافية.</p>
  </main>
  <footer>
    <p>© 2026</p>
  </footer>
</body>
</html>

جرّب إضافة <nav> قبل main وضع فيه رابط «عني» و«تواصل» (حتى لو فارغين الآن).

معاينة مباشرة

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>body{font-family:system-ui;padding:1.5rem;max-width:32rem;margin:0 auto;line-height:1.7}h1{color:#1e3a5f;border-bottom:3px solid #3b82f6;padding-bottom:.5rem}h2{color:#334155;margin-top:1.5rem}h3{color:#64748b}</style></head><body><h1>العنوان الرئيسي h1</h1><p>فقرة تحت العنوان الرئيسي — تظهر مرة واحدة في الصفحة.</p><h2>قسم فرعي h2</h2><p>محتوى القسم الأول.</p><h3>عنوان أصغر h3</h3><p>تفاصيل إضافية داخل القسم.</p></body></html>

مهمة عملية

أضف قسم <main> فيه h2 «خدماتي» وقائمة ul بثلاث خدمات تقدّمها.

اختبر فهمك

أين يوضع عنوان التبويب في المتصفح؟

3. النصوص والروابط

الهدف: تنسّق الفقرات وتربط صفحاتك ببعضها.

الفقرة <p> للنص العادي. <strong> للتأكيد، <em> للميل. القوائم: ul/li للنقطية، ol/li للمرقّمة.

الرابط <a href="..."> يأخذك لصفحة أخرى أو قسم في نفس الصفحة. href="#contact" يقفز لعنصر id="contact".

في مشروع حقيقي: روابط واضحة («تواصل معي») أفضل من «اضغط هنا».

<a href="url">نص الرابط</a>
<a href="#section-id">قفزة داخل الصفحة</a>
target="_blank" للروابط الخارجية (مع rel="noopener")
نص الرابط يصف الوجهة

صورة ذهنية

[ الصفحة ]
   │
   ├─▶ رابط خارجي → موقع آخر
   └─▶ #about → قسم في نفس الصفحة

مختبر — قائمة تنقل

<nav>
  <a href="#about">عني</a>
  <a href="#work">أعمالي</a>
  <a href="#contact">تواصل</a>
</nav>

<section id="about">
  <h2>عني</h2>
  <p>أعمل على <strong>صفحات هبوط</strong> للعملاء المحليين.</p>
</section>

<section id="contact">
  <h2>تواصل</h2>
  <p><a href="mailto:hello@example.com">hello@example.com</a></p>
</section>

أضف id لكل section وجرّب النقر على الروابط — لاحظ القفز داخل الصفحة.

مهمة عملية

أنشئ nav بأربعة روابط داخلية، وأضف section رابع «أسعار» بفقرة قصيرة.

اختبر فهمك

كيف تقفز لقسم id="services" في نفس الصفحة؟

href="services" href="#services" link="services" goto="services"

4. الصور والأقسام

الهدف: تضيف صوراً منظمة وتقسّم الصفحة لأجزاء واضحة.

الصورة <img src="photo.jpg" alt="وصف"> — alt إلزامي للوصولية وSEO: يصف الصورة إن لم تُحمّل.

استخدم header و main و section و footer لتقسيم منطقي. كل section عنوان h2 ومحتوى مستقل.

للعمل الحر: صورة شخصية واحدة جيدة + 2–3 لقطات مشاريع في grid بسيط تكفي لصفحة تعريف مقنع.

alt وصفياً — ليس «صورة» فقط
section لكل محور: عني، أعمال، تواصل
width/height أو CSS يمنع قفز التخطيط
صور مضغوطة = تحميل أسرع

صورة ذهنية

<header> شعار + قائمة
<main>
  <section> عني + صورة
  <section> معرض
  <section> تواصل
<footer> حقوق

مختبر — معرض صور

<section id="work">
  <h2>أعمالي</h2>
  <div class="gallery">
    <img src="project1.jpg" alt="صفحة مطعم — تصميم بسيط">
    <img src="project2.jpg" alt="بطاقة تعريف مستقل">
  </div>
</section>

<style>
.gallery { display: flex; gap: 1rem; flex-wrap: wrap; }
.gallery img { width: 140px; border-radius: 8px; }
</style>

استبدل project1.jpg برابط صورة حقيقي من placeholder أو صورة محلية.

مهمة عملية

أضف section «شهادات» فيه ul بثلاث جمل من عملاء وهميين.

اختبر فهمك

لماذا نستخدم alt في img؟

لتكبير الصورة وصف بديل للوصولية وعند فشل التحميل لتغيير اللون لإخفاء الصورة

5. CSS — الألوان والخطوط

الهدف: تنسّق مظهر الصفحة بألوان وخطوط متناسقة.

CSS يُكتب داخل <style> في head أو ملف منفصل styles.css يُربط بـ <link rel="stylesheet" href="styles.css">.

المحدّد selector { خاصية: قيمة; } — مثلاً body { color: #333; font-family: system-ui; }.

اختر لونين–ثلاثة: أساسي للعناوين، ثانوي للروابط، محايد للنص. الخط system-ui أو Tahoma يعمل جيداً للعربية دون تحميل خارجي في البداية.

color للنص، background للخلفية
font-family و font-size و line-height
a { color: ...; text-decoration: none; }
تناسق الألوان = انطباع احترافي

صورة ذهنية

HTML ──▶ CSS
  h1      → color, font-size
  body    → background, line-height
  a:hover → لون عند المرور

مختبر — لوحة ألوان

<style>
  :root {
    --primary: #1e40af;
    --text: #1e293b;
    --bg: #f8fafc;
  }
  body {
    font-family: Tahoma, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    padding: 2rem;
  }
  h1 { color: var(--primary); }
  a { color: var(--primary); }
  a:hover { text-decoration: underline; }
</style>

جرّب تغيير --primary ولاحظ تأثيره على h1 والروابط معاً.

معاينة مباشرة

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>:root{--blue:#2563eb;--green:#059669;--amber:#d97706}body{font-family:Tahoma,sans-serif;padding:2rem;background:#f1f5f9}h1{color:var(--blue)}.card{padding:1rem;border-radius:12px;margin:.75rem 0;color:#fff}.c1{background:var(--blue)}.c2{background:var(--green)}.c3{background:var(--amber)}</style></head><body><h1>تجربة ألوان CSS</h1><div class="card c1">بطاقة زرقاء — لون أساسي</div><div class="card c2">بطاقة خضراء — نجاح / تأكيد</div><div class="card c3">بطاقة برتقالية — تنبيه</div></body></html>

مهمة عملية

عرّف متغيرات CSS (--primary, --accent) وطبّقها على h1 وزر وهمي .btn.

اختبر فهمك

أين نضع قواعد CSS داخل نفس الملف؟

6. صندوق CSS — padding و margin

الهدف: تتحكم في المسافات حول العناصر.

كل عنصر «صندوق»: المحتوى، ثم padding (داخل)، ثم border (حد)، ثم margin (خارج).

box-sizing: border-box يجعل width يشمل padding — أسهل للتخطيط.

.card { padding: 1.5rem; margin-bottom: 1rem; border-radius: 12px; } نمط شائع للبطاقات.

مسافات متسقة (مثلاً 1rem = 16px) تجعل الصفحة مرتبة دون فوضى.

padding = مسافة داخل الحد
margin = مسافة بين العناصر
border-radius للزوايا الدائرية
box-sizing: border-box على *

صورة ذهنية

┌── margin ──────────┐
│ ┌── border ──────┐ │
│ │ ┌─ padding ──┐ │ │
│ │ │  محتوى    │ │ │
│ │ └───────────┘ │ │
│ └───────────────┘ │
└───────────────────┘

مختبر — بطاقة بمسافات

* { box-sizing: border-box; }

.card {
  background: #fff;
  padding: 1.5rem;
  margin: 1rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  max-width: 400px;
}

.card h3 { margin-top: 0; }

قارن padding: 0.5rem مع 2rem — لاحظ الفرق في الراحة البصرية.

مهمة عملية

أنشئ ثلاث بطاقات .service-card بنفس التنسيق ومحتوى مختلف.

اختبر فهمك

أي خاصية تبعد العنصر عن جاره الخارجي؟

padding margin border-width font-size

7. فكرة التجاوب — الموبايل أولاً

الهدف: تجعل الصفحة مقروءة على الشاشات الصغيرة.

meta viewport في head ضروري للموبايل.

display: flex و flex-wrap: wrap يوزّع العناصر. max-width: 720px; margin: 0 auto; يحدّ عرض المحتوى على الشاشات الكبيرة.

@media (max-width: 600px) { ... } تطبّق قواعد إضافية للشاشات الضيقة — مثلاً nav عمودي بدل أفقي.

عميلك يفتح موقعك من الجوال غالباً — اختبر دائماً بعرض ضيق.

viewport meta في head
max-width + margin auto للتوسيط
flex-wrap للصفوف المرنة
@media للشاشات الصغيرة

صورة ذهنية

شاشة عريضة: [ nav ──────── ]
              [ card ][ card ]

شاشة ضيقة:  [ nav ]
              [ card ]
              [ card ]

مختبر — media query

.container { max-width: 720px; margin: 0 auto; padding: 1rem; }
nav { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 600px) {
  nav { flex-direction: column; }
  h1 { font-size: 1.5rem; }
}

صغّر نافذة المتصفح ولاحظ تغيّر nav — هذا أساس التجاوب.

مهمة عملية

أضف @media يخفّض padding body إلى 0.5rem على الشاشات أقل من 480px.

اختبر فهمك

ما فائدة meta viewport؟

تشغيل JavaScript ضبط عرض الصفحة على الموبايل بشكل صحيح إضافة صور ربط CSS خارجي

8. مشروع — صفحتك الشخصية

الهدف: تجمع HTML و CSS في صفحة تعريف واحدة كاملة.

الآن تبني صفحة واحدة فيها: header (اسم + nav)، hero (جملة تعريف)، about، services أو portfolio، contact.

ركّز على وضوح الرسالة: من أنت؟ ماذا تقدّم؟ كيف يتواصل معك العميل؟

هذه الصفحة يمكن أن تكون أول عنصر في ملفك كمستقل — أو صفحة هبوط لخدمة MesueTech إن أردت.

هيكل: header → main (sections) → footer
CTA واضح: «تواصل» أو «اطلب عرض سعر»
ألوان متناسقة من الدرس السابق
اختبر على موبايل قبل التسليم

صورة ذهنية

[ Header + Nav ]
[ Hero — جملة قوية ]
[ About | Services | Work ]
[ Contact CTA ]
[ Footer ]

مختبر — صفحة شخصية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>اسمك — صفحة شخصية</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: Tahoma, sans-serif; margin: 0; background: #f8fafc; color: #1e293b; line-height: 1.7; }
    .wrap { max-width: 720px; margin: 0 auto; padding: 1.5rem; }
    header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
    .hero { background: #1e40af; color: #fff; padding: 2.5rem 1.5rem; border-radius: 16px; margin: 1.5rem 0; }
    .hero h1 { margin: 0 0 .5rem; }
    .card { background: #fff; padding: 1.25rem; border-radius: 12px; margin: 1rem 0; border: 1px solid #e2e8f0; }
    .btn { display: inline-block; background: #2563eb; color: #fff; padding: .6rem 1.2rem; border-radius: 8px; text-decoration: none; }
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <strong>اسمك</strong>
      <nav><a href="#about">عني</a> · <a href="#contact">تواصل</a></nav>
    </header>
    <section class="hero">
      <h1>أبني صفحات ويب بسيطة واحترافية</h1>
      <p>متاح للمشاريع الصغيرة والمحلية.</p>
      <a class="btn" href="#contact">ابدأ مشروعك</a>
    </section>
    <section id="about" class="card"><h2>عني</h2><p>اكتب نبذة قصيرة عنك.</p></section>
    <section id="contact" class="card"><h2>تواصل</h2><p>بريدك أو واتساب.</p></section>
  </div>
</body>
</html>

خصّص كل section بمحتوى حقيقي — حتى لو مشروعاً تعليمياً، اكتبه كأنك تقدّمه لعميل.

معاينة مباشرة

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{box-sizing:border-box}body{font-family:Tahoma,sans-serif;margin:0;background:#0f172a;color:#e2e8f0;line-height:1.6}.wrap{max-width:360px;margin:2rem auto;padding:1rem}.card{background:#1e293b;border-radius:16px;padding:1.5rem;border:1px solid #334155;text-align:center}.avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);margin:0 auto 1rem;line-height:80px;font-size:2rem}.card h1{margin:0 0 .25rem;font-size:1.25rem}.tag{color:#94a3b8;font-size:.9rem;margin-bottom:1rem}.btn{display:inline-block;background:#3b82f6;color:#fff;padding:.5rem 1rem;border-radius:8px;text-decoration:none;font-size:.9rem}</style></head><body><div class="wrap"><article class="card"><div class="avatar">م</div><h1>محمد — مطوّر واجهات</h1><p class="tag">صفحات هبوط · RTL · CSS</p><p>أبني صفحة واحدة واضحة لعملك خلال أيام.</p><a class="btn" href="#">تواصل</a></article></div></body></html>

مهمة عملية

أكمل الصفحة: أضف section «خدمات» بثلاث بطاقات، وزر تواصل يفتح mailto: أو رابط واتساب.

اختبر فهمك

أهم عنصر في صفحة شخصية للعمل الحر؟

عشرين لوناً مختلفاً رسالة واضحة + طريقة تواصل مباشرة إخفاء معلومات التواصل صفحات فارغة كثيرة

9. النشر — استضافة ونطاق

الهدف: تعرف خطوات جعل صفحتك متاحة على الإنترنت.

الملف على جهازك لا يراه العالم — تحتاج رفعه على استضافة (hosting) وربما نطاق (domain) مثل name.com.

خطوات بسيطة: 1) جهّز ملفات index.html + css + صور. 2) ارفع عبر FTP أو لوحة تحكم. 3) اربط النطاق بالاستضافة. 4) فعّل HTTPS.

MesueTech تقدّم استضافة ونطاقات ودعماً عربياً — مناسبة عندما تريد نشر موقع عميل أو مشروعك دون تعقيد تقني. التعلّم هنا؛ التنفيذ مع فريق يوفر الوقت.

index.html نقطة الدخول الافتراضية
الاستضافة = مكان الملفات على الإنترنت
النطاق = العنوان الذي يكتبه الزائر
HTTPS يبني ثقة الزائر

صورة ذهنية

[ ملفاتك ]
    │ رفع
    ▼
[ استضافة MesueTech ]
    │ ربط
    ▼
[ yourname.com ] → الزائر يرى صفحتك

قائمة تحقق — قبل النشر

<!-- checklist قبل الرفع -->
<!-- ✓ index.html في الجذر -->
<!-- ✓ كل الصور في مجلد images/ -->
<!-- ✓ روابط CSS نسبية: href="styles.css" -->
<!-- ✓ alt لكل صورة -->
<!-- ✓ viewport meta موجود -->
<!-- ✓ اختبر على موبايل -->

مرّ على كل بند قبل رفع أي مشروع لعميل — يوفر وقت المراجعة.

مهمة عملية

اكتب قائمة 5 ملفات/مجلدات ستضعها على الاستضافة لصفحتك الشخصية.

اختبر فهمك

ما الملف الذي يفتحه المتصفح تلقائياً عند زيارة المجلد؟

home.html index.html main.css readme.txt

10. لمسة أخيرة — قائمة الجودة

الهدف: تراجع صفحتك كمحترف قبل التسليم.

قبل إرسال الرابط للعميل:

• العناوين هرمية (h1 واحد، h2 للأقسام)
• كل الروابط تعمل
• الصور alt + حجم معقول
• الموبايل مقروء
• لا أخطاء إملائية
• زر تواصل بارز

أضف نموذج تواصل (form) — حتى بدون backend، التخطيط يُعرض للعميل. لاحقاً JavaScript أو PHP يرسل الرسائل.

مراجعة على جهازين: موبايل + حاسوب
اسأل: «هل فهمت من أنا وماذا أقدّم في 5 ثوان؟»
form = name, email, message + زر إرسال
احفظ نسخة من الكود — Git أو مجلد dated

صورة ذهنية

مسودة → مراجعة → اختبار موبايل
    → إصلاح → نشر → مشاركة الرابط

مختبر — نموذج تواصل

<section id="contact">
  <h2>تواصل معي</h2>
  <form>
    <label>الاسم<br><input type="text" name="name" required></label><br><br>
    <label>البريد<br><input type="email" name="email" required></label><br><br>
    <label>الرسالة<br><textarea name="msg" rows="4"></textarea></label><br><br>
    <button type="submit">إرسال</button>
  </form>
</section>

<style>
form label { display: block; margin-bottom: .5rem; }
input, textarea { width: 100%; max-width: 400px; padding: .5rem; border: 1px solid #cbd5e1; border-radius: 6px; }
button { background: #2563eb; color: #fff; border: none; padding: .6rem 1.2rem; border-radius: 8px; cursor: pointer; }
</style>

النموذج هنا للتخطيط — الإرسال الفعلي يحتاج backend أو خدمة خارجية لاحقاً.

معاينة مباشرة

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>body{font-family:Tahoma,sans-serif;background:#f1f5f9;padding:1.5rem;max-width:420px;margin:0 auto}h2{color:#1e40af}form{background:#fff;padding:1.5rem;border-radius:12px;border:1px solid #e2e8f0}label{display:block;margin-bottom:1rem;font-size:.9rem;color:#475569}input,textarea{width:100%;padding:.6rem;border:1px solid #cbd5e1;border-radius:8px;font:inherit;margin-top:.25rem}button{width:100%;background:#2563eb;color:#fff;border:none;padding:.75rem;border-radius:8px;font-size:1rem;cursor:pointer;margin-top:.5rem}button:hover{background:#1d4ed8}</style></head><body><h2>تواصل معنا</h2><form onsubmit="event.preventDefault();alert('تم! (معاينة فقط)')"><label>الاسم<input type="text" required placeholder="اسمك"></label><label>البريد<input type="email" required placeholder="you@email.com"></label><label>الرسالة<textarea rows="3" placeholder="اكتب رسالتك..."></textarea></label><button type="submit">إرسال الرسالة</button></form></body></html>

مهمة عملية

طبّق قائمة الجودة على صفحتك من الدرس 8 — أصلح 3 نقاط على الأقل.

اختبر فهمك

أفضل خطوة بعد إنهاء هذا المسار؟

حذف المشروع نشر الصفحة + تعلّم JavaScript للتفاعل التوقف عن التعلّم نسخ موقع بدون فهم

بناء المواقع — HTML و CSS بالعربية

كيف تدرس هذا المسار؟

1. الإنترنت والمواقع — ببساطة

صورة ذهنية

مختبر — أول ملف HTML

مهمة عملية

اختبر فهمك

2. هيكل HTML — الصفحة من الداخل

صورة ذهنية

مختبر — هيكل كامل

معاينة مباشرة

مهمة عملية

اختبر فهمك

3. النصوص والروابط

صورة ذهنية

مختبر — قائمة تنقل

مهمة عملية

اختبر فهمك

4. الصور والأقسام

صورة ذهنية

مختبر — معرض صور

مهمة عملية

اختبر فهمك

5. CSS — الألوان والخطوط

صورة ذهنية

مختبر — لوحة ألوان

معاينة مباشرة

مهمة عملية

اختبر فهمك

6. صندوق CSS — padding و margin

صورة ذهنية

مختبر — بطاقة بمسافات

مهمة عملية

اختبر فهمك

7. فكرة التجاوب — الموبايل أولاً

صورة ذهنية

مختبر — media query

مهمة عملية

اختبر فهمك

8. مشروع — صفحتك الشخصية

صورة ذهنية

مختبر — صفحة شخصية

معاينة مباشرة

مهمة عملية

اختبر فهمك

9. النشر — استضافة ونطاق

صورة ذهنية

قائمة تحقق — قبل النشر

مهمة عملية

اختبر فهمك

10. لمسة أخيرة — قائمة الجودة

صورة ذهنية

مختبر — نموذج تواصل

معاينة مباشرة

مهمة عملية

اختبر فهمك

صفحتك الأولى صارت أقرب للنشر