</>

Code With Asmaa

دفتر تعلّم البرمجة — المستوى الأول

مذكرة تعلّم HTML

من أول وسم إلى بناء صفحات ويب كاملة الهيكل — بالشرح والأمثلة والمشاريع التطبيقية

37 درسHTML فقطأمثلة تفاعليةمشاريع تطبيقية

الاسم:

الفهرس

رحلتك الكاملة من أول وسم HTML لحد مشروع HTML متكامل — اضغطي على أي درس للانتقال إليه مباشرة

🗂️ قبل ما نبدأ

📖قاموس المصطلحات والاختصاراتكل اختصار وكل كلمة تقابلك في المذكرة، بمعناها عربي وإنجليزي

📘 HTML — بناء الهيكل (20 درس)

01مقدمة عن الويب و HTMLما هو الويب، ودور HTML
02هيكل صفحة HTML الأساسيhtml, head, body
03الفرق بين head و bodytitle, meta, link, script
04الـ Attribute (الخاصية)مفهوم الخاصية، ومكانها داخل وسم الفتح
05وسوم Meta الأساسيةcharset, viewport, description, keywords
06العناوين h1 إلى h6ترتيب العناوين حسب الأهمية
07الفقرات والفواصلp, br, hr
08تنسيق النصوصstrong, b, i, em, mark, small, sub, sup
09الروابط والصورa, href, target, mailto, tel, download, img, src, alt
10القوائمul, ol, li, dl
11الجداولtable, tr, td, th, thead, tbody
12الفورم — الجزء الأولform, input, label, required, button
13الفورم — الجزء الثانيtextarea, select, radio, checkbox
14الصوت والفيديو و iframeaudio, video, iframe
15العناصر الدلالية Semantic HTMLheader, nav, main, section, article, aside, footer
16تنظيم الصفحةdiv, span, id, class
17الفرق بين Block و Inline Elementsطبيعة العناصر قبل الدخول في التنسيق
18مشروع: صفحة شخصيةمشروع تطبيقي كامل
19مشروع: صفحة عيادة بسيطةمشروع تطبيقي كامل
20مراجعة ومشروع HTML كاملتجميع كل ما سبق

📗 HTML — دروس تكميلية ومتقدمة (17 درس)

21عناصر تنسيق نص متقدمةdel, ins, s, u, code, blockquote, q
22الفرق بين Tag و Element و Attributeفهم المصطلحات الثلاثة بدقة
23HTML Global Attributesid, class, style, title, lang, dir, hidden, tabindex
24الفرق بين id و class بالتطبيق العمليمع CSS وJavaScript وجدول مقارنة
25عنصري div و spanالتجميع على مستوى الكتلة والنص
26HTML Character Entitiesالرموز الخاصة < > &  
27HTML Commentsالتعليقات وأهميتها في تنظيم الكود
28Absolute Path و Relative Pathالمسار المطلق والمسار النسبي
29Semantic HTML بالتفصيلشرح موسّع لكل عنصر دلالي
30HTML Layoutتخطيط صفحات الويب
31HTML Audio بالتفصيلcontrols, autoplay, loop, muted, source
32HTML Video بالتفصيلwidth, height, poster, source
33Iframe بالتفصيلتضمين صفحات وفيديوهات خارجية
34HTML Accessibilityalt, label, ترتيب العناوين
35HTML SEO Basicstitle, meta description, headings
36Faviconإضافة أيقونة الموقع
37HTML Validationكود صحيح وفحص الأخطاء الشائعة

التطبيق والتقييم

★الحل الكامل لمشروع HTMLتنفيذ كامل لمشروع ميجا تك بكل التفاصيل
★مشاريع تطبيقيةأفكار مشاريع لتطبيق كل ما تعلمتِه
★مشروع محلول: عيادة طبيةصفحة عيادة كاملة بفورم حجز مواعيد
★مشروع محلول: بورتفوليوصفحة أعمال شخصية لمصممة واجهات
★مشروع محلول: صفحة مؤتمرمشروع شامل يغطي كل وسوم HTML تقريبًا

↩ الفهرس

الدرس 0101

مقدمة عن الويب و HTML

قبل ما نكتب حرف واحد كود، لازم نفهم الصورة الكبيرة: إيه اللي بيحصل فعليًا لما تفتحي أي موقع في المتصفح؟

الإنترنت هو الشبكة الضخمة اللي بتربط أجهزة الكمبيوتر ببعضها حول العالم — تخيليه زي شبكة الطرق والكباري بين المدن.
الويب (Web) هو المحتوى نفسه اللي بنشوفه من خلال الإنترنت — المواقع، الصور، الفيديوهات. لو الإنترنت هو الطريق، فالويب هو المحلات والمباني اللي بنزورها عن طريق الطريق ده.
أي موقع بتزوريه — فيسبوك، يوتيوب، أي موقع مدرسي — أصله ملفات مكتوبة بلغة اسمها HTML.
HTML اختصار HyperText Markup Language. تعالي نفكها كلمة كلمة:
• Language = لغة، ليها قواعد وطريقة كتابة معينة.
• Markup = توصيف أو "وسم" — يعني بنحط علامة على كل جزء من المحتوى نقول عليها "ده عنوان"، "دي صورة"، "ده رابط".
• HyperText = نص "متشعب"، يعني نص فيه روابط توديكي لنصوص أو صفحات تانية بضغطة واحدة.
مثال من حياتك اليومية: لما تكتبي وصفة أكل في ورقة، وتحطي عنوان "المقادير" فوق قائمة، وعنوان "طريقة التحضير" فوق خطوات مرقّمة — إنتِ فعليًا بتـ"وسمي" أجزاء الورقة عشان اللي هيقرأها يعرف يميّز بينها. HTML بتعمل بالظبط نفس الحاجة، لكن للمتصفح مش لإنسان.
مهم جدًا تفهمي: HTML مش لغة برمجة. لغة البرمجة بيكون فيها شروط وحسابات وقرارات (زي: لو الجو حر، شغّلي التكييف). أما HTML فبس بتوصف وتنظّم المحتوى، من غير ما "تفكر" أو "تحسب" أي حاجة.

🖥️ طيب ليه أصلاً بنتعلم "لغة برمجة"؟

الكمبيوتر جهاز إلكتروني "غبي" في الأصل — مش بيفهم عربي ولا إنجليزي، ولا حتى بيفهم HTML مباشرة! كل اللي بيفهمه فعليًا حالتين بس: 0 و1 (تيار كهربائي "بيمرّ" أو "مش بيمرّ" داخل ملايين الترانزستورات جوه المعالج).
اللغة دي اسمها لغة الآلة (Machine Language)، وأي برنامج أو موقع بيشتغل فعليًا في الآخر بيتحوّل لملايين الأصفار والواحدات، شكلها تقريبًا زي: 01001000 01101001.
تخيلي لو كل مبرمجة في الدنيا لازم تكتب موقعها بالأصفار والواحدات مباشرة — هيبقى مستحيل عمليًا وبطيء جدًا ومليان أخطاء. عشان كده العلماء اخترعوا لغات برمجة بكلمات وقواعد قريبة من لغة الإنسان (زي HTML وCSS وJavaScript)، عشان الكتابة والفهم يبقوا سهلين علينا إحنا كبني آدمين.
وبعدين، فيه برنامج وسيط شغله إنه "يترجم" — بالنسبة لـ HTML الوسيط ده هو المتصفح نفسه — بياخد الكود المقروء اللي كتبناه، ويحوّله في الخلفية لنفس لغة الآلة (0 و1) اللي المعالج فعليًا يقدر ينفذها.

لغة البرمجة (زي HTML) بتوفّر عليكِ الكتابة المباشرة بالأصفار والواحدات، والمتصفح هو اللي بيترجم بالنيابة عنك في الخلفية

رحلة الكود من شاشتك إلى صفحة ظاهرة يشاهدها الزائر

نبدأ دايمًا من القاعدة: HTML يبني الهيكل، بعدين CSS يلبسه شكل، وأخيرًا JavaScript يضيفله حياة وحركة

↩ الفهرس

الدرس 01 — تابع01

مقدمة عن الويب و HTML (تابع)

🏗️ HTML — الهيكلزي عظام الجسم، أو الهيكل الخرساني للمبنى. بيحدد وجود العناصر ومكانها المنطقي (فيه عنوان هنا، وفقرة هناك) بدون أي اهتمام بالشكل.

🎨 CSS — الشكلزي دهان الحوائط واختيار الأثاث، أو لبس الجسم. بيحدد الألوان، الخطوط، المسافات — شكل كل حاجة بصريًا.

⚡ JavaScript — السلوكزي الأبواب الكهربائية والأجراس، أو حركة الجسم. بيضيف التفاعل: إيه اللي بيحصل لما تضغطي زرار أو تملي فورم.

🎬 مثال حي: نفس الزرار بالظبط في 3 مراحل

🏗️ HTML فقط

شكل افتراضي غير منسّق، كما يعرضه المتصفح من غير أي تنسيق إضافي

←

🎨 + CSS

شكل جذّاب، لكنه لا يزال بلا استجابة — الضغط عليه لا يُحدث أي تأثير

←

⚡ + JavaScript

أصبح الزر الآن قادرًا على الاستجابة فعليًا عند الضغط عليه

💡

الزر نفسه تكرر ثلاث مرات: في الأولى بنت HTML وجوده فقط، وفي الثانية منحته CSS شكلًا جذابًا لكنه ظل بلا استجابة، وفي الثالثة جعلته JavaScript يستجيب فعليًا عند الضغط عليه. وهذا هو الترتيب نفسه الذي تسير عليه هذه المذكرة: HTML أولًا، ثم CSS، وأخيرًا JavaScript.

📌 ملخص الدرس

الويب هو المحتوى، والإنترنت هو الشبكة التي توصّله
الكمبيوتر لا يفهم إلا لغة الآلة (0 و1)، ولغات البرمجة اختُرعت لتسهّل علينا الكتابة بدلًا منها
HTML لغة توصيف تبني هيكل الصفحة، وليست لغة برمجة
HTML للهيكل، CSS للشكل، JavaScript للسلوك

⚠️ أخطاء شائعة

الاعتقاد إن تعلّم HTML وحده كافٍ لعمل مواقع تفاعلية كاملة — هي بس نقطة البداية.
الخلط بين "الإنترنت" (البنية التحتية) و"الويب" (المحتوى نفسه) وكأنهما نفس الشيء.

✏️ تمرين

افتحي أي 3 مواقع تستخدمينها يوميًا، واكتبي لكل موقع جملة توضّحي فيها جزءًا بصريًا واحدًا فيه وهل هو من مسؤولية HTML أم CSS أم JavaScript.

🚀 Challenge

افتحي أي موقع، اضغطي كليك يمين ثم "عرض مصدر الصفحة" (View Page Source)، وحاولي تتعرفي بعينك على 3 كلمات متكررة زي html أو head أو body أو div.

↩ الفهرس

الدرس 0202

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

أي صفحة HTML في الدنيا، من أبسط صفحة لأعقد موقع، لازم تتبع نفس الهيكل الأساسي ده — زي ما أي بيت لازم يكون له أساس وسقف وحوائط.

الهيكل مكوّن من 4 أجزاء أساسية بترتيب ثابت: إعلان نوع المستند، ثم الوسم html اللي يحتوي بداخله وسمين تانيين هما head وbody.
هيكل الصفحة زي "قالب فارغ" ثابت مش بيتغيّر — اللي بيتغيّر بس هو المحتوى اللي جوه head وbody.

هيكل صفحة HTML: html يضمّ head وbody دائمًا بنفس هذا الترتيب

① السطر الأول: DOCTYPE

index.html

<!DOCTYPE html>

الناتج

لا يظهر أي شيء مرئي في الصفحة — هذا السطر تعليمة للمتصفح فقط.

<!DOCTYPE html> ليس وسمًا عاديًا، بل إعلان (Declaration) لازم يكون أول سطر في أي ملف HTML.
وظيفته الوحيدة: يخبر المتصفح "هذا الملف مكتوب بمعيار HTML5 الحديث"، فيعرضه بالطريقة الصحيحة بدل ما يخمّن.

② الوسم html

index.html

<html lang="ar">

</html>

الناتج

لا يظهر أي شيء بعد — وسم html فارغ لسه، هو بس "الصندوق الكبير" اللي هيحتوي كل حاجة.

<html> هو الوسم الأب (Parent) لكل الصفحة — كل وسم آخر هيتكتب بين وسم الفتح <html> ووسم الغلق </html>.
خاصية lang="ar" بتحدد لغة محتوى الصفحة (هنا: العربية) — ده بيساعد قارئات الشاشة ومحركات البحث تتعامل مع المحتوى صح.

💡

لاحظي إن كل وسم في HTML (تقريبًا) بييجي في زوج: وسم فتح <html> ووسم غلق </html> — الفرق إن وسم الغلق فيه علامة "/" قبل الاسم. هنشرح بالتفصيل باقي محتوى head وbody في الدرس الجاي.

📌 ملخص الدرس

كل صفحة HTML تبدأ بـ DOCTYPE ثم وسم html
html هو الوسم الأب الذي يحتوي كل الصفحة
head للمعلومات الخفية، body للمحتوى الظاهر — بالترتيب دايمًا

⚠️ أخطاء شائعة

نسيان سطر DOCTYPE في أول الملف، مما قد يجعل المتصفح يعرض الصفحة بطريقة غير متوقعة.
كتابة head بعد body بدل قبله.
نسيان إغلاق وسم html في نهاية الملف.

✏️ تمرين

افتحي محرر أكواد (مثل VS Code)، أنشئي ملفًا جديدًا باسم test.html، واكتبي فيه بنفسك — بدون نسخ — سطر DOCTYPE ثم وسم html بخاصية lang.

🚀 Challenge

ابحثي: ما الذي يحدث فعليًا في المتصفحات القديمة جدًا لو نسينا DOCTYPE؟ اكتبي جملة أو جملتين بما فهمتيه.

↩ الفهرس

قبل ما نبدأ

قاموس المصطلحات والاختصارات

الصفحة دي مرجع تقدري ترجعيلها في أي وقت. فيها كل اختصار هيتكرر معاكِ في المذكرة كلها بمعناه الكامل عربي وإنجليزي. مفهوما الـ Attribute والفرق بين Block وInline ليهم درسان مستقلان لاحقًا في مكانهما المناسب من رحلتك.

🔤 اختصارات اللغة الأساسية (Abbreviations)

الاختصار	الاسم كاملًا بالإنجليزي	المعنى بالعربي
HTML	HyperText Markup Language	لغة توصيف النص التشعبي — اللغة اللي بنبني بيها هيكل الصفحة (موضوع المذكرة دي)
CSS	Cascading Style Sheets	صفحات الأنماط المتتالية — اللغة اللي بنلوّن وننسّق بيها الصفحة (هنتعلمها بعد HTML)
JS	JavaScript	جافا سكريبت — لغة البرمجة اللي بتضيف التفاعل والسلوك للصفحة (هنتعلمها بعد CSS)
DOM	Document Object Model	نموذج كائن المستند — الطريقة اللي بيها المتصفح "يفهم" ويمثّل عناصر صفحتك في الذاكرة
URL	Uniform Resource Locator	محدد الموقع الموحّد — العنوان اللي بتكتبيه في شريط المتصفح أو بتحطيه في href
URI	Uniform Resource Identifier	معرّف الموارد الموحّد — مصطلح أشمل من URL يشمل أي طريقة لتحديد مورد
HTTP	HyperText Transfer Protocol	بروتوكول نقل النص التشعبي — القواعد اللي بيها المتصفح يطلب صفحة من الإنترنت
HTTPS	HTTP Secure	نفس HTTP لكن بشكل مشفّر وآمن — الـ "S" معناها Secure (آمن)
UI	User Interface	واجهة المستخدم — الشكل البصري اللي المستخدم بيتعامل معاه (أزرار، حقول، ألوان)
UX	User Experience	تجربة المستخدم — مدى سهولة وراحة استخدام الموقع ككل، مش بس شكله
API	Application Programming Interface	واجهة برمجة التطبيقات — طريقة تواصل بين برنامجين مختلفين (هتقابليها في JavaScript لاحقًا)
SEO	Search Engine Optimization	تحسين محركات البحث — تجهيز الصفحة عشان تظهر بترتيب أفضل في نتائج جوجل
W3C	World Wide Web Consortium	اتحاد الشبكة العنكبوتية العالمية — الجهة المسؤولة عن وضع معايير HTML وCSS الرسمية
WWW	World Wide Web	الشبكة العنكبوتية العالمية — هي "الويب" اللي اتكلمنا عنه في الدرس الأول
UTF-8	Unicode Transformation Format – 8-bit	ترميز موحّد للحروف يدعم كل اللغات تقريبًا، بما فيها العربية — بنستخدمه في meta charset
PDF	Portable Document Format	صيغة المستند المحمول — ملفات زي اللي بننزّلها بخاصية download
RTL	Right To Left	من اليمين لليسار — اتجاه كتابة اللغة العربية (بنحدده بـ dir="rtl")
LTR	Left To Right	من اليسار لليمين — اتجاه كتابة اللغة الإنجليزية وأغلب اللغات الأجنبية
IDE	Integrated Development Environment	بيئة تطوير متكاملة — برنامج بتكتبي فيه الكود، زي VS Code

🧩 كلمات ومصطلحات هتتكرر معاكِ كتير

↩ الفهرس

قبل ما نبدأ

قاموس المصطلحات والاختصارات (تابع)

المصطلح	بالإنجليزي	معناه بالعربي
Tag	Tag	الوسم — الكلمة المحاطة بـ < > زي <p> أو <h1>
Element	Element	العنصر — وسم الفتح ومحتواه ووسم الغلق مع بعض، كوحدة واحدة
Attribute	Attribute	الخاصية — معلومة إضافية بتتحط جوه وسم الفتح (زي href أو src) — شرح كامل في الدرس 04
Value	Value	القيمة — النص أو الرقم اللي بيتحط بعد علامة = في الخاصية
Opening Tag	Opening Tag	وسم الفتح — زي <p>، بيبدأ به العنصر
Closing Tag	Closing Tag	وسم الغلق — زي </p>، فيه علامة / وبيقفل بيه العنصر
Self-closing Tag	Self-closing / Void Element	وسم فارغ — مالوش وسم غلق منفصل، زي <br> و<img> و<hr>
Nesting	Nesting	التداخل — إن وسم يتحط جوه وسم تاني، زي <li> جوه <ul>
Parent / Child	Parent / Child Element	الأب / الابن — العنصر اللي بيحتوي عنصر تاني جواه يُسمّى أب، والي جواه يُسمّى ابن
Semantic	Semantic HTML	الدلالي — وسوم معناها واضح بيوصف دور المحتوى (زي header وnav)، عكس div العام
Block / Inline	Block-level / Inline Element	عنصر سطري (ياخد سطر كامل) / عنصر مضمّن (جوه السطر) — شرح كامل في الدرس 17
Container	Container / Wrapper	الحاوية — عنصر بيلف حوله عناصر تانية عشان يجمّعها (زي div)
Placeholder	Placeholder	نص باهت بيظهر جوه حقل الإدخال قبل ما تكتبي فيه أي حاجة
Fallback	Fallback	بديل احتياطي — محتوى بيظهر بس لو الحاجة الأساسية فشلت (زي نص جوه audio)
Render	Render	العرض — لما المتصفح "يترجم" الكود ويعرضه بصريًا على الشاشة
Markup	Markup	التوصيف — وصف أجزاء المحتوى بوسوم (زي "ده عنوان"، "دي فقرة")، من غير أي منطق برمجي
Source Code	Source Code	الكود المصدري — الكود المكتوب نفسه، قبل ما المتصفح يحوّله لصفحة ظاهرة
Responsive	Responsive Design	التصميم المتجاوب — الموقع اللي شكله بيتناسب تلقائيًا مع أي حجم شاشة (موبايل أو كمبيوتر)
Deprecated	Deprecated	مهجور/قديم — وسم أو خاصية كانت تُستخدم قديمًا وبقى غير موصى باستخدامها حاليًا

🏷️ معنى أسماء الوسوم نفسها (Tag Names)

كل وسم في HTML مش اسمه عشوائي — غالبًا هو اختصار أو كلمة إنجليزية عادية بتوصف وظيفته. مثلًا img اختصار لكلمة Image ومعناها صورة. الجدول ده بيشرحلك كل وسم هيقابلك في المذكرة بنفس الطريقة.

↩ الفهرس

قبل ما نبدأ

قاموس المصطلحات والاختصارات (تابع)

