// تقدمك

0% بداية الكورس

// UNIT ONE

المقدمة والأساسيات

قبل ما تكتب سطر كود، لازم تفهم إيه اللي بيحصل فعلاً لما الـ browser بيفتح صفحة. ده الفرق بين حد بيحفظ كود وحد فاهم لماذا.

3 دروس 1 مطب برمجي 1 تاسك ~45 دقيقة

// FOUNDATION

ما هي HTML؟

أساس كل صفحة ويب على الإنترنت

HTML اختصار لـ HyperText Markup Language — وده اسم بيوصف وظيفتها بالظبط. مش لغة برمجة (مفيش منطق أو حسابات)، هي لغة وصف هيكل. بتقول للمتصفح: "الجزء ده عنوان، الجزء ده فقرة، الجزء ده صورة."

تخيل إنك بتبني بيت — HTML هي الطوب والحيطان والأبواب. CSS هي الدهان والديكور. JavaScript هي الكهرباء والمصاعد. مش ممكن تبدأ بالدهان قبل ما تبني الحيطان.

HTML ظهرت سنة 1991 على إيد Tim Berners-Lee. النسخة الحالية هي HTML5 (2014)، وهي اللي هنتعلمها بالكامل. مش في HTML6 — النسخة دي بتتطور باستمرار من خلال معايير W3C وWHATWG.

كل صفحة على الإنترنت — من Google لـ Facebook لـ GitHub — مبنية بـ HTML في الأساس. حتى لو الصفحة معقدة جداً، لو فتحت الـ "View Source" هتلاقي HTML.

💡

اتعلم من الواقع

افتح أي موقع، اضغط كليك يمين ← "View Page Source" أو Ctrl+U. شوف الـ HTML الحقيقي. ده مش غش — ده طريقة كل المبرمجين بيتعلموا بيها.

// HOW IT WORKS

كيف يعمل المتصفح؟

الرحلة من الكود للصفحة اللي بتشوفها

⚡ نقطة احتراف

لما بتكتب رابط في المتصفح وتضغط Enter، بيحصل ده بالترتيب:

DNS Lookup — المتصفح بيحول اسم الموقع لـ IP address
HTTP Request — بيطلب ملف HTML من السيرفر
HTML Parsing — المتصفح بيقرأ الـ HTML ويبني منه شجرة اسمها DOM
CSS + JS — بيحمّل الملفات التانية ويطبق التصميم والتفاعل
Rendering — بيرسم الصفحة على الشاشة

DOM (Document Object Model) — الشجرة اللي المتصفح بيبنيها من HTML. كل tag بيبقى "node" في الشجرة. JavaScript بتتحكم في الصفحة عن طريق تعديل الـ DOM. فاهم DOM = فاهم إزاي الويب شغال فعلاً.

⚡

ليه ده مهم؟ لأن لما بتكتب HTML صح وبتستخدم عناصر semantic (زي <header> و<main>)، بتساعد المتصفح يبني DOM أنظف، Google تفهم محتواك أحسن، وبرامج قراءة الشاشة للمكفوفين تشتغل صح. HTML صح = موقع أسرع + SEO أحسن + Accessibility.

// STRUCTURE

البنية الأساسية

الهيكل اللازم لكل ملف HTML

كل ملف HTML لازم يبدأ بالبنية دي — مفيش استثناء:

index.html
<!-- إعلان نوع الملف — لازم يكون أول سطر —>
<!DOCTYPE html>

<!-- العنصر الجذر — lang مهمة للـ SEO والـ Accessibility —>
<html lang="ar" dir="rtl">

<head>
  <!-- ترميز الأحرف — لازم يكون أول عنصر في head —>
  <meta charset="UTF-8" />
  
  <!-- مهم للموبايل — بدونه الصفحة بتبان صغيرة —>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- عنوان التبويب في المتصفح —>
  <title>اسم صفحتك</title>
</head>

<body>
  <!-- كل المحتوى اللي بيظهر للمستخدم بيتحط هنا —>
  <h1>مرحباً بالعالم!</h1>
</body>

</html>

النتيجة في المتصفح

مرحباً بالعالم!

كل جزء له وظيفة محددة:

<!DOCTYPE html> — مش tag، ده إعلان بيقول للمتصفح "الملف ده HTML5". بدونه المتصفح ممكن يدخل "Quirks Mode" وتظهر الصفحة بشكل غلط.
<html lang="ar"> — الغلاف الخارجي. lang مهم جداً: بيساعد Google، screen readers، والمتصفح نفسه.
<head> — معلومات عن الصفحة، مش بتظهر للمستخدم. هنا بتحط SEO، CSS، الخطوط، وغيره.
<body> — المحتوى الفعلي. كل اللي المستخدم بيشوفه بيتحط هنا.

⚠️

غلطة شائعة

كتير بيحطوا كل حاجة في <body> من غير <head>. ده بيشتغل ظاهرياً بس بيفقدك SEO والـ encoding الصح وتوافق الموبايل.

⚠️

مطبات برمجية شائعة — الوحدة الأولى

1. نسيان الـ DOCTYPE تماماً

