من أول وسم إلى بناء صفحة كاملة — بأسلوب مبسّط وأمثلة عملية
رحلتنا داخل لغة HTML خطوة بخطوة — اضغط على أي درس للانتقال إليه مباشرة
قبل أن نكتب أي سطر كود، من الضروري أن نفهم الصورة الكاملة: ما الذي نبنيه بالضبط؟ ولماذا يحتاج الموقع الواحد إلى ثلاث لغات مختلفة تعمل معًا؟
المبنى الكامل = HTML (الهيكل) + CSS (المظهر) + JavaScript (الحركة والتفاعل)
<div> <img src="photo.jpg"> <h2>أسماء محمد</h2> <p>مطورة ويب أولى</p> <button>تواصل معي</button> </div>
div { background: #fff; border-radius: 16px; padding: 24px; text-align: center; box-shadow: 0 8px 24px #0002; } button { background: #C1572F; color: white; border: none; padding: 10px 28px; border-radius: 30px; }
document.querySelector('button') .addEventListener('click', function() { alert('سيتم التواصل معك قريبًا!'); }); // أو: تغيير نص الزر مباشرة document.querySelector('button') .textContent = '✔ تم الإرسال';
في هذا الدرس هنفهم معنى HTML بأبسط شكل ممكن، ودورها الحقيقي في أي موقع تشوفه على الإنترنت.
<p> ومعناها "ابدأ فقرة". المتصفح (مثل Chrome) هو الذي يقرأ هذه الوسوم ويحوّلها إلى الشكل المرئي الذي تراه على الشاشة.كل صفحة HTML — بسيطة أو معقّدة — تبدأ من نفس الهيكل الأساسي الثابت. لنحفظه جيدًا.
<!-- 1. تعريف نوع المستند --> <!DOCTYPE html> <html lang="ar" dir="rtl"> <!-- 2. الرأس: معلومات غير ظاهرة --> <head> <meta charset="UTF-8"> <title>عنوان الصفحة</title> </head> <!-- 3. الجسم: المحتوى الظاهر --> <body> <h1>مرحبًا بالعالم</h1> </body> </html>
<!DOCTYPE html> سطر ثابت يكتب مرة واحدة في أول الملف، وهو يخبر المتصفح أن هذا مستند HTML5 حديث، فيقرأه بالطريقة الصحيحة.<html> هو "الصندوق الكبير" الذي يحتضن كل أجزاء الصفحة بدون استثناء.lang داخل <html> تحدد لغة المحتوى (مثل ar للعربية).dir داخل <html> تحدد اتجاه الكتابة: rtl للعربية، ltr للإنجليزية.<head> يحتوي معلومات لا تظهر للزائر مباشرة على الصفحة.<title> داخل head يحدد عنوان التبويب الظاهر في المتصفح.<meta charset="UTF-8"> داخل head يحدد ترميز الحروف ليظهر النص العربي بشكل صحيح.<body> هو المكان الوحيد الذي يظهر فعليًا للزائر؛ كل نص أو صورة أو زر تريد إظهاره يُكتب بداخله.<meta charset="UTF-8"> قد يجعل الحروف العربية تظهر بشكل مشوّه (رموز غريبة) في المتصفح.<html> أو <body> في النهاية.<h1> أو <p> داخل <head> بدل <body>.<!DOCTYPE html> في أول سطر، مما يجعل المتصفح يعرض الصفحة بطريقة غير متوقعة.كفاية قراءة! خلينا نطبّق فعليًا على جهازك خطوة بخطوة، ونشوف أول صفحة HTML بأعيننا في المتصفح.
my-website، ثم افتحه من داخل البرنامج عبر File > Open Folder.index.html — بحروف صغيرة، وبدون أي مسافات.Ctrl + S.index.html، كلمة index هي الاسم الذي اختاره أنت، أما .html فهو "الامتداد" الذي يخبر النظام والمتصفح أن هذا ملف HTML — لا تحذفه ولا تغيّره أبدًا.index.html له معنى خاص جدًا: المتصفحات وخوادم الاستضافة تتعامل معه تلقائيًا كـ "الصفحة الرئيسية" للموقع عند فتح المجلد مباشرة بدون كتابة اسم ملف.تعرفنا على charset و title بسرعة في الدرس الثاني، خلّينا نوسّع الصورة على باقي محتويات <head> المهمة.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="وصف قصير لمحتوى الصفحة"> <link rel="icon" href="favicon.ico"> <title>متجر الكتب الإلكتروني</title> </head>
viewport يضبط طريقة عرض صفحتك على الشاشات الصغيرة (الموبايل)؛ بدونه قد تظهر الصفحة مصغّرة جدًا وصعبة القراءة على الهاتف.description وصف قصير (حوالي 150 حرفًا) يظهر أسفل عنوان موقعك في نتائج بحث جوجل، ويساعد الزائر على تقرير الدخول لموقعك أو لا.favicon هي الأيقونة الصغيرة التي تظهر في تبويب المتصفح بجانب عنوان الصفحة، ونربطها بوسم <link rel="icon" href="...">.<title> ليس فقط اسم الصفحة الظاهر في التبويب، بل أيضًا أول نص قابل للضغط يظهر كعنوان في نتائج البحث — لذلك اختر عنوانًا واضحًا ومعبّرًا عن محتوى الصفحة.content في وسم meta.ثلاثة مصطلحات ستتكرر معك في كل درس قادم — لنفهمها بدقة وبأمثلة بسيطة من الآن.
<a href="https://example.com" target="_blank">زورونا</a>
<a>. غالبًا يأتي في زوج: وسم فاتح <a> ووسم غالق </a> يوضع قبله شرطة مائلة.name="value"، مثل href و target في المثال أعلاه. يمكن لوسم واحد أن يحمل أكثر من خاصية، يفصل بينها مسافة فقط.<br> و <img> و <hr>.alt=وصف بدل alt="وصف".</p>.أول لبنات بناء أي محتوى نصي: العناوين بمستوياتها الستة، والفقرات، والفواصل.
<h1>عنوان رئيسي</h1> <h2>عنوان فرعي</h2> <p>هذه فقرة عادية من النص.</p> <hr> <p>سطر أول<br>سطر ثانٍ</p>
<h1> (الأهم والأكبر) إلى <h6> (الأصغر) — تمامًا مثل عنوان مقال في جريدة (h1) وعناوينه الفرعية بداخله (h2، h3...). يُفضّل استخدام <h1> واحد فقط في كل صفحة.<p> تُستخدم لتجميع جملة أو أكثر في فقرة واحدة، ويضع المتصفح تلقائيًا مسافة فاصلة قبل وبعد كل فقرة.<br> ينقلك لسطر جديد بدون إنشاء فقرة جديدة، أي بدون أي مسافة فاصلة إضافية — يُستخدم مثلًا في كتابة عنوان بريدي على عدة أسطر.<hr> يرسم خطًا أفقيًا فاصلًا، يُستخدم بصريًا للفصل بين قسمين مختلفين من المحتوى.وسوم صغيرة تتحكم في شكل النص ودلالته داخل الفقرة الواحدة.
<strong>نص هام</strong> <em>نص مؤكَّد</em> <mark>نص مميَّز</mark> <u>نص تحته خط</u> ماء H<sub>2</sub>O
<strong> يعرض النص غامقًا، ويخبر المتصفح وقارئ الشاشة أن هذا المحتوى مهم فعلاً (دلالة معنوية).<b> يعرض النص غامقًا أيضًا، لكنه تنسيق بصري فقط بدون أي معنى إضافي.<em> يحمل دلالة "تأكيد على الكلمة" بخط مائل، ويفيد محركات البحث وقارئات الشاشة.<i> يعرض النص بخط مائل بصري فقط، بدون أي دلالة معنوية.<mark> يميّز النص بخلفية صفراء كقلم فسفوري.<small> يصغّر حجم النص.<del> يضع خطًا فوق نص محذوف.<ins> يسطّر نصًا مُضافًا حديثًا.<sub> يكتب النص أسفل السطر (مثل الرقم 2 في H2O).<sup> يكتب النص أعلى السطر (مثل الأس في المعادلات الرياضية).الرابط هو ما يجعل الويب "ويبًا" — القدرة على الانتقال من صفحة لأخرى بضغطة واحدة.
<a href="https://example.com">رابط خارجي</a> <a href="#lesson-1">انتقل للدرس الأول</a> <a href="mailto:info@site.com">راسلنا</a
href (Hypertext Reference) تحدد وجهة الرابط: عنوان صفحة، أو بريد إلكتروني بصيغة mailto:، أو رقم هاتف بصيغة tel:.target="_blank" يفتح الرابط في تبويب جديد مع بقاء صفحتك مفتوحة.target="_self" هو الافتراضي، ويفتح الرابط في نفس التبويب الحالي.# ينقّلك إلى عنصر آخر بنفس id داخل الصفحة الحالية نفسها، بدون الانتقال لصفحة جديدة.https://، وهي مفيدة للروابط الخارجية.about.html لأنه موجود بجانب صفحتك في نفس الموقع. الدرس القادم يشرح المسارات بالتفصيل.https:// فيتحوّل لرابط نسبي خاطئ.target="_blank" وtarget="_self".# عند الربط بعنصر داخل نفس الصفحة.وسم بسيط لكنه يحمل خاصية مهمة جدًا غالبًا ما يتم تجاهلها: alt.
<img src="images/cat.jpg" alt="قطة صغيرة بيضاء" width="200" >
src (Source) يحدد مصدر ملف الصورة — قد يكون مسارًا داخل جهازك مثل images/cat.jpg، أو رابطًا من الإنترنت.alt نص بديل وصفي يظهر إذا فشلت الصورة في التحميل لأي سبب، وتعتمد عليه قارئات الشاشة لوصف الصورة لذوي الإعاقة البصرية، وله دور أيضًا في ظهور صفحتك بشكل أفضل في نتائج البحث على جوجل.width تحدد عرض الصورة بالبكسل.height تحدد ارتفاع الصورة بالبكسل؛ من الأفضل تحديد width وheight معًا دائمًا حتى لا "تتحرك" عناصر الصفحة أثناء انتظار تحميل الصورة.jpg مناسبة للصور الفوتوغرافية العادية.png مناسبة للصور التي تحتاج خلفية شفافة.svg مناسبة للرسومات والأيقونات.webp صيغة حديثة بحجم أصغر وجودة قريبة من الصيغ السابقة.alt تُعتبر من أبرز أخطاء إمكانية الوصول (Accessibility) في تصميم المواقع — سنخصص لها درسًا كاملًا قريبًا.alt تمامًا.src (حالة الأحرف الكبيرة/الصغيرة أو فراغ في اسم الملف).width وheight فتتحرك عناصر الصفحة أثناء تحميل الصورة.من أكثر الأشياء التي تسبب ارتباكًا للمبتدئين: إزاي أوصل لملف صورة أو صفحة تانية بشكل صحيح؟ هذا الدرس يحل المشكلة نهائيًا.
my-website/
├── index.html
├── about.html
├── images/
│ └── photo.jpg
└── pages/
└── contact.html
photo.jpg بجانب index.html مباشرة، نكتب المسار بدون أي تعقيد: src="photo.jpg".images، نكتب من index.html: src="images/photo.jpg".pages/contact.html وعايزين نصل لصورة في مجلد images الموجود بجانب المجلد الأصلي، نكتب: src="../images/photo.jpg" — كل ../ تعني "اخرج من هذا المجلد درجة واحدة للخلف" قبل أن تكمل المسار.https://example.com/images/photo.jpg، ويُستخدم فقط للملفات الموجودة على موقع آخر خارجي.Photo.jpg تُعتبر ملفًا مختلفًا تمامًا عن photo.jpg على كثير من الأنظمة، فاحرص على كتابة الاسم بدقة كما هو محفوظ.ثلاثة أنواع من القوائم لتنظيم المعلومات بشكل واضح ومرتب.
<ul> <li>تفاح</li> <li>موز</li> </ul> <ol> <li>افتح المحرر</li> <li>اكتب الكود</li> </ol>
<ul> (Unordered List) قائمة بنقاط بدون ترتيب رقمي — استخدمها عندما لا يكون ترتيب العناصر مهمًا، مثل قائمة مشتريات.<ol> (Ordered List) قائمة مرتبة بأرقام تلقائية — استخدمها عندما يكون الترتيب مهمًا، مثل خطوات تنفيذ وصفة طعام. يمكن تغيير نقطة البداية بخاصية start.<li> (List Item).<dl> قائمة تعريفية مختلفة تمامًا عن ul وol، ومثالية لكتابة قاموس مصطلحات.<dt> يكتب المصطلح نفسه داخل القائمة التعريفية.<dd> يكتب تعريف المصطلح أسفل dt مباشرة.<li> من قائمة أخرى لإنشاء قوائم متداخلة (Nested Lists)، مثل قائمة فرعية تتبع لعنصر رئيسي.لعرض بيانات منظمة في صفوف وأعمدة — من جدول درجات إلى جدول مقارنة أسعار.
<table> <tr> <th>الاسم</th> <th>العمر</th> </tr> <tr> <td>سارة</td> <td>21</td> </tr> </table>
| الاسم | العمر |
|---|---|
| سارة | 21 |
<table> الحاوية الرئيسية للجدول كله.<tr> يمثل صفًا كاملًا في الجدول (Table Row).<th> خلية عنوان تظهر غامقة افتراضيًا.<td> خلية بيانات عادية.<thead> يحدد رأس الجدول، وهذا يسهّل التنسيق بـ CSS لاحقًا.<tbody> يحدد المحتوى الأساسي للجدول.<tfoot> يحدد تذييل الجدول.colspan يدمج عدة أعمدة متجاورة في خلية واحدة (مثل عنوان يمتد عبر الجدول).rowspan يدمج عدة صفوف متتالية في خلية واحدة.<caption> يضيف عنوانًا وصفيًا يظهر فوق الجدول بالكامل.<td> في صف الرأس بدل <th>.<tr> جديد لكل سطر بيانات.colspan (دمج أعمدة) وrowspan (دمج صفوف).كيف نقسّم صفحة كاملة إلى مناطق منظمة وواضحة المعنى لمحركات البحث وذوي الإعاقة؟
<div> فكّر فيه كصندوق كرتون عادي بدون أي لافتة عليه — حاوية عامة على مستوى الكتلة (Block) تُستخدم للتجميع والتنسيق، لكنها لا تخبر أحدًا بمحتواها.<span> نفس فكرة div تقريبًا، لكنه على مستوى السطر (Inline) — يُستخدم لتنسيق كلمة أو جزء صغير وسط الجملة دون قطع تسلسلها.<header> الترويسة، <nav> قائمة التنقل، <main> المحتوى الأساسي، <section> قسم منطقي، <article> محتوى مستقل بذاته كمقال، <aside> محتوى جانبي، <footer> التذييل.div يجعل محركات البحث تفهم بنية صفحتك بشكل أفضل، ويسهّل على مستخدمي قارئات الشاشة التنقل بسرعة بين أقسام الصفحة.HTML تبني الهيكل، لكنها تحتاج لرفيقين لتكتمل: CSS للمظهر، JavaScript للتفاعل.
<!-- 1. مباشر داخل الوسم --> <p style="color:red">نص</p> <!-- 2. داخلي في رأس الصفحة --> <style> p { color: red; } </style> <!-- 3. خارجي (الأفضل والأشهر) --> <link rel="stylesheet" href="style.css"> <!-- إضافة JavaScript قبل إغلاق body --> <script src="app.js"></script>
<script> غالبًا يوضع قبل إغلاق </body> ليُحمَّل بعد ظهور محتوى الصفحة، فلا يبطئ التحميل الأولي.<script> في بداية الصفحة فيبطّئ ظهور المحتوى.rel="stylesheet" عند ربط ملف CSS.خاصيتان تستخدمهما في كل صفحة تقريبًا، خصوصًا عند العمل مع CSS و JavaScript.
<h1 id="main-title">عنوان فريد</h1> <p class="highlight">فقرة مميزة 1</p> <p class="highlight">فقرة مميزة 2</p> <div id="box1" class="card active">...</div>
id معرّف فريد يُستخدم مرة واحدة فقط في الصفحة كلها لعنصر واحد بالتحديد، يفيد للانتقال السريع له بالرابط #id، أو لاستهدافه بدقة في CSS أو JavaScript.class اسم تصنيف يمكن تكراره على أي عدد من العناصر، ويُستخدم لتنسيق مجموعة عناصر بنفس الشكل دفعة واحدة عبر CSS.id للعنصر الفريد الوحيد من نوعه في الصفحة (مثل الهيدر الرئيسي)، واستخدم class لأي تصميم مشترك بين عدة عناصر.id واحد و أكثر من class في نفس الوقت، يفصل بين الأصناف مسافة: class="card active".label for مع id الحقل كما تعلمنا في درس النماذج — هذا أحد أهم تطبيقات id العملية.id لأكثر من عنصر في الصفحة (id يجب أن يكون فريدًا دومًا).class بفاصلة بدل مسافة عادية عند تعدد الأصناف.النماذج هي قلب التفاعل في الويب — من خلالها يكتب المستخدم بياناته ويرسلها. في هذا الدرس نتعلم كل عناصر النموذج بالتفصيل مع مثال لكل واحدة.
الحاوية الرئيسية التي تغلّف كل حقول الإدخال. بدونها لا يُرسل أي بيانات.
<!-- action: وجهة إرسال البيانات للسيرفر --> <!-- method: get (بيانات في الرابط) أو post (مخفية وأأمن) --> <!-- autocomplete: on/off لتفعيل/تعطيل الإكمال التلقائي --> <!-- target: _self أو _blank لتحديد أين يُفتح الرد --> <!-- novalidate: تعطيل التحقق التلقائي من صحة البيانات --> <!-- enctype: للفورمات اللي بترفع ملفات --> <form action="https://example.com/register" method="post" autocomplete="on" target="_self" enctype="multipart/form-data" > <!-- الحقول هنا --> </form>
action — يحدد الرابط اللي هتتبعت إليه البيانات لما المستخدم يضغط إرسال. لو متكتبتيش، ترسل للصفحة الحالية.method="get" — البيانات تظهر في شريط الرابط ?name=أسماء. مناسبة للبحث. method="post" — البيانات مخفية وأكثر أمانًا، للتسجيل وكلمات السر.autocomplete="on" — يسمح للمتصفح يقترح قيم سابقة. "off" يعطّل الاقتراح.target="_blank" — يفتح صفحة الرد في تاب جديد. "_self" في نفس التاب.novalidate — يعطّل تحقق HTML التلقائي من البيانات، بتستخدميه لما عايزة تتحكمي بالتحقق بـ JavaScript.enctype="multipart/form-data" — ضروري لو النموذج فيه input type="file" لرفع ملفات.<!-- طريقة 1: for + id --> <label for="email">البريد الإلكتروني</label> <input type="email" id="email" name="email"> <!-- طريقة 2: الحقل بداخل label مباشرة --> <label> الاسم <input type="text" name="name"> </label>
وسم واحد يتغير شكله ووظيفته كاملًا حسب خاصية type. سنشرح كل أنواعه في الدرس القادم بالتفصيل.
<label for="msg">رسالتك</label> <textarea id="msg" name="message" rows="5" cols="40" placeholder="اكتب رسالتك هنا..." ></textarea>
<label for="city">المحافظة</label> <select id="city" name="city"> <option value="">-- اختر --</option> <option value="cairo">القاهرة</option> <option value="alex" selected>الإسكندرية</option> <option value="mans">المنصورة</option> </select>
الإسكندرية محددة افتراضيًا بسبب selected
value في كل option هي القيمة اللي بتتبعت فعلًا، أما النص بين الوسمين فهو اللي بيظهر للمستخدم بس.selected على أي option تجعلها هي الاختيار الظاهر بشكل افتراضي لما بتفتح الصفحة.<label for="browser">المتصفح المفضل</label> <input type="text" id="browser" name="browser" list="browsers" > <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
✨ هذا المثال قابل للتجربة فعلًا!
datalist و select: في datalist المستخدم يقدر يكتب أي كلام حتى لو مش في القائمة، في select لازم يختار من الموجود فقط.list="id-datalist" في input بيطابق id الـ datalist.<!-- submit: يرسل النموذج (الافتراضي داخل form) --> <button type="submit">إرسال</button> <!-- reset: يمسح كل الحقول ويرجعها لقيمها الأصلية --> <button type="reset">مسح الكل</button> <!-- button: زر عادي لا يرسل ولا يمسح — يُستخدم مع JavaScript --> <button type="button">زر عادي</button>
<form> <fieldset> <legend>📋 بيانات شخصية</legend> <label for="fn">الاسم الأول</label> <input type="text" id="fn" name="first_name"> </fieldset> <fieldset> <legend>📞 بيانات التواصل</legend> <label for="ph">الهاتف</label> <input type="tel" id="ph" name="phone"> </fieldset> <button type="submit">إرسال</button> </form>
name في أي حقل — بدونه البيانات لا ترسل.for في label مع id الحقل.enctype بدون method="post" — الاتنين لازم يكونوا موجودين مع بعض لرفع الملفات.وسم input وحده يقدر يكون أكثر من 20 شكل مختلف! في هذا الدرس نشرح كل نوع مع مثال، ثم كل خاصية ممكنة بالتفصيل.
📝 حقول النصوص والبيانات
<!-- text: نص عادي --> <input type="text" name="username" placeholder="الاسم"> <!-- password: نص مخفي بنقاط --> <input type="password" name="pass" placeholder="كلمة السر"> <!-- email: يتحقق تلقائيًا من صيغة البريد --> <input type="email" name="email" placeholder="you@example.com"> <!-- number: أرقام فقط مع أسهم الزيادة والنقصان --> <input type="number" name="age" min="1" max="100"> <!-- tel: رقم هاتف (لا يتحقق من الصيغة بنفسه) --> <input type="tel" name="phone" placeholder="010xxxxxxxx"> <!-- url: يتحقق إن القيمة رابط صحيح --> <input type="url" name="website" placeholder="https://..."> <!-- search: مثل text لكن بيظهر زر x لمسح النص --> <input type="search" name="q" placeholder="ابحث...">
📅 التاريخ والوقت
<!-- date: منتقي تاريخ (يوم/شهر/سنة) --> <input type="date" name="birthday"> <!-- time: منتقي وقت (ساعة:دقيقة) --> <input type="time" name="meeting_time"> <!-- datetime-local: تاريخ + وقت معًا --> <input type="datetime-local" name="appointment"> <!-- month: شهر + سنة فقط --> <input type="month" name="start_month"> <!-- week: رقم الأسبوع + سنة --> <input type="week" name="work_week">
☑️ حقول الاختيار
<!-- radio: اختيار واحد من مجموعة، نفس name = مجموعة واحدة --> <label> <input type="radio" name="gender" value="male"> ذكر </label> <label> <input type="radio" name="gender" value="female" checked> أنثى </label> <!-- checkbox: اختيار متعدد --> <label> <input type="checkbox" name="html" value="html" checked> HTML </label> <label> <input type="checkbox" name="css" value="css"> CSS </label>
النوع (radio — اختار واحد)
المواد (checkbox — اختار أكثر)
🎨 ملفات وألوان ومنزلق
<!-- file: رفع ملف. استخدم accept لتحديد نوع الملف --> <input type="file" name="cv" accept=".pdf,.doc"> <!-- file multiple: رفع أكثر من ملف دفعة واحدة --> <input type="file" name="photos" accept="image/*" multiple> <!-- color: منتقي لون بصري --> <label for="clr">اختر لون المحفظة</label> <input type="color" id="clr" name="fav_color" value="#C1572F"> <!-- range: منزلق قيمة بين min و max --> <label for="vol">الصوت</label> <input type="range" id="vol" name="volume" min="0" max="100" step="10" value="50">
🔘 حقول الأزرار والبيانات الخفية
<!-- hidden: بيانات لا تظهر للمستخدم لكن تُرسل مع النموذج --> <input type="hidden" name="user_id" value="1024"> <!-- submit: زر إرسال (بديل button type=submit) --> <input type="submit" value="أرسل الآن"> <!-- reset: زر مسح الحقول --> <input type="reset" value="مسح الكل"> <!-- button: زر عادي بدون سلوك افتراضي --> <input type="button" value="اضغط هنا"> <!-- image: زر على شكل صورة --> <input type="image" src="send-btn.png" alt="إرسال">
🆔 الهوية والقيمة
<!-- type: نوع الحقل — الأهم على الإطلاق --> <!-- name: اسم البيانات اللي بترسل للسيرفر --> <!-- id: معرف فريد للربط مع label أو CSS/JS --> <!-- value: القيمة الابتدائية (أو المُرسَلة في radio/checkbox) --> <input type="text" name="city" id="city-field" value="المنصورة" >
🎯 تجربة المستخدم
<!-- placeholder: نص خافت يختفي عند الكتابة --> <input type="text" name="name" placeholder="مثال: أسماء موسى"> <!-- autofocus: الحقل ده يأخذ الفوكس أول ما الصفحة تفتح --> <input type="search" name="q" autofocus> <!-- autocomplete: on يسمح بالاقتراح، off يمنعه --> <input type="password" name="pass" autocomplete="off"> <!-- size: عرض الحقل بعدد الحروف (تقريبًا) --> <input type="text" name="code" size="6" placeholder="OTP">
✅ التحقق من البيانات (Validation)
<!-- required: لازم تُملأ، وإلا النموذج مايتبعتش --> <input type="email" name="email" required> <!-- maxlength / minlength: حد أقصى وأدنى لعدد الحروف --> <input type="text" name="user" minlength="3" maxlength="20"> <!-- min / max: حد أقصى وأدنى للقيمة الرقمية أو التاريخ --> <input type="number" name="age" min="18" max="60"> <input type="date" name="dob" min="1980-01-01" max="2010-12-31"> <!-- step: الخطوة عند الزيادة/النقص في number أو range --> <input type="number" name="price" min="0" step="50"> <!-- pattern: نمط regex يجب أن تطابقه القيمة --> <input type="text" name="phone" pattern="[0-9]{11}" title="أدخل 11 رقم">
🔒 حالة الحقل
<!-- readonly: تقدر تشوف القيمة بس متقدرش تعدلها. القيمة بتترسل مع النموذج --> <input type="text" name="country" value="مصر" readonly> <!-- disabled: الحقل معطّل بالكامل. لا يمكن التفاعل معه و لا يُرسل مع النموذج --> <input type="text" name="promo" value="SAVE10" disabled> <!-- checked: radio أو checkbox محدد تلقائيًا --> <input type="checkbox" name="agree" checked> أوافق على الشروط <!-- multiple: اختيار أكثر من ملف أو email --> <input type="file" name="docs" multiple>
readonly — يظهر طبيعي لكن لا يتعدل:
disabled — يظهر رمادي ومعطّل:
🖼️ خصائص الصور والربط
<!-- src و alt: للاستخدام مع type="image" فقط --> <input type="image" src="submit-btn.png" alt="زر الإرسال" width="120" height="40"> <!-- accept: أنواع الملفات المسموحة في type="file" --> <input type="file" name="img" accept="image/png, image/jpeg"> <input type="file" name="doc" accept=".pdf,.docx"> <!-- list: يربط input بـ datalist عبر id --> <input type="text" name="tool" list="tools-list"> <datalist id="tools-list"> <option value="VS Code"><option value="Sublime"> </datalist>
<form action="/register" method="post" enctype="multipart/form-data"> <fieldset> <legend>البيانات الشخصية</legend> <label for="fname">الاسم الكامل *</label> <input type="text" id="fname" name="full_name" placeholder="أسماء موسى" minlength="4" maxlength="60" required autofocus> <label for="femail">البريد الإلكتروني *</label> <input type="email" id="femail" name="email" placeholder="you@example.com" autocomplete="email" required> <label for="fpass">كلمة المرور *</label> <input type="password" id="fpass" name="password" minlength="8" pattern="(?=.*[A-Za-z])(?=.*[0-9]).{8,}" title="8 أحرف على الأقل تشمل رقم وحرف" autocomplete="new-password" required> </fieldset> <fieldset> <legend>بيانات إضافية</legend> <label for="fphone">رقم الهاتف</label> <input type="tel" id="fphone" name="phone" placeholder="010xxxxxxxx" pattern="[0-9]{11}" title="أدخل 11 رقم"> <label for="fdate">تاريخ الميلاد</label> <input type="date" id="fdate" name="birthday" min="1970-01-01" max="2010-12-31"> <label for="fcity">المحافظة</label> <select id="fcity" name="city"> <option value="">-- اختر --</option> <option value="cairo">القاهرة</option> <option value="mans" selected>المنصورة</option> </select> <label for="fbio">نبذة عنك</label> <textarea id="fbio" name="bio" rows="4" maxlength="300" placeholder="أخبرنا عن نفسك..."></textarea> <label for="favatar">صورة الملف الشخصي</label> <input type="file" id="favatar" name="avatar" accept="image/*"> <label> <input type="checkbox" name="agree" value="yes" required> أوافق على الشروط والأحكام * </label> <!-- hidden: نرسل رقم النسخة في الخلفية --> <input type="hidden" name="form_version" value="2.0"> </fieldset> <button type="submit">إنشاء الحساب</button> <button type="reset">مسح الكل</button> </form>
name — هيسمح بتحديد أكثر من واحد بدل واحد بس.checked على radio بدون value — القيمة المرسلة هتكون "on" بدل القيمة الحقيقية.readonly بدل disabled وانتِ مش عايزة القيمة ترسل — readonly بيرسل القيمة.enctype="multipart/form-data" مع رفع الملفات — الملف مش هيتبعت.تضمين صوت، فيديو، أو حتى صفحة كاملة من موقع آخر داخل صفحتك.
<video controls width="300"> <source src="movie.mp4"> </video> <audio controls> <source src="song.mp3"> </audio> <iframe src="https://..."></iframe>
<video> و <audio>: خاصية controls ضرورية لإظهار أزرار تشغيل/إيقاف/مستوى الصوت للمستخدم، وبدونها لن يستطيع التحكم في التشغيل.<source> بداخلهما يحدد مصدر الملف، ويمكن وضع أكثر من <source> بصيغ مختلفة (مثل mp4 و webm) ليختار المتصفح الصيغة التي يدعمها.<iframe> يُضمّن صفحة كاملة من مصدر خارجي بداخل صفحتك، تمامًا كنافذة داخل نافذة — يُستخدم كثيرًا لتضمين فيديوهات يوتيوب أو خرائط جوجل مباشرة بدون مغادرة موقعك.<video></video> ليظهر فقط كرسالة احتياطية إذا كان متصفح الزائر قديمًا ولا يدعم تشغيل الفيديو.كيف نعرض رمزًا محجوزًا مثل < داخل الصفحة؟ وكيف نكتب ملاحظات لا تظهر للزائر؟
<!-- تعليق هنا -->، والمتصفح يتجاهلها تمامًا ولا يعرضها في الصفحة أبدًا — فائدتها فقط لتذكير نفسك أو زميلك بسبب كتابة جزء معيّن من الكود.< أو > مباشرة كنص عادي، سيظنّها المتصفح بداية أو نهاية وسم جديد ويتعامل معها كجزء من الكود لا كنص! لهذا نستخدم بدلًا منها "رموز خاصة" (Entities) تبدأ بـ & وتنتهي بـ ;، والجدول التالي يوضح أشهرها:| الرمز المكتوب | يظهر في الصفحة | الاستخدام |
|---|---|---|
| < | < | علامة أصغر من |
| > | > | علامة أكبر من |
| & | & | علامة العطف |
| " | " | علامة تنصيص |
| | مسافة | مسافة غير قابلة للكسر |
<!-- هذا تعليق لن يظهر في الصفحة، يستخدم للتوضيح فقط --> <p>السعر أقل من < 100 جنيه</p>
< بدل < مباشرة، لأن المتصفح كان سيظنّها بداية وسم جديد لو كتبناها كما هي.وسوم صغيرة لكنها تفيدك كثيرًا عند كتابة محتوى تقني أو نصوص منسقة.
<blockquote>هذا اقتباس طويل من مصدر آخر.</blockquote> <p>استخدم <code>console.log()</code> للطباعة.</p> <p>اضغط <kbd>Ctrl</kbd> + <kbd>S</kbd> للحفظ.</p> <abbr title="HyperText Markup Language">HTML</abbr
هذا اقتباس طويل من مصدر آخر.
console.log() للطباعة.<blockquote> لاقتباس فقرة كاملة من مصدر خارجي، ويعرضها المتصفح غالبًا بهامش مائل عن باقي النص.<q> لاقتباس قصير داخل سطر، ويضيف المتصفح علامات تنصيص تلقائيًا حوله.<code> لعرض كلمة أو سطر برمجي مضمّن داخل النص بخط مختلف (مثل اسم دالة)، و <pre> يحافظ على كل المسافات والأسطر كما كتبتها بالضبط — يُستخدمان معًا غالبًا لعرض كتلة كود كاملة.<kbd> لعرض مفتاح أو اختصار لوحة مفاتيح بشكل مميز يشبه الزر الحقيقي.<abbr> لعرض اختصار مع شرح كامل يظهر عند تمرير الماوس فوقه عبر خاصية title.<time> لتمييز تاريخ أو وقت بصيغة يفهمها المتصفح ومحركات البحث عبر خاصية datetime، مثل: <time datetime="2026-06-24">24 يونيو 2026</time>.الطريقة الصحيحة لعرض صورة مع وصف أو تعليق توضيحي مرتبط بها فعليًا.
<figure> <img src="chart.png" alt="رسم بياني للمبيعات" width="200"> <figcaption>الشكل 1: نمو المبيعات خلال 2026</figcaption> </figure>
<figure> حاوية تجمع صورة (أو فيديو أو رسم) مع وصفها في وحدة واحدة مرتبطة منطقيًا ببعضها.<figcaption> هو التعليق التوضيحي نفسه، ويمكن وضعه قبل الصورة أو بعدها بداخل figure.figure يخبر المتصفح ومحركات البحث أن هذا النص "يصف" هذه الصورة بالتحديد، وهذا غير مضمون أبدًا لو استخدمت فقرة عادية بجانب الصورة بدون ربط حقيقي بينهما.كتابة كود يقدر أي شخص يستخدمه ويفهمه، حتى لو كان يعتمد على قارئ شاشة أو لا يميّز الألوان بوضوح.
h1 ثم h2 ثم h3) بدون تخطي مستوى، حتى يفهم قارئ الشاشة هيكل صفحتك بسهولة وسرعة.<label> لكل حقل إدخال دائمًا، ولا تعتمد على placeholder وحده كوصف للحقل، لأنه يختفي بمجرد أن يبدأ المستخدم في الكتابة.alt لكل صورة بوصف حقيقي ومفيد، واتركه فراغًا alt="" فقط للصور الزخرفية البحتة التي لا تحمل معنى مهمًا للمحتوى.<button> للأزرار الحقيقية القابلة للضغط، لا <div> منسّق ليبدو كزر — لأن قارئ الشاشة يتعرف على button تلقائيًا كعنصر تفاعلي قابل للضغط، بعكس div العادي.الفرق بين مبرمج مبتدئ ومحترف غالبًا في تفاصيل صغيرة كهذه.
UTF-8 دائمًا، خصوصًا مع المحتوى العربي.<div> العشوائي، واستخدم id و class بحكمة كما تعلمنا.alt لكل صورة دون استثناء، وطبّق مبادئ إمكانية الوصول التي تعلمناها.css/, js/, images/، واستخدم المسارات الصحيحة بينها.قبل المشاريع النهائية، لازم تفهم فكرتين أساسيتين تفسّرا سلوك أي وسم تكتبه.
<div>، <p>، <h1>-<h6>، <ul>، <table>، <section>.<span>، <a>، <strong>، <em>، <img>.<header> رأس الصفحة، <nav> قائمة التنقل، <main> المحتوى الرئيسي، <section> قسم مستقل بموضوع واحد، <article> محتوى قائم بذاته (مقال/منشور)، <aside> محتوى جانبي، <footer> تذييل الصفحة.<div> العشوائي يجعل كودك أوضح لك ولفريقك، ويفهمه محرك البحث وقارئ الشاشة بشكل أدق دون أي تأثير على الشكل النهائي.أفضل طريقة لترسيخ أي درس هي بناء شيء حقيقي به — نفّذ المشاريع التالية بترتيبها
كل درس في بطاقة — وكل خاصية في سطر لوحدها مع شرحها. راجعها بالترتيب قبل حل الأسئلة.
< > مثل <p> — المتصفح يقرأها ويحوّلها للشكل المرئي.<!DOCTYPE html> — سطر ثابت في أول الملف، يخبر المتصفح أن الصفحة HTML5 حديثة.<html> — الصندوق الكبير الذي يحتضن كل أجزاء الصفحة بدون استثناء.lang="ar" داخل <html> — تحدد لغة المحتوى للمتصفح ومحركات البحث.dir="rtl" داخل <html> — تحدد اتجاه الكتابة: rtl للعربية، ltr للإنجليزية.<head> — يحتوي معلومات غير ظاهرة للزائر مثل العنوان والتنسيق والوصف.<body> — يحتوي كل المحتوى الظاهر فعليًا للزائر في الصفحة.<title> داخل head — يظهر كعنوان التبويب في المتصفح (مش داخل الصفحة نفسها).<meta charset="UTF-8"> — يضمن عرض الحروف العربية والخاصة بشكل صحيح..html — مثلاً index.html أو about.html.index.html — المتصفح يفتحه تلقائيًا لو فتحت المجلد مباشرة.<meta charset="UTF-8"> — يضمن ظهور العربية وكل الرموز الخاصة بشكل صحيح.<meta name="viewport" content="width=device-width, initial-scale=1.0"> — يجعل الصفحة متجاوبة مع شاشات الموبايل.<meta name="description" content="..."> — وصف الصفحة الذي يظهر في نتائج Google (مهم للسيو).<meta name="author" content="..."> — اسم صاحب الصفحة أو الموقع.<link rel="icon" href="logo.png"> — يضع أيقونة (favicon) في تبويب المتصفح بجانب العنوان.<head> فقط وليس داخل <body>.< > — مثل <p> هو وسم فتح، و</p> وسم إغلاق.href وsrc وalt.<img> و<br> و<meta>.<h1> — العنوان الرئيسي الأكبر، يُستخدم مرة واحدة فقط في الصفحة.<h2> — عناوين الأقسام الرئيسية داخل الصفحة.<h3> إلى <h6> — عناوين فرعية بترتيب هرمي تنازلي في الأهمية والحجم.<p> — فقرة نصية كاملة، المتصفح يضع مسافة تلقائيًا قبلها وبعدها.<br> — سطر جديد داخل نفس الفقرة (لا تحتاج وسم إغلاق).<hr> — خط أفقي فاصل بين الأقسام (لا تحتاج وسم إغلاق).<strong> — تغميق النص مع تأكيد دلالي (أهمية عالية) — يُفضَّل على <b>.<em> — تمييز النص بمائل مع تأكيد دلالي (تشديد) — يُفضَّل على <i>.<mark> — تظليل النص بلون أصفر كالماركر، للإبراز البصري.<del> — نص مشطوب عليه خط أفقي، يعني "محذوف أو قديم".<ins> — نص تحته خط، يعني "مضاف أو جديد".<sub> — نص صغير تحت السطر، مثل الصيغ الكيميائية H2O.<sup> — نص صغير فوق السطر، مثل الأسس الرياضية X2.<small> — نص أصغر من الاعتيادي، يُستخدم للملاحظات والحقوق.<a> — وسم الرابط، كل نص أو صورة بداخله تصبح قابلة للضغط.href="..." — الخاصية الإلزامية التي تحدد الوجهة (URL أو ملف أو قسم).target="_blank" — يفتح الرابط في تبويب جديد بدلًا من نفس الصفحة.href="mailto:email@example.com" — يفتح برنامج البريد الإلكتروني مباشرة.href="tel:+201234567890" — يفتح تطبيق الاتصال على الموبايل مباشرة.href="#id-name" — رابط داخلي ينقل للقسم الذي يحمل هذا الـ id في نفس الصفحة.href="#" — رابط وهمي لا ينقل لأي مكان، يُستخدم مؤقتًا أثناء التطوير.<img> — وسم الصورة، لا يحتاج وسم إغلاق (ذاتي الإغلاق).src="..." — إلزامي، مسار الصورة أو رابطها من الإنترنت.alt="..." — إلزامي، نص بديل يظهر لو فشل تحميل الصورة أو لقارئ الشاشة.width="..." — يحدد عرض الصورة بالبكسل أو نسبة مئوية.height="..." — يحدد ارتفاع الصورة، يُفضَّل تحديده مع العرض لتجنب القفز أثناء التحميل.loading="lazy" — تأجيل تحميل الصورة لحين ظهورها في الشاشة (يسرّع الموقع).alt="" — لا تحذف الخاصية كلها.images/photo.jpg (نفس المجلد)../ — يعني "ابحث في نفس مجلد الملف الحالي".../ — يعني "اصعد مجلدًا للأعلى"، مثل ../images/logo.png.https://.Photo.jpg غير photo.jpg.-.<ul> — قائمة غير مرتبة (نقاط)، العناصر بداخلها بنفس الأهمية.<ol> — قائمة مرتبة (أرقام أو حروف)، ترتيب العناصر مهم.<li> — عنصر القائمة، يُستخدم داخل ul أو ol.<dl> — قائمة وصفية، تحتوي مصطلح وتعريفه معًا.<dt> — المصطلح أو الكلمة المُعرَّفة داخل <dl>.<dd> — تعريف المصطلح أو شرحه داخل <dl>.ul أو ol داخل li لإنشاء قائمة فرعية.<table> — الحاوية الرئيسية لكل الجدول.<caption> — عنوان الجدول التوضيحي، يُكتب مباشرة بعد <table>.<thead> — صف (أو أكثر) رأس الجدول، يُميّزه المتصفح دلاليًا.<tbody> — جسم الجدول الذي يحتوي بيانات المحتوى الرئيسي.<tfoot> — تذييل الجدول، يُستخدم للإجماليات والملاحظات.<tr> — صف كامل داخل الجدول (Table Row).<th> — خلية رأس (Header) — نصها بالغامق ومتوسّط تلقائيًا.<td> — خلية بيانات عادية داخل الصف (Table Data).colspan="2" — دمج عدد من الأعمدة أفقيًا داخل خلية واحدة.rowspan="2" — دمج عدد من الصفوف عموديًا داخل خلية واحدة.<div> — حاوية عامة لتجميع عناصر، بلا معنى دلالي، يُستخدم للتنسيق.<span> — حاوية inline داخل السطر لتنسيق جزء صغير من النص بلا كسر للسطر.<header> — رأس الصفحة أو القسم، يحتوي الشعار والتنقل الرئيسي.<nav> — قائمة التنقل الرئيسية بين صفحات أو أقسام الموقع.<main> — المحتوى الرئيسي الفريد للصفحة، مرة واحدة فقط في كل صفحة.<section> — قسم مستقل من الصفحة بموضوع واحد، له عنوان خاص.<article> — محتوى مستقل قائم بذاته (مقال أو منشور أو خبر).<aside> — محتوى جانبي مكمّل وليس أساسيًا مثل الإعلانات أو الروابط ذات الصلة.<footer> — تذييل الصفحة أو القسم، يحتوي حقوق النشر وبيانات التواصل.<link rel="stylesheet" href="style.css"> — يربط ملف CSS خارجي، يُكتب داخل <head>.<style>...</style> — كتابة CSS مباشرة داخل الصفحة في <head> (للاستخدام المؤقت).style="..." — CSS مضمّن على العنصر نفسه، أقل استخدامًا ويصعب صيانته.<script src="app.js"></script> — يربط ملف JavaScript خارجي.<body> قبل </body> مباشرة لتحميل المحتوى أولًا.defer في وسم script — يؤخر تنفيذه لحين اكتمال تحميل الصفحة إن وُضع في head.id="اسم" — معرّف فريد، يُستخدم لعنصر واحد فقط في كل الصفحة.class="اسم" — يمكن تكراره على عناصر متعددة، وعنصر واحد يمكن أن يحمل أكثر من class.#اسم، ونستهدف class بـ .اسم.href="#section1" ينقل للعنصر الذي عنده id="section1".class="card active highlight" بمسافة بين كل كلاس.- أو _ للفصل.<form> — الحاوية الرئيسية لكل عناصر النموذج.action="..." في form — رابط الصفحة أو السيرفر الذي يستقبل البيانات عند الإرسال.method="get" — يُرسل البيانات في رابط URL (ظاهرة، مناسبة للبحث).method="post" — يُرسل البيانات في جسم الطلب (مخفية، مناسبة للنماذج الحساسة).<label for="id"> — نص توضيحي مرتبط بحقل معيّن عبر خاصية for.<input> — حقل إدخال، نوعه يتحكم في شكله وعمله عبر خاصية type.<textarea> — منطقة نص كبيرة متعددة الأسطر للتعليقات أو الرسائل.<select> + <option> — قائمة منسدلة، كل خيار هو option بداخلها.<fieldset> — يجمع حقولًا ذات صلة داخل إطار مرئي.<legend> — عنوان الـ fieldset يظهر فوق الإطار.<datalist> — قائمة اقتراحات تظهر أثناء الكتابة في حقل نصي.<button type="submit"> — زر الإرسال، يرسل بيانات النموذج.<button type="reset"> — يمسح كل البيانات في النموذج.type="text" — حقل نصي عادي لأي نص.type="email" — يتحقق تلقائيًا من صيغة البريد الإلكتروني.type="password" — يخفي النص المكتوب بنقاط.type="number" — يقبل أرقامًا فقط مع أسهم للزيادة والإنقاص.type="tel" — لأرقام الهاتف، يفتح لوحة أرقام على الموبايل.type="url" — يتحقق من صيغة الرابط تلقائيًا.type="date" — يعرض منتقي تاريخ بصري.type="time" — يعرض منتقي وقت.type="datetime-local" — تاريخ ووقت معًا.type="checkbox" — مربع تحديد، يمكن تحديد أكثر من خيار.type="radio" — زر اختيار، لا يمكن اختيار أكثر من واحد من نفس الـ name.type="file" — يفتح مستعرض الملفات لرفع ملف.type="color" — يعرض منتقي ألوان بصري.type="range" — شريط تمرير بين قيمة دنيا وعظمى.type="hidden" — حقل غير ظاهر، يُرسل قيمة خفية مع النموذج.type="search" — حقل بحث مع زر مسح تلقائي.required — الحقل إلزامي، لا يُرسل النموذج إلا بعد ملئه.placeholder="..." — نص توضيحي يظهر داخل الحقل الفارغ.value="..." — قيمة افتراضية مملوءة مسبقًا في الحقل.min="..." max="..." — الحد الأدنى والأقصى للأرقام والتواريخ.minlength="..." maxlength="..." — الحد الأدنى والأقصى لعدد الأحرف.pattern="..." — نمط Regex يجب أن يطابقه المدخل.disabled — يُعطّل الحقل، لا يمكن تعديله ولا إرسال قيمته.readonly — يجعل الحقل للقراءة فقط لكن قيمته تُرسل مع النموذج.checked — يجعل checkbox أو radio محددًا بشكل افتراضي.multiple — يسمح باختيار أكثر من ملف أو بريد في نفس الحقل.autocomplete="off" — يمنع المتصفح من اقتراح قيم سابقة.<video> — وسم تضمين الفيديو داخل الصفحة مباشرة.<audio> — وسم تضمين ملف صوتي داخل الصفحة.controls — إلزامي لعرض أزرار تشغيل / إيقاف / مستوى الصوت للمستخدم.autoplay — يبدأ التشغيل تلقائيًا عند فتح الصفحة (تجنّبه مع الصوت لأنه مزعج).loop — يعيد التشغيل تلقائيًا بعد الانتهاء.muted — يكتم الصوت تلقائيًا عند التشغيل.poster="..." داخل video — صورة تظهر قبل بدء تشغيل الفيديو.<source src="..." type="video/mp4"> — يحدد مصدر الملف وصيغته.<iframe src="..."> — يُضمّن صفحة كاملة من موقع آخر (يوتيوب، خرائط).width و height داخل iframe — تحدد أبعاد الإطار المضمّن.allowfullscreen في iframe — يسمح للمستخدم بالتكبير للشاشة الكاملة.<!-- تعليق --> — لا يظهر للزائر، فائدته فقط للمبرمج لشرح الكود.< — يعرض علامة < كنص عادي بدون تفسيرها كوسم.> — يعرض علامة > كنص عادي.& — يعرض علامة & كنص عادي." — يعرض علامة التنصيص " داخل قيمة خاصية.' — يعرض علامة الفاصلة المفردة '. — مسافة غير قابلة للكسر، تمنع المتصفح من التفاف النص عندها.© — رمز حقوق النشر ©.® — رمز العلامة التجارية المسجّلة ®.& وتنتهي بـ ;.<code> — عرض جزء كود مضمّن داخل سطر نصي بخط monospace.<pre> — يحافظ على كل المسافات والأسطر كما كُتبت، يُستخدم لعرض أكواد متعددة الأسطر.<pre><code> — الأفضل لعرض كتلة كود كاملة مع الحفاظ على تنسيقها.<blockquote> — اقتباس طويل من مصدر آخر، المتصفح يضع مسافة بادئة تلقائيًا.cite="..." داخل blockquote — رابط المصدر الأصلي للاقتباس.<q> — اقتباس قصير مضمّن داخل السطر، المتصفح يضع حوله علامات تنصيص تلقائيًا.<kbd> — يعرض مفاتيح لوحة المفاتيح بشكل مميز، مثل <kbd>Ctrl+C</kbd>.<abbr title="..."> — اختصار مع شرح كامل يظهر عند التمرير فوقه.<time datetime="2026-06-24"> — تاريخ أو وقت بصيغة يفهمها المتصفح ومحركات البحث.<figure> — حاوية تجمع صورة أو فيديو أو كود مع وصفه في وحدة واحدة.<figcaption> — التعليق التوضيحي للمحتوى، يوضع قبل أو بعد العنصر داخل figure.alt واضح لكل صورة — وصف حقيقي مفيد، مش "صورة" فقط.<label for="id"> لكل حقل — لا تعتمد على placeholder وحده لأنه يختفي عند الكتابة.<button> للأزرار — لا <div> منسّق كزر، لأن قارئ الشاشة لا يتعرف عليه.<div> لا <DIV>."..." — لا تكتب src=photo.jpg.charset="UTF-8" خصوصًا مع المحتوى العربي.alt — حتى لو كانت فارغة alt="".css/، JavaScript في js/، الصور في images/.validator.w3.org للتأكد من صحته.<div>، <p>، <h1>-<h6>، <ul>، <table>، <section>، <header>.<span>، <a>، <strong>، <em>، <img>، <code>.<header> — رأس الصفحة أو القسم.<nav> — قائمة التنقل الرئيسية.<main> — المحتوى الرئيسي، مرة واحدة فقط في كل صفحة.<section> — قسم بموضوع واحد مستقل، له عنوان.<article> — محتوى مستقل تمامًا (مقال أو منشور أو خبر).<aside> — محتوى جانبي مكمّل مثل الإعلانات والروابط ذات الصلة.<footer> — تذييل الصفحة أو القسم.اختر إجابة واحدة فقط لكل سؤال بتظليل الدائرة المناسبة
ضع علامة ✕ في المربع المناسب
اكتب كود HTML بخط يدك في المساحة المخصصة أسفل كل سؤال
راجع إجاباتك بنفسك بعد الانتهاء من الحل
صفحة "عني" حقيقية تجمع العناوين والنصوص المنسّقة والصور والقوائم والروابط والوسوم الدلالية في مكان واحد. اقرأ التعليقات فوق كل جزء لتعرف من أي درس أتى.
<!-- 1. الهيكل الأساسي: درس 2 --> <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <!-- 2. وسوم meta وربط CSS: درس 4 و14 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>محمد علي - مطوّر واجهات</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 3. header ونav: درس 13 --> <header id="top"> <h1>محمد علي</h1> <p>مطوّر واجهات أمامية شغوف بتعلّم كل جديد</p> <nav> <a href="#about">نبذة عني</a> <a href="#skills">مهاراتي</a> <!-- 4. رابط خارجي بتبويب جديد: درس 8 --> <a href="https://linkedin.com" target="_blank">حسابي على لينكدإن</a> </nav> </header> <main> <!-- 5. صورة موصّفة بـ figure وfigcaption: درس 21 --> <section id="about"> <h2>نبذة عني</h2> <figure> <img src="me.jpg" alt="محمد علي يجلس أمام شاشة كمبيوتر" width="220" height="220"> <figcaption>محمد وقت العمل على أحد المشاريع</figcaption> </figure> <!-- 6. تنسيق نصي strong/em: درس 7 --> <p>أنا <strong>مطوّر واجهات أمامية</strong> بدأت رحلتي بتعلّم HTML، وأحب تحويل التصاميم إلى صفحات <em>حيّة وتفاعلية</em>.</p> </section> <!-- 7. قائمة غير مرتبة: درس 11 --> <section id="skills"> <h2>مهاراتي</h2> <ul> <li>HTML5 الدلالي</li> <li>CSS وتصميم متجاوب</li> <li>أساسيات JavaScript</li> </ul> </section> </main> <!-- 8. footer ببريد mailto: درس 8 و13 --> <footer> <p>تواصل معي: <a href="mailto:[email protected]">[email protected]</a></p> </footer> </body> </html>
header, nav, main, section, footer) بدل div العادي، تمامًا كما تعلمنا في درس الحاويات.alt حقيقي ووصفي، تطبيقًا لما تعلمته في درس إمكانية الوصول.portfolio.html وغيّر الاسم والصورة والمهارات لتكون نسختك الخاصة.صفحة منتج كاملة بمواصفات في جدول، اقتباس من عميل، وفورم طلب حقيقي بحقول متنوعة — تطبيق عملي على الجداول والنماذج المتقدمة.
<!-- 1. الهيكل الأساسي: درس 2 --> <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>متجر الحقيبة الذكية</title> </head> <body> <!-- 2. header وmain: درس 13 --> <header> <h1>متجر الحقيبة الذكية</h1> </header> <main> <section> <h2>تفاصيل المنتج</h2> <!-- 3. figure وfigcaption: درس 21 --> <figure> <img src="bag.jpg" alt="حقيبة ظهر سوداء بجيب لاب توب" width="240"> <figcaption>تتحمّل حتى 15 كجم وتحتوي جيبًا مبطنًا للابتوب</figcaption> </figure> <!-- 4. جدول مواصفات بـ caption/thead/tbody: درس 12 --> <table> <caption>مواصفات الحقيبة</caption> <thead> <tr><th>الخاصية</th><th>القيمة</th></tr> </thead> <tbody> <tr><td>السعر</td><td>450 ج.م</td></tr> <tr><td>الوزن</td><td>900 جم</td></tr> </tbody> </table> <!-- 5. اقتباس: درس 20 --> <blockquote>"أفضل حقيبة استخدمتها، خفيفة وعملية جدًا"</blockquote> </section> <!-- 6. فورم بفيلدست وليجند: درس 17 --> <section> <h2>اطلب الآن</h2> <form> <fieldset> <legend>بيانات الطلب</legend> <!-- 7. مدخلات number وselect وradio: درس 16 و17 --> <label for="qty">الكمية</label> <input type="number" id="qty" min="1" max="10" value="1"> <label for="color">اللون</label> <select id="color"> <option>أسود</option> <option>كحلي</option> </select> <label><input type="radio" name="pay" checked> عند الاستلام</label> <label><input type="radio" name="pay"> تحويل بنكي</label> <button type="submit">تأكيد الطلب</button> </fieldset> </form> </section> </main> <!-- 8. رمز خاص في الفوتر: درس 19 --> <footer> <p>جميع الحقوق محفوظة © 2026</p> </footer> </body> </html>
caption وthead وtbody معًا لعرض بيانات منظمة بشكل احترافي.radio الاثنين يشتركون في نفس name="pay" حتى لا يُختار أكثر من خيار دفع واحد في نفس الوقت.product.html وغيّر اسم المنتج وصورته ومواصفاته لمنتج من اختيارك.هذا المشروع يجمع تقريبًا كل وسم تعلمته في هذه المذكرة داخل صفحة واحدة كاملة وحقيقية — اقرأ الكود سطرًا سطرًا وقارنه بما تعلمته في كل درس قبل أن تنتقل لتجربتك الخاصة.
<!-- 1. الهيكل الأساسي: درس 2 --> <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <!-- 2. وسوم meta: درس 4 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مقهى الزاوية</title> <!-- 3. ربط CSS خارجي: درس 14 --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 4. header ونav الدلاليان: درس 13 و24 --> <header id="top"> <h1>☕ مقهى الزاوية</h1> <nav> <a href="#menu">المنيو</a> <a href="#contact">تواصل معنا</a> </nav> </header> <main> <!-- 5. section بمعرّف menu: درس 13 و21 --> <section id="menu"> <h2>المنيو</h2> <!-- 6. جدول بالأسعار: درس 12 --> <table> <caption>أسعار المشروبات</caption> <thead> <tr><th>المشروب</th><th>السعر</th></tr> </thead> <tbody> <tr><td>قهوة عربية</td><td>15 ج.م</td></tr> <tr><td>كابتشينو</td><td>25 ج.م</td></tr> </tbody> </table> <!-- 7. صورة موصّفة بـ figure: درس 19 --> <figure> <img src="latte.jpg" alt="كوب لاتيه مع رسمة قلب بالحليب" width="260" height="180"> <figcaption>أشهى أنواع اللاتيه عندنا</figcaption> </figure> </section> <!-- 8. فورم تواصل: درس 16 و17 --> <section id="contact"> <h2>احجز طاولتك</h2> <form> <fieldset> <legend>بيانات الحجز</legend> <label for="name">الاسم</label> <input type="text" id="name" name="name" required> <label for="people">عدد الأفراد</label> <select id="people" name="people"> <option>2</option> <option selected>4</option> </select> <button type="submit">تأكيد الحجز</button> </fieldset> </form> </section> </main> <!-- 9. footer ببريد التواصل: درس 8 و13 --> <footer> <p>راسلنا: <a href="mailto:hello@cafe.com">hello@cafe.com</a></p> </footer> <!-- 10. ربط JavaScript قبل إغلاق body: درس 14 --> <script src="app.js"></script> </body> </html>
<!-- ... --> فوق كل جزء — يربط الكود مباشرة بالدرس الذي تعلمت فيه هذا الوسم، حتى تراجع أي نقطة غامضة بسهولة.header, nav, main, section, footer) بدل الاعتماد على div فقط، تمامًا كما تعلمنا في درس الحاويات ودرس Block/Inline.cafe.html على جهازك وشغّله، ثم عدّل الألوان والنصوص والصور لتُصبح صفحتك الخاصة بمشروعك المفضّل (مطعم، متجر، أو أي فكرة تحبها).