الوسم	الاسم كاملًا بالإنجليزي	معناه بالعربي
html	HyperText Markup Language	لغة توصيف النص التشعبي — الوسم الجذري اللي بيلف كل الصفحة
head	Head	الرأس — الجزء اللي فيه معلومات عن الصفحة مش بتتعرض للزائر
body	Body	الجسم/المتن — الجزء اللي فيه كل المحتوى الظاهر للزائر
title	Title	العنوان — بيظهر في تبويب المتصفح
meta	Metadata	بيانات وصفية — معلومات عن الصفحة مش محتوى فعلي (زي الترميز أو الوصف)
link	Link	رابط — بيربط الصفحة بملف خارجي زي CSS
script	Script	سكريبت — كود جافا سكريبت
h1–h6	Heading 1 to 6	عنوان بمستوى من 1 (الأهم) لـ 6 (الأقل أهمية)
p	Paragraph	فقرة نصية
div	Division	تقسيم — عنصر حاوٍ عام بلا معنى دلالي، بيُستخدم لتقسيم الصفحة لأجزاء
span	Span	يمتد على/يشمل — عنصر مضمّن عام بيُستخدم للف جزء بسيط جوه سطر نص
a	Anchor	مرساة — الوسم اللي بيعمل رابط (Link)
img	Image	صورة
br	Line Break	كسر سطر — بينزل سطر جديد من غير ما يبدأ فقرة جديدة
hr	Horizontal Rule	خط أفقي فاصل بين أجزاء المحتوى
ul	Unordered List	قائمة غير مرتبة (نقاط)
ol	Ordered List	قائمة مرتبة (أرقام)
li	List Item	عنصر داخل القائمة
dl	Description List	قائمة وصف (مصطلح وتعريفه)
dt	Description Term	المصطلح نفسه جوه قائمة الوصف
dd	Description Definition	تعريف/شرح المصطلح جوه قائمة الوصف
table	Table	جدول
tr	Table Row	صف في الجدول
td	Table Data	خلية بيانات عادية في الجدول
th	Table Header	خلية عنوان/رأس في الجدول
thead	Table Head	قسم رأس الجدول
tbody	Table Body	قسم جسم الجدول (البيانات الأساسية)
tfoot	Table Foot	قسم تذييل الجدول
caption	Caption	عنوان توضيحي للجدول
form	Form	نموذج/استمارة لإدخال بيانات من المستخدم
input	Input	إدخال — حقل يكتب/يدخل فيه المستخدم بيانات
label	Label	تسمية توضيحية لحقل إدخال
button	Button	زر
select	Select	اختيار — قائمة منسدلة يختار منها المستخدم
option	Option	خيار داخل القائمة المنسدلة
textarea	Text Area	منطقة نص — حقل لكتابة نص طويل متعدد الأسطر
fieldset	Field Set	مجموعة حقول مرتبطة ببعض جوه إطار
legend	Legend	عنوان توضيحي لمجموعة الحقول (fieldset)
strong	Strong	قوي — تأكيد قوي على النص (مهم دلاليًا مش بس شكليًا)
em	Emphasis	تشديد/تأكيد على النص
b	Bold	عريض — تنسيق شكلي بس من غير معنى تأكيد
i	Italic	مائل — تنسيق شكلي بس من غير معنى تأكيد
mark	Mark	تمييز/تظليل جزء من النص
small	Small	نص أصغر (زي الملاحظات الجانبية)
sub	Subscript	نص منخفض تحت السطر (زي H₂O)
sup	Superscript	نص مرتفع فوق السطر (زي X²)
header	Header	رأس الصفحة أو القسم
footer	Footer	تذييل الصفحة أو القسم
nav	Navigation	التنقل — قسم روابط التنقل الرئيسية
main	Main	المحتوى الرئيسي الوحيد في الصفحة
section	Section	قسم من المحتوى له موضوع محدد
article	Article	مقال — محتوى مستقل بذاته زي بوست أو خبر
aside	Aside	جانبي — محتوى مكمّل مش أساسي (زي شريط جانبي)
audio	Audio	صوت
video	Video	فيديو
source	Source	مصدر الملف (صوت/فيديو) خصوصًا مع بدائل متعددة
iframe	Inline Frame	إطار مضمّن — بيعرض صفحة تانية جوه صفحتك

↩ الفهرس

قبل ما نبدأ

قاموس المصطلحات والاختصارات (تابع)

🧷 معنى أهم الـ Attributes نفسها

الخاصية	بالإنجليزي	معناها بالعربي
href	Hypertext Reference	مرجع النص التشعبي — وجهة الرابط
src	Source	المصدر — مسار الملف (صورة، صوت، فيديو...)
alt	Alternative Text	نص بديل — بيظهر لو الصورة متحمّلتش، ومهم لقارئات الشاشة
id	Identifier	معرّف — اسم فريد للعنصر (مايتكررش في نفس الصفحة)
class	Class	فئة/تصنيف — اسم ممكن يتكرر على أكتر من عنصر عشان تنسيقهم مع بعض
type	Type	النوع — بيحدد نوع الحقل أو العنصر
target	Target	الهدف — فين هيفتح الرابط (نفس التبويب ولا تبويب جديد)
rel	Relationship	العلاقة بين الصفحة الحالية والمورد اللي بتحطي رابطه
placeholder	Placeholder	نص باهت توضيحي جوه حقل الإدخال
required	Required	مطلوب — الحقل لازم يتملى قبل الإرسال
value	Value	القيمة الافتراضية أو المُدخلة في الحقل
colspan	Column Span	عدد الأعمدة اللي الخلية هتمتد عليها في الجدول
rowspan	Row Span	عدد الصفوف اللي الخلية هتمتد عليها في الجدول
controls	Controls	عناصر تحكم — بتظهر أزرار التشغيل/الإيقاف في الصوت والفيديو
charset	Character Set	مجموعة الترميز اللي بتحدد إزاي الحروف بتتخزن (زي UTF-8)
lang	Language	لغة محتوى الصفحة
dir	Direction	اتجاه الكتابة (rtl أو ltr)

↩ الفهرس

الدرس 0303

الفرق بين head و body

دي من أهم النقط اللي أي مبتدئة لازم تفهمها كويس من الأول، عشان متلخبطيش بين النوعين طول رحلتك مع HTML.

head يوصف الصفحة من الخارج، body يحتوي كل ما تراه العين فعليًا

① وسم title

index.html

<title>مذكرتي الأولى</title>

الناتج

📑 مذكرتي الأولى ✕

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

<title> يحدد النص اللي بيظهر في اسم تبويب المتصفح، وأيضًا العنوان اللي بيظهر لو حفظتِ الصفحة كمفضّلة (Bookmark).
لازم يكون داخل <head> فقط — لو حطيتيه في body مش هيظهر بشكله الصحيح كعنوان تبويب.

② وسم meta charset

index.html

<meta charset="UTF-8">

الناتج

لا يظهر أي شيء بصريًا — لكن بدونه، أي حرف عربي في صفحتك ممكن يظهر كرموز غريبة مثل: Ø¹Ø±Ø¨Ù‰

<meta charset="UTF-8"> يخبر المتصفح بترميز الحروف المستخدم في الصفحة — UTF-8 يدعم كل اللغات تقريبًا، بما فيها العربية.
وسم meta من الوسوم القليلة اللي مالهاش وسم غلق منفصل (وسم فارغ / Self-closing).

⚠️

انسي meta charset مرة واحدة وشوفي بعينك: كل الكلام العربي في صفحتك هيتحول لرموز مبهمة. اجعليه أول سطر تكتبيه جوه head دايمًا كعادة ثابتة.

📌 ملخص الدرس

head معلومات خفية عن الصفحة، body محتوى ظاهر بالكامل
title اسم التبويب في المتصفح
meta charset="UTF-8" ضروري لظهور الحروف العربية صح

⚠️ أخطاء شائعة

وضع نصوص أو صور داخل head بالخطأ فلا تظهر للزائر أبدًا.
نسيان meta charset فتظهر الحروف مشوّهة.
الخلط بين title (اسم التبويب) وh1 (عنوان داخل الصفحة نفسها) — هما مختلفان تمامًا.

✏️ تمرين

عدّلي في ملفك test.html، وأضيفي بداخل head وسم title باسمك، ووسم meta charset UTF-8.

🚀 Challenge

احذفي مؤقتًا سطر meta charset من ملفك واكتبي كلمة عربي فيه، وشغّلي الصفحة — لاحظي الفرق بعينك، ثم رجّعي السطر تاني.

↩ الفهرس

الدرس 0404

الـ Attribute (الخاصية)

قبل ما ندخل في التاجات الأساسية زي العناوين والفقرات، لازم تفهمي حاجة مهمة جدًا: التاج نفسه ممكن يحمل معلومات إضافية بتغيّر شكله أو وظيفته — المعلومات دي اسمها Attribute.

① يعني إيه Attribute؟

الـ Attribute (وترجمتها "الخاصية") هي معلومة إضافية بتضيفيها جوه وسم الفتح نفسه، عشان تُعدّلي أو توضّحي سلوك العنصر أو تدّيله بيانات إضافية.
شكلها العام دايمًا: attribute="value" — يعني اسم الخاصية، وعلامة =، وبعدها القيمة بين علامتي تنصيص.
العنصر ممكن ياخد أكتر من خاصية في نفس الوقت، مفصولة بمسافة بس.

② مكان كتابتها: داخل وسم الفتح فقط

clinic-attribute.html

<a href="#booking" title="اذهبي لقسم حجز المواعيد">احجزي موعدك</a>

الخاصيتان href وtitle اتكتبوا جوه وسم الفتح <a> نفسه، قبل علامة > اللي بتقفله — أبدًا مش بتتكتب في وسم الغلق.
محتوى العنصر ("احجزي موعدك") هو النص اللي بين وسم الفتح ووسم الغلق، وهو حاجة تانية تمامًا عن الخاصية.

③ الفرق بين Tag و Attribute و Content

🏷️ Tagاسم العنصر نفسه بين < >، زي a أو img — بيحدد نوع العنصر.

🧷 Attributeمعلومة إضافية جوه وسم الفتح، زي href أو src — بتحدد تفاصيل وسلوك العنصر.

📝 Contentالنص أو العناصر اللي بين وسم الفتح ووسم الغلق — هو المحتوى الظاهر فعليًا.

④ أمثلة عملية على أهم الـ Attributes

هنستخدم في كل الأمثلة موقع عيادة الدكتورة سلمى حسن اللي هنبنيه سوا خطوة بخطوة طول المذكرة.

الخاصية	وظيفتها	مثال من مشروع العيادة
id	معرّف فريد لعنصر واحد بس في الصفحة	`id="booking"`
class	تصنيف ممكن يتكرر على أكتر من عنصر لتنسيقهم مع بعض	`class="service-card"`
title	نص توضيحي بيظهر عند تمرير الماوس فوق العنصر	`title="عيادة سلمى حسن للأطفال"`
style	تنسيق مباشر سريع للعنصر (هنتوسع فيه مع CSS)	`style="color:red"`
href	وجهة الرابط في وسم a	`href="#services"`
src	مصدر ملف الصورة أو الفيديو	`src="dr-salma.jpg"`
alt	نص بديل للصورة لو متحمّلتش	`alt="صورة الدكتورة سلمى حسن"`
width	عرض الصورة بالبيكسل	`width="140"`
height	ارتفاع الصورة بالبيكسل	`height="140"`
lang	لغة محتوى العنصر	`lang="ar"`
dir	اتجاه الكتابة	`dir="rtl"`

clinic-attribute.html

<img id="doctor-photo" class="round-photo"
     src="dr-salma.jpg" alt="صورة الدكتورة سلمى حسن"
     width="140" height="140"
     title="د. سلمى حسن — استشارية أطفال">

الناتج

صورة د. سلمى
140×140

💡

لاحظي إن وسم img واحد لوحده حمل 7 خصائص مختلفة في نفس الوقت — كل خاصية بتضيف تفصيلة مختلفة (المعرّف، التصنيف، المصدر، النص البديل، العرض، الارتفاع، التلميح). ده بالظبط اللي بيخلي Attribute مهمة جدًا: التاج بيحدد "ده صورة"، لكن الخصائص هي اللي بتحدد "أي صورة، وبأي شكل".

↩ الفهرس

الدرس 04 — تابع04

الـ Attribute (الخاصية) (تابع)

📌 ملخص الدرس

الـ Attribute معلومة إضافية تُكتب داخل وسم الفتح بالشكل attribute="value"
الوسم يحدد نوع العنصر، والخاصية تحدد تفاصيله وسلوكه، والمحتوى هو النص الظاهر بينهما
العنصر الواحد يمكن أن يحمل أكثر من خاصية في نفس الوقت

⚠️ أخطاء شائعة

كتابة الخاصية في وسم الغلق بدل وسم الفتح.
نسيان علامتي التنصيص حول القيمة.
الخلط بين id (فريد لعنصر واحد) وclass (يتكرر على أكثر من عنصر).

✏️ تمرين

اكتبي وسم a يحتوي على href يوديكي لقسم "#services"، وtitle يوضّح إنه رابط الخدمات، وclass اسمها "nav-link".

↩ الفهرس

الدرس 0505

وسوم Meta الأساسية

اتعرّفتي في الدرس اللي فات على meta charset، لكن وسم meta ليه استخدامات تانية مهمة جدًا بتأثر على شكل موقعك على الموبايل، وعلى ظهوره في نتائج جوجل. خلينا نجمعها كلها هنا في درس واحد.

وسم <meta> بيدّي المتصفح ومحركات البحث "معلومات عن الصفحة" مش بتظهر للزائر — كل meta ليها خاصية name أو charset بتحدد نوع المعلومة، وخاصية content بتحدد قيمتها.
كل وسوم meta بتتكتب جوه <head>، وهي وسوم فارغة (Self-closing) زيها زي meta charset.

① meta charset — مراجعة سريعة

index.html

<meta charset="UTF-8">

الناتج

يضمن ظهور كل الحروف (خصوصًا العربية) صح بدل رموز غريبة.

② meta viewport

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

الناتج

بدونه، الموبايل بيعرض الصفحة "مصغّرة" زي شاشة كمبيوتر ويخلي الزائر يزوم بإيده لكل حاجة.

meta viewport هو أهم وسم meta لأي موقع بيتصفحه الناس من الموبايل — وهو معظمهم فعليًا.
width=device-width: يخلي عرض الصفحة يساوي عرض شاشة الجهاز نفسه بالظبط.
initial-scale=1.0: يحدد مستوى التكبير الأولي عند فتح الصفحة أول مرة (بدون تكبير أو تصغير).

③ meta description

index.html

<meta name="description" content="عيادة الدكتورة سلمى حسن - استشارية طب الأطفال وحديثي الولادة بالمنصورة">

الناتج

عيادة د. سلمى حسن | طب الأطفال

www.drsalma-eg.com

عيادة الدكتورة سلمى حسن - استشارية طب الأطفال وحديثي الولادة بالمنصورة

meta description هو النص القصير اللي بيظهر تحت رابط صفحتك في نتائج البحث بجوجل — مش عنوان الصفحة، لكن الوصف اللي تحته.
وصف جيد وجذاب (حوالي 150-160 حرف) بيزوّد نسبة ضغط الزوار على رابطك من نتائج البحث.

④ meta keywords

index.html

<meta name="keywords" content="عيادة أطفال, تطعيمات, المنصورة, د. سلمى حسن">

الناتج

لا يظهر أي شيء بصريًا — ولا تعتمدي عليه كتيرًا في ترتيب جوجل الحديث.

meta keywords كان قديمًا وسيلة لإخبار محركات البحث بالكلمات المرتبطة بصفحتك.
جوجل حاليًا بيتجاهله تمامًا في ترتيب النتائج (بسبب سوء استخدامه قديمًا)، لكن لسه بتلاقيه في مواقع كتير، فمن المفيد تعرفي شكله.

💡

ملخص سريع: charset لعرض الحروف صح، viewport للتجاوب مع الموبايل، description لجذب الزوار من جوجل — دول التلاتة اللي فعلاً يستاهلوا يتحطوا في أي صفحة بتعمليها.

📌 ملخص الدرس

meta viewport ضروري لعرض الصفحة صح على الموبايل
meta description هو النص اللي يظهر تحت رابطك في جوجل
meta keywords قديم ومحركات البحث الحديثة بتتجاهله غالبًا

⚠️ أخطاء شائعة

نسيان meta viewport فتظهر الصفحة مصغّرة وغير قابلة للقراءة على الموبايل.
كتابة description طويل جدًا فيقصّه جوجل في المنتصف.
الاعتماد على meta keywords وحده لتحسين الظهور في البحث.

↩ الفهرس

الدرس 05 — تابع05

وسوم Meta الأساسية (تابع)

✏️ تمرين

أضيفي لملفك test.html وسم meta viewport ووسم meta description بوصف قصير لصفحتك الشخصية.

🚀 Challenge

افتحي صفحتك من موبايلك قبل وبعد إضافة meta viewport ولاحظي الفرق في العرض بعينك.

↩ الفهرس

الدرس 0606

العناوين h1 إلى h6

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

h1 عنوان الصفحة الرئيسي

h2 عنوان قسم رئيسي

h3 عنوان فرعي داخل القسم

h4 تفصيل أصغر

h5 تفصيل أدق

h6 أصغر مستوى

كل مستوى أصغر من اللي قبله — h1 الأهم وأكبر حجمًا، h6 الأقل أهمية وأصغر حجمًا

① وسم h1

headings.html

<h1>عيادة الدكتورة سلمى حسن</h1>

الناتج

عيادة الدكتورة سلمى حسن

② وسم h2

headings.html

<h2>عن الدكتورة</h2>

الناتج

عن الدكتورة

③ وسم h3

headings.html

<h3>مجالات التخصص</h3>

الناتج

مجالات التخصص

④ وسم h4

headings.html

<h4>متابعة نمو الأطفال</h4>

الناتج

متابعة نمو الأطفال

h4 مستوى أصغر من h3 — تستخدميه لما تحتاجي تقسّمي نقطة فرعية موجودة تحت h3 لأجزاء أصغر منها. مثلًا: h3 "مجالات التخصص" ← h4 "متابعة نمو الأطفال".

⑤ وسم h5

headings.html

<h5>جدول التطعيمات</h5>

الناتج

جدول التطعيمات

h5 نادر الاستخدام في الصفحات البسيطة، ويظهر عادة في صفحات طويلة جدًا بها تفاصيل كثيرة، مثل توثيق تقني أو مقال طويل مقسّم لأقسام دقيقة.

⑥ وسم h6

headings.html

<h6>* الأسعار قابلة للتغيير</h6>

الناتج

* الأسعار قابلة للتغيير

h6 أصغر وأقل مستويات العناوين أهمية، ونادرًا ما تحتاجينه في مذكرة أو موقع بسيط.
يوجد 6 مستويات فقط: h1 إلى h6، مرتبة من الأهم (h1) إلى الأقل أهمية (h6).

↩ الفهرس

الدرس 06 — تابع06

العناوين h1 إلى h6 (تابع)

h1 يُستخدم مرة واحدة فقط في الصفحة عادة — للعنوان الرئيسي الذي يلخّص محتوى الصفحة كلها.
h2 إلى h6 تُستخدم لتقسيم المحتوى لأقسام وأقسام فرعية، بالترتيب المنطقي وبدون تخطّي مستوى (مثلًا لا تنتقلي من h2 مباشرة لـ h4).
المتصفح يكبّر حجم خط العناوين تلقائيًا حسب مستواها — لكن هذا شكلي فقط؛ الأهم هو المعنى (الترتيب المنطقي داخل الصفحة)، وليس مجرد الحجم. حجم الخط سنتحكم فيه لاحقًا بـ CSS.

⑦ مثال مركّب يجمع كل المستويات معًا

headings-full.html

<h1>عيادة الدكتورة سلمى حسن</h1>
<h2>عن الدكتورة</h2>
<h3>مجالات التخصص</h3>
<h4>متابعة نمو الأطفال</h4>
<h5>جدول التطعيمات</h5>
<h6>* الأسعار قابلة للتغيير</h6>

الناتج

عيادة الدكتورة سلمى حسن

عن الدكتورة

مجالات التخصص

متابعة نمو الأطفال

جدول التطعيمات

* الأسعار قابلة للتغيير

💡

فكّري في العناوين مثل جدول محتويات كتاب: الفصل (h1)، ثم الموضوع (h2)، ثم النقطة الفرعية (h3)، ثم تفاصيلها (h4)، ثم هوامش صغيرة (h5, h6) — الترتيب لازم يكون منطقيًا حتى لو حجم الخط بصريًا مش أهم حاجة عندك.

📌 ملخص الدرس

h1 إلى h6 عناوين بترتيب أهمية تنازلي، ستة مستويات فقط
h1 يُستخدم مرة واحدة للعنوان الرئيسي في الصفحة
h4 وh5 وh6 لتفاصيل أدق داخل الأقسام الفرعية
الترتيب المنطقي أهم من حجم الخط، والحجم نتحكم فيه لاحقًا بـ CSS