// مفيش error في الـ Console — لكن الصفحة بتتصرف غريب! // المتصفح بيدخل "Quirks Mode" بدل "Standards Mode"

الحل: <!DOCTYPE html> لازم يكون أول سطر في الملف بالظبط — حتى قبل أي مسافة أو تعليق. بدونه، المتصفحات القديمة (وبعض الحديثة) بتفسّر الـ CSS والـ box model بطريقة مختلفة تماماً عن المتوقع، وده بيسبب اختلافات تصميم صعبة التتبع.

2. نسيان إغلاق Tag (Unclosed Tag)

// مفيش error صريح — لكن الـ layout بيتكسر <div class="card"> <p>نص هنا </div> // نسيت </p> — كل العناصر بعدها بتتأثر

الحل: HTML "متسامحة" ومش دايماً بتدّيك error واضح زي JavaScript، لكن العناصر اللي بعد الـ tag الناقص بتتداخل بشكل غلط. استخدم extension زي "Auto Close Tag" في VS Code، أو افتح الصفحة في DevTools ← Elements وشوف لو في تداخل غريب في شجرة الـ HTML.

3. استخدام id بدل class للتنسيق المتكرر

// مفيش error — لكن مشكلة تصميمية حقيقية <div id="card">...</div> <div id="card">...</div> // id لازم يكون فريد! استخدامه مرتين غلط دلالياً

الحل: id مخصص لعنصر واحد بس في الصفحة كلها (للـ JavaScript وanchor links). لو عندك عناصر متكررة بنفس التصميم، استخدم class بدلاً من ذلك. هذا سيتضح أكثر في كورس CSS، لكن المبدأ الصحيح يبدأ من الآن.

TASK 01

أنشئ بيئة العمل وأول ملف HTML

الوحدة الأولى · المقدمة والأساسيات

// المطلوب

حمّل VS Code وثبّت إضافة "Live Server" (بتفتح صفحتك وتحدثها تلقائياً)
أنشئ مجلد اسمه my-portfolio وجوّاه ملف index.html
اكتب البنية الأساسية من غير نسخ لصق — بإيدك من الذاكرة
حط في body اسمك كـ <h1> وكلمة عنك كـ <p>
افتح الملف بـ Live Server وشوف النتيجة في المتصفح

// Bonus (اختياري)

افتح DevTools (F12) ← Elements وشوف الـ DOM شجرة
غيّر lang="ar" لـ lang="en" وشوف الفرق في اتجاه النص

// خطوة المشروع 🏗️

Portfolio Step 1 — البداية ملف index.html ده هو نفسه مشروعك. ما اتعملته في التاسك ده هو أول خطوة في الـ Portfolio. هنكمل عليه في كل تاسك جاي.

// ابحث عن

"VS Code shortcuts for HTML" — بيوفر عليك وقت كتير
اكتب "!" وضغط Tab في VS Code — بيكتب لك البنية كاملة (Emmet)

UNIT 02

// UNIT TWO

النصوص والمحتوى

90% من الإنترنت محتوى نصي. هنتعلم إزاي نعبّر عن كل نوع محتوى بالعنصر الصح — مش أي عنصر اللي يشتغل.

4 دروس 1 مطب برمجي 1 تاسك ~60 دقيقة

// HEADINGS

العناوين h1–h6

التسلسل الهرمي للمحتوى

⚡ SEO مهم

في HTML 6 مستويات عناوين. الأرقام مش بس للحجم — هي تسلسل منطقي للمحتوى. فكر فيها كفهرس كتاب.

headings.html
<h1>اسم الموقع أو عنوان الصفحة الرئيسي</h1>
<h2>قسم رئيسي (About / Skills / Projects)</h2>
<h3>قسم فرعي داخل الـ h2</h3>
<h4>تفصيلة داخل الـ h3</h4>
<!-- h5, h6 نادر الاستخدام —>

⚡

قاعدة ذهبية: لازم يكون في h1 واحد بس في الصفحة كلها — ده عنوان الصفحة الرئيسي وأهم عنصر لـ SEO. بعد كده ممكن تستخدم h2 و h3 بحرية. مش تقفز من h1 لـ h3 من غير h2 — ده بيكسر التسلسل المنطقي.

Google بتقرأ الـ headings وبتفهم منها موضوع صفحتك. h1 مع h2s منظمة = أحسن ترتيب في نتائج البحث.

// TEXT

الفقرات والنص

p, br, hr, blockquote, pre, code

text.html
<!-- فقرة نص عادية —>
<p>النص بتاعك هنا. كل فقرة في عنصر p منفصل.</p>

<!-- سطر جديد داخل نفس الفقرة —>
<p>سطر أول<br>سطر تاني في نفس الفقرة</p>

<!-- خط فاصل أفقي —>
<hr>

<!-- اقتباس —>
<blockquote cite="https://المصدر.com">
  "الكود الجيد هو الكود المقروء."
</blockquote>

<!-- نص مسبق التنسيق (يحافظ على المسافات والأسطر) —>
<pre>
  def hello():
    print("مرحباً")
</pre>

<!-- كود inline داخل نص —>
<p>استخدم <code>console.log()</code> لطباعة القيم.</p>

💡

متستخدمش <br> كثير

