في هذا الدرس سوف
- تخطط صفحة من المحتوى إلى الشيفرة
- تجمع كل عناصر الدورة في صفحة واحدة صحيحة
- تختبر الصفحة بأداة التحقق ولوحة المفاتيح
الخطوة 1: خطط للمحتوى قبل الشيفرة
اختر نشاطاً حقيقياً أو متخيلاً: خياطاً في الشارقة، أو مدرساً في الرياض، أو مغسلة سيارات في الدوحة. واكتب بكلمات بسيطة ما يحتاجه الزائر في أول عشر ثوانٍ: من أنت، وماذا تبيع، وكم السعر، وأين أنت، وكيف يصل إليك. وكل جواب يصبح قسماً له عنوان.
ثم ارسم المخطط بالعناوين فقط: h1 واحد باسم النشاط وما يفعله، ثم h2 للخدمات والأسعار والموقع والتواصل. فإذا كان المخطط مفهوماً وحده، فستكون الصفحة كذلك.
الخطوة 2: ابنِ الهيكل
ابدأ من هيكل الصفحة الكامل: تعريف نوع المستند، وhtml مع lang، وhead فيه ترميز الأحرف وviewport وعنوان محدد ووصف. وفي body أضف header فيه الاسم وnav من روابط القفز إلى أقسامك، وmain واحداً، وfooter فيه السنة والعنوان. وأعطِ كل قسم id يطابق رابطه في nav.
وحدة التحكم
- تظهر هنا رسائل وحدة التحكم والأخطاء وبيانات النماذج والروابط التي تنقرها.
الخطوة 3: املأ الأقسام ثم اختبر
الخدمات قائمة ul. والأسعار table مع caption وعناوين th scope="col". وأضف صورة واحدة داخل figure مع نص alt حقيقي وعرض وارتفاع. وفي قسم التواصل أضف رابط tel: بالصيغة الدولية، ورابط mailto:، ونموذج استفسار قصيراً بحقول لها تسميات وname على كل حقل وزر إرسال.
عندما تصبح كل الفحوص أدناه خضراء، انسخ شيفرتك إلى ملف باسم index.html وافتحه في متصفحك. والصقه في أداة W3C Nu HTML Checker وأصلح كل خطأ. ثم ابعد الفأرة واضغط Tab للتنقل في الصفحة، فيجب أن تصل إلى كل رابط وحقل بترتيب منطقي وأن ترى دائماً موضع التركيز.
الخطوة التالية: ستنسّق دورة CSS هذه الصفحة نفسها، فاحتفظ بملفك. وإذا أردت نسخة عربية، فانسخها وحدد lang="ar" dir="rtl" وترجم النص واربط النسختين بـ hreflang كما في الدرس السابق.
وحدة التحكم
- تظهر هنا رسائل وحدة التحكم والأخطاء وبيانات النماذج والروابط التي تنقرها.
الأسعار أرقام افتراضية. املأ النموذج وأرسله لترى البيانات في وحدة التحكم.
أخطاء شائعة
البدء بالتصميم
اختيار الألوان قبل معرفة المحتوى يؤدي إلى صفحات جميلة لا تقول الكثير. المحتوى والبنية أولاً، ثم CSS.
قائمة الأسعار كصورة فقط
صورة لقائمة أسعار مطبوعة لا تقرؤها قارئات الشاشة، ولا تُكبَّر بوضوح على الهواتف، ولا يُعثر عليها في البحث. استخدم جدولاً حقيقياً.
تجاهل أداة التحقق
تخفي المتصفحات أخطاءك، وأداة التحقق تكشفها في ثوانٍ. وإصلاحها الآن يوفر ساعات عندما لا تتصرف CSS كما تتوقع لاحقاً.
تمرين
أكمل صفحة النشاط التجاري. تسرد الفحوص كل جزء تحتاج إليه: وسوم head والمعالم وقائمة الخدمات وجدول الأسعار وصورة بنص بديل وروابط التواصل ونموذج استفسار يعمل.
وحدة التحكم
- تظهر هنا رسائل وحدة التحكم والأخطاء وبيانات النماذج والروابط التي تنقرها.
- head: وسم viewport
- head: وصف meta
- رأس فيه nav من رابطَي قفز على الأقل
- عنصر main واحد وداخله h1
- ثلاثة أقسام على الأقل لكل منها id وh2
- قائمة خدمات من ثلاثة عناصر على الأقل
- جدول أسعار مع caption
- عناوين جدول مع scope
- صورة بنص بديل وعرض وارتفاع
- رابط هاتف بالصيغة الدولية
- نموذج استفسار بحقول لها تسميات
- كل حقل في النموذج يحمل name
- تذييل للصفحة
اعرض حلاً ممكناً
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Al Wahda Tailoring Sharjah | Kanduras and Abayas</title>
<meta name="description" content="Made-to-measure kanduras and abayas in Al Wahda, Sharjah. Ready in 5 days.">
</head>
<body>
<header>
<strong>Al Wahda Tailoring</strong>
<nav aria-label="Main">
<a href="#services">Services</a> | <a href="#prices">Prices</a> | <a href="#contact">Contact</a>
</nav>
</header>
<main>
<h1>Made-to-measure tailoring in Sharjah</h1>
<figure>
<img src="https://needmytools.com/icon.svg" alt="Our shop sign on Al Wahda Street" width="160" height="160">
<figcaption>Find us opposite the bus stop.</figcaption>
</figure>
<section id="services">
<h2>Services</h2>
<ul>
<li>Kanduras</li>
<li>Abayas</li>
<li>Alterations</li>
</ul>
</section>
<section id="prices">
<h2>Prices</h2>
<table>
<caption>Prices in AED</caption>
<thead><tr><th scope="col">Item</th><th scope="col">Price</th></tr></thead>
<tbody>
<tr><td>Kandura</td><td>150</td></tr>
<tr><td>Abaya</td><td>200</td></tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>Contact</h2>
<p><a href="tel:+97160000000">Call +971 6 000 0000</a> or <a href="mailto:hello@alwahda.example">email us</a>.</p>
<form method="post">
<p><label for="n">Name</label><br><input id="n" name="name" required></p>
<p><label for="m">Message</label><br><textarea id="m" name="message" required></textarea></p>
<button type="submit">Send enquiry</button>
</form>
</section>
</main>
<footer><p>© 2026 Al Wahda Tailoring, Sharjah</p></footer>
</body>
</html>اختبار سريع
أنهيت الدرس؟
أسئلة يطرحها الناس
كيف أنشر صفحتي المكتملة على الإنترنت مجاناً؟
تستضيف خدمات الاستضافة الثابتة مثل GitHub Pages وCloudflare Pages وNetlify ملفات HTML العادية ضمن خططها المجانية وفي حدود الاستخدام. ارفع ملف index.html لتحصل على عنوان عام، وتشرح دورة النشر استخدام النطاقات الخاصة.
هل يمكنني استخدام هذا المشروع في معرض أعمالي؟
نعم، فهو عملك الخاص. ويصبح أقوى إذا بنيته لنشاط محلي حقيقي بإذنه وبمحتوى حقيقي، ثم حسّنته مع تعلمك CSS وJavaScript.
إلى أين يرسل نموذج الاستفسار بياناته؟
إلى لا مكان حتى الآن، فلا تستطيع HTML وحدها استقبال الرسائل أو تخزينها. وفي دورتي Node.js وواجهات API تبني جزء الخادم الذي يستقبل النموذج ويرسله بالبريد أو يحفظه.
هل أستخدم أداة بناء مواقع بدلاً من ذلك؟
أدوات البناء مناسبة لموقع سريع. لكن معرفة HTML تساعدك على إصلاح المشكلات وتحسين السرعة وسهولة الوصول والانتقال من أداة البناء لاحقاً دون خسارة محتواك.
أنهيت دورة HTML. ماذا أتعلم بعد ذلك؟
CSS ثم JavaScript. فـ CSS تجعل هذه الصفحة نفسها تبدو احترافية وتعمل على كل شاشة، وJavaScript تجعلها تفاعلية. والدورتان موجودتان في مسار التعلم على صفحة الدورة، وتُضاف الدروس الجديدة هناك عند اكتمالها.
المصادر
روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.
- W3C Nu HTML Checker
- MDN: Structuring a page of content
- W3C WAI: Easy checks, a first review of web accessibility
- GitHub Docs: What is GitHub Pages?
تبقى أمثلة الشيفرة بالإنجليزية وتعمل في بيئة معزولة على جهازك. والنص العربي بانتظار المراجعة من متحدث أصلي. وإذا لاحظت خطأ فأخبرنا عبر صفحة التواصل.