⚠️ أخطاء شائعة

استخدام h1 أكثر من مرة في نفس الصفحة.
اختيار مستوى العنوان حسب الحجم اللي عايزاه بصريًا بدل حسب أهمية المحتوى (الحجم يُتحكم فيه لاحقًا بـ CSS).
تخطي مستوى، مثل الانتقال من h2 إلى h4 مباشرة بدون h3.
استخدام h5 أو h6 في صفحة بسيطة لا تحتاج كل هذا التفصيل، مما يعقّد الهيكل بلا داعٍ.

✏️ تمرين

اكتبي في ملفك عنوانًا رئيسيًا h1 باسم العيادة، وتحته عنوانين فرعيين h2 لقسمين مختلفين (مثلًا "عن الدكتورة" و"الخدمات")، وتحت أحدهما h3 لنقطة فرعية واحدة.

🚀 Challenge

ابني هيكل عناوين كامل لمقال متخيَّل عن "الرياضة": h1 واحد للعنوان، h2 لكل رياضة (كرة قدم، سباحة)، h3 تحت كل رياضة لنقطة فرعية (مثل "القواعد")، وh4 واحد على الأقل لتفصيل أصغر داخل إحدى النقاط الفرعية.

↩ الفهرس

الدرس 0707

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

بعد العناوين، أكتر وسم هتستخدميه في حياتك مع HTML هو وسم الفقرة — أي كلام عادي بتكتبيه بيتحط جواه.

① وسم p — الفقرة

paragraph.html

<p>هذه فقرة نصية عادية تحتوي على أي كلام تريدين كتابته.</p>

الناتج

هذه فقرة نصية عادية تحتوي على أي كلام تريدين كتابته.

<p> اختصار Paragraph، ويُستخدم لأي نص عادي مستقل بذاته.
كل وسم p يظهر في سطر جديد تلقائيًا، ومعه مسافة صغيرة فوقه وتحته — لكن ده تنسيق افتراضي من المتصفح، مش لأن p "بيعمل" حاجة سحرية؛ لاحقًا هنتحكم في المسافات دي بـ CSS.

② وسم br — سطر جديد

br.html

السطر الأول<br>
السطر الثاني

الناتج

السطر الأول
السطر الثاني

<br> اختصار Break — بينقل الكلام اللي بعده لسطر جديد، بدون ما يفتح فقرة جديدة منفصلة (فمفيش مسافة كبيرة زي بين فقرتين).
br وسم فارغ (Self-closing) — يعني معندوش وسم غلق </br>.
استخدميه بس لما تحتاجي فاصل سطري داخل نفس الفكرة، زي عنوان شعر أو عنوان وسطرين تحته.

③ وسم hr — خط فاصل

hr.html

<hr>

الناتج

<hr> اختصار Horizontal Rule — بيرسم خط أفقي بيفصل بين قسمين مختلفين من المحتوى، دلاليًا وبصريًا.
هو كمان وسم فارغ زي br، بدون وسم غلق.

brسطر جديد داخل نفس الفقرة — لا يفصل الأفكار، فقط شكل العرض.

hrخط فاصل حقيقي بين قسمين مختلفين من المحتوى — فصل دلالي وبصري معًا.

📌 ملخص الدرس

p للفقرة النصية العادية
br لسطر جديد داخل نفس الفقرة، بدون وسم غلق
hr لخط أفقي يفصل بين قسمين، بدون وسم غلق

⚠️ أخطاء شائعة

استخدام عدة وسوم br متتالية فقط لعمل مسافة بين الفقرات بدل التحكم بالمسافات عبر CSS لاحقًا.
محاولة إغلاق br أو hr بوسم غلق منفصل مثل </br> وهو غير مطلوب.

✏️ تمرين

اكتبي فقرتين عن نفسك بوسم p منفصل لكل فقرة، وضعي بينهما وسم hr.

🚀 Challenge

اكتبي عنوان قصيدة صغيرة (بيت شعر من سطرين) داخل فقرة واحدة فقط، باستخدام br للفصل بين السطرين بدل فتح فقرة جديدة.

↩ الفهرس

الدرس 0808

تنسيق النصوص

أحيانًا محتاجين نلفت الانتباه لكلمة معينة جوه الكلام — دي وسوم التنسيق النصي، وهنشرح كل وحدة فيهم لوحدها الأول.

① strong — أهمية حقيقية

strong.html

<strong>تحذير: لا تشاركي كلمة السر مع أحد</strong>

الناتج

تحذير: لا تشاركي كلمة السر مع أحد

<strong> يعني إن النص "مهم فعلًا" دلاليًا — قارئ الشاشة للمكفوفين مثلًا بيرفع نبرة صوته عنده. المتصفح بيخليه عريضًا تلقائيًا كنتيجة جانبية، مش كهدف أساسي.

② b — عريض شكلي فقط

b.html

<b>اسم المنتج: قميص قطن</b>

الناتج

اسم المنتج: قميص قطن

<b> يعرض النص عريضًا شكليًا بدون أي معنى دلالي إضافي — استخدميه لما عايزة بس شكل عريض بصري (زي اسم منتج في قائمة) من غير ما تقصدي "ده تحذير مهم".

strongأهمية حقيقية — يفيد قارئ الشاشة ومحركات البحث، وليس مجرد شكل.

bشكل بصري بحت، بدون أي معنى إضافي يفهمه قارئ الشاشة.

③ em — تأكيد بالنبرة

em.html

<em>لازم توصلي بدري</em>

الناتج

لازم توصلي بدري

<em> اختصار Emphasis — يعني "بيتقال بتأكيد في النبرة"، زي لو كنتِ بتتكلمي وشددتِ على كلمة معينة. المتصفح بيعرضه مائلًا تلقائيًا.

④ i — مائل شكلي فقط

i.html

<i>كتاب مية عام من العزلة</i>

الناتج

كتاب مية عام من العزلة

<i> يعرض النص مائلًا شكليًا فقط، بدون تأكيد في المعنى — يُستخدم غالبًا لأسماء كتب أو مصطلحات أجنبية داخل نص عربي.

⑤ mark — تظليل

mark.html

<mark>خصم 50%</mark>

الناتج

خصم 50%

<mark> يظلل النص بخلفية صفراء تلقائيًا، زي القلم الفسفوري — مفيد للفت الانتباه لكلمة أو عرض خاص.

⑥ small — نص أصغر

small.html

<small>جميع الحقوق محفوظة 2026</small>

الناتج

<small> يصغّر حجم النص، ويُستخدم غالبًا للملاحظات الجانبية أو حقوق النشر أسفل الصفحة.

↩ الفهرس

الدرس 08 — تابع08

تنسيق النصوص (تابع)

⑦ sub — نص منخفض

sub.html

H<sub>2</sub>O

الناتج

H₂O

<sub> اختصار Subscript — يكتب النص أسفل مستوى السطر، مفيد للصيغ الكيميائية مثل الماء H₂O.

⑧ sup — نص مرتفع

sup.html

2<sup>2</sup>

الناتج

2²

<sup> اختصار Superscript — يكتب النص أعلى مستوى السطر، مفيد للأُسس الرياضية زي 2².

⑨ مثال مركّب — دمج الوسوم داخل فقرة واحدة

combined.html

<p>
  <strong>تنبيه هام:</strong>
  السعر بعد الخصم <mark>150 جنيه</mark>
  <small>(شامل الضريبة)</small>
</p>

الناتج

تنبيه هام: السعر بعد الخصم 150 جنيه (شامل الضريبة)

بعد ما فهمنا كل وسم لوحده، بقى نقدر ندمجهم جوه بعض داخل فقرة واحدة زي المثال ده — وده اللي هيحصل فعليًا في أي صفحة حقيقية.

💡

القاعدة العامة اللي تفتكريها دايمًا: لو النص له معنى حقيقي (مهم، مؤكَّد) استخدمي strong أو em، ولو التنسيق شكلي بس بلا معنى إضافي استخدمي b أو i.

📌 ملخص الدرس

strong/em لهما معنى دلالي حقيقي، b/i شكليان فقط
mark للتظليل، small للنص الأصغر
sub وsup للنص المنخفض والمرتفع

⚠️ أخطاء شائعة

استخدام b بدل strong لنص فيه تحذير حقيقي مهم، رغم أن b شكلي فقط.
الإفراط في استخدام mark حتى يفقد قيمته في لفت الانتباه.
نسيان إغلاق أي من هذه الوسوم فيتسبب في امتداد التنسيق لباقي الصفحة بالخطأ.

✏️ تمرين

اكتبي فقرة عن منتج وهمي فيها اسم المنتج بـ strong، وسعر بعد خصم بـ mark، وملاحظة صغيرة بـ small.

🚀 Challenge

اكتبي معادلة كيميائية بسيطة (مثل ثاني أكسيد الكربون CO₂) باستخدام sub، ومعادلة رياضية فيها أس باستخدام sup، في نفس الفقرة.

↩ الفهرس

الدرس 0909

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

الروابط والصور هما اللي بيخلوا صفحتك تتواصل مع صفحات تانية، وتعرض محتوى بصري.

الروابط Hyperlinks

links.html

<a href="https://drsalma-eg.com">زوري موقعنا</a>
<a href="about.html">صفحة عن العيادة</a>
<a href="https://www.google.com/maps" target="_blank">موقعنا على الخريطة</a>
<a href="https://www.facebook.com" target="_blank">تابعينا على فيسبوك</a>
<a href="mailto:clinic@drsalma-eg.com">راسلينا</a>
<a href="tel:0502234567">اتصلي بالعيادة</a>
<a href="files/vaccination-schedule.pdf" download>حمّلي جدول التطعيمات</a>

الناتج