لو محتاج مسافة كبيرة بين عناصرين، مش الحل br متكرر — الحل CSS margin. br ليها وظيفة واحدة: سطر جديد داخل نفس الفقرة (زي عنوان قصيدة).

// FORMATTING

تنسيق النص

strong, em, mark, del, ins, abbr, kbd

<strong>نص مهم جداً — غامق دلالياً (مش بس تصميمياً)

<em>تأكيد / نبرة — مائل دلالياً

<mark>تمييز / highlight نص

<del>نص محذوف / خطأ تم تصحيحه

<ins>نص تمت إضافته

<abbr>اختصار — tooltip بالمعنى الكامل

<kbd>زرار لوحة المفاتيح

<small>نص ثانوي / ملاحظة صغيرة

<sup>نص علوي (أس رياضي)

<sub>نص سفلي (معادلة كيمياء)

formatting.html
<p>
  ده <strong>مهم جداً</strong> وده <em>بنبرة مختلفة</em>.
</p>

<p>
  السعر الأصلي <del>٢٠٠ جنيه</del>
   بقى <ins><strong>١٠٠ جنيه</strong></ins> فقط!
</p>

<p>
  اضغط <kbd>Ctrl</kbd> + <kbd>S</kbd> للحفظ.
</p>

<abbr title="HyperText Markup Language">HTML</abbr>

<p>E = mc<sup>2</sup></p>

⚡

Semantic vs Visual: <strong> مش مجرد بولد — ده يقول "المحتوى ده مهم". Screen readers بتقرأه بنبرة أعلى. <b> بيعمل نفس الشكل بس من غير معنى دلالي. دايماً استخدم <strong> و<em> لو قصدك المعنى، مش بس الشكل.

// LISTS

القوائم

ul, ol, dl — اختيار النوع الصح مهم

lists.html
<!-- Unordered List — لما الترتيب مش مهم —>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered List — لما الترتيب مهم (خطوات) —>
<ol>
  <li>افتح VS Code</li>
  <li>أنشئ ملف index.html</li>
  <li>ابدأ تكتب كود</li>
</ol>

<!-- Description List — مصطلح وتعريفه —>
<dl>
  <dt>HTML</dt>
  <dd>لغة ترميز الهيكل</dd>
  <dt>CSS</dt>
  <dd>لغة التصميم</dd>
</dl>

<!-- قائمة متداخلة (nested) —>
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

⚠️

مطبات برمجية شائعة — الوحدة الثانية

1. استخدام <br> بدل CSS للمسافات

// مفيش error — لكن الموقع بيبقى صعب الصيانة <p>نص</p> <br><br><br> <p>نص تاني</p> // 3 br متتالية لعمل مسافة — ده غلط دلالياً

الحل: <br> معناها "سطر جديد داخل نفس الفقرة" — مش "مسافة بين عنصرين". لو محتاج مسافة بين فقرتين، الحل الصحيح هو margin في CSS (هتتعلمه بالتفصيل في الكورس الجاي)، مش تكديس وسوم br.

2. تخطي مستوى في العناوين (Heading Levels)

// مفيش error — لكن مشكلة SEO وAccessibility حقيقية <h1>العنوان الرئيسي</h1> <h4>عنوان فرعي</h4> // قفزنا من h1 لـ h4 مباشرة — تسلسل مكسور

الحل: العناوين لازم تتبع تسلسل منطقي — h1 ثم h2 ثم h3 وهكذا، بدون تخطي مستويات. screen readers للمكفوفين بتعتمد على التسلسل ده للتنقل، وGoogle بتستخدمه لفهم هيكل صفحتك. استخدم h4 بعد h3 فقط، مش بعد h1 مباشرة.

3. نسيان </li> أو استخدام عنصر غير li داخل ul/ol

// HTML "بتسامح" أحياناً لكن النتيجة غير متوقعة <ul> <div>عنصر غلط</div> <li>عنصر صح</li> </ul>

الحل: العنصر الوحيد المسموح به مباشرة جوّا <ul> أو <ol> هو <li>. أي عنصر تاني بيخرب الـ semantic structure حتى لو ظاهرياً اشتغل في المتصفح. لو محتاج محتوى معقد جوّا item، حطه جوّا الـ <li> نفسه: <li><div>...</div></li>.

TASK 02

اكتب قسم About وMy Skills

الوحدة الثانية · النصوص والمحتوى

// المطلوب

أضف في index.html قسم About: <h2> + <p> بيشرح مين أنت
أضف قسم Skills: <h2> + <ul> فيها مهاراتك (ولو حتى مبتدئ)
استخدم <strong> على أهم كلمة في وصفك
أضف <hr> بين الأقسام

// Bonus

اعمل Ordered List لخطواتك في تعلم البرمجة
جرب <mark> على أهم مهارة عندك

// خطوة المشروع 🏗️

Portfolio Step 2 — About & Skills الـ Portfolio بتاعك دلوقتي عنده: هيكل + اسمك + عنك + مهاراتك. ده أساس الـ Portfolio الحقيقي. في كورس CSS هنخليه يبان جامد جداً.

// ابحث عن

"HTML list types examples" — شوف استخدامات مختلفة
"HTML semantic vs presentational elements" — فرق مهم

UNIT 03

// UNIT THREE

الروابط والوسائط

الإنترنت قام أساساً على فكرة "HyperText" — النصوص المترابطة. هنتعلم إزاي نربط الصفحات وندمج الصور والميديا.

3 دروس 1 مطب برمجي 1 تاسك ~45 دقيقة

// LINKS

الروابط <a>

href, target, rel, download, anchor links

⚡ SEO + Security

links.html
<!-- رابط خارجي — يفتح في تاب جديد —>
<a href="https://google.com"
   target="_blank"
   rel="noopener noreferrer">
  زور Google
</a>

<!-- رابط داخلي لصفحة تانية —>
<a href="about.html">عني</a>

<!-- Anchor Link — ينقل لجزء في نفس الصفحة —>
<a href="#projects">مشاريعي</a>
<!-- والـ section اللي هيتنقل ليه —>
<section id="projects">...</section>

<!-- رابط إيميل —>
<a href="mailto:email@example.com">راسلني</a>

<!-- رابط تليفون —>
<a href="tel:+201234567890">اتصل بي</a>

<!-- تحميل ملف —>
<a href="cv.pdf" download="CV-Yahya">تحميل CV</a>

🔐

أمان مهم: rel="noopener noreferrer"

لما بتستخدم target="_blank"، لازم تضيف rel="noopener noreferrer". من غيرها، الصفحة اللي بتفتح ممكن تتحكم في صفحتك عن طريق window.opener — ده ثغرة أمنية حقيقية.

// IMAGES

الصور <img>

src, alt, lazy loading, picture, figure

⚡ Performance

images.html
<!-- صورة أساسية — alt مش اختياري! —>
<img
  src="PIC/profile.jpg"
  alt="صورة شخصية ليحيى السلامي"
  width="300"
  height="300"
/>

<!-- Lazy Loading — يحمل الصورة بس لما تظهر في الشاشة —>
<img
  src="PIC/project.jpg"
  alt="لقطة شاشة مشروع Portfolio"
  loading="lazy"
/>

<!-- figure + figcaption — صورة مع تعليق —>
<figure>
  <img src="PIC/project.jpg" alt="مشروع Portfolio"/>
  <figcaption>صفحة Portfolio بنيتها بـ HTML وCSS</figcaption>
</figure>

<!-- picture — صور مختلفة لأحجام مختلفة —>
<picture>
  <source media="(max-width: 640px)" srcset="small.jpg">
  <source media="(max-width: 1024px)" srcset="medium.jpg">
  <img src="large.jpg" alt="صورة متجاوبة">
</picture>

⚡

alt مش اختياري — ده إلزامي: بدون alt، Google مش بتقدر تفهم الصورة وبتتجاهلها في البحث. المكفوفون اللي بيستخدموا screen readers بيسمعوا نص الـ alt. اكتب alt واضح ومفيد — مش "صورة" أو "img1".

💡

loading="lazy" مجاني!

سطر واحد بيحسّن أداء موقعك بشكل كبير. المتصفح مش هيحمل الصور اللي مش ظاهرة في الشاشة حتى المستخدم يوصلها.

// MEDIA

الوسائط: Video, Audio, iFrame

تضمين محتوى وسائط في صفحتك

media.html
<!-- فيديو —>
<video
  src="demo.mp4"
  controls
  width="640"
  poster="thumbnail.jpg"
  preload="metadata"
>
  المتصفح ده مش بيدعم الفيديو.
</video>

<!-- صوت —>
<audio src="podcast.mp3" controls></audio>

<!-- YouTube مضمّن —>
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  title="عنوان الفيديو للـ Accessibility"
  allowfullscreen
  loading="lazy"
></iframe>

⚠️

مطبات برمجية شائعة — الوحدة الثالثة

1. نسيان alt في الصور

// مفيش error في الـ Console — لكن مشكلة SEO وAccessibility خطيرة <img src="profile.jpg"> // مفيش alt خالص!

الحل: alt مش اختياري أبداً. بدونها، Google مش بتقدر تفهرس صورتك في نتائج البحث، وبرامج قراءة الشاشة للمكفوفين بتقرأ اسم الملف الغريب بدل وصف مفيد. حتى الصور الزخرفية البحتة محتاجة alt="" (فاضية لكن موجودة) عشان screen readers تتخطاها بهدوء.

2. روابط خارجية بدون rel="noopener noreferrer"

// مفيش error ظاهر — لكنها ثغرة أمنية حقيقية <a href="https://external-site.com" target="_blank">رابط</a> // الصفحة الجديدة تقدر تتحكم في صفحتك عن طريق window.opener!

الحل: أي رابط بـ target="_blank" لازم يكون معاه rel="noopener noreferrer". بدونها، الموقع اللي بتفتحه في تاب جديد يقدر يوصل لـ window.opener بتاع صفحتك الأصلية وأحياناً يعيد توجيهها لموقع ضار (تكتيك تصيّد معروف).

3. مسار صورة غلط (Broken Image)

GET file:///PIC/profile.jpg net::ERR_FILE_NOT_FOUND // أو في السيرفر: GET /images/profile.jpg 404 (Not Found)