<a> وسم الرابط، وخاصية href هي الوجهة اللي هيروح لها الزائر.
الرابط ممكن يكون خارجي (رابط كامل مثل https://www.google.com) أو داخلي (اسم ملف بجانب صفحتك مثل about.html).
target="_blank" بتفتح الرابط في تبويب جديد بدل ما تسكّر صفحتك الحالية — زي رابط الخريطة وفيسبوك في المثال، مناسبة للروابط الخارجية اللي مش عايزة الزائرة تسيب موقعك بسببها.
mailto: بتفتح تطبيق البريد مباشرة برسالة جاهزة للإرسال على الإيميل المحدد.
tel: بتفتح تطبيق الاتصال مباشرة بالرقم المكتوب بعدها — مفيدة جدًا لما الزائرة تفتح الموقع من موبايلها وتحب تتصل بالعيادة بضغطة واحدة، بدون ما تنسخ الرقم يدويًا.
خاصية download بتخلي الرابط، بدل ما يفتح الملف في تبويب جديد (زي PDF مثلًا)، ينزّله مباشرة على جهاز الزائرة — مثالية لملف جدول التطعيمات أو تعليمات ما قبل الكشف.

الصور

images.html

<img src="https://picsum.photos/id/1027/400/300"
     alt="غرفة استقبال عيادة الدكتورة سلمى حسن"
     width="300" height="225">

الناتج

<img> وسم بدون إغلاق، وليه أربع خصائص أساسية لازم تعرفيها:
src (Source): رابط أو مسار الصورة الحقيقية اللي هتتحمّل — ممكن يكون رابط خارجي (زي المثال) أو اسم ملف جوه مجلد مشروعك مثل images/clinic-reception.jpg.
alt (Alternative Text): نص بديل يوصف الصورة — بيظهر مكانها لو الصورة ماتحمّلتش لأي سبب (نت بطيء، رابط خطأ)، وبيساعد قارئات الشاشة للمكفوفين ومحركات البحث تفهم محتواها. ضروري جدًا في كل صورة تقريبًا.
width وheight: بيحددوا أبعاد الصورة بالبكسل. تحديدهم مسبقًا (حتى بنفس نسبة الصورة الأصلية) بيمنع "قفزة" في تصميم الصفحة أثناء تحميل الصورة، لأن المتصفح بيحجز المساحة لها من الأول.

صورة داخل رابط (Clickable Image)

image-link.html

<a href="https://drsalma-eg.com/about" target="_blank">
  <img src="https://picsum.photos/id/1027/400/300"
       alt="اضغطي للتعرف على الدكتورة سلمى حسن أكتر"
       width="220" height="165">
</a>

↩ الفهرس

الدرس 09 — تابع09

الروابط والصور (تابع)

الناتج

لما تحطي وسم <img> جوه وسم <a>، الصورة كلها بتتحول لرابط قابل للضغط — دوسي عليها هتوديكي لصفحة "عن الدكتورة" بدل ما تحتاجي زر أو نص منفصل.
ده الأسلوب المستخدم فعليًا في كروت الأطباء بمواقع العيادات: بتدوسي على صورة الدكتورة نفسها بدل ما تدوري على رابط نصي "اعرفي أكتر".
خليكي حريصة إن الـ alt هنا يوصف وجهة الرابط مش بس الصورة، عشان تبقى مفيدة لقارئ الشاشة (زي "اضغطي للتعرف على الدكتورة..." بدل "صورة دكتورة").

📌 ملخص الدرس

a وhref للروابط، target="_blank" لفتح تبويب جديد، mailto وtel لفتح البريد والاتصال مباشرة، download لتحميل الملفات
img وsrc وalt وwidth وheight للصور — alt ضروري دايمًا
وضع img جوه a بيحوّل الصورة كلها لرابط قابل للضغط

⚠️ أخطاء شائعة

نسيان alt في الصور، أو كتابة alt غير وصفي زي "image1".
نسيان https:// في الروابط الخارجية.
نسيان إغلاق وسم <a> بعد الصورة فيتحول باقي محتوى الصفحة لرابط بالغلط.

✏️ تمرين

أضيفي صورة لغرفة الانتظار في عيادة د. سلمى بعرض 250 وارتفاع 180، مع alt يوصفها بدقة.
حوّلي صورتك لرابط يفتح صفحة "about.html" في نفس التبويب.

↩ الفهرس

الدرس 1010

القوائم

أي مجموعة عناصر مترابطة (مكونات، خطوات، خيارات) الأنسب تتعرض في شكل قائمة.

unordered.html

<ul>
  <li>شاي</li>
  <li>قهوة</li>
  <li>عصير</li>
</ul>

ordered.html

<ol>
  <li>افتحي الملف</li>
  <li>اكتبي الكود</li>
  <li>احفظي</li>
</ol>

الناتج

المشروبات المتاحة

شاي
قهوة
عصير

خطوات الطلب

افتحي الملف
اكتبي الكود
احفظي

<ul> قائمة غير مرتبة (نقاط)، تستخدم لعناصر مالهاش ترتيب معين (زي المكونات).
<ol> قائمة مرتبة (أرقام)، تستخدم لعناصر بترتيب مهم (زي خطوات تنفيذ).
<li> كل عنصر داخل القائمة، سواء ul أو ol.
<dl> قائمة تعريفية (مصطلح ووصفه) باستخدام <dt> للمصطلح و<dd> للوصف.

📌 ملخص الدرس

ul لقائمة غير مرتبة، ol لقائمة مرتبة بأرقام
li لكل عنصر داخل القائمة

↩ الفهرس

الدرس 1111

الجداول

الجداول أفضل طريقة لعرض بيانات منظمة في صفوف وأعمدة — زي عرض منتجات متجر ميجا تك للإلكترونيات بأسعارها وضماناتها. هنبني مع بعض جدول منتجات هيتكرر استخدامه في باقي الدروس.

<table> الوسم الأب للجدول كله.
<caption> عنوان وصفي للجدول كله، بيتحط أول حاجة جوه <table> ويظهر فوق الجدول.
<tr> صف (Table Row)، و<td> خلية بيانات عادية (Table Data).
<th> خلية عنوان (Table Header) — بتظهر عريضة وفي النص تلقائيًا.
<thead> يحدد رأس الجدول (صف العناوين)، و<tbody> يحدد جسم الجدول (البيانات)، و<tfoot> يحدد تذييل الجدول (زي صف الإجمالي) — ده بيسهّل التنسيق بـ CSS لاحقًا ويوضّح بنية الجدول دلاليًا.

products-table.html

<table border="1">
  <caption>قائمة أسعار متجر ميجا تك</caption>
  <thead>
    <tr>
      <th>المنتج</th>
      <th>السعر</th>
      <th>الضمان</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>لابتوب برو X1</td>
      <td>18500 جنيه</td>
      <td>سنتان</td>
    </tr>
    <tr>
      <td>موبايل ذكي Z20</td>
      <td>12000 جنيه</td>
      <td>سنة واحدة</td>
    </tr>
    <tr>
      <td>سماعة لاسلكية AirSound</td>
      <td>1200 جنيه</td>
      <td>6 شهور</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>الإجمالي</td>
      <td>31700 جنيه</td>
      <td>—</td>
    </tr>
  </tfoot>
</table>

الناتج

قائمة أسعار متجر ميجا تك
المنتج	السعر	الضمان
لابتوب برو X1	18500 جنيه	سنتان
موبايل ذكي Z20	12000 جنيه	سنة واحدة
سماعة لاسلكية AirSound	1200 جنيه	6 شهور
الإجمالي	31700 جنيه	—

💡

خاصية border="1" بسيطة وبتساعدك تشوفي شكل الجدول بوضوح وانتِ لسه بتتعلمي، لكنها طريقة قديمة — في مشاريعك الحقيقية هتنسّقي حدود الجدول بـ CSS بدل ما تكتبيها كخاصية HTML.

دمج الخلايا: colspan و rowspan

الفرق ببساطة: colspan معناها "col" = عمود، يعني الخلية بتاخد عرض أكتر وتمتد على أعمدة جنبها في نفس الصف (امتداد أفقي ➡️). rowspan معناها "row" = صف، يعني الخلية بتاخد طول أكتر وتمتد على صفوف تحتها في نفس العمود (امتداد رأسي ⬇️).
لو لسه بتلخبطي بينهم، افتكري: colspan يوسّع الخلية يمين وشمال (زي ما لو ضغطت عليها من جنبيها)، وrowspan يطوّل الخلية فوق وتحت (زي ما لو شديت فيها من فوق ومن تحت).

↩ الفهرس

الدرس 11 — تابع11

الجداول (تابع)

توضيح بصري مبسّط لفكرة الدمج

rowspan — دمج رأسي (صفين لخلية واحدة)

colspan — دمج أفقي (عمودين لخلية واحدة)

مثال 1: rowspan لوحده — دمج فئة المنتج عبر صفين

قبل الدمج: لو عندك منتجين من نفس الفئة "إلكترونيات"، هتكرري كلمة "إلكترونيات" في كل صف لوحده.
بعد الدمج: بـ rowspan="2" على خلية الفئة في الصف الأول، بتلغي التكرار وتخلي خلية واحدة تغطي الصفين، وبالتالي بتشيلي خلية الفئة تمامًا من الصف التاني.

rowspan-before.html

<table border="1">
  <tr>
    <td>إلكترونيات</td>
    <td>لابتوب برو X1</td>
  </tr>
  <tr>
    <td>إلكترونيات</td> <!-- تكرار -->
    <td>موبايل ذكي Z20</td>
  </tr>
</table>

الناتج — قبل الدمج

إلكترونيات	لابتوب برو X1
إلكترونيات	موبايل ذكي Z20

rowspan-after.html

<table border="1">
  <tr>
    <td rowspan="2">إلكترونيات</td>
    <td>لابتوب برو X1</td>
  </tr>
  <tr>
    <!-- من غير خلية "إلكترونيات" هنا، لأن اللي فوق بقت شغلاها -->
    <td>موبايل ذكي Z20</td>
  </tr>
</table>

الناتج — بعد الدمج بـ rowspan

إلكترونيات	لابتوب برو X1
	موبايل ذكي Z20

💡

قاعدة مهمة: أول ما بتستخدمي rowspan في خلية، لازم تحذفي الخلية المقابلة في الصف اللي بعده (اللي كانت هتتكرر)، وإلا الجدول هيتكسر وهيظهر عمود زيادة مش في مكانه.

مثال 2: colspan لوحده — عنوان يغطي عمودين

قبل الدمج: صف عنوان عادي فيه خليتين منفصلتين لعمودي "الاسم" و"السعر" تحت عنوان علوي واحد اسمه "تفاصيل المنتج" مكرر أو ناقص.
بعد الدمج: بـ colspan="2"، خلية واحدة بعنوان "تفاصيل المنتج" بتمتد فوق عمودي الاسم والسعر مع بعض، فيبقى شكل الجدول منظم برأس رئيسي ورأس فرعي.

↩ الفهرس

الدرس 11 — تابع11

الجداول (تابع)

colspan-before.html

<table border="1">
  <tr>
    <th>تفاصيل المنتج</th>
    <th>(فاضية)</th> <!-- خلية زيادة عشان عدد الأعمدة يتساوى -->
  </tr>
  <tr>
    <th>الاسم</th>
    <th>السعر</th>
  </tr>
</table>

الناتج — قبل الدمج

تفاصيل المنتج	(فاضية)
الاسم	السعر

colspan-after.html

<table border="1">
  <tr>
    <th colspan="2">تفاصيل المنتج</th>
  </tr>
  <tr>
    <th>الاسم</th>
    <th>السعر</th>
  </tr>
</table>

الناتج — بعد الدمج بـ colspan

تفاصيل المنتج
الاسم	السعر

💡

هنا معكوسة: أول ما بتستخدمي colspan="2" في خلية، بتشيلي الخلية الزيادة في نفس الصف، مش في الصف اللي بعده — لأن الدمج ده أفقي جوه نفس الصف.

⚠️ أخطاء شائعة في colspan/rowspan

الخلط بينهم: colspan للأعمدة (أفقي)، rowspan للصفوف (رأسي).
نسيان حذف الخلية اللي كانت هتتكرر بعد الدمج، فيزيد عدد الخلايا في الصف عن المطلوب ويتكسر شكل الجدول.
استخدام رقم دمج أكبر من عدد الصفوف/الأعمدة الفعلي الموجود، فيسبب فراغات غريبة.

تجميع حقول متعلقة: fieldset و legend

<fieldset> وسم بيجمع مجموعة عناصر مرتبطة ببعض جوه إطار واحد (مش خاص بالجداول بس، بل بيتحط غالبًا في الفورمات لتنظيم حقول متشابهة).
<legend> عنوان صغير بيظهر فوق حافة الإطار بيوصف محتوى الـ fieldset.
مفيدة لما يكون عندك فورم طويل (زي فورم طلب شراء) وعايزة تقسميه لمجموعات واضحة بصريًا ودلاليًا، مثل "بيانات التواصل" و"عنوان الشحن".

contact-fieldset.html

<fieldset>
  <legend>بيانات التواصل</legend>
  <label>الاسم</label>
  <input type="text" name="fullname">
  <label>رقم الموبايل</label>
  <input type="tel" name="phone">
</fieldset>

↩ الفهرس

الدرس 11 — تابع11

الجداول (تابع)

الناتج

بيانات التواصل الاسم رقم الموبايل

⚠️ أخطاء شائعة

نسيان إغلاق وسم </tr> أو </td> بيكسر شكل الجدول بالكامل.
استخدام <td> بدل <th> لصف العناوين، فيفقد الجدول تمييز رأس الجدول بصريًا ودلاليًا.
وضع نص مباشر جوه <table> أو <tr> من غير المرور بـ <td> أو <th>.
نسيان إن عدد الخلايا في الصف بعد استخدام colspan/rowspan لازم يتوافق مع باقي الصفوف، وإلا يتكسر شكل الجدول.
استخدام fieldset من غير legend، فيفقد المستخدم توضيح الغرض من المجموعة.

📌 ملخص الدرس

table > caption / thead / tbody / tfoot > tr > th/td هو الترتيب الصحيح دايمًا
th لخلايا العنوان، td لخلايا البيانات
colspan لدمج أعمدة، rowspan لدمج صفوف
fieldset وlegend لتجميع حقول فورم مرتبطة ببعض

✏️ تمرين

أضيفي صفًا رابعًا لجدول منتجات ميجا تك يعرض منتج جديد (مثلًا: ساعة ذكية فيت) بسعره وضمانه، باستخدام tr وtd فقط.
طبّقي rowspan على منتج ثالث من فئة "إلكترونيات" في مثال rowspan-after، وشوفي هل هتحتاجي تغيّري رقم rowspan لـ 3.

🚀 Challenge

أضيفي عمودًا رابعًا للجدول باسم "الكمية المتوفرة"، واملئي القيم لكل منتج، مع تعديل صف العناوين thead ليشمل العمود الجديد.
لفّي فورم "طلب شراء" (من الدرس الجاي) بـ fieldset باسم "بيانات الشحن".

↩ الفهرس

الدرس 1212

الفورم — الجزء الأول

النماذج هي الطريقة اللي بيها زبون ميجا تك يبعت بياناته — أول جزء هنركّز فيه على عناصر إنشاء حساب جديد في المتجر.

<form> الصندوق اللي بيحتوي كل حقول الإدخال ويغلّفهم مع بعض.
<label> نص توضيحي بيقول للزبون إيه المطلوب في الحقل اللي جنبه.
<input type="text"> حقل نص عادي، type="email" يتأكد من وجود @، وtype="password" بيخفي الحروف بنقاط.
placeholder نص باهت داخل الحقل قبل الكتابة، وrequired يمنع الإرسال لو الحقل فاضي.
name اسم داخلي للحقل، ضروري عشان البيانات توصل صح عند الإرسال.
<button type="submit"> زر الإرسال.

signup.html

<form>
  <label>اسم المستخدم</label>
  <input type="text" name="username" placeholder="اكتبي اسمك" required>

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

  <label>كلمة السر</label>
  <input type="password" name="pass">

  <button type="submit">إنشاء الحساب</button>
</form>

الناتج

💡

لاحظي إن كل عناصر الفورم ظهرت متلاصقة في سطر واحد بيلف — ده لأن label وinput وbutton عناصر inline افتراضيًا. هننظمها كل واحد في سطر لوحده لاحقًا بـ CSS.

⚠️ أخطاء شائعة

نسيان name في الـ input بيمنع وصول البيانات صح عند الإرسال.
الاعتماد على placeholder بدل label — الزبون ممكن ينسى المطلوب لما يبدأ الكتابة والنص يختفي.
استخدام type="text" لحقل الإيميل بدل type="email"، فيفقد الفورم التحقق التلقائي من صيغة البريد.

أنواع input الإضافية

فورم كامل لمتجر إلكتروني بيحتاج أنواع إدخال أكتر بكتير من text وemail وpassword — دي أهم الأنواع الباقية اللي هتقابليها وهي مطبّقة على فورم "إكمال بيانات الطلب" في ميجا تك.

↩ الفهرس

الدرس 12 — تابع12

الفورم — الجزء الأول (تابع)

order-details.html

<label>رقم الموبايل</label>
<input type="tel" name="phone" placeholder="01xxxxxxxxx">

<label>الكمية المطلوبة</label>
<input type="number" name="qty" min="1" max="10" value="1">

<label>تاريخ التسليم المفضّل</label>
<input type="date" name="delivery_date">

<label>الوقت المفضّل للتسليم</label>
<input type="time" name="delivery_time">

<label>الميزانية القصوى (جنيه)</label>
<input type="range" name="budget" min="0" max="20000" step="500">

<label>اللون المفضّل للمنتج</label>
<input type="color" name="favcolor" value="#C1572F">

<label>موقعك الشخصي (اختياري)</label>
<input type="url" name="website" placeholder="https://...">

<label>ابحثي عن منتج</label>
<input type="search" name="q" placeholder="لابتوب، موبايل...">

<label>ارفعي صورة فاتورة التحويل</label>
<input type="file" name="receipt" accept="image/*">

<input type="hidden" name="order_id" value="MT-2026-0451">

الناتج

رقم الموبايل

الكمية المطلوبة

تاريخ التسليم المفضّل

الوقت المفضّل للتسليم

الميزانية القصوى (جنيه)

اللون المفضّل للمنتج

موقعك الشخصي (اختياري)

ابحثي عن منتج

ارفعي صورة فاتورة التحويل

type="tel": حقل رقم تليفون — على الموبايل بيظهر لوحة مفاتيح أرقام مخصصة، أسهل من الكتابة العادية.
type="number": يقبل أرقام بس، مع إمكانية تحديد min وmax للحد الأدنى والأقصى المسموح.
type="date" وtype="time": بيفتحوا منتقي تاريخ/وقت جاهز من المتصفح، بدل ما الزبون يكتب التاريخ يدويًا باحتمال أخطاء.
type="range": شريط تمرير لاختيار قيمة رقمية بصريًا جوه مدى معيّن (زي تحديد ميزانية تقريبية)، بيتحدد بـ min وmax وstep.
type="color": بيفتح منتقي ألوان جاهز من نظام التشغيل ويرجّع قيمة اللون بصيغة hex.
type="url": زي email بالظبط لكن بيتحقق من صيغة رابط ويب صحيحة (يبدأ بـ http/https).
type="search": حقل بحث — شكله زي text لكنه دلاليًا بيوصف إن الغرض منه البحث، وبعض المتصفحات بتضيف له زر مسح سريع (×).
type="file": بيسمح للزبون يرفع ملف من جهازه، وخاصية accept="image/*" بتحدد إنه يقبل صور بس.
type="hidden": حقل مخفي تمامًا عن الزبون، مستخدم لإرسال بيانات إضافية مع الفورم (زي رقم الطلب) من غير ما تظهر في الواجهة.

📌 ملخص الدرس

form يغلّف كل حقول التسجيل
input type="text/email/password" لأنواع الإدخال الأساسية
required وplaceholder وname خصائص أساسية
tel/number/date/time/range/color/url/search/file/hidden لأنواع إدخال متخصصة أكتر

✏️ تمرين

أضيفي فورم "تسجيل دخول" لموقع ميجا تك فيه حقل بريد إلكتروني وحقل كلمة سر وزر submit باسم "دخول".
أضيفي حقل type="number" لعمر الزبون بحد أدنى 18 وحد أقصى 99.

↩ الفهرس

الدرس 12 — تابع12

الفورم — الجزء الأول (تابع)

🚀 Challenge

خلّي حقل البريد الإلكتروني required، وجرّبي تضغطي "إنشاء الحساب" من غير ما تكتبي فيه حاجة — لاحظي إزاي المتصفح بيمنعك ويوضّح لك المشكلة من غير أي كود إضافي.
ابني فورم "طلب استرجاع منتج" فيه حقل date لتاريخ الشراء، وfile لرفع صورة الفاتورة، وhidden لرقم الطلب.

↩ الفهرس

الدرس 1313

الفورم — الجزء الثاني

دلوقتي هنكمّل باقي عناصر الفورم اللي هتحتاجيها لإتمام طلب شراء حقيقي في متجر ميجا تك.

<textarea> لإدخال نص طويل (زي ملاحظات على الطلب)، وخاصية rows تحدد عدد الأسطر الظاهرة.
<select> مع <option> بتعمل قائمة منسدلة يختار منها الزبون قيمة واحدة (زي مدينة التوصيل).
type="radio" اختيار واحد فقط من مجموعة، بشرط كل الأزرار تشترك في نفس قيمة name (زي طريقة الدفع).
type="checkbox" اختيار متعدد أو تأكيد موافقة واحدة (زي الموافقة على شروط الشراء).

checkout.html

<textarea rows="4" placeholder="أي ملاحظات على طلبك؟"></textarea>

<select>
  <option>القاهرة</option>
  <option>الإسكندرية</option>
  <option>المنصورة</option>
</select>

<input type="radio" name="payment"> الدفع عند الاستلام
<input type="radio" name="payment"> بطاقة ائتمان

<input type="checkbox"> أوافق على شروط الشراء والاسترجاع

الناتج

الدفع عند الاستلام بطاقة ائتمان

أوافق على شروط الشراء والاسترجاع

💡

مش لازم تحفظي كل أنواع input الموجودة؛ اللي اتعلمتيه في الدرسين دول كفاية لبناء فورمات حقيقية ومفيدة.

⚠️ أخطاء شائعة

نسيان مشاركة نفس قيمة name بين أزرار radio يخلّي الزبون يقدر يختار أكتر من طريقة دفع في نفس الوقت غلط.
نسيان إغلاق وسم <textarea></textarea> بيخلي باقي محتوى الصفحة يتحول لنص جوه الصندوق.
استخدام checkbox للاختيار من بين خيارات متبادلة (زي طريقة الدفع) بدل radio.

📌 ملخص الدرس

textarea لنص طويل، select/option لقائمة منسدلة
radio لاختيار واحد من مجموعة، checkbox لاختيار متعدد أو موافقة

✏️ تمرين

أضيفي select لاختيار طريقة الشحن (عادي / سريع) في فورم الطلب.

🚀 Challenge

ابني فورم "طلب شراء" كامل: حقل اسم، إيميل، select للمدينة، radio لطريقة الدفع، وcheckbox للموافقة على الشروط، وزر إرسال الطلب.

🛠️ مشروع مصغّر: فورم طلب شراء

اسم وإيميل (required)
select لمدينة التوصيل
radio لطريقة الدفع
textarea لملاحظات الطلب
زر إرسال الطلب submit

formselectradiotextareabutton

↩ الفهرس

الدرس 1414

الصوت والفيديو و iframe

مش كل محتوى ميجا تك نص وصور — أحيانًا محتاجين نعرض فيديو استعراض منتج، إعلان صوتي، أو حتى خريطة موقع الفرع.

<audio> لتشغيل ملف صوتي، وخاصية controls بتظهر أزرار التشغيل والإيقاف.
<video> لتشغيل فيديو، بنفس فكرة audio بالظبط، مع إمكانية تحديد width وheight.
بدل ما نحط src على وسم audio/video مباشرة، الأفضل إننا نستخدم عنصر <source> جواه — كده نقدر نضيف أكتر من امتداد لنفس الملف، والمتصفح بيختار أول امتداد يقدر يشغّله وبيتجاهل الباقي.
ليه أكتر من امتداد؟ مش كل المتصفحات بتدعم كل صيغ الصوت والفيديو بنفس الشكل، فبإضافة أكتر من source (زي mp3 وwav وogg للصوت، وmp4 وwebm وogg للفيديو) بنضمن إن الملف هيشتغل عند أكبر عدد ممكن من الزوار.
<iframe> بتعرض صفحة ويب كاملة تانية جوه صفحتك — بتستخدم غالبًا لعرض خرائط جوجل أو فيديوهات يوتيوب.

الصوت — audio مع أكتر من source

ad-audio.html

<audio controls>
  <source src="megatech-ad.mp3" type="audio/mpeg">
  <source src="megatech-ad.ogg" type="audio/ogg">
  <source src="megatech-ad.wav" type="audio/wav">
  متصفحك لا يدعم تشغيل الصوت.
</audio>

الناتج

المتصفح بيقرأ عناصر source بالترتيب من فوق لتحت، ويشغّل أول واحد يقدر يفهم امتداده — لو mp3 مدعوم يشتغل ويتجاهل الباقي، ولو مش مدعوم يجرّب ogg، وهكذا.
خاصية type بتقول للمتصفح نوع الملف قبل ما يحاول يحمّله، فيوفر وقت لو الصيغة مش مدعومة عنده أصلًا.
النص "متصفحك لا يدعم تشغيل الصوت" بيظهر بس لو ولا صيغة من الصيغ اشتغلت — بديل احتياطي (Fallback).

الفيديو — video مع أكتر من source

unboxing-video.html

<video controls width="400">
  <source src="unboxing-x1.mp4" type="video/mp4">
  <source src="unboxing-x1.webm" type="video/webm">
  <source src="unboxing-x1.ogv" type="video/ogg">
  متصفحك لا يدعم تشغيل الفيديو.
</video>

الناتج

نفس فكرة الصوت بالظبط: mp4 هو الأكثر انتشارًا ودعمًا، webm صيغة مفتوحة خفيفة بتفضّلها متصفحات زي كروم وفايرفوكس، وogg (بامتداد ملف .ogv) بديل احتياطي أقدم.
width (وممكن height كمان) بتحدد أبعاد مشغّل الفيديو على الصفحة.

iframe — عرض محتوى خارجي

↩ الفهرس

الدرس 14 — تابع14

الصوت والفيديو و iframe (تابع)

embeds.html

<iframe
  src="https://www.google.com/maps?q=Cairo,Egypt&output=embed"
  width="400" height="300">
</iframe>

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="400" height="225"
  allowfullscreen>
</iframe>

الناتج

الرابط جوه src لازم يكون رابط embed مخصص للعرض جوه iframe، مش رابط الصفحة العادي — جوجل ماب بيحتاج output=embed، ويوتيوب بيحتاج مسار /embed/ بدل /watch?v=.
allowfullscreen بتسمح للفيديو يتشغّل بملء الشاشة، مفيدة لإطارات يوتيوب وفيميو.

💡

الصوت والفيديو في المثال مش هيشتغلوا فعليًا هنا لأن الملفات (megatech-ad.mp3/ogg/wav وunboxing-x1.mp4/webm/ogv) مش موجودة حقيقةً — في مشروعك الحقيقي هتستبدليها بملفاتك الفعلية بنفس الأسماء والامتدادات.

⚠️

لازم يكون عندك تصريح (حقوق استخدام) لأي ملف صوت أو فيديو بتستخدميه، خصوصًا لو الموقع تجاري زي ميجا تك.

⚠️ أخطاء شائعة

نسيان خاصية controls بيخلي الزبون مايقدرش يتحكم في تشغيل الصوت أو الفيديو خالص.
الاعتماد على امتداد واحد بس (زي mp4 بس) بدل توفير أكتر من source، فممكن الملف مايشتغلش عند بعض الزوار.
استخدام رابط عادي بدل رابط embed المخصص، فالمتصفح يرفض عرض المحتوى جوه iframe لأسباب أمان.
نسيان width وheight لعنصر iframe فيظهر بحجم صغير جدًا افتراضيًا.

📌 ملخص الدرس

audio وvideo مع controls لتشغيل الوسائط
استخدام <source> بأكتر من امتداد (mp3/ogg/wav للصوت، mp4/webm/ogv للفيديو) يضمن التوافق مع كل المتصفحات
iframe لعرض صفحة أو خدمة خارجية جوه صفحتك، ولازم رابط embed مخصص لو الخدمة بتدعمه

✏️ تمرين

أضيفي عنصر source ثالث بصيغة ogg لعنصر audio جديد باسم ملف "welcome-message".

🚀 Challenge

جرّبي تستبدلي src بتاع الـ iframe برابط خرائط جوجل العادي (من غير output=embed) وشوفي بعينك الفرق في النتيجة — ليه في رأيك المتصفح رفض يعرضه؟

↩ الفهرس

الدرس 1515

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

بدل ما نستخدم div لكل حاجة، فيه وسوم معناها واضح بتوصف دور كل جزء من هيكل صفحة ميجا تك.

<header> رأس الصفحة، غالبًا فيه الشعار وقائمة التنقل.
<nav> قائمة روابط التنقل الرئيسية في الموقع.
<main> المحتوى الأساسي للصفحة — يُستخدم مرة واحدة فقط.
<section> قسم بموضوع واحد مستقل، و<article> محتوى مستقل تمامًا (مقال أو منشور).
<aside> محتوى جانبي مكمّل (إعلانات، روابط ذات صلة)، و<footer> تذييل الصفحة.

megatech-layout.html

<header>
  <h1>ميجا تك</h1>
  <nav>
    <a href="#">الرئيسية</a>
    <a href="#">تواصل</a>
  </nav>
</header>

<main>
  <section>
    <h2>عن المتجر</h2>
    <p>ميجا تك متخصص في بيع أحدث الأجهزة الإلكترونية بضمان رسمي.</p>
  </section>
  <article>
    <h3>مقال: كيف تختارين اللابتوب المناسب؟</h3>
    <p>قبل الشراء راجعي المعالج والذاكرة وحجم الشاشة.</p>
  </article>
  <aside>عرض اليوم: خصم 10% على السماعات اللاسلكية</aside>
</main>

<footer>جميع الحقوق محفوظة لمتجر ميجا تك</footer>

الناتج

ميجا تك

عن المتجر

ميجا تك متخصص في بيع أحدث الأجهزة الإلكترونية بضمان رسمي.

مقال: كيف تختارين اللابتوب المناسب؟

قبل الشراء راجعي المعالج والذاكرة وحجم الشاشة.

💡

استخدام الوسوم الدلالية بيساعد محركات البحث وقارئات الشاشة تفهم هيكل موقع ميجا تك بدقة أكتر من استخدام div في كل حتة.

⚠️ أخطاء شائعة

استخدام أكتر من وسم main واحد في نفس الصفحة، وهو غلط لأنه المفروض يكون فريد.
استخدام section لأي تجميع عشوائي حتى لو مالوش عنوان مستقل واضح.
الخلط بين article (محتوى مستقل بذاته زي مقال) وsection (جزء من محتوى أكبر).

📌 ملخص الدرس

header/nav/main/footer لأقسام الصفحة الرئيسية
section لقسم مستقل، article لمحتوى قائم بذاته، aside لمحتوى جانبي مكمّل

✏️ تمرين

أضيفي section جديد باسم "آراء العملاء" فيه رأي واحد على الأقل لعميل جرّب منتج من ميجا تك.

🚀 Challenge

حوّلي عنصر aside في المثال ليعرض عرضين مختلفين بدل عرض واحد، كل عرض في article منفصل جوه aside.

↩ الفهرس

الدرس 1616

تنظيم الصفحة

إزاي نجمّع عناصر بطاقة منتج ميجا تك مع بعض، وندي الحاوية اسم نقدر نرجعله لاحقًا بـ CSS؟

<div> حاوية عامة (Block) بتجمّع مجموعة عناصر مع بعض، وبتاخد سطر كامل.
<span> حاوية عامة صغيرة (Inline) بتستخدم جوه سطر النص عشان تلفي حول كلمة أو جزء بسيط.
class اسم تصنيف تقدري تكرريه على أكتر من عنصر — الأفضل لأي حاجة ممكن تتكرر (زي كل بطاقات المنتجات).
id اسم فريد لعنصر واحد بس في كل الصفحة — يستخدم للعناصر المميزة أو التي تحتاج استهداف من JavaScript.

product-card.html

<div class="card">
  <h3>سماعة لاسلكية AirSound</h3>
  <p>السعر بعد الخصم: <span id="price">999 جنيه</span></p>
</div>

الناتج

سماعة لاسلكية AirSound

السعر بعد الخصم: 999 جنيه

⚠️

متكرريش نفس الـ id في أكتر من عنصر في نفس الصفحة — لو عندك أكتر من بطاقة منتج، استخدمي class للتكرار واحتفظي بـ id للعنصر الفريد بس.

⚠️ أخطاء شائعة

تكرار نفس قيمة id في أكتر من بطاقة منتج على نفس الصفحة، وهو خطأ لازم نتجنبه.
استخدام div بدل span لتظليل كلمة واحدة جوه سطر، فيكسر تدفق النص لأن div عنصر block.
الاعتماد على class واحد بس لعناصر مختلفة تمامًا في الشكل، بدل تسمية classes وصفية أوضح.

📌 ملخص الدرس

div لحاوية تاخد سطر كامل، span لحاوية صغيرة داخل السطر
class للتكرار (زي كل بطاقات المنتجات)، id للتفرد

✏️ تمرين

كرري بطاقة المنتج نفسها 3 مرات بأسماء ومنتجات مختلفة، كلهم بنفس class="card"، وكل سعر جوه span بـ id مختلف.

🚀 Challenge

أضيفي span ثاني جوه بطاقة المنتج يعرض حالة التوفر ("متوفر" أو "غير متوفر") بـ id منفصل.

↩ الفهرس

الدرس 1717

الفرق بين Block Elements و Inline Elements

دلوقتي بعد ما اتعلمنا h1 إلى h6، وp، وdiv وspan، وa وimg — لازم نفهم طبيعة العناصر دي في الصفحة قبل ما نبدأ ننسّقها لاحقًا: هل العنصر بياخد سطر كامل لوحده، ولا بيقف جنب العناصر التانية؟

① ما هي عناصر Block؟

عنصر Block (سطري/كتلي): بياخد عرض السطر بالكامل تلقائيًا حتى لو محتواه كلمة واحدة بس، وبيبدأ دايمًا في سطر جديد لوحده — يعني مفيش عنصر تاني هيقف جنبه في نفس السطر.
أمثلة: h1 إلى h6, p, div, ul, li, table, form, section.

② ما هي عناصر Inline؟

عنصر Inline (مضمّن): بياخد بس المساحة اللي محتواه محتاجها، وبيقف جنب العناصر التانية في نفس السطر من غير ما يكسره.
أمثلة: span, a, strong, em, img, b, i, mark.

③ الفرق بينهم بالتفصيل

وجه المقارنة	Block	Inline
بداية سطر جديد	يبدأ دائمًا في سطر جديد	يبقى داخل نفس السطر الحالي
المساحة التي يأخذها	عرض السطر بالكامل تلقائيًا	بمقدار محتواه فقط
تغيير العرض/الارتفاع	يمكن التحكم بهما بحرية (width/height)	لا تتأثر width/height به افتراضيًا
أمثلة	div, p, h1-h6, ul, table	span, a, strong, img

④ مقارنة عملية: div و span

في موقع عيادة الدكتورة سلمى حسن، بنستخدم div عشان نلف قسم كامل زي كارت خدمة، وبنستخدم span عشان نلوّن أو نميّز كلمة واحدة جوه فقرة.

clinic-block.html

<div>كشف جديد</div>
<div>كشف متابعة</div>

الناتج — div (Block)

كشف جديد

كشف متابعة

clinic-inline.html

<p>سعر الكشف <span>300 جنيه</span> شامل المتابعة</p>

الناتج — span (Inline)

سعر الكشف 300 جنيه شامل المتابعة

⑤ مقارنة عملية: p و a

clinic-p-a.html

<p>لحجز موعد، تواصلي معنا عبر
  <a href="tel:0502234567">الاتصال المباشر</a>
  أو من خلال فورم الحجز أسفل الصفحة.</p>

الناتج

لحجز موعد، تواصلي معنا عبر الاتصال المباشر أو من خلال فورم الحجز أسفل الصفحة.

وسم p (Block) أخذ سطرًا كاملاً لوحده وبدأ فقرة جديدة، بينما وسم a (Inline) بداخله وقف جوه نفس سطر الفقرة من غير ما يكسرها لسطرين منفصلين.

🧱 Blockياخد سطر كامل لوحده، وبيبدأ سطر جديد بعده تلقائيًا. مناسب للأقسام الكبيرة (فقرات، عناوين، حاويات).

✏️ Inlineياخد مساحة محتواه بس، وبيقف جنب العناصر التانية في نفس السطر. مناسب لتنسيق جزء بسيط جوه نص.

⚠️

ده هو التنسيق الافتراضي بس اللي بيحدده المتصفح — لاحقًا في CSS هنقدر نغيّر أي عنصر من Block لـ Inline أو العكس بخاصية display، لكن مهم جدًا تعرفي شكله الافتراضي الأول عشان تفهمي ليه بعض العناصر بتظهر متلاصقة في سطر واحد وبعضها بتاخد سطر مستقل.

📌 ملخص الدرس

عنصر Block يأخذ سطرًا كاملاً ويبدأ سطرًا جديدًا دائمًا
عنصر Inline يأخذ مساحة محتواه فقط ويقف مع غيره في نفس السطر
div وp وh1-h6 عناصر Block، وspan وa وimg عناصر Inline

↩ الفهرس

الدرس 17 — تابع17

الفرق بين Block Elements و Inline Elements (تابع)

⚠️ أخطاء شائعة

محاولة وضع عنصرين Block جنب بعض في نفس السطر بدون CSS.
استخدام div لتمييز كلمة واحدة بدل span.
توقّع أن width وheight ستعمل على عنصر Inline مثل span بشكل افتراضي.

✏️ تمرين

اكتبي فقرة عن مواعيد عمل العيادة، وميّزي كلمة "الجمعة" بوسم span بخلفية صفراء.

↩ الفهرس

الدرس 1818

مشروع: صفحة شخصية

دلوقتي هنجمّع كل اللي اتعلمناه في مشروع حقيقي: صفحة "من نحن" شخصية بتعرّف بمؤسسة متجر ميجا تك.

هنستخدم header وmain وfooter بدل تكديس كل حاجة في div عادي.
كل section هيكون ليه h2 خاص بيه — بيرتب المحتوى بشكل منطقي وواضح.
الرابط في قسم "تواصلي معي" هيستخدم mailto: زي ما اتعلمنا في درس الروابط.

about-founder.html

<header>
  <h1>سارة عادل</h1>
  <p>مؤسسة متجر ميجا تك للإلكترونيات</p>
</header>

<main>
  <section>
    <h2>عني</h2>
    <p>شغوفة بعالم <strong>التكنولوجيا</strong> من أول يوم، وقررت أفتح ميجا تك عشان أوصّل أحدث الأجهزة بضمان حقيقي وخدمة تقدري تثقي فيها.</p>
  </section>

  <section>
    <h2>خبراتي</h2>
    <ul>
      <li>اختيار الأجهزة المناسبة لكل ميزانية</li>
      <li>خدمة عملاء وضمان ما بعد البيع</li>
      <li>صيانة فنية للابتوبات والموبايلات</li>
    </ul>
  </section>

  <section>
    <h2>تواصلي معي</h2>
    <a href="mailto:sara@megatech-eg.com">راسليني</a>
  </section>
</main>

<footer>© 2026 ميجا تك — كل الحقوق محفوظة</footer>

الناتج

سارة عادل

مؤسسة متجر ميجا تك للإلكترونيات

عني

شغوفة بعالم التكنولوجيا من أول يوم، وقررت أفتح ميجا تك عشان أوصّل أحدث الأجهزة بضمان حقيقي وخدمة تقدري تثقي فيها.

خبراتي

اختيار الأجهزة المناسبة لكل ميزانية
خدمة عملاء وضمان ما بعد البيع
صيانة فنية للابتوبات والموبايلات

تواصلي معي

راسليني

💡

لاحظي إزاي استخدمنا header وmain وfooter بدل تكديس كل حاجة في div عادي — وكل section ليه h2 خاص بيه بيرتب المحتوى بشكل منطقي وواضح.

⚠️ أخطاء شائعة

كتابة أكتر من h1 واحد في نفس الصفحة (هنا اسم سارة هو الـ h1 الوحيد).
نسيان mailto: قبل الإيميل في رابط التواصل، فالرابط يفتح كصفحة عادية بدل فتح برنامج البريد.
ترك section من غير h2 واضح، فيصبح غير مفهوم الغرض منه.

📌 ملخص الدرس

تطبيق header/main/section/footer في صفحة تعريفية حقيقية
دمج كل عناصر HTML الأساسية (نصوص، روابط، قوائم) في مشروع واحد متكامل

✏️ تمرين

أضيفي section جديد باسم "إنجازاتي" فيها ol (قائمة مرتبة) بأهم 3 خطوات في رحلة تأسيس ميجا تك.

🚀 Challenge

أضيفي صورة شخصية لسارة بوسم img مع alt مناسب فوق قسم "عني" مباشرة.

🛠️ مهمتك

أضيفي section لـ "فريق العمل" فيها ul بأسماء موظفين اتنين في ميجا تك
أضيفي صورة شعار المتجر بـ alt مناسب

headermainsectionfooter

↩ الفهرس

الدرس 1919

مشروع: صفحة متجر بسيط

مشروع تاني يجمع البطاقات والفورم والصور مع بعض — الصفحة الرئيسية لمتجر ميجا تك للإلكترونيات.

قسم المنتجات فيه div بـ class="product" — نفس البنية دي هتتكرر لكل منتج جديد.
قسم الطلب فورم كامل بحقول required، وده اللي هيوصل بيانات الزبون.
روابط nav بتستخدم #products و#contact للتنقل السريع داخل نفس الصفحة.

shop.html

<header>
  <h1>ميجا تك</h1>
  <nav><a href="#products">المنتجات</a> <a href="#contact">تواصل</a></nav>
</header>

<main>
  <section id="products">
    <h2>منتجاتنا</h2>
    <div class="product">
      <img src="https://placehold.co/150x150/2d6a4f/ffffff?text=AirSound" alt="سماعة لاسلكية AirSound" width="150">
      <h3>سماعة لاسلكية AirSound</h3>
      <p>السعر: 1200 جنيه</p>
    </div>
  </section>

  <section id="contact">
    <h2>اطلبي الآن</h2>
    <form>
      <input type="text" placeholder="اسمك" required>
      <input type="email" placeholder="بريدك الإلكتروني" required>
      <textarea placeholder="ملاحظات على الطلب"></textarea>
      <button type="submit">إرسال الطلب</button>
    </form>
  </section>
</main>

<footer>تواصل: <a href="mailto:shop@megatech-eg.com">shop@megatech-eg.com</a></footer>

الناتج

ميجا تك

منتجاتنا

سماعة لاسلكية AirSound

السعر: 1200 جنيه

اطلبي الآن

💡

استخدمنا هنا رابط صورة حقيقي من خدمة placehold.co عشان الصورة تظهر فعليًا حتى لو مفيش عندك صورة منتج جاهزة — في مشروعك الحقيقي هتستبدليه بصورة المنتج الفعلية.

⚠️ أخطاء شائعة

نسيان alt وصفي للصورة، فيفقد محرك البحث وقارئ الشاشة معلومة مهمة عن المنتج.
تكرار نفس قيمة id (زي "products" أو "contact") في أكتر من عنصر بالغلط، وهو لازم يفضل فريد.
نسيان required في حقول الفورم الأساسية، فالزبون يقدر يبعت طلب من غير اسم أو إيميل.

📌 ملخص الدرس

دمج div للمنتجات المتكررة مع form لاستقبال الطلبات
روابط داخلية بعلامة # (زي #products و#contact) للتنقل السريع داخل نفس الصفحة
صور المنتجات لازم يكون ليها alt واضح دايمًا

✏️ تمرين

كرري div.product مرتين تانيين بمنتجات مختلفة من جدول درس الجداول (اللابتوب برو X1 والموبايل Z20)، بنفس البنية بالظبط.

🚀 Challenge

اربطي كل رابط في nav فعليًا بالقسم المناسب باستخدام id، وجرّبي تضغطي على الرابط وشوفي الصفحة بتنط لمكان القسم صح.

↩ الفهرس

الدرس 2020

مراجعة ومشروع HTML كامل

وصلنا لختام رحلة HTML! خلينا نراجع بسرعة كل اللي اتعلمناه من خلال بناء موقع ميجا تك، قبل ما ننتقل لـ CSS.

الهيكل: DOCTYPE, html, head, body, meta, title.
النصوص: h1-h6, p, br, hr, strong, em, mark.
الروابط والصور: a, href, target, img, src, alt.
القوائم والجداول: ul, ol, li, table, tr, td, th.
الفورم: form, input, textarea, select, radio, checkbox.
الوسائط: audio, video, iframe.
التنظيم: header, nav, main, section, article, footer, div, span, id, class.

💡

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

⚠️ أخطاء شائعة (مراجعة عامة)

الخلط بين الوسوم الدلالية (header, main, section) واستخدام div في كل مكان بدل منها.
نسيان إغلاق الوسوم أو ترتيبها بشكل غير منطقي (زي head بعد body).
نسيان alt للصور وrequired للحقول الأساسية في الفورم.

📌 ملخص الدرس

20 درسًا غطّت كل عناصر HTML الأساسية لبناء صفحة كاملة
الخطوة الجاية: تطبيق كل ما سبق في مشاريع عملية

✏️ تمرين

راجعي كل درس فاتك فيه فكرة، وجربي تكتبي جملة واحدة بمفردك توضّحي فيها استخدام كل وسم من الوسوم المذكورة في الملخص.

🚀 Challenge

من غير ما ترجعي لأي درس سابق، حاولي تكتبي من الذاكرة هيكل صفحة HTML كاملة فاضية (من DOCTYPE لحد body) خلال 3 دقائق بس.

🚀 مشروع HTML الشامل

ابني صفحة رئيسية كاملة لمتجر ميجا تك تجمع: header + nav، section بها فقرة عن المتجر وخبرات في ul، صورة منتج بـ alt، جدول مقارنة أسعار، فورم طلب شراء، وfooter

كل وسوم HTML الأساسية

↩ الفهرس

الدرس 2121

عناصر تنسيق نص متقدمة

فاضل شوية وسوم تنسيق نص مهمة اتعرفنا على جزء منها في الدرس 7، دلوقتي هنكمل الباقي: الحذف، الإضافة، الأكواد، والاقتباسات.

① del — نص محذوف

del.html

السعر: <del>200 جنيه</del> 150 جنيه

الناتج

السعر: ~~200 جنيه~~ 150 جنيه

<del> يعرض النص بخط في المنتصف ليدل على إنه "محذوف" أو "ملغي" — بيتستخدم كتير في عروض الأسعار قبل الخصم.

② ins — نص مُضاف

ins.html

السعر الجديد <ins>بعد التحديث</ins>: 150 جنيه

الناتج

السعر الجديد بعد التحديث: 150 جنيه

<ins> عكس del — بيعرض النص بخط تحته للدلالة على إنه "مُضاف حديثًا" للمحتوى، زي تتبع التعديلات في مستند.

delنص محذوف — يظهر بخط في المنتصف (strikethrough).

insنص مُضاف — يظهر بخط تحته (underline).

③ s — نص غير صحيح أو غير ذي صلة

s.html

<s>السعر 300 جنيه</s> بقى 250 بس النهاردة

الناتج

~~السعر 300 جنيه~~ بقى 250 بس النهاردة

<s> يشبه del بصريًا (خط في المنتصف) لكنه دلاليًا مختلف: بيستخدم لمعلومة "بقت غير صحيحة أو غير ذات صلة"، مش بالضرورة "اتحذفت" رسميًا.

④ u — خط تحت النص

u.html

الكلمة دي فيها <u>خطأ إملائي</u>

الناتج

الكلمة دي فيها خطأ إملائي

<u> يضع خط تحت النص بدون معنى دلالي محدد — احذري من استخدامه بشكل عام لأنه بيتلخبط بصريًا مع الروابط اللي بتتحط تحتها خطوط برضه.

⑤ code — عرض كود داخل نص

code.html

استخدمي وسم <code>&lt;p&gt;</code> لكتابة فقرة

الناتج

استخدمي وسم <p> لكتابة فقرة

<code> بيعرض النص بخط Monospace مميز، ومُخصص لإظهار أسماء وسوم أو أكواد برمجية جوه فقرة عادية — زي ما بنستخدمه في المذكرة دي نفسها.

⑥ blockquote و q — الاقتباسات

quotes.html

<blockquote>
  التعلّم في الصغر كالنقش على الحجر.
</blockquote>
<p>قالت المعلمة: <q>ذاكري بانتظام</q></p>

الناتج

التعلّم في الصغر كالنقش على الحجر.

قالت المعلمة: ذاكري بانتظام

<blockquote> للاقتباس الطويل المستقل (فقرة كاملة) وعادة بيظهر بمسافة بادئة، أما <q> فللاقتباس القصير جوه سطر — والمتصفح بيضيف علامات تنصيص حواليه تلقائيًا.

↩ الفهرس

الدرس 21 — تابع21

عناصر تنسيق نص متقدمة (تابع)

💡

del/s شكلهم متشابه بس معناهم مختلف: del = "اتحذف رسميًا"، s = "بقى غير صحيح أو غير مناسب". وu نادرًا ما تستخدميه لأنه بيتلخبط مع شكل الروابط.

📌 ملخص الدرس

del للحذف، ins للإضافة، s لمعلومة بقت غير صحيحة
u لخط تحت النص بدون معنى دلالي، code لعرض الأكواد
blockquote للاقتباس الطويل، q للاقتباس القصير

⚠️ أخطاء شائعة

استخدام u للتأكيد بدل strong أو em، رغم أنه بلا معنى دلالي.
الخلط بين del وs رغم اختلاف المعنى الدلالي بينهما.
نسيان إن q تضيف علامات تنصيص تلقائيًا فتتكرر لو المستخدمة كتبتها يدويًا كمان.

✏️ تمرين

اكتبي فقرة عرض بسعر قديم بـ del وسعر جديد بـ ins، وجملة اقتباس قصيرة بـ q.

🚀 Challenge

اكتبي بلوك اقتباس (blockquote) لمقولة تفضلك، وتحته فقرة فيها اسم وسم HTML باستخدام code.

↩ الفهرس

الدرس 2222

الفرق بين Tag و Element و Attribute

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

anatomy.html

<p class="intro">مرحبًا</p>

الناتج

مرحبًا

Tag (الوسم): هو النص المكتوب بين علامتي < > بس، زي <p> أو </p> — الوسم الفاتح والوسم الغالق كل واحد فيهم "Tag" لوحده.
Element (العنصر): هو المجموعة الكاملة: الوسم الفاتح + المحتوى اللي جواه + الوسم الغالق. يعني <p class="intro">مرحبًا</p> كله سوا اسمه Element.
Attribute (الخاصية): هي معلومة إضافية بتتحط جوه الوسم الفاتح على شكل name="value"، زي class="intro" في المثال، بتديك تحكم أو معلومة زيادة عن العنصر.

Tagمجرد < > — علامة فاتحة أو غالقة بس.

Elementالوسم الفاتح + المحتوى + الوسم الغالق كوحدة واحدة.

Attributeمعلومة إضافية جوه الوسم الفاتح فقط.

💡

لو حد سألك "إيه الفرق بين Tag و Element؟" جاوبي بسرعة: الـ Tag هو العلامة نفسها، والـ Element هو "العنصر الكامل" اللي بيتكوّن من الوسمين والمحتوى بينهم.

📌 ملخص الدرس

Tag = العلامة < > فقط (فاتحة أو غالقة)
Element = الوسم الفاتح + المحتوى + الوسم الغالق
Attribute = خاصية إضافية داخل الوسم الفاتح على هيئة name="value"

⚠️ أخطاء شائعة

استخدام كلمة "Tag" للدلالة على العنصر كله، وهو خطأ شائع حتى بين المطورين.
نسيان علامات التنصيص حوالين قيمة الـ Attribute.
الظن إن Attribute ليها وسم غالق منفصل، وهي في الحقيقة جزء من الوسم الفاتح نفسه.

✏️ تمرين

اكتبي عنصر img كامل وحددي فيه: أين الـ Tag الفاتح، وأين الـ Attributes، ووضّحي هل له Tag غالق أم لا.

↩ الفهرس

الدرس 2323

HTML Global Attributes

الخصائص العامة دي اسمها كده لأنها تقدري تحطيها على أي وسم HTML تقريبًا، مش وسم معين بس — خلينا نتعرف على أشهرها.

global.html

<p
  id="note1"
  class="highlight"
  title="ملاحظة مهمة"
  lang="ar"
  dir="rtl">
  انتبهي لهذه الفقرة
</p>

الناتج

انتبهي لهذه الفقرة (مرّري الماوس فوقها)

id: معرّف فريد لعنصر واحد بس في الصفحة كلها، بيُستخدم للربط مع CSS أو JavaScript.
class: اسم مجموعة يمكن تكراره على أكتر من عنصر، بيُستخدم للتنسيق الجماعي بـ CSS.
style: تنسيق CSS مباشر جوه الوسم نفسه، زي style="color:red".
title: نص توضيحي (Tooltip) بيظهر لما تمرري الماوس فوق العنصر.
lang: لغة محتوى العنصر، زي lang="ar" أو lang="en".
dir: اتجاه الكتابة، rtl لليمين لليسار أو ltr لليسار لليمين.
hidden: تخفي العنصر تمامًا من الصفحة (بدون ما تحذفيه من الكود).
tabindex: يحدد ترتيب التنقل بين العناصر بزرار Tab من الكيبورد.

💡

سُميت "Global" لأنك تقدري تحطيها على أي وسم HTML — من p لحد div لحد button — مش زي خصائص معينة (زي href) اللي بتشتغل مع وسوم محددة بس.

📌 ملخص الدرس

id لعنصر واحد فريد، class لمجموعة عناصر
title لتلميح Tooltip، lang/dir للغة واتجاه الكتابة
hidden لإخفاء عنصر، tabindex لترتيب التنقل بالكيبورد

⚠️ أخطاء شائعة

تكرار نفس قيمة id على أكتر من عنصر في نفس الصفحة، وده خطأ لازم تتجنبيه.
الخلط بين id (فريد) وclass (يتكرر) عند اختيار أيهما تستخدمي.
نسيان إن hidden بتخفي العنصر فعليًا، مش بس تخليه شفاف.

✏️ تمرين

أضيفي إلى وسم div خصائص id وclass وtitle، وجربي قيمة hidden على عنصر ثاني وشوفي هيختفي إزاي.

↩ الفهرس

الدرس 2424

الفرق بين id و class بالتطبيق العملي

اتعرفنا عليهم بسرعة قبل كده، دلوقتي هنشوف الفرق عمليًا في CSS وJavaScript، ومتى بالظبط نستخدم كل واحد فيهم.

① استخدام id مع CSS

id-css.html

<style>
  #mainTitle { color: crimson; }
</style>
<h1 id="mainTitle">العنوان الرئيسي</h1>

الناتج

العنوان الرئيسي

في CSS بنستدعي الـ id بعلامة الـ # قبل الاسم، وبما إنه فريد، فالتنسيق ده هيتطبق على عنصر واحد بس في الصفحة كلها.

② استخدام class مع CSS

class-css.html

<style>
  .card { background: #f3e6cc; padding: 8px; }
</style>
<div class="card">منتج 1</div>
<div class="card">منتج 2</div>

الناتج

منتج 1

منتج 2

في CSS بنستدعي الـ class بنقطة . قبل الاسم، والتنسيق ده هيتطبق على كل العناصر اللي عندها نفس الـ class دفعة واحدة.

③ الفرق بينهم في JavaScript

select.js

// بحث بالـ id — عنصر واحد
document.getElementById("mainTitle")

// بحث بالـ class — مجموعة عناصر
document.getElementsByClassName("card")
document.querySelectorAll(".card")

ملاحظة

💡

getElementById بيرجع عنصر واحد، أما getElementsByClassName فبيرجع قائمة عناصر.

④ أكتر من class للعنصر الواحد

multi-class.html

<button class="btn btn-primary large">اشتري الآن</button>

الناتج

ممكن تحطي أكتر من class للعنصر الواحد، مفصولين بمسافة، وكل class فيهم يجيب تنسيقه الخاص — العنصر بياخد كل التنسيقات مجمّعة.

📊 جدول مقارنة شامل

المعيار	id	class
التكرار	مرة واحدة فقط في الصفحة	يمكن تكراره على عناصر كثيرة
رمز CSS	`#`	`.`
دالة JS	`getElementById`	`getElementsByClassName`
الاستخدام الأمثل	عنصر واحد مميز (زي الهيدر الرئيسي)	تنسيق جماعي (زي كروت المنتجات)

💡

القاعدة الذهبية: لو العنصر واحد ومميز استخدمي id، ولو عندك مجموعة عناصر عايزة نفس الشكل استخدمي class.

📌 ملخص الدرس

id فريد لعنصر واحد، class يتكرر على عدة عناصر
في CSS: # للـ id و. للـ class
في JS: getElementById مقابل getElementsByClassName / querySelectorAll

⚠️ أخطاء شائعة

تكرار نفس id على أكتر من عنصر، وده يكسر منطق JavaScript المعتمد على التفرد.
استخدام id لعناصر متكررة زي كروت المنتجات بدل class.
نسيان المسافة بين أسماء الـ classes المتعددة على نفس العنصر.

✏️ تمرين

صمّمي 3 كروت منتجات بنفس الـ class، وهيدر واحد بـ id مختلف، ونسّقي كل واحد بـ CSS.

🚀 Challenge

أضيفي زرارين لهما نفس class الأساسي (btn) لكن كل واحد معاه class إضافي مختلف (primary / secondary) بلون مختلف.

↩ الفهرس

الدرس 2525

عنصري div و span

وسمين "بلا معنى دلالي" لكنهم من أكتر الوسوم استخدامًا في أي صفحة حقيقية — دورهم إنهم يجمّعوا عناصر تانية عشان ننظّمها أو ننسّقها.

① div — تجميع على مستوى الكتلة

div.html

<div class="card">
  <h3>منتج مميز</h3>
  <p>وصف قصير للمنتج</p>
</div>

الناتج

منتج مميز

وصف قصير للمنتج

<div> عنصر Block (بياخد سطر كامل لوحده) بيُستخدم لتجميع مجموعة عناصر تانية جوه كتلة واحدة عشان تنظيمها أو تنسيقها بـ CSS، زي كرت منتج فيه عنوان ووصف.

② span — تجميع على مستوى النص

span.html

<p>السعر: <span class="price">150 جنيه</span></p>

الناتج

السعر: 150 جنيه

<span> عنصر Inline (بياخد مساحة نصه بس، ومبيبدأش سطر جديد) بيُستخدم لتمييز جزء صغير جوه سطر أو فقرة عشان تلوينه أو تنسيقه لوحده.

divBlock — يبدأ سطر جديد، لتجميع عناصر كبيرة (كروت، أقسام).

spanInline — لا يبدأ سطر جديد، لتمييز جزء صغير من نص.

③ الفرق بينهم وبين العناصر الدلالية

div وspan "بلا معنى" — المتصفح ومحركات البحث مش بيفهموا منهم أي حاجة عن نوع المحتوى. لو فيه وسم دلالي مناسب (زي article أو nav) الأفضل تستخدميه بدل div عادي، واستخدمي div/span بس لما مفيش وسم دلالي يناسب الحالة.

💡

قاعدة سريعة: هل المحتوى ده هياخد سطر كامل ومساحة كبيرة؟ استخدمي div. هل هو جزء صغير جوه سطر عايزة تميزيه بس؟ استخدمي span.

📌 ملخص الدرس

div لتجميع الكتل الكبيرة (Block)
span لتمييز جزء صغير جوه النص (Inline)
استخدمي الوسوم الدلالية بدلًا منهم لما يكون فيه وسم مناسب

⚠️ أخطاء شائعة

استخدام div في كل مكان حتى لو فيه وسم دلالي أنسب زي section أو article.
محاولة استخدام span لتجميع عناصر Block كبيرة، وهو غير مخصص لذلك.
الإفراط في تعشيش divs داخل بعضها (Div Soup) لدرجة تصعّب قراءة الكود.

✏️ تمرين

اعملي كرت منتج بـ div فيه صورة وعنوان وسعر، واستخدمي span لتلوين السعر بس دون باقي الكرت.

↩ الفهرس

الدرس 2626

HTML Character Entities

إزاي تكتبي رمز زي < جوه صفحة HTML من غير ما المتصفح يفهمه كأنه بداية وسم؟ الحل: Character Entities — رموز محجوزة ليها كود خاص.

entities.html

<p>لكتابة وسم بنستخدم &lt;p&gt; مش <p> مباشرة</p>

الناتج

لكتابة وسم بنستخدم <p> مش <p> مباشرة

الـ Character Entities هي أكواد خاصة بتبدأ بـ & وتنتهي بـ ; بتُستخدم لكتابة رموز محجوزة في HTML (زي < و>) أو رموز مش موجودة على الكيبورد العادي.
< = < (أقل من / بداية وسم)
> = > (أكبر من / نهاية وسم)
& = & (علامة الـ and نفسها)
  = مسافة غير قابلة للكسر (Non-breaking space) — مسافة إضافية لا يدمجها المتصفح تلقائيًا مع باقي المسافات.
" = " و© = © من أمثلة الرموز الشائعة الأخرى.

💡

لو محتاجة تكتبي علامة & نفسها جوه النص، لازم تكتبيها برضه بصيغة & عشان المتصفح ميفهمهاش كبداية Entity تانية.

📌 ملخص الدرس

Character Entities تبدأ بـ & وتنتهي بـ ;
< و> لكتابة < و> بدون تعارض مع وسوم HTML
  لمسافة لا تُكسر تلقائيًا

⚠️ أخطاء شائعة

نسيان الفاصلة المنقوطة ; في نهاية الـ Entity فيفشل عرضها صح.
كتابة < أو > مباشرة داخل نص عادي فيظنها المتصفح جزءًا من وسم.
استخدام   بكثرة بدل التنسيق الصحيح بـ CSS للمسافات.

✏️ تمرين

اكتبي فقرة توضح للقارئ إزاي يكتب وسم <div> داخل مقال بدون ما يتحول لعنصر حقيقي في الصفحة.

↩ الفهرس

الدرس 2727

HTML Comments (التعليقات)

التعليقات هي ملاحظات بتكتبيها جوه الكود نفسه للمطورين (وممكن لنفسك بكرة)، والمتصفح بيتجاهلها تمامًا ومبيعرضهاش للزائر.

comments.html

<!-- ده تعليق سطر واحد -->
<h1>عنوان الصفحة</h1>

<!--
  ده تعليق
  متعدد الأسطر
-->
<p>فقرة تانية</p>

الناتج

عنوان الصفحة

فقرة تانية

(التعليقات مش ظاهرة للزائر إطلاقًا)

صيغة التعليق دايمًا بتبدأ بـ ، وأي حاجة بينهم بيتجاهلها المتصفح تمامًا.
نفس الصيغة تشتغل للتعليق سطر واحد أو أسطر متعددة — الفرق بس عدد الأسطر بين علامتي البداية والنهاية.
التعليقات مفيدة جدًا في: توضيح سبب كتابة جزء معين، تقسيم الصفحة لأقسام واضحة (زي ما شفتي في المذكرة دي)، أو "تعطيل" جزء من الكود مؤقتًا بدون حذفه.

💡

التعليقات بتظهر لو حد فتح "عرض مصدر الصفحة" (View Source)، فماينفعش تكتبي فيها معلومات سرية زي كلمات سر أو مفاتيح API.

📌 ملخص الدرس

صيغة التعليق:
نفس الصيغة للسطر الواحد والأسطر المتعددة
تُستخدم للتوضيح، التنظيم، أو تعطيل كود مؤقتًا

⚠️ أخطاء شائعة

نسيان علامة الإغلاق --> فيتحول باقي الصفحة كلها لتعليق بالخطأ.
كتابة معلومات حساسة داخل التعليقات رغم إنها تظهر في مصدر الصفحة.
الإفراط في التعليقات الواضحة زيادة عن اللزوم فيصبح الكود مزدحمًا.

✏️ تمرين

قسّمي صفحة بسيطة (هيدر، محتوى، فوتر) بتعليقات توضح بداية ونهاية كل قسم.

↩ الفهرس

الدرس 2828

Absolute Path و Relative Path

لما بتربطي صورة أو صفحة تانية، لازم تحددي "المسار" (Path) بتاعها — وفيه نوعين رئيسيين لازم تفرقي بينهم.

① المسار المطلق (Absolute Path)

absolute.html

<img src="https://example.com/images/cat.jpg">

الناتج

رابط كامل يعمل من أي مكان في العالم

المسار المطلق هو رابط كامل يبدأ بـ https:// أو http:// ويحدد موقع الملف بدقة على الإنترنت، بغض النظر عن مكان الصفحة الحالية.

② المسار النسبي (Relative Path)

relative.html

<!-- نفس المجلد -->
<img src="cat.jpg">

<!-- مجلد فرعي -->
<img src="images/cat.jpg">

<!-- مجلد أعلى -->
<img src="../cat.jpg">

ملاحظة

المسار هنا معتمد على مكان ملف HTML الحالي نفسه

المسار النسبي بيحدد مكان الملف "بالنسبة لمكان صفحة HTML الحالية" — ../ معناها اطلعي مجلد لفوق، واسم مجلد بدون شرطة معناها ادخلي جوه مجلد فرعي.

Absoluteرابط كامل يعمل من أي مكان، لكنه أطول ولو الموقع اتغير المسار ممكن يتكسر.

Relativeمسار قصير ومرن، مثالي للملفات جوه نفس المشروع.

💡

لملفات مشروعك الخاصة (صور، صفحات، CSS) استخدمي المسار النسبي دايمًا، واستخدمي المسار المطلق بس لما تربطي بملف على موقع خارجي.

📌 ملخص الدرس

Absolute Path: رابط كامل يبدأ بـ https://
Relative Path: مسار بالنسبة لمكان الصفحة الحالية
../ للطلوع مجلد لفوق، اسم مجلد للدخول جواه

⚠️ أخطاء شائعة

استخدام مسار مطلق لملفات المشروع الخاصة بدل نسبي، فيصعب نقل المشروع لمكان تاني.
الخلط بين عدد ../ المطلوب للطلوع للمجلد الصحيح.
نسيان امتداد الملف (.jpg أو .html) في نهاية المسار.

✏️ تمرين

افترضي إن صفحتك جوه مجلد pages وصورك جوه مجلد images في نفس مستوى pages، اكتبي المسار النسبي الصحيح للصورة.

↩ الفهرس

الدرس 2929

Semantic HTML بالتفصيل

اتعرفنا على العناصر الدلالية في الدرس 14، دلوقتي هنفهم "ليه" هي مهمة أوي، ونراجع كل عنصر منهم بالتفصيل ودوره الحقيقي في الصفحة.

Semantic Elements (العناصر الدلالية): وسوم بتوصف "معنى ودور" المحتوى اللي جواها، مش بس شكله — زي nav اللي بيقول للمتصفح "ده قسم تنقّل".
العناصر العادية (زي div): بتوصف "صندوق فاضي بلا معنى"، محرك البحث أو قارئ الشاشة مش بيفهم منها نوع المحتوى.
استخدام العناصر الدلالية بيحسّن SEO (فهم جوجل للصفحة)، وبيساعد ذوي الاحتياجات اللي بيستخدموا قارئ الشاشة إنهم يتنقلوا بسهولة بين أقسام الصفحة.

semantic-full.html

<header>هيدر الموقع</header>
<nav>روابط التنقل</nav>
<main>
  <section>
    <article>مقال مستقل</article>
  </section>
  <aside>محتوى جانبي</aside>
</main>
<footer>فوتر الموقع</footer>

البنية

header

nav

main → section → article

aside

footer

header: رأس الصفحة أو رأس قسم — عادة فيه الشعار والعنوان.
nav: مجموعة روابط التنقل الرئيسية في الموقع.
main: المحتوى الأساسي والفريد للصفحة — يظهر مرة واحدة بس في كل صفحة.
section: قسم منطقي مستقل من المحتوى، غالبًا بعنوان خاص به.
article: محتوى مستقل بذاته يصلح يُنشر لوحده (مقال، منشور، تعليق).
aside: محتوى جانبي غير أساسي، زي روابط ذات صلة أو إعلان.
footer: تذييل الصفحة أو القسم، فيه حقوق النشر وروابط إضافية غالبًا.

💡

قاعدة عملية: اسألي نفسك "هل المحتوى ده يوصف نفسه بوسم معين؟" لو الإجابة أيوه استخدمي الوسم الدلالي، ولو مفيش وسم يوصفه بالظبط استخدمي div.

📌 ملخص الدرس

العناصر الدلالية توصف معنى المحتوى، وليس شكله فقط
تحسّن SEO وتساعد قارئ الشاشة على التنقل
main تظهر مرة واحدة فقط في الصفحة

⚠️ أخطاء شائعة

استخدام أكتر من وسم main واحد في نفس الصفحة.
استخدام section بدون عنوان واضح لمحتواها.
استخدام div في كل مكان رغم توفر وسم دلالي أنسب.

✏️ تمرين

حوّلي صفحة مبنية بالكامل بـ div إلى نسخة تستخدم header وnav وmain وfooter بدلًا منها.

↩ الفهرس

الدرس 3030

HTML Layout

تخطيط الصفحة (Layout) هو إزاي بتوزّعي عناصر موقعك بشكل منطقي ومنظم، باستخدام العناصر الدلالية اللي اتعلمناها.

layout.html

<body>
  <header>
    <h1>اسم الموقع</h1>
    <nav>الرئيسية | من نحن | تواصل</nav>
  </header>
  <main>المحتوى الأساسي</main>
  <footer>© 2026 جميع الحقوق محفوظة</footer>
</body>

الناتج

هيدر: العنوان + التنقل

main: المحتوى الأساسي

فوتر

هيكل Layout الأساسي لأي موقع بيتكون غالبًا من: header (رأس) → nav (تنقل) → main (محتوى) → footer (تذييل)، وممكن main تتقسم لـ section وaside جنب بعض.
ترتيب هذه العناصر في الكود HTML بيحدد ترتيبها الطبيعي في الصفحة، وبعدين CSS هو اللي بيتحكم في شكل توزيعها بصريًا (زي جعل aside جنب main بدل تحته).
التخطيط المنطقي الصحيح لـ HTML مهم حتى قبل أي تنسيق CSS، لأنه أساس فهم الصفحة لمحركات البحث وقارئ الشاشة.

💡

فكري في HTML كـ "الهيكل العظمي" للموقع، وCSS هو اللي بيحدد الشكل النهائي والتوزيع البصري فوق الهيكل ده — وهنتعمّق في ده أكتر في دروس CSS Layout (Flexbox وGrid).

📌 ملخص الدرس

الهيكل الأساسي: header → nav → main → footer
main ممكن تتقسم لـ section وaside
ترتيب HTML يحدد الترتيب الطبيعي، وCSS يتحكم في الشكل البصري

⚠️ أخطاء شائعة

وضع nav خارج header بدون سبب منطقي، رغم إن الشائع وضعه جواها.
عدم وجود footer نهائيًا في الصفحة رغم أهميته لحقوق النشر وروابط التواصل.
الاعتماد الكلي على div لبناء التخطيط دون استخدام العناصر الدلالية.

✏️ تمرين

ارسمي (على ورقة أو بالكود) تخطيط صفحة مدونة بسيطة فيها header وnav وmain (بها article وaside) وfooter.

↩ الفهرس

الدرس 3131

HTML Audio بالتفصيل

لمسة أعمق على وسم audio اللي شفناه بسرعة في الدرس 13 — دلوقتي هنشرح كل خاصية فيه لوحدها وامتدادات الصوت المدعومة.

audio.html

<audio controls loop>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  متصفحك لا يدعم الصوت
</audio>

الناتج

🔊 ▶ ━━━●━━━━ 1:23 / 3:00

controls: يظهر أدوات التحكم (تشغيل، إيقاف، مستوى الصوت) للمستخدم.
autoplay: يشغّل الصوت تلقائيًا فور تحميل الصفحة (المتصفحات الحديثة بتمنعه غالبًا إلا لو muted).
loop: يعيد تشغيل الصوت تلقائيًا بعد ما يخلص.
muted: يبدأ الصوت مكتومًا افتراضيًا.
<source>: بتحددي أكتر من صيغة صوت (mp3, ogg, wav) عشان لو المتصفح مايدعمش صيغة، يجرب اللي بعدها.

💡

خلي النص جوه وسم audio (زي "متصفحك لا يدعم الصوت") كـ Fallback للمتصفحات القديمة جدًا اللي مش فاهمة الوسم أصلًا.

📌 ملخص الدرس

controls, autoplay, loop, muted من أهم خصائص audio
source تتيح توفير أكتر من صيغة للتوافق
MP3 وOGG وWAV من أشهر امتدادات الصوت المدعومة

⚠️ أخطاء شائعة

استخدام autoplay بدون muted، فمعظم المتصفحات الحديثة بتمنعه.
الاعتماد على صيغة صوت واحدة فقط بدل توفير بدائل بـ source.
نسيان controls فيصبح المستخدم غير قادر على التحكم في الصوت.

✏️ تمرين

أضيفي وسم audio لصوت ترحيب بصفحة موقعك، مع controls وloop، وصيغتين مختلفتين من source.

↩ الفهرس

الدرس 3232

HTML Video بالتفصيل

زي الصوت بالظبط، بس للفيديو — مع خصائص إضافية زي width وheight وposter عشان تتحكمي في شكل مشغّل الفيديو.

video.html

<video controls width="320" poster="cover.jpg">
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  متصفحك لا يدعم الفيديو
</video>

الناتج

▶

controls: يظهر أدوات التحكم بالفيديو (تشغيل، صوت، ملء الشاشة).
width وheight: يحددان أبعاد مشغّل الفيديو بالبكسل.
autoplay وloop وmuted: نفس معنى وظائفهم في audio.
poster: صورة غلاف بتظهر قبل ما الفيديو يتشغّل، مفيدة جدًا لتجربة مستخدم أفضل.
<source>: زي الصوت بالظبط، بتوفري أكتر من صيغة (mp4, webm) للتوافق بين المتصفحات.

💡

MP4 هي الصيغة الأكثر توافقًا مع كل المتصفحات تقريبًا، فخليها دايمًا أول source في القائمة.

📌 ملخص الدرس

width/height لتحديد أبعاد الفيديو، poster لصورة الغلاف
MP4 وWebM من أشهر امتدادات الفيديو المدعومة
نفس خصائص controls/autoplay/loop/muted الموجودة في audio

⚠️ أخطاء شائعة

عدم تحديد width/height فيسبب "قفزة" في تصميم الصفحة أثناء تحميل الفيديو.
نسيان poster فيظهر الفيديو بشاشة سوداء قبل التشغيل.
الاعتماد على صيغة فيديو واحدة فقط بدون بديل.

✏️ تمرين

أضيفي فيديو تعريفي لصفحة مشروعك بعرض 480px وصورة غلاف واضحة، مع صيغتين مختلفتين.

↩ الفهرس

الدرس 3333

Iframe بالتفصيل

وسم iframe بيخليكِ "تضمّني" صفحة ويب كاملة تانية جوه صفحتك — زي فيديو يوتيوب أو خريطة جوجل ماذا.

iframe.html

<iframe
  src="https://www.youtube.com/embed/xyz"
  width="320"
  height="180"
  title="فيديو تعريفي">
</iframe>

الناتج

📺 محتوى مُضمَّن من موقع خارجي

<iframe> اختصار Inline Frame — بيعرض صفحة ويب كاملة "جوه" صفحتك الحالية، وكأنها نافذة صغيرة مفتوحة على موقع تاني.
src: رابط الصفحة أو الفيديو المراد تضمينه.
width وheight: أبعاد الإطار بالبكسل.
title: وصف قصير مهم جدًا لقارئ الشاشة يوضّح محتوى الـ iframe.
الاستخدام الأشهر: تضمين فيديوهات يوتيوب، خرائط جوجل، أو نماذج Google Forms.

💡

احرصي دايمًا على إضافة title لكل iframe — ده مش شكلي بس، ده مطلوب لإمكانية الوصول (Accessibility) عشان قارئ الشاشة يقدر يوصف المحتوى للمستخدم.

📌 ملخص الدرس

iframe يضمّن صفحة ويب كاملة داخل صفحتك
src يحدد رابط المحتوى المُضمَّن
title ضروري لإمكانية الوصول

⚠️ أخطاء شائعة

نسيان title فيجعل الـ iframe غير مفهوم لقارئ الشاشة.
تضمين محتوى من مواقع غير موثوقة، وده ممكن يشكل خطر أمني.
عدم تحديد width/height فيتسبب في اضطراب تصميم الصفحة.

✏️ تمرين

ضمّني خريطة جوجل ماذا لموقع مدرستك داخل صفحة HTML باستخدام iframe.

↩ الفهرس

الدرس 3434

HTML Accessibility

إمكانية الوصول (Accessibility) تعني إن موقعك يقدر يستخدمه أي حد، بما فيهم ذوي الاحتياجات الخاصة — وده مش اختياري، ده أساسي.

a11y.html

<img src="laptop.jpg" alt="لابتوب فضي مفتوح على مكتب خشبي">

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

ملاحظة

🦻

قارئ الشاشة هيقرأ alt والlabel بصوت عالي للمستخدم المكفوف.

alt على الصور: نص بديل يصف الصورة، ضروري جدًا لقارئ الشاشة، ولو الصورة مالهاش معنى وظيفي سيبيه فاضي alt="".
label مع input: بيربط وصف واضح بكل حقل فورم، عن طريق تطابق for مع id — قارئ الشاشة بيقرأ الوصف ده لما المستخدم يوصل للحقل.
ترتيب العناوين: لازم تبدأي بـ h1 واحد بس، وترتبي h2 وh3 بالتسلسل المنطقي بدون تخطي مستويات — ده بيساعد المستخدم على فهم هيكل الصفحة بسهولة.
كتابة HTML دلالي صحيح (header, nav, main...) نفسه جزء أساسي من إمكانية الوصول.

💡

إمكانية الوصول مش بس للمكفوفين — بتفيد كمان مستخدمي لوحة المفاتيح فقط، وكبار السن، وحتى محركات البحث اللي بتفهم صفحتك بشكل أفضل.

📌 ملخص الدرس

alt وصف بديل ضروري لكل صورة ذات معنى
label مرتبط بـ input عبر for وid
ترتيب العناوين المنطقي جزء أساسي من إمكانية الوصول

⚠️ أخطاء شائعة

نسيان alt على الصور تمامًا، أو كتابة نص غير واصف زي "صورة1".
استخدام placeholder بدل label كوصف وحيد للحقل، وده غير كافٍ لإمكانية الوصول.
القفز من h1 مباشرة لـ h4 بدون h2 وh3.

✏️ تمرين

راجعي أي صفحة سابقة كتبتيها، وتأكدي إن كل صورة فيها alt واصف، وكل input له label مرتبط صح.

↩ الفهرس

الدرس 3535

HTML SEO Basics

SEO (Search Engine Optimization) يعني تحسين ظهور موقعك في نتائج البحث — وHTML الصحيح هو أول خطوة في الطريق ده.

seo.html

<title>كود ويز مصر — تعلمي البرمجة أونلاين</title>
<meta name="description" content="دورات HTML وCSS وJS مجانية للمبتدئين">
<h1>تعلّمي تطوير الويب من الصفر</h1>

نتيجة بحث جوجل

كود ويز مصر — تعلمي البرمجة أونلاين

example.com

دورات HTML وCSS وJS مجانية للمبتدئين

<title>: أهم عنصر لـ SEO — بيظهر كعنوان قابل للنقر في نتيجة البحث، لازم يكون وصفي وقصير ومختلف لكل صفحة.
meta description: الوصف اللي بيظهر تحت العنوان في نتائج البحث، بيأثر على قرار المستخدم بالضغط على نتيجتك.
headings (h1-h6): ترتيبها المنطقي بيساعد جوجل يفهم هيكل المحتوى وأولوياته.
Semantic HTML: الوسوم الدلالية (article, nav...) بتوضح لمحركات البحث نوع كل جزء من المحتوى.

💡

SEO مش بس كلمات مفتاحية — كتابة HTML نظيف ومنظم ودلالي هي نص المعركة، والنص التاني بيبقى محتوى مفيد فعلًا للقارئ.

📌 ملخص الدرس

title وmeta description أساس ظهور صفحتك في نتائج البحث
ترتيب headings المنطقي يساعد فهم المحتوى
Semantic HTML يوضّح نوع كل جزء لمحركات البحث

⚠️ أخطاء شائعة

استخدام نفس title لكل صفحات الموقع بدون تخصيص.
حشو meta description بكلمات مفتاحية عشوائية بدل جملة طبيعية وصفية.
إهمال ترتيب العناوين المنطقي مما يربك محركات البحث.

✏️ تمرين

اكتبي title ومeta description مناسبين لصفحة متجرك الإلكتروني (ميجا تك) بأسلوب جذاب ووصفي.

↩ الفهرس

الدرس 3636

Favicon

الأيقونة الصغيرة اللي بتشوفيها جنب عنوان التبويب في المتصفح — تفصيلة بسيطة لكنها بتديّ انطباع احترافي فورًا.

favicon.html

<head>
  <link rel="icon" type="image/png" href="favicon.png">
</head>

شكل التبويب

🟠 كود ويز مصر

الـ Favicon هي صورة صغيرة (عادة 16×16 أو 32×32 بكسل) بتمثل هوية موقعك في تبويب المتصفح، والمفضلة (Bookmarks)، ونتائج البحث أحيانًا.
بتضيفيها باستخدام وسم <link> جوه <head> مع rel="icon" وتحديد مسار الصورة في href.
الصيغ الشائعة: .ico (الأقدم والأكثر توافقًا) أو .png (أوضح جودة وأسهل تصميمًا).

💡

لو نسيتي تضيفي favicon، المتصفح هيعرض أيقونة افتراضية فاضية — تفصيلة صغيرة بس بتفرق كتير في الانطباع الاحترافي للموقع.

📌 ملخص الدرس

Favicon أيقونة صغيرة تمثل هوية الموقع في التبويب
تُضاف بوسم link مع rel="icon" جوه head
الصيغ الشائعة: .ico و.png

⚠️ أخطاء شائعة

وضع وسم link الخاص بالـ favicon خارج head بالخطأ.
استخدام صورة كبيرة جدًا الحجم بدل تصغيرها لأبعاد أيقونة مناسبة.
نسيان تحديد type بشكل صحيح لصيغة الصورة المستخدمة.

✏️ تمرين

أضيفي favicon مناسب لصفحة "كود ويز مصر" باستخدام صورة png بسيطة.

↩ الفهرس

الدرس 3737

HTML Validation

آخر خطوة قبل ما نودّع HTML خالص — إزاي تتأكدي إن كودك "صحيح" فعلًا حسب معايير الويب الرسمية.

invalid.html

<!-- كود به أخطاء -->
<p>فقرة بدون إغلاق
<img src="cat.jpg"> <!-- بدون alt -->

نتيجة الفحص

⚠️ أخطاء

وسم p غير مغلق
الصورة بدون alt

معنى كود صحيح (Valid HTML): كود ملتزم بقواعد HTML الرسمية — كل وسم مغلق صح، الترتيب منطقي، الخصائص المطلوبة موجودة.
أخطاء شائعة: نسيان إغلاق وسم، تعشيش وسوم بترتيب غلط (زي فتح b قبل i وإغلاق i قبل b)، نسيان alt للصور، تكرار id، أو نسيان DOCTYPE.
طرق الفحص: فيه أداة رسمية من W3C اسمها W3C Markup Validation Service بتفحصلك الكود وتقولك بالظبط فين الأخطاء وإزاي تصلحيها.

💡

كود صحيح (Valid) بيقلل احتمالية ظهور الصفحة بشكل غريب في متصفحات مختلفة، وبيحسّن SEO وإمكانية الوصول في نفس الوقت.

📌 ملخص الدرس

Valid HTML يعني الالتزام بقواعد HTML الرسمية
أشهر الأخطاء: وسوم غير مغلقة، alt مفقود، id مكرر
W3C Markup Validation Service أداة الفحص الرسمية

⚠️ أخطاء شائعة

تعشيش الوسوم بترتيب غلط (زي <b><i>نص</b></i>).
نسيان DOCTYPE في بداية الملف.
ترك أخطاء بسيطة تتراكم بدل تصليحها أول بأول.

✏️ تمرين

راجعي كود مشروع سابق كتبتيه وابحثي عن أي وسوم منسية بدون إغلاق أو صور بدون alt.

🚀 Challenge

اكتبي كود HTML فيه 3 أخطاء مقصودة، وبادليه مع زميلة عشان تكتشف الأخطاء وتصلحها.

↩ الفهرس

مشروع كامل + الحل

الحل الكامل لمشروع HTML الشامل

ده تنفيذ كامل لمهمة الدرس 17 (مشروع ميجا تك) — صفحة واحدة حقيقية تجمع كل وسوم HTML اللي اتعلمناها: header + nav، section بفقرة وقائمة خبرات، صورة بـ alt، جدول مقارنة أسعار، فورم طلب شراء كامل، وfooter.

💡

دي مش الحل "الوحيد الصحيح" — فيه طرق كتير تقدري ترتبي بيها نفس العناصر. المهم إنك تكوني قادرة تكتبي هيكل زي ده من غيري لا نسخ ولا نظر لأي درس سابق.

الكود الكامل

↩ الفهرس

مشروع كامل + الحل

الحل الكامل لمشروع HTML الشامل (تابع)

megatech-home.html

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>ميجا تك | الصفحة الرئيسية</title>
</head>
<body>

<header>
  <h1>ميجا تك</h1>
  <nav>
    <a href="#about">عن المتجر</a>
    <a href="#products">المنتجات</a>
    <a href="#order">اطلبي الآن</a>
  </nav>
</header>

<main>

  <section id="about">
    <h2>عن المتجر</h2>
    <p>ميجا تك متخصص في بيع أحدث الأجهزة الإلكترونية بضمان رسمي وخدمة عملاء تقدري تثقي فيها.</p>
    <h3>خبراتنا</h3>
    <ul>
      <li>اختيار الأجهزة المناسبة لكل ميزانية</li>
      <li>خدمة عملاء وضمان ما بعد البيع</li>
      <li>صيانة فنية للابتوبات والموبايلات</li>
    </ul>
  </section>

  <section id="products">
    <h2>منتجاتنا</h2>
    <img src="https://placehold.co/160x160/C1572F/ffffff?text=MegaTech" alt="شعار متجر ميجا تك" width="160">
    <table>
      <thead>
        <tr>
          <th>المنتج</th>
          <th>السعر</th>
          <th>الضمان</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>لابتوب برو X1</td>
          <td>18500 جنيه</td>
          <td>سنتان</td>
        </tr>
        <tr>
          <td>موبايل ذكي Z20</td>
          <td>12000 جنيه</td>
          <td>سنة واحدة</td>
        </tr>
        <tr>
          <td>سماعة لاسلكية AirSound</td>
          <td>1200 جنيه</td>
          <td>6 شهور</td>
        </tr>
      </tbody>
    </table>
  </section>

  <section id="order">
    <h2>اطلبي الآن</h2>
    <form>
      <label>الاسم</label>
      <input type="text" name="fullname" placeholder="اسمك بالكامل" required>

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

      <label>مدينة التوصيل</label>
      <select name="city">
        <option>القاهرة</option>
        <option>الإسكندرية</option>
        <option>المنصورة</option>
      </select>

      <label>طريقة الدفع</label>
      <input type="radio" name="payment" value="cod"> الدفع عند الاستلام
      <input type="radio" name="payment" value="card"> بطاقة ائتمان

      <label>ملاحظات على الطلب</label>
      <textarea rows="3" placeholder="أي تفاصيل إضافية؟"></textarea>

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

</main>

<footer>
  <p>© 2026 ميجا تك — كل الحقوق محفوظة</p>
  <a href="mailto:shop@megatech-eg.com">راسلينا: shop@megatech-eg.com</a>
</footer>

</body>
</html>

↩ الفهرس

مشروع كامل + الحل

الحل الكامل لمشروع HTML الشامل (تابع)

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

megatech-home.html

ميجا تك

عن المتجر

ميجا تك متخصص في بيع أحدث الأجهزة الإلكترونية بضمان رسمي وخدمة عملاء تقدري تثقي فيها.

خبراتنا

اختيار الأجهزة المناسبة لكل ميزانية
خدمة عملاء وضمان ما بعد البيع
صيانة فنية للابتوبات والموبايلات

منتجاتنا

المنتج	السعر	الضمان
لابتوب برو X1	18500 جنيه	سنتان
موبايل ذكي Z20	12000 جنيه	سنة واحدة
سماعة لاسلكية AirSound	1200 جنيه	6 شهور

اطلبي الآن

لاحظي إن الشكل ده "خام" تمامًا زي ما اتعلمنا — بلا ألوان ولا خطوط منسّقة ولا مسافات مريحة، لأن مفيش CSS اتضاف لسه.
كل عنصر ظهر بتنسيقه الافتراضي: الجدول من غير خطوط واضحة، الفورم متلاصق في سطر، والعناوين بحجمها الافتراضي بس.
ده بالظبط اللي CSS جاي يحلّه في الدروس الجاية — نفس الهيكل ده، لكن بشكل احترافي مريح للعين.

🚀 وسّعي المشروع بنفسك

أضيفي section رابع باسم "آراء العملاء" فيه رأي عميل واحد على الأقل.
أضيفي عمود "الكمية المتوفرة" في جدول المنتجات.
أضيفي checkbox للموافقة على شروط الشراء قبل زر الإرسال.

↩ الفهرس

تطبيق عملي

مشاريع تطبيقية

أفضل طريقة لترسيخ أي درس هي بناء شيء حقيقي به. المشاريع دي مدمجة بالفعل داخل بعض الدروس (13، 14، 15)، وده دليل بأفكار إضافية تقدري تنفّذيها بترتيب متصاعد في الصعوبة كل ما تتقدمي في المذكرة.

صفحة شخصية Portfolio

صفحة "عني" تعرّفي بيها نفسك ومهاراتك — أول مشروع بعد إنهاء دروس HTML الأساسية.

header/main/footerulimg + alt

صفحة مطعم

قائمة طعام معروضة كبطاقات (صورة + اسم + سعر)، مع فورم لحجز طاولة.

tableformdiv

صفحة متجر إلكتروني

عرض منتجات في شبكة بطاقات منسّقة بـ CSS Grid أو Flexbox، مع فورم طلب.

grid/flexboxformhover

↩ الفهرس

تطبيق عملي

مشاريع تطبيقية (تابع)

صفحة هبوط Landing Page

صفحة تسويقية لمنتج أو خدمة وهمية، بتصميم جذاب ومتجاوب بالكامل.

responsivemedia queryanimation

نموذج تسجيل دخول Login

فورم تسجيل دخول بحقلين (إيميل وكلمة سر) مع تنسيق أنيق وتأثير focus واضح.

form:focusbox model

نموذج إنشاء حساب Sign Up

فورم أشمل (اسم، إيميل، كلمة سر، تأكيد كلمة سر) مع تحقق أساسي بخصائص HTML مثل required وpattern.

formrequiredpattern

↩ الفهرس

تطبيق عملي

مشاريع تطبيقية (تابع)

★

مشروع التخرج: موقع متكامل

موقع متعدد الصفحات (أو صفحة واحدة بأقسام متعددة)، يجمع كل ما تعلمتِه: HTML منظم دلاليًا، جداول، فورم كامل، وسائط، وربط داخلي بين كل الصفحات.

HTMLSemanticمشروع شامل

🚀

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

↩ الفهرس

مشروع محلول

مشروع محلول: عيادة طبية

تطبيق كامل لصفحة عيادة الدكتورة سلمى حسن — استشارية طب أطفال — بتجمع بين الأقسام التعريفية، جدول الخدمات والمواعيد، وفورم حجز موعد متكامل.

fieldset/legendcolspanradio + checkboxtable captionmark/small

الكود الكامل

↩ الفهرس

مشروع محلول

مشروع محلول: عيادة طبية (تابع)

dr-salma-clinic.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>
</head>
<body>

<header>
  <h1>عيادة الدكتورة سلمى حسن</h1>
  <p>استشارية طب الأطفال وحديثي الولادة</p>
  <nav>
    <a href="#about">عن الدكتورة</a>
    <a href="#services">الخدمات</a>
    <a href="#hours">مواعيد العمل</a>
    <a href="#booking">احجزي موعد</a>
  </nav>
</header>

<main>

  <section id="about">
    <h2>عن الدكتورة</h2>
    <img src="https://placehold.co/140x140/6F8068/ffffff?text=Dr.Salma" alt="صورة الدكتورة سلمى حسن" width="140">
    <p><strong>د. سلمى حسن</strong> استشارية طب الأطفال وحديثي الولادة، خبرة أكتر من <mark>15 عامًا</mark> في متابعة نمو الأطفال وتطعيماتهم.</p>
    <h3>مجالات التخصص</h3>
    <ul>
      <li>متابعة نمو الأطفال من الولادة حتى 12 سنة</li>
      <li>جدول التطعيمات الإجباري والاختياري</li>
      <li>استشارات الرضاعة الطبيعية</li>
    </ul>
    <small>عضو نقابة الأطباء المصرية — رقم القيد 45210</small>
  </section>

  <section id="services">
    <h2>الخدمات والأسعار</h2>
    <table border="1">
      <caption>قائمة الكشف والخدمات</caption>
      <thead>
        <tr>
          <th>الخدمة</th>
          <th>السعر</th>
          <th>المدة التقريبية</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>كشف جديد</td>
          <td>300 جنيه</td>
          <td>30 دقيقة</td>
        </tr>
        <tr>
          <td>كشف متابعة (خلال 15 يوم)</td>
          <td>150 جنيه</td>
          <td>15 دقيقة</td>
        </tr>
        <tr>
          <td>تطعيم + متابعة نمو</td>
          <td>200 جنيه</td>
          <td>20 دقيقة</td>
        </tr>
      </tbody>
    </table>
  </section>

  <section id="hours">
    <h2>مواعيد العمل</h2>
    <table border="1">
      <thead>
        <tr><th>اليوم</th><th>الفترة الصباحية</th><th>الفترة المسائية</th></tr>
      </thead>
      <tbody>
        <tr><td>السبت — الخميس</td><td>10 ص — 1 م</td><td>5 م — 9 م</td></tr>
        <tr><td>الجمعة</td><td colspan="2">عطلة أسبوعية</td></tr>
      </tbody>
    </table>
  </section>

  <section id="booking">
    <h2>احجزي موعدك</h2>
    <form>
      <fieldset>
        <legend>بيانات ولي الأمر والطفل</legend>

        <label>اسم الطفل</label><br>
        <input type="text" name="childname" placeholder="اسم الطفل بالكامل" required><br>

        <label>رقم هاتف ولي الأمر</label><br>
        <input type="tel" name="phone" placeholder="01xxxxxxxxx" required><br>

        <label>تاريخ الميلاد</label><br>
        <input type="date" name="birthdate">
      </fieldset>

      <label>نوع الزيارة</label><br>
      <input type="radio" name="visit" value="new"> كشف جديد
      <input type="radio" name="visit" value="follow"> متابعة
      <input type="radio" name="visit" value="vaccine"> تطعيم<br>

      <label>التخصص المطلوب</label><br>
      <select name="dept">
        <option>متابعة نمو عامة</option>
        <option>تطعيمات</option>
        <option>استشارة رضاعة</option>
      </select><br>

      <label>وصف الأعراض (إن وجدت)</label><br>
      <textarea rows="3" placeholder="مثال: حرارة مرتفعة منذ يومين"></textarea><br>

      <input type="checkbox" name="reminder"> أوافق على إرسال تذكير بالموعد عبر رسالة نصية<br>

      <button type="submit">تأكيد الحجز</button>
    </form>
  </section>

</main>

<footer>
  <p>عيادة د. سلمى حسن — 12 شارع النصر، المنصورة</p>
  <a href="tel:0502234567">اتصلي: 0502234567</a>
  <a href="mailto:clinic@drsalma-eg.com">راسلينا: clinic@drsalma-eg.com</a>
</footer>

</body>
</html>

↩ الفهرس

مشروع محلول

مشروع محلول: عيادة طبية (تابع)

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

dr-salma-clinic.html

عيادة الدكتورة سلمى حسن

استشارية طب الأطفال وحديثي الولادة

عن الدكتورة

د. سلمى حسن استشارية طب الأطفال وحديثي الولادة، خبرة أكتر من 15 عامًا في متابعة نمو الأطفال وتطعيماتهم.

مجالات التخصص

متابعة نمو الأطفال من الولادة حتى 12 سنة
جدول التطعيمات الإجباري والاختياري
استشارات الرضاعة الطبيعية

عضو نقابة الأطباء المصرية — رقم القيد 45210

الخدمات والأسعار

قائمة الكشف والخدمات
الخدمة	السعر	المدة التقريبية
كشف جديد	300 جنيه	30 دقيقة
كشف متابعة (خلال 15 يوم)	150 جنيه	15 دقيقة
تطعيم + متابعة نمو	200 جنيه	20 دقيقة

مواعيد العمل

اليوم	الفترة الصباحية	الفترة المسائية
السبت — الخميس	10 ص — 1 م	5 م — 9 م
الجمعة	عطلة أسبوعية

احجزي موعدك

لاحظي استخدام fieldset وlegend لتجميع بيانات ولي الأمر والطفل في إطار واحد واضح داخل الفورم.
خاصية colspan="2" في جدول المواعيد دمجت خليتي الفترة الصباحية والمسائية في خلية واحدة تقول "عطلة أسبوعية" ليوم الجمعة.
استُخدم mark لتظليل مدة الخبرة، وsmall لعرض رقم القيد النقابي بخط أصغر كملاحظة جانبية.
نوع الزيارة اتعمل بـ radio لأنه اختيار واحد بس من بين 3، بعكس checkbox الموافقة على التذكير اللي ممكن تتفعّل أو لأ بشكل مستقل.

🚀 وسّعي المشروع بنفسك

أضيفي select ثاني لاختيار "الطبيب المفضل" لو العيادة فيها أكتر من دكتور.
أضيفي عمود رابع لجدول الخدمات باسم "يتطلب حجز مسبق" بقيمة نعم/لا.
لفّي قسم بيانات التواصل في الفوتر بـ address بدل p عادي، وابحثي عن الفرق الدلالي بينهم.

↩ الفهرس

مشروع محلول

مشروع محلول: بورتفوليو شخصي

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

articletarget="_blank"mailtoselectsmall/em

الكود الكامل

↩ الفهرس

مشروع محلول

مشروع محلول: بورتفوليو شخصي (تابع)

reem-portfolio.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>
</head>
<body>

<header>
  <h1>ريم كريم</h1>
  <p>مصممة واجهات مستخدم (UI/UX Designer)</p>
  <nav>
    <a href="#about">نبذة عني</a>
    <a href="#skills">المهارات</a>
    <a href="#work">أعمالي</a>
    <a href="#contact">تواصلي معايا</a>
  </nav>
</header>

<main>

  <section id="about">
    <h2>نبذة عني</h2>
    <img src="https://placehold.co/150x150/C1572F/ffffff?text=Reem" alt="صورة ريم كريم الشخصية" width="150">
    <p>مصممة واجهات مستخدم شغوفة بتحويل الأفكار المعقدة لتجارب بصرية بسيطة وسهلة الاستخدام. <em>متاحة حاليًا للعمل الحر (Freelance)</em>.</p>
    <small>خريجة كلية الحاسبات والمعلومات، جامعة المنصورة — 2025</small>
  </section>

  <section id="skills">
    <h2>المهارات</h2>
    <ul>
      <li>Figma و Adobe XD</li>
      <li>HTML و CSS من الصفر</li>
      <li>مبادئ تجربة المستخدم (UX Research)</li>
      <li>التصميم المتجاوب (Responsive Design)</li>
    </ul>
  </section>

  <section id="work">
    <h2>أعمالي المختارة</h2>

    <article>
      <h3>تطبيق توصيل طلبات "وصلني"</h3>
      <p>إعادة تصميم كاملة لتجربة الطلب من الصفر حتى الدفع، بتقليل عدد خطوات الطلب من 6 لـ 3 خطوات بس.</p>
      <a href="https://example.com/wasalny" target="_blank">شاهدي دراسة الحالة كاملة</a>
    </article>

    <article>
      <h3>موقع متجر "لمسة"</h3>
      <p>تصميم متجر إلكتروني لبيع مستلزمات المنزل، بهوية بصرية دافئة وبسيطة تناسب طبيعة المنتجات.</p>
      <a href="https://example.com/lamsa" target="_blank">شاهدي دراسة الحالة كاملة</a>
    </article>

    <article>
      <h3>تطبيق تتبع اللياقة "خطوة"</h3>
      <p>واجهة تتبع الخطوات والتمارين اليومية، مع لوحة إحصائيات بصرية سهلة القراءة بنظرة واحدة.</p>
      <a href="https://example.com/khatwa" target="_blank">شاهدي دراسة الحالة كاملة</a>
    </article>
  </section>

  <section id="contact">
    <h2>تواصلي معايا</h2>
    <form>
      <label>الاسم</label><br>
      <input type="text" name="name" placeholder="اسمك بالكامل" required><br>

      <label>البريد الإلكتروني</label><br>
      <input type="email" name="email" required><br>

      <label>موضوع الرسالة</label><br>
      <select name="subject">
        <option>عرض تعاون</option>
        <option>استفسار عن مشروع سابق</option>
        <option>أخرى</option>
      </select><br>

      <label>رسالتك</label><br>
      <textarea rows="4" placeholder="اكتبي تفاصيل طلبك هنا"></textarea><br>

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

    <h3>تابعيني على</h3>
    <ul>
      <li><a href="https://linkedin.com" target="_blank">LinkedIn</a></li>
      <li><a href="https://behance.net" target="_blank">Behance</a></li>
      <li><a href="mailto:reem.kareem@example.com">راسليني مباشرة</a></li>
    </ul>
  </section>

</main>

<footer>
  <p>© 2026 ريم كريم — كل الحقوق محفوظة</p>
</footer>

</body>
</html>

↩ الفهرس

مشروع محلول

مشروع محلول: بورتفوليو شخصي (تابع)

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

reem-portfolio.html

ريم كريم

مصممة واجهات مستخدم (UI/UX Designer)

نبذة عني

مصممة واجهات مستخدم شغوفة بتحويل الأفكار المعقدة لتجارب بصرية بسيطة وسهلة الاستخدام. متاحة حاليًا للعمل الحر (Freelance).

خريجة كلية الحاسبات والمعلومات، جامعة المنصورة — 2025

المهارات

Figma و Adobe XD
HTML و CSS من الصفر
مبادئ تجربة المستخدم (UX Research)
التصميم المتجاوب (Responsive Design)

أعمالي المختارة

تطبيق توصيل طلبات "وصلني"

إعادة تصميم كاملة لتجربة الطلب من الصفر حتى الدفع، بتقليل عدد خطوات الطلب من 6 لـ 3 خطوات بس.

شاهدي دراسة الحالة كاملة

موقع متجر "لمسة"

تصميم متجر إلكتروني لبيع مستلزمات المنزل، بهوية بصرية دافئة وبسيطة تناسب طبيعة المنتجات.

شاهدي دراسة الحالة كاملة

تطبيق تتبع اللياقة "خطوة"

واجهة تتبع الخطوات والتمارين اليومية، مع لوحة إحصائيات بصرية سهلة القراءة بنظرة واحدة.

شاهدي دراسة الحالة كاملة

تواصلي معايا

تابعيني على

كل مشروع في قسم "أعمالي" اتلف بوسم article لأنه محتوى مستقل بذاته، يصح نشره أو مشاركته لوحده بمعزل عن باقي الصفحة.
روابط "شاهدي دراسة الحالة" و"LinkedIn" و"Behance" استخدمت target="_blank" عشان تفتح في تبويب جديد ومتودّيش الزائر برا البورتفوليو بتاعك.
رابط "راسليني مباشرة" استخدم mailto: عشان يفتح تطبيق البريد جاهز بإيميلك مباشرة من غير ما الزائر يدور عليه.
لاحظي إن فورم التواصل هنا فيه select لتصنيف موضوع الرسالة، وده بيسهّل عليكِ فرز الرسائل الجاية لاحقًا حسب النوع.

🚀 وسّعي المشروع بنفسك

أضيفي وسم aside بجانب قسم أعمالك يعرض "إحصائية سريعة" زي عدد المشاريع المنجزة.
لفّي كل بيانات المشروع الشخصية (الاسم والمسمى الوظيفي) داخل header بوسم hgroup أو نظّميها بـ div وspan بدل النص المباشر.
أضيفي حقل input type="url" في فورم التواصل لطلب رابط موقع الزائر الشخصي (اختياري).

↩ الفهرس

مشروع محلول شامل

مشروع محلول: صفحة مؤتمر تقني

أشمل مشروع في هذه المجموعة — صفحة تسجيل لمؤتمر ويب مصر، مصمّمة عمدًا لتغطي أكبر عدد ممكن من كل وسوم وخصائص HTML اللي اتعلمناها في المذكرة كاملة.

colspan + rowspandl/dt/ddvideo + iframeكل أنواع inputsup + download

الكود الكامل

↩ الفهرس

مشروع محلول شامل

مشروع محلول: صفحة مؤتمر تقني (تابع)

webconf-egypt.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>مؤتمر ويب مصر 2026</title>
</head>
<body>

<header>
  <h1>مؤتمر ويب مصر <sup>2026</sup></h1>
  <p>يوم كامل لمطوري ومصممي الويب في مصر</p>
  <nav>
    <a href="#about">عن المؤتمر</a>
    <a href="#schedule">الجدول الزمني</a>
    <a href="#video">فيديو تعريفي</a>
    <a href="#faq">أسئلة شائعة</a>
    <a href="#register">سجّلي الآن</a>
  </nav>
</header>

<main>

  <section id="about">
    <h2>عن المؤتمر</h2>
    <p><strong>مؤتمر ويب مصر</strong> هو التجمع السنوي الأكبر لمطوري ومصممي الويب في مصر، بيجمع أكتر من <mark>500 مشارك</mark> من كل أنحاء البلد.</p>
    <hr>
    <h3>ليه تحضري؟</h3>
    <ul>
      <li>ورش عمل عملية في HTML وCSS وJavaScript</li>
      <li>لقاءات تواصل مع شركات توظيف كبرى</li>
      <li>شهادة حضور معتمدة</li>
    </ul>
    <small>الأماكن محدودة — التسجيل المبكر أرخص بنسبة 20%</small>
  </section>

  <section id="schedule">
    <h2>الجدول الزمني</h2>
    <table>
      <caption>برنامج اليوم الكامل</caption>
      <thead>
        <tr><th>الوقت</th><th>الجلسة</th><th>القاعة</th></tr>
      </thead>
      <tbody>
        <tr><td>9:00 ص</td><td colspan="2">التسجيل واستقبال الحضور</td></tr>
        <tr><td rowspan="2">10:00 ص</td><td>مقدمة في تطوير الويب الحديث</td><td>القاعة الرئيسية</td></tr>
        <tr><td>مبادئ تصميم واجهات المستخدم</td><td>قاعة B</td></tr>
        <tr><td>1:00 م</td><td colspan="2">استراحة غداء</td></tr>
      </tbody>
      <tfoot>
        <tr><td colspan="3">الجدول قابل للتعديل حسب عدد المتحدثين المؤكدين</td></tr>
      </tfoot>
    </table>
  </section>

  <section id="video">
    <h2>فيديو تعريفي</h2>
    <video width="320" height="180" controls>
      <source src="conference-intro.mp4" type="video/mp4">
      متصفحك لا يدعم عرض الفيديو.
    </video>
    <h3>موقع المؤتمر على الخريطة</h3>
    <iframe src="https://www.google.com/maps/embed?..." width="100%" height="200" allowfullscreen></iframe>
  </section>

  <section id="faq">
    <h2>أسئلة شائعة</h2>
    <dl>
      <dt>هل السعر يشمل الغداء؟</dt>
      <dd>نعم، سعر التذكرة يشمل وجبة غداء وقهوة طوال اليوم.</dd>
      <dt>هل فيه خصم للطلبة؟</dt>
      <dd>نعم، خصم 30% بعرض الكارنيه الجامعي عند التسجيل.</dd>
    </dl>
  </section>

  <section id="register">
    <h2>سجّلي الآن</h2>
    <form>
      <input type="hidden" name="event_id" value="webconf2026">

      <fieldset>
        <legend>البيانات الشخصية</legend>

        <label>الاسم بالكامل</label><br>
        <input type="text" name="fullname" required><br>

        <label>البريد الإلكتروني</label><br>
        <input type="email" name="email" required><br>

        <label>رقم الهاتف</label><br>
        <input type="tel" name="phone"><br>
      </fieldset>

      <label>نوع التذكرة</label><br>
      <select name="ticket">
        <option>عادية</option>
        <option>طالب/ة</option>
        <option>VIP</option>
      </select><br>

      <label>عدد سنوات الخبرة</label><br>
      <input type="range" name="experience" min="0" max="20" step="1"><br>

      <label>ارفعي صورة كارنيه الجامعة (للخصم الطلابي)</label><br>
      <input type="file" name="student_id" accept="image/*"><br>

      <input type="checkbox" name="terms" required> أوافق على الشروط والأحكام<br>
      <input type="checkbox" name="newsletter"> أرغب بالاشتراك في النشرة البريدية<br>

      <button type="submit">تأكيد التسجيل</button>
    </form>
  </section>

</main>

<footer>
  <p>© 2026 مؤتمر ويب مصر<sup>®</sup> — جميع الحقوق محفوظة</p>
  <a href="mailto:info@webconf-eg.com">راسلينا: info@webconf-eg.com</a>
  <a href="brochure.pdf" download>تحميل بروشور المؤتمر (PDF)</a>
  <p><small>الأسعار والمواعيد قابلة للتغيير دون إشعار مسبق.</small></p>
</footer>

</body>
</html>

↩ الفهرس

مشروع محلول شامل

مشروع محلول: صفحة مؤتمر تقني (تابع)

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

webconf-egypt.html

مؤتمر ويب مصر ²⁰²⁶

يوم كامل لمطوري ومصممي الويب في مصر

عن المؤتمر

مؤتمر ويب مصر هو التجمع السنوي الأكبر لمطوري ومصممي الويب في مصر، بيجمع أكتر من 500 مشارك من كل أنحاء البلد.

ليه تحضري؟

ورش عمل عملية في HTML وCSS وJavaScript
لقاءات تواصل مع شركات توظيف كبرى
شهادة حضور معتمدة

الأماكن محدودة — التسجيل المبكر أرخص بنسبة 20%

الجدول الزمني

برنامج اليوم الكامل
الوقت	الجلسة	القاعة
9:00 ص	التسجيل واستقبال الحضور
10:00 ص	مقدمة في تطوير الويب الحديث	القاعة الرئيسية
10:00 ص	مبادئ تصميم واجهات المستخدم	قاعة B
1:00 م	استراحة غداء
الجدول قابل للتعديل حسب عدد المتحدثين المؤكدين

فيديو تعريفي

▶ مشغل فيديو (320×180)

موقع المؤتمر على الخريطة

🗺️ إطار iframe لخريطة جوجل

أسئلة شائعة

هل السعر يشمل الغداء؟: نعم، سعر التذكرة يشمل وجبة غداء وقهوة طوال اليوم.
هل فيه خصم للطلبة؟: نعم، خصم 30% بعرض الكارنيه الجامعي عند التسجيل.

سجّلي الآن

المشروع ده مصمم عمدًا عشان يجمع أكبر عدد من وسوم HTML اللي اتعلمناها في الـ20 درس في سياق واحد منطقي: عناوين، نصوص، جداول بـ colspan وrowspan، وسائط، فورم بأنواع حقول متعددة، وعناصر دلالية كاملة.
جدول الجدول الزمني استخدم rowspan="2" على خلية "10:00 ص" لأنها بتخدم جلستين في نفس التوقيت لكن قاعتين مختلفتين، بعكس colspan اللي استُخدم لصفوف الاستراحات اللي بتاخد الصف كله.
قسم الأسئلة الشائعة استخدم dl وdt وdd لأنه بالظبط السيناريو المثالي ليها: مصطلح (سؤال) وتعريفه (إجابة) بشكل متكرر ومنظم.
الفورم فيه input type="hidden" بيحمل معرّف الفعالية بشكل غير ظاهر للزائر، وrange لسنوات الخبرة، وfile لرفع كارنيه الجامعة — تغطية شبه كاملة لأنواع input.
الفوتر فيه sup لعلامة ® بجانب اسم المؤتمر، وdownload لتحميل ملف PDF مباشرة، وsmall لملاحظة الأسعار القابلة للتغيير.

🚀 وسّعي المشروع بنفسك

أضيفي audio controls لتشغيل مقطع تشويقي صوتي عن المؤتمر بجانب الفيديو.
حوّلي جدول "الجدول الزمني" ليشمل يومين بدل يوم واحد، مع الانتباه لتصحيح قيم colspan/rowspan مع الصفوف الجديدة.
أضيفي حقل input type="color" وهمي لاختيار لون تيشرت المؤتمر المفضل عند التسجيل، وابحثي هل ده استخدام منطقي أم لا.