الحل: افتح DevTools ← Network Tab وشوف الطلبات اللي فشلت (هتبقى باللون الأحمر). تأكد إن المسار (src) نسبي وصحيح بالنسبة لمكان ملف الـ HTML — لو الصورة في مجلد "PIC" بجانب الملف، المسار الصح هو "PIC/profile.jpg" مش "/PIC/profile.jpg" أو مسار مطلق من جهازك.

TASK 03

أضف صورتك وروابط التواصل

الوحدة الثالثة · الروابط والوسائط

// المطلوب

أضف صورتك الشخصية بـ <figure> و<figcaption> مع alt واضح
أنشئ قسم "تواصل معي" وحط روابط GitHub وLinkedIn وإيميلك
خلي الروابط الخارجية تفتح في تاب جديد مع rel="noopener noreferrer"
أضف Anchor Links في الـ navbar (لو عملت navbar) للتنقل بين الأقسام

// Bonus

أضف رابط "تحميل CV" بـ download attribute
جرب <picture> مع نفس الصورة بأحجام مختلفة

// خطوة المشروع 🏗️

Portfolio Step 3 — الهوية والتواصل الـ Portfolio بتاعك دلوقتي عنده: هيكل + about + skills + صورة + روابط. ده Portfolio كامل بـ HTML خالص!

UNIT 04

// UNIT FOUR

الهيكل الدلالي والنماذج

هنتعلم إزاي نبني هيكل صفحة محترف بيفهمه المتصفح وGoogle والـ screen readers. وهنتعلم النماذج اللي بتتفاعل مع المستخدم.

4 دروس 1 مطب برمجي 1 تاسك ~75 دقيقة

// SEMANTIC HTML5

Semantic HTML5

العناصر الدلالية: header, nav, main, section, article, aside, footer

⚡ SEO + A11y

قبل HTML5، المبرمجين كانوا بيحطوا كل حاجة في <div>. المتصفح مش كان يعرف إيه header وإيه footer. HTML5 جابت عناصر "بتوصف معناها" — وده سمّوه Semantic HTML.

semantic.html
<body>

  <!-- رأس الصفحة: اللوجو، اسم الموقع —>
  <header>
    <h1>Yahya.DEV</h1>
    <!-- قائمة التنقل —>
    <nav>
      <ul>
        <li><a href="#about">عني</a></li>
        <li><a href="#projects">مشاريعي</a></li>
        <li><a href="#contact">تواصل</a></li>
      </ul>
    </nav>
  </header>

  <!-- المحتوى الرئيسي — واحد بس في الصفحة —>
  <main>

    <!-- قسم: موضوع واضح، عنوان —>
    <section id="about">
      <h2>عني</h2>
      <p>أنا Yahya...</p>
    </section>

    <!-- article: محتوى مستقل قائم بذاته —>
    <section id="projects">
      <h2>مشاريعي</h2>
      <article>
        <h3>مشروع Portfolio</h3>
        <p>صفحة شخصية بـ HTML وCSS</p>
      </article>
    </section>

  </main>

  <!-- محتوى جانبي مرتبط بالصفحة —>
  <aside>
    <h3>مهارات سريعة</h3>
  </aside>

  <!-- تذييل الصفحة —>
  <footer>
    <p>© 2026 Yahya.DEV</p>
  </footer>

</body>

الفرق بين <section> و<article>: section = "قسم من الصفحة" مش منطقي لوحده. article = محتوى مستقل لو نقلته لصفحة تانية هيبقى منطقي. مثال: مقالة في جريدة = article. قسم في المقالة = section.

// TABLES

الجداول

table, thead, tbody, tfoot, colspan, rowspan

⚠️

الجداول للبيانات فقط

كتير ناس زمان كانوا بيبنوا layout الصفحة بجداول. ده غلط تماماً الآن. الجداول بُنيت للبيانات الجدولية زي: جداول مقارنة، بيانات مالية، مواعيد. لـ layout استخدم CSS Grid أو Flexbox.

table.html
<table>
  <!-- caption: عنوان الجدول للـ accessibility —>
  <caption>مقارنة بين Frontend Technologies</caption>

  <!-- رأس الجدول —>
  <thead>
    <tr>
      <th>اللغة</th>
      <th>الوظيفة</th>
      <th>الصعوبة</th>
    </tr>
  </thead>

  <!-- جسم الجدول —>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>الهيكل</td>
      <td>سهل</td>
    </tr>
    <tr>
      <!-- colspan: خلية تمتد على أكثر من عمود —>
      <td colspan="2">CSS + JavaScript</td>
      <td>متوسط → متقدم</td>
    </tr>
  </tbody>

  <!-- تذييل الجدول —>
  <tfoot>
    <tr>
      <td colspan="3">مصدر: MDN Web Docs</td>
    </tr>
  </tfoot>

</table>

// FORMS

النماذج <form>

الطريقة اللي بتتكلم بيها الصفحة مع المستخدم

contact-form.html
<form
  action="https://formspree.io/f/your-id"
  method="POST"
>
  <!-- fieldset: تجميع حقول مترابطة —>
  <fieldset>
    <legend>بياناتك</legend>

    <!-- label مهم: يربط الوصف بالحقل —>
    <label for="name">الاسم:</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="اسمك الكامل"
      required
      autocomplete="name"
    />

    <label for="email">الإيميل:</label>
    <input
      type="email"
      id="email"
      name="email"
      required
    />
  </fieldset>

  <label for="msg">رسالتك:</label>
  <textarea
    id="msg"
    name="message"
    rows="5"
    required
    minlength="10"
  ></textarea>

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

⚡

Formspree مجاني للبورتفوليو: بدل ما تحتاج backend، ممكن تستخدم Formspree.io — بيستقبل رسائل الـ contact form وبيوصلها على إيميلك. مثالي للـ Portfolio الثابت على GitHub Pages.

// INPUT TYPES

أنواع Input

المتصفح بيعمل Validation مجاناً لو استخدمت النوع الصح

النوع	الاستخدام	المتصفح يعمل
`text`	نص عام	لا شيء
`email`	بريد إلكتروني	يتحقق من صحة الإيميل
`password`	كلمة مرور	يخفي النص
`number`	رقم	يقبل أرقام فقط + min/max
`date`	تاريخ	date picker
`tel`	رقم تليفون	لوحة أرقام على موبايل
`url`	رابط URL	يتحقق من صحة الرابط
`checkbox`	اختيار متعدد	✓
`radio`	اختيار واحد	●
`file`	رفع ملف	file picker
`range`	شريط تمرير	slider
`color`	لون	color picker
`search`	بحث	زرار مسح
`hidden`	قيمة خفية	مش بيظهر للمستخدم

⚠️

مطبات برمجية شائعة — الوحدة الرابعة

1. نسيان for/id لربط label بالـ input

// مفيش error — لكن الـ Accessibility مكسورة تماماً <label>الاسم:</label> <input type="text" id="name"> // مفيش for في الـ label — الربط غير موجود!

الحل: الـ label لازم يكون عنده for="name" بنفس قيمة الـ id بتاع الـ input. بدون الربط ده، الضغط على نص الـ label مش هيفعّل الـ input، وscreen readers مش هتقدر تربط الوصف بالحقل — وده مشكلة accessibility حقيقية مش مجرد تفصيلة.

2. استخدام div بدل العناصر الدلالية (Semantic Elements)

// مفيش error — لكن SEO وAccessibility أضعف بكثير <div class="header">...</div> <div class="nav">...</div> <div class="main">...</div>

الحل: استخدم <header>، <nav>، <main>، <footer> بدل <div> عشوائية بـ class اسمها بس "header" أو "nav". المتصفح وGoogle وscreen readers بيفهموا العناصر الدلالية دي تلقائياً كجزء من بنية الصفحة، عكس div اللي معناها "مجرد صندوق بدون معنى".

3. زرار submit بدون type محدد جوّا form فيها أكتر من زرار

// مفيش error — لكن سلوك غير متوقع <form> ... <button>حفظ مؤقت</button> <button>إرسال</button> </form> // الاتنين بيبعتوا الفورم! النوع الافتراضي submit

الحل: أي <button> جوّا <form> بيكون نوعه الافتراضي type="submit" حتى لو ماحددتهوش. لو عندك زرار مش المفروض يبعت الفورم (زي "حفظ مؤقت" أو "إلغاء")، لازم تحدد له type="button" صراحةً.

TASK 04

أضف Navbar وContact Form لصفحتك

الوحدة الرابعة · الهيكل والنماذج

// المطلوب

حوّل كل الـ <div> اللي عندك لعناصر semantic صح: <header>, <main>, <section>, <footer>
أضف <nav> مع روابط Anchor للأقسام
أضف قسم Contact مع form فيها: الاسم، الإيميل، رسالة، وزرار إرسال
كل حقل لازم يكون عنده label مرتبط بيه بـ for/id
أضف required للحقول الإلزامية

// خطوة المشروع 🏗️

Portfolio Step 4 — الهيكل الكامل الـ Portfolio دلوقتي عنده: navbar + about + skills + projects + contact form + footer. ده HTML كامل لـ Portfolio احترافي. الخطوة الجاية: CSS!

// ابحث عن

"Formspree tutorial" — عشان تشغّل الـ contact form فعلاً
"HTML5 form validation tutorial" — شوف إزاي required وpattern بيشتغلوا

UNIT 05

// UNIT FIVE

الاحتراف

الفرق بين مبتدئ ومحترف مش في عدد العناصر اللي يعرفها — في الفهم. هنا هنتعلم SEO، Accessibility، وعناصر متقدمة.

4 دروس 1 مطب برمجي 1 تاسك ~60 دقيقة

// SEO

Meta Tags & SEO

إزاي Google بتقرأ صفحتك

⚡ مهم جداً

head-seo.html
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <!-- ──── SEO الأساسي ──── —>
  <title>Yahya Al-sulami | Full-Stack Developer</title>
  <meta name="description"
        content="مطور ويب متخصص في HTML وCSS وJavaScript. شاهد مشاريعي وتواصل معي."/>
  <meta name="author" content="Yahya Al-sulami"/>
  <link rel="canonical" href="https://yahya.dev/"/>

  <!-- ──── Open Graph (مشاركة سوشيال ميديا) ──── —>
  <meta property="og:title" content="Yahya.DEV — Portfolio"/>
  <meta property="og:description" content="مطور ويب — Portfolio"/>
  <meta property="og:image" content="https://yahya.dev/PIC/og-image.jpg"/>
  <meta property="og:url" content="https://yahya.dev/"/>
  <meta property="og:type" content="website"/>

  <!-- ──── Twitter Card ──── —>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="Yahya.DEV"/>
</head>

⚡

description بين 150-160 حرف: ده النص اللي بيظهر تحت عنوان صفحتك في نتائج Google. اكتبه بعناية — ده إعلانك في محرك البحث.

// A11Y

Accessibility (ARIA)

صفحتك للجميع — مش بس اللي يشوفوا كويس

⚡ معيار احترافي

accessibility.html
<!-- Skip link: للمكفوفين يتخطوا الـ navbar —>
<a href="#main" class="skip-link">تخطى للمحتوى الرئيسي</a>

<!-- role + aria-label على الـ nav —>
<nav aria-label="القائمة الرئيسية">...</nav>

<!-- زرار بدون نص (icon فقط) —>
<button aria-label="إغلاق القائمة">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Loading state —>
<div aria-live="polite" aria-atomic="true">
  جاري التحميل...
</div>

<!-- صورة ديكور: مفيش معنى، مخليش الـ screen reader يقراها —>
<img src="decoration.svg" alt="" aria-hidden="true"/>

<!-- tabindex: ترتيب التنقل بالكيبورد —>
<div tabindex="0" role="button">عنصر تفاعلي</div>

💡

اختبر صفحتك بالكيبورد فقط

اضغط Tab وتنقل في صفحتك من غير ماوس. لو مش قادر توصل لكل حاجة — فيه مشكلة Accessibility. ده نفس الاختبار اللي Google بتعمله.

// ATTRIBUTES

Global & Data Attributes

خصائص تشتغل على أي عنصر HTML

الخاصية	الوظيفة	مثال
`id`	معرّف فريد	`id="hero"`
`class`	تصنيف CSS	`class="card active"`
`style`	CSS inline (تجنبه!)	`style="color:red"`
`hidden`	إخفاء العنصر	`hidden`
`title`	tooltip عند hover	`title="نص توضيحي"`
`lang`	لغة هذا الجزء	`lang="en"`
`dir`	اتجاه النص	`dir="ltr"`
`contenteditable`	قابل للتعديل	`contenteditable="true"`
`data-*`	بيانات خاصة	`data-id="42"`
`draggable`	قابل للسحب	`draggable="true"`

data-attrs.html
<!-- data-* بتستخدم لتخزين بيانات تقرأها JavaScript —>
<div
  class="project-card"
  data-id="1"
  data-category="frontend"
  data-year="2026"
>
  مشروع Portfolio
</div>

<!-- في JavaScript بتوصلها كده —>
<!-- const card = document.querySelector('.project-card'); —>
<!-- card.dataset.id       → "1" —>
<!-- card.dataset.category → "frontend" —>

// ADVANCED

عناصر متقدمة

details, dialog, template, canvas — اللي بيميز المحترف

advanced.html
<!── details + summary: accordion بدون JavaScript ──>
<details>
  <summary>ما هي تجربتك؟</summary>
  <p>لدي سنة خبرة في تطوير الويب...</p>
</details>

<!── dialog: modal بـ HTML خالص ──>
<dialog id="myDialog">
  <h2>تأكيد الإرسال</h2>
  <p>تم إرسال رسالتك بنجاح!</p>
  <button onclick="this.closest('dialog').close()">إغلاق</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
  فتح الـ Modal
</button>

<!── template: HTML لا يظهر — JavaScript بتستخدمه ──>
<template id="project-card-template">
  <div class="project-card">
    <h3 class="proj-title"></h3>
    <p  class="proj-desc"></p>
  </div>
</template>

<!── canvas: للرسم والألعاب بـ JavaScript ──>
<canvas id="myCanvas" width="400" height="200"></canvas>

⚠️

مطبات برمجية شائعة — الوحدة الخامسة

1. نسيان viewport meta tag

// مفيش error — لكن الصفحة بتبان "مصغّرة" على الموبايل بشكل غريب <head> <meta charset="UTF-8"> <title>صفحتي</title>  </head>

الحل: بدون <meta name="viewport" content="width=device-width, initial-scale=1.0">، المتصفحات على الموبايل بتفترض إن الصفحة مصممة لشاشة desktop عريضة (980px تقريباً) وبتعرضها مصغّرة بالكامل. ده أشهر سبب لصفحة "تبان تمام على اللابتوب لكن مكسورة على الموبايل".

2. استخدام aria-label على عنصر عنده نص بالفعل

// مفيش error — لكن screen reader بيكرر المعلومة أو يتجاهل النص الحقيقي <button aria-label="إغلاق">إغلاق النافذة</button> // النص الظاهر "إغلاق النافذة"، لكن aria-label بيقول "إغلاق" بس

الحل: aria-label بيُستخدم بس لما العنصر **مفيهوش نص ظاهر** (زي زرار بأيقونة بس). لو عندك نص واضح جوّا العنصر بالفعل، سيبه يتكلم لوحده من غير aria-label — الإضافة هنا بتكرر أو تناقض المعنى بدل ما تساعد.

3. كتابة data-* attribute بأحرف كبيرة (camelCase) في الـ HTML

// لو حاولت توصلها بـ JavaScript: Uncaught TypeError: Cannot read properties of undefined (reading 'projectId')

الحل: في الـ HTML، اكتب data-* attributes بحروف صغيرة ودش فقط: data-project-id="5" مش data-projectId="5". JavaScript بتحوّلها تلقائياً لـ camelCase في الـ dataset (تبقى element.dataset.projectId) — لكن الـ HTML نفسها لازم تتكتب بـ kebab-case دايماً.

TASK 05

اجعل صفحتك جاهزة للنشر

الوحدة الخامسة · الاحتراف

// المطلوب

أضف كل Meta Tags الأساسية في <head>: title، description، viewport
أضف Open Graph tags (og:title, og:description, og:image)
تأكد إن كل صور عندها alt واضح
أضف aria-label للـ nav و loading="lazy" لكل الصور
جرّب تتنقل في صفحتك بالـ Tab فقط — كل حاجة لازم تكون accessible

// Bonus

أضف <details> للـ FAQ أو "اقرأ أكثر" في الـ About
استخدم data-category في مشاريعك (هتفيدك في JavaScript لاحقاً)

// ابحث عن

"Open Graph tester" — اختبر كيف بيظهر موقعك لما حد يشيره على Facebook
"WAVE accessibility checker" — أداة مجانية بتحلل صفحتك
"PageSpeed Insights" — Google بتقيّم سرعة وأداء صفحتك مجاناً

FINAL PROJECT

🏗️

// FINAL PROJECT

بناء Portfolio Page كاملة

خطوة بخطوة — من HTML هيكل لصفحة احترافية

الـ Head الكامل

charset، viewport، title احترافي، description بين 150-160 حرف، Open Graph كامل، canonical link.

الـ Header والـ Nav

<header> مع <nav aria-label="..."> وقائمة <ul> مع Anchor Links لكل section. أضف "skip to content" link.

قسم Hero / About

<section id="hero"> مع <h1> باسمك و<p> وصفك. <figure> لصورتك. رابط "تحميل CV".

قسم المهارات

<section id="skills"> مع <ul> قوائم مهاراتك، مصنّفة في <ul> nested (Frontend، Backend، Tools).

قسم المشاريع

<section id="projects"> مع 3 <article> على الأقل. كل article: عنوان، وصف، صورة، رابط GitHub، رابط مباشر.

قسم التواصل

<section id="contact"> مع form: name، email، message، button. كل حقل مع label مرتبط.

الـ Footer

<footer> مع اسمك، روابط سوشيال، copyright. أضف روابط الـ social بـ rel="noopener noreferrer".

🔗

مشروعك مش هينتهي هنا — في كورس CSS هتأخذ نفس الـ index.html ده وتضيف ليه ملف style.css وتحوّله لصفحة بصرية احترافية مذهلة. في كورس JavaScript هتضيف animations وinteractivity. ابني HTML صح دلوقتي وهيكون أساس قوي لكل الكورسات الجاية.

TASK FINAL 🏆

Portfolio HTML كامل + نشر على GitHub Pages

التاسك الختامي · المشروع النهائي

// المطلوب

Portfolio HTML كامل مع كل الأقسام: Hero, About, Skills, Projects, Contact, Footer
3 مشاريع حقيقية على الأقل في قسم Projects (ولو صغيرة)
Meta Tags + Open Graph كاملة
اختبار Accessibility بالـ Tab
رفع المشروع على GitHub وتفعيل GitHub Pages
فتح الصفحة من موبايل والتأكد إنها بتظهر صح

// Bonus (للمتميزين)

أضف Structured Data (JSON-LD) لصفحتك
اختبر صفحتك على PageSpeed Insights وطلّع نتيجة 90+
أضف <meta name="theme-color"> لتلوين شريط العنوان في الموبايل

// ابحث عن

"How to deploy to GitHub Pages" — عشان تنشر موقعك مجاناً
"HTML validator W3C" — تأكد إن الكود بتاعك صح
"Lighthouse audit Chrome DevTools" — تقرير كامل عن الأداء والـ SEO

🎉 تهانينا! أنهيت كورس HTML الصفحة اللي بنيتها دلوقتي هي أساس مشاريعك كلها. في كورس CSS هنحوّلها لتحفة بصرية، وفي JavaScript هنخليها تتحرك. الرحلة مستمرة — وأنت دلوقتي جزء منها.

تعلم HTML5

ما هي HTML؟

كيف يعمل المتصفح؟

البنية الأساسية

مرحباً بالعالم!

العناوين h1–h6

الفقرات والنص

تنسيق النص

القوائم

الروابط <a>

الصور <img>

الوسائط: Video, Audio, iFrame

Semantic HTML5

الجداول

النماذج <form>

أنواع Input

Meta Tags & SEO

Accessibility (ARIA)

Global & Data Attributes

عناصر متقدمة