انظر إلى الهيكل الأساسي لصفحة الويب بلغة HTML. يبدأ السطر الأول بعبارة لتحديد أن المستند هو ملف ويب حديث، ثم وسم البداية بخاصية الاتجاه rtl واللغة ar. بعد ذلك يأتي وسم الرأس
الذي يضم عنوان الصفحة بين وسمي ، ووسم <meta charset="UTF-8"> لضبط الترميز ليدعم اللغة العربية بشكل صحيح. كل ما يكتبه المستخدم ويراه في المتصفح يوضع داخل وسوم جسم الصفحة <body>، مثل العناوين الرئيسية <h1> والفقرات النصية <p>. انظر في الأسفل إلى نافذة برنامج فيجوال ستوديو كود كيف ترتب هذه الأسطر وتلونها لتسهيل القراءة والكتابة.</p>
</div>
</div>
<div class="strip" id="strip"><button type="button" data-i="0" aria-current="true">صفحة ١٨٨</button><button type="button" data-i="1">صفحة ١٨٩</button><button type="button" data-i="2">صفحة ١٩٠</button><button type="button" data-i="3">صفحة ١٩١</button><button type="button" data-i="4">صفحة ١٩٢</button><button type="button" data-i="5">صفحة ١٩٣</button><button type="button" data-i="6">صفحة ١٩٤</button><button type="button" data-i="7">صفحة ١٩٥</button><button type="button" data-i="8">صفحة ١٩٦</button></div>
<noscript><div class="prose"><h2>صفحة ١٨٨</h2><p>انظر إلى الهيكل الأساسي لصفحة الويب بلغة HTML. يبدأ السطر الأول بعبارة <span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo><</mo><mo stretchy="false">!</mo><mi>D</mi><mi>O</mi><mi>C</mi><mi>T</mi><mi>Y</mi><mi>P</mi><mi>E</mi><mi>h</mi><mi>t</mi><mi>m</mi><mi>l</mi><mo>></mo></mrow><annotation encoding="application/x-tex"><!DOCTYPE html></annotation></semantics></math></span> لتحديد أن المستند هو ملف ويب حديث، ثم وسم البداية <html> بخاصية الاتجاه rtl واللغة ar. بعد ذلك يأتي وسم الرأس <head> الذي يضم عنوان الصفحة بين وسمي <title>، ووسم <meta charset="UTF-8"> لضبط الترميز ليدعم اللغة العربية بشكل صحيح. كل ما يكتبه المستخدم ويراه في المتصفح يوضع داخل وسوم جسم الصفحة <body>، مثل العناوين الرئيسية <h1> والفقرات النصية <p>. انظر في الأسفل إلى نافذة برنامج فيجوال ستوديو كود كيف ترتب هذه الأسطر وتلونها لتسهيل القراءة والكتابة.</p>
<h2>صفحة ١٨٩</h2><p>عندما تحتاج إلى استقبال بيانات من زائر موقعك، مثل التسجيل أو البحث، فأنت بحاجة إلى نموذج إلكتروني. النموذج أو Form هو مستند يحتوي على حقول مخصصة لإدخال البيانات، وكل حقل له اسم محدد ليتعرف عليه المتصفح والخادم. انظر إلى الصورتين في الصفحة: الصورة العليا تعرض نموذج بحث جوجل الشهير المكون من مربع نص وزر بحث، والصورة السفلى تعرض نموذج إنشاء حساب جديد في جوجل المليء بحقول إدخال الأسماء والبريد وكلمات المرور وخيارات الاختيار.</p>
<h2>صفحة ١٩٠</h2><p>تأمل دورة العمل الموضحة في الرسم الدائري. الخطوة الأولى تبدأ عندما يملأ المستخدم حقول النموذج في المتصفح ويضغط زر الإرسال، فتنتقل هذه البيانات عبر الإنترنت إلى الخادم. في الخطوة الثانية، يستقبل الخادم هذه البيانات ويبدأ بمعالجتها وفهمها. في الخطوة الثالثة والأخيرة، ينشئ الخادم صفحة جديدة كاستجابة ويرسلها إلى المتصفح ليراها المستخدم. في الجزء السفلي، انظر إلى وسم <form> وخاصية action التي تحدد عنوان ارتباط تشعبي URL على الخادم لتستقبل تلك المعلومات عند إرسالها.</p>
<h2>صفحة ١٩١</h2><p>نتعامل هنا مع الوسم الأساسي <input> المسؤول عن إنشاء عناصر الإدخال، ولاحظ أنه وسم فردي لا يحتاج إلى وسم إغلاق. يعرض الجدول خمسة أنواع أساسية للسمة type؛ فننوع text ينشئ سطر نص عادياً، ونوع password ينشئ سطر نص مع إخفاء الحروف بنقاط لحماية كلمة المرور، ونوع email يخصص الحقل للبريد الإلكتروني مع ميزة التحقق من صحته، ونوع submit ينشئ زر الموافقة للإرسال، ونوع radio يتيح اختيار خيار واحد من عدة خيارات. انظر إلى مثال إدخال اسم المستخدم في الكود والنتيجة الظاهرة في نافذة المتصفح.</p>
<h2>صفحة ١٩٢</h2><p>انظر كيف نجمع بين عدة حقول داخل وسم النموذج. أضفنا في المقطع البرمجي حقل كلمة المرور باستخدام <input type="password">، وربطناه باسم مستخدم يظهر في المتصفح. في المثال أدناه، يظهر استخدام أزرار الاختيار الدائرية عبر type="radio" مع سمة name المشتركة لضمان اختيار خيار واحد فقط بين الذكر والأنثى، ويسبقها وسم <label> الذي يربط النص التوضيحي بالحقل عبر خاصية for، ليظهر للمستخدم في المتصفح اسم الحقل وبجانبه خيارات دائرية وزر إرسال.</p>
<h2>صفحة ١٩٣</h2><p>انظر إلى نافذة المتصفح عندما نستخدم زر البريد الإلكتروني، وكيف يظهر تنبيه خطأ إذا نسيت كتابة رمز الفاصل في البريد. في منتصف الصفحة، يظهر استخدام وسم <legend> داخل وسم <fieldset>؛ فالأخير يحيط بمجموعة من عناصر النموذج ذات الصلة ويرسم حولها إطاراً يجمعها، بينما يضع الأول عنواناً واضحاً لذلك الإطار مثل اتصل بنا. انظر كيف يترجم الكود البرمجي في الأسفل إلى إطار منظم يضم حقول الإدخال وبداخله العنوان الذي حددته.</p>
<h2>صفحة ١٩٤</h2><p>إذا أردت من الزائر أن يكتب رسالة طويلة مكونة من عدة أسطر وليس مجرد سطر واحد، فلا يناسبه وسم <input> العادي، وهنا يأتي دور وسم <textarea> الذي يتيح إنشاء حقل نصي كبير متعدد الأسطر. انظر إلى المقطع البرمجي كيف تم استخدام <textarea placeholder="اكتب رسالتك"> لتظهر عبارة إرشادية داخل الحقل تختفي بمجرد كتابة المستخدم. في الأسفل، يوضح الرسم التخطيطي شكل الحقل النصي الواسع المخصص للرسائل الطويلة مقارنة بالحقول السابقة.</p>
<h2>صفحة ١٩٥</h2><p>حان وقت التطبيق العملي بإنشاء صفحة اتصل بنا في مشروع مشجعي كرة القدم. انظر إلى الكود البرمجي المطلوب كتابته في ملف contact-form.html؛ فهو يضم هيكل الصفحة الأساسي، وبداخله نموذج <form> يحتوي على إطار <fieldset> وعنوان <legend> يحمل عبارة اتصل بنا. ثم أربعة حقول نصية للاسم، واسم العائلة، والبريد الإلكتروني، وحقل رسالة متعدد الأسطر باستخدام <textarea>، وختاماً زر الإرسال. لاحظ استخدام سمة placeholder لعرض نص إرشادي مؤقت داخل كل حقل.</p>
<h2>صفحة ١٩٦</h2><p>انظر إلى النتيجة النهائية لصفحة موقع مشجعي كرة القدم بعد اكتمال تصميمها وعرضها في المتصفح. تظهر الصفحة متكاملة بجدول محتواها وأزرار التنقل العلوية، وفي الأسفل يظهر نموذج اتصل بنا الذي أنشأناه بحقوله المرتبة للإدخال وزر الإرسال في النهاية. يوضح الرسم التخطيطي كيف تحول النص البرمجي المكتوب في محرر الكود إلى واجهة مستفاعل حقيقية ومرتبة يراها زائر الموقع.</p>
</div></noscript>
<script type="application/json" id="slides">[{"page":188,"img":"p188.webp","clip":"p188","html":"\u003cp\u003eانظر إلى الهيكل الأساسي لصفحة الويب بلغة HTML. يبدأ السطر الأول بعبارة \u003cspan class=\"katex\"\u003e\u003cmath xmlns=\"http://www.w3.org/1998/Math/MathML\"\u003e\u003csemantics\u003e\u003cmrow\u003e\u003cmo\u003e<\u003c/mo\u003e\u003cmo stretchy=\"false\"\u003e!\u003c/mo\u003e\u003cmi\u003eD\u003c/mi\u003e\u003cmi\u003eO\u003c/mi\u003e\u003cmi\u003eC\u003c/mi\u003e\u003cmi\u003eT\u003c/mi\u003e\u003cmi\u003eY\u003c/mi\u003e\u003cmi\u003eP\u003c/mi\u003e\u003cmi\u003eE\u003c/mi\u003e\u003cmi\u003eh\u003c/mi\u003e\u003cmi\u003et\u003c/mi\u003e\u003cmi\u003em\u003c/mi\u003e\u003cmi\u003el\u003c/mi\u003e\u003cmo\u003e>\u003c/mo\u003e\u003c/mrow\u003e\u003cannotation encoding=\"application/x-tex\"\u003e<!DOCTYPE html>\u003c/annotation\u003e\u003c/semantics\u003e\u003c/math\u003e\u003c/span\u003e لتحديد أن المستند هو ملف ويب حديث، ثم وسم البداية \u003chtml\u003e بخاصية الاتجاه rtl واللغة ar. بعد ذلك يأتي وسم الرأس \u003chead\u003e الذي يضم عنوان الصفحة بين وسمي \u003ctitle\u003e، ووسم \u003cmeta charset=\"UTF-8\"\u003e لضبط الترميز ليدعم اللغة العربية بشكل صحيح. كل ما يكتبه المستخدم ويراه في المتصفح يوضع داخل وسوم جسم الصفحة \u003cbody\u003e، مثل العناوين الرئيسية \u003ch1\u003e والفقرات النصية \u003cp\u003e. انظر في الأسفل إلى نافذة برنامج فيجوال ستوديو كود كيف ترتب هذه الأسطر وتلونها لتسهيل القراءة والكتابة.\u003c/p\u003e\n"},{"page":189,"img":"p189.webp","clip":"p189","html":"\u003cp\u003eعندما تحتاج إلى استقبال بيانات من زائر موقعك، مثل التسجيل أو البحث، فأنت بحاجة إلى نموذج إلكتروني. النموذج أو Form هو مستند يحتوي على حقول مخصصة لإدخال البيانات، وكل حقل له اسم محدد ليتعرف عليه المتصفح والخادم. انظر إلى الصورتين في الصفحة: الصورة العليا تعرض نموذج بحث جوجل الشهير المكون من مربع نص وزر بحث، والصورة السفلى تعرض نموذج إنشاء حساب جديد في جوجل المليء بحقول إدخال الأسماء والبريد وكلمات المرور وخيارات الاختيار.\u003c/p\u003e\n"},{"page":190,"img":"p190.webp","clip":"p190","html":"\u003cp\u003eتأمل دورة العمل الموضحة في الرسم الدائري. الخطوة الأولى تبدأ عندما يملأ المستخدم حقول النموذج في المتصفح ويضغط زر الإرسال، فتنتقل هذه البيانات عبر الإنترنت إلى الخادم. في الخطوة الثانية، يستقبل الخادم هذه البيانات ويبدأ بمعالجتها وفهمها. في الخطوة الثالثة والأخيرة، ينشئ الخادم صفحة جديدة كاستجابة ويرسلها إلى المتصفح ليراها المستخدم. في الجزء السفلي، انظر إلى وسم \u003cform\u003e وخاصية action التي تحدد عنوان ارتباط تشعبي URL على الخادم لتستقبل تلك المعلومات عند إرسالها.\u003c/p\u003e\n"},{"page":191,"img":"p191.webp","clip":"p191","html":"\u003cp\u003eنتعامل هنا مع الوسم الأساسي \u003cinput\u003e المسؤول عن إنشاء عناصر الإدخال، ولاحظ أنه وسم فردي لا يحتاج إلى وسم إغلاق. يعرض الجدول خمسة أنواع أساسية للسمة type؛ فننوع text ينشئ سطر نص عادياً، ونوع password ينشئ سطر نص مع إخفاء الحروف بنقاط لحماية كلمة المرور، ونوع email يخصص الحقل للبريد الإلكتروني مع ميزة التحقق من صحته، ونوع submit ينشئ زر الموافقة للإرسال، ونوع radio يتيح اختيار خيار واحد من عدة خيارات. انظر إلى مثال إدخال اسم المستخدم في الكود والنتيجة الظاهرة في نافذة المتصفح.\u003c/p\u003e\n"},{"page":192,"img":"p192.webp","clip":"p192","html":"\u003cp\u003eانظر كيف نجمع بين عدة حقول داخل وسم النموذج. أضفنا في المقطع البرمجي حقل كلمة المرور باستخدام \u003cinput type=\"password\"\u003e، وربطناه باسم مستخدم يظهر في المتصفح. في المثال أدناه، يظهر استخدام أزرار الاختيار الدائرية عبر type="radio" مع سمة name المشتركة لضمان اختيار خيار واحد فقط بين الذكر والأنثى، ويسبقها وسم \u003clabel\u003e الذي يربط النص التوضيحي بالحقل عبر خاصية for، ليظهر للمستخدم في المتصفح اسم الحقل وبجانبه خيارات دائرية وزر إرسال.\u003c/p\u003e\n"},{"page":193,"img":"p193.webp","clip":"p193","html":"\u003cp\u003eانظر إلى نافذة المتصفح عندما نستخدم زر البريد الإلكتروني، وكيف يظهر تنبيه خطأ إذا نسيت كتابة رمز الفاصل في البريد. في منتصف الصفحة، يظهر استخدام وسم \u003clegend\u003e داخل وسم \u003cfieldset\u003e؛ فالأخير يحيط بمجموعة من عناصر النموذج ذات الصلة ويرسم حولها إطاراً يجمعها، بينما يضع الأول عنواناً واضحاً لذلك الإطار مثل اتصل بنا. انظر كيف يترجم الكود البرمجي في الأسفل إلى إطار منظم يضم حقول الإدخال وبداخله العنوان الذي حددته.\u003c/p\u003e\n"},{"page":194,"img":"p194.webp","clip":"p194","html":"\u003cp\u003eإذا أردت من الزائر أن يكتب رسالة طويلة مكونة من عدة أسطر وليس مجرد سطر واحد، فلا يناسبه وسم \u003cinput\u003e العادي، وهنا يأتي دور وسم \u003ctextarea\u003e الذي يتيح إنشاء حقل نصي كبير متعدد الأسطر. انظر إلى المقطع البرمجي كيف تم استخدام \u003ctextarea placeholder=\"اكتب رسالتك\"\u003e لتظهر عبارة إرشادية داخل الحقل تختفي بمجرد كتابة المستخدم. في الأسفل، يوضح الرسم التخطيطي شكل الحقل النصي الواسع المخصص للرسائل الطويلة مقارنة بالحقول السابقة.\u003c/p\u003e\n"},{"page":195,"img":"p195.webp","clip":"p195","html":"\u003cp\u003eحان وقت التطبيق العملي بإنشاء صفحة اتصل بنا في مشروع مشجعي كرة القدم. انظر إلى الكود البرمجي المطلوب كتابته في ملف contact-form.html؛ فهو يضم هيكل الصفحة الأساسي، وبداخله نموذج \u003cform\u003e يحتوي على إطار \u003cfieldset\u003e وعنوان \u003clegend\u003e يحمل عبارة اتصل بنا. ثم أربعة حقول نصية للاسم، واسم العائلة، والبريد الإلكتروني، وحقل رسالة متعدد الأسطر باستخدام \u003ctextarea\u003e، وختاماً زر الإرسال. لاحظ استخدام سمة placeholder لعرض نص إرشادي مؤقت داخل كل حقل.\u003c/p\u003e\n"},{"page":196,"img":"p196.webp","clip":"p196","html":"\u003cp\u003eانظر إلى النتيجة النهائية لصفحة موقع مشجعي كرة القدم بعد اكتمال تصميمها وعرضها في المتصفح. تظهر الصفحة متكاملة بجدول محتواها وأزرار التنقل العلوية، وفي الأسفل يظهر نموذج اتصل بنا الذي أنشأناه بحقوله المرتبة للإدخال وزر الإرسال في النهاية. يوضح الرسم التخطيطي كيف تحول النص البرمجي المكتوب في محرر الكود إلى واجهة مستفاعل حقيقية ومرتبة يراها زائر الموقع.\u003c/p\u003e\n"}]</script>
<script type="application/json" id="clips">{"p188":{"f":"p188-f.mp3","m":"p188-m.mp3"},"p189":{"f":"p189-f.mp3","m":"p189-m.mp3"},"p190":{"f":"p190-f.mp3","m":"p190-m.mp3"},"p191":{"f":"p191-f.mp3","m":"p191-m.mp3"},"p192":{"f":"p192-f.mp3","m":"p192-m.mp3"},"p193":{"f":"p193-f.mp3","m":"p193-m.mp3"},"p194":{"f":"p194-f.mp3","m":"p194-m.mp3"},"p195":{"f":"p195-f.mp3","m":"p195-m.mp3"},"p196":{"f":"p196-f.mp3","m":"p196-m.mp3"}}</script></section>
<section class="panel" id="panel-short" role="tabpanel" aria-labelledby="tab-short" ><div class="prose"><p>يقوم هذا الدرس على تعليمك كيفية إنشاء النماذج داخل صفحات الويب بلغة HTML، لتمكين المستخدم من إدخال البيانات وإرسالها إلى الخادم. تتكون النماذج من عناصر تحكم متعددة مثل مربعات النصوص وكلمات المرور والأزرار والبريد الإلكتروني. تبدأ بنية النموذج بالوسم form الذي يحتوي على سمة action لتحديد عنوان الخادم، ثم تستخدم الوسوم مثل input لتحديد نوع الحقل، وlabel لتسمية الحقل، وfieldset لتجميعه، بالإضافة إلى textarea للرسائل النصية الطويلة. مثال سريع: <form action="server.php"><label for="name">الاسم:</label><input type="text" name="name"><input type="submit" value="إرسال"></form></p>
</div></section>
<section class="panel" id="panel-full" role="tabpanel" aria-labelledby="tab-full" hidden><div class="prose"><h2>الفكرة الأساسية</h2>
<p>تدور فكرة الدرس حول بناء النماذج الإلكترونية في صفحات الويب بلغة HTML لتتمكن من جمع بيانات المستخدمين مثل الأسماء، وكلمات المرور، والرسائل، وإرسالها نحو الخادم ليقوم بمعالجتها.</p>
<h2>الشرح</h2>
<p>لكل نموذج هيكل أساسي يبدأ بوسم الحاوية الرئيسي form ويحتوي على سمة action تحدد عنوان الارتباط التشعبي الذي ستُرسل إليه البيانات. داخل هذا الوسم، تضع عناصر التحكم التي يستخدمها الزائر للإدخال، وأهمها الوسم input الذي لا يحتوي على وسْم إغلاق، وتتغير طريقته بناءً على قيمة سمة type. لو جعلت type مساوية لـ text فستحصل على سطر نصي واحد، ولو جعلتها password فسيخفي الحروف بنقاط أو نجوم لحماية كلمة المرور، بينما يخصص type بـ email لطلب بريد إلكتروني مع التحقق من صحته، وsubmit لإنشاء زر إرسال البيانات للخادم، وradio لاختيار خيار واحد من عدة خيارات.
تستطيع إضافة تسمية نصية واضحة لكل حقل باستعمال الوسم label مع سمة for لربطه باسم الحقل. وإذا أردت تنظيم النموذج وجمع العناصر المتشابهة في إطار واحد، فاستخدم الوسم fieldset وبداخله الوسم legend لتسمية هذا الإطار. ولإتاحة مساحة كتابة أوسع لرسائل متعددة الأسطر، استخدم الوسم textarea. كما يمكنك استغلال سمة placeholder لعرض نص مؤقت داخل الحقل يرشد المستخدم لما يجب كتابته ويختفي بمجرد الكتابة.</p>
<h2>مثال محلول خطوة بخطوة</h2>
<ol>
<li>افتح برنامج المحرر، وابدأ بإنشاء الهيكل العام للصفحة عبر وسوم العنونة الأساسية HTML.</li>
<li>افتح وسْم النموذج وحدد وجهته عبر كتابة: <form action="http://www.myhttpserver.com/comments.php"></li>
<li>أضف إطاراً لتنظيم المحتوى بكتابة: <fieldset></li>
<li>أضف عنواناً للإطار بكتابة: <legend>اتصل بنا</legend></li>
<li>أضف وسْم التسمية وحقل إدخال النص للاسم عبر كتابة: <label for="username">اسم المستخدم:</label><br><input type="text" name="username"><br></li>
<li>أضف حقل البريد الإلكتروني بالطريقة نفسها: <label for="email">البريد الإلكتروني:</label><br><input type="email" name="email"><br></li>
<li>أغلق الإطار والنموذج بوسمي </fieldset> و</form>.</li>
</ol>
<h2>أخطاء شائعة</h2>
<ul>
<li>نسيان كتابة سمة name داخل وسْم input مما يمنع الخادم من معرفة البيانات المرسلة.</li>
<li>كتابة وسْم إغلاق للوسم input رغم أنه وسم مفرد لا يتم إغلاقه.</li>
<li>عدم مطابقة القيمة في سمة for الخاصة بالوسم label مع قيمة id أو name في حقل الإجابة المرتبط به.</li>
</ul>
<h2>سؤالان للتدريب مع الإجابة</h2>
<p>السؤال الأول: كيف تنشئ حقل إدخال مخصصاً لكلمة المرور بحيث تظهر الحروف مخفية؟
الإجابة: تكتب الوسم بهذا الشكل: <input type="password" name="password">
السؤال الثاني: ما الوسم الذي تستخدمه لإنشاء حقل نصي متعدد الأسطر لكتابة رسالة طويلة؟
الإجابة: تستخدم الوسم textarea.</p>
</div></section>
<nav class="pager"><a href="/secondary/digital-tech-1/16/" rel="prev"><span>الدرس السابق</span><b>الدرس الثاني: بنية المحتوى</b></a><a href="/secondary/digital-tech-1/18/" rel="next"><span>الدرس التالي</span><b>الدرس الثالث: إنشاء نموذج بلغة HTML</b></a></nav>
<aside class="ctx-card rv"><div class="grow"><b>مُتقن</b><p>مُتقن: القدرات والتحصيلي وSTEP في مكان واحد.</p></div><a class="btn btn-primary" href="https://www.qudrati.io/subscribe?utm_source=duroos&utm_medium=subject-card&utm_campaign=secondary&utm_content=digital-tech-1">تعرّف على مُتقن</a></aside>
<div class="mini" id="mini"><div class="wrap"><button class="sbtn" type="button" id="mplay" aria-label="تشغيل/إيقاف"><svg class="ic" aria-hidden="true"><use href="/assets/i.d39456d38c.svg#pause"/></svg></button><b id="mtitle"></b><button class="sbtn ghost" type="button" id="mclose" aria-label="إغلاق"><svg class="ic" aria-hidden="true"><use href="/assets/i.d39456d38c.svg#x"/></svg></button></div></div>
<dialog class="zoom" id="zoom"><button class="x" type="button" data-close aria-label="إغلاق"><svg class="ic" aria-hidden="true"><use href="/assets/i.d39456d38c.svg#x"/></svg></button><img alt=""></dialog>
<script type="application/json" id="lesson-meta">{"u":"/secondary/digital-tech-1/17/","t":"الدرس الثالث: إنشاء نموذج بلغة HTML","s":"التقنية الرقمية ١","def":"short","stage":"secondary"}</script>
</main>
<footer class="foot"><div class="wrap">
<div class="plate"><img src="/assets/logo-full.png" alt="مُتقن" width="44" height="40"></div>
<p>الشروح والتعليق الصوتي من إعداد «معلمك الخاص» في <a href="https://www.qudrati.io">مُتقن</a>. استعد للقدرات والتحصيلي وSTEP مع <a href="https://www.qudrati.io/subscribe?utm_source=duroos&utm_medium=footer&utm_campaign=secondary">مُتقن</a>.</p>
<p>صفحات الكتب ملك <a href="https://www.ien.edu.sa" rel="nofollow">بوابة عين التعليمية</a> — وزارة التعليم، وتُعرض للشرح مع رابط النسخة الرسمية.</p>
<p>قد يحتوي الشرح الآلي على أخطاء — المرجع النهائي هو الكتاب المقرّر.</p>
</div></footer>
<dialog class="search" id="search" aria-label="البحث">
<div class="sh"><svg class="ic" aria-hidden="true"><use href="/assets/i.d39456d38c.svg#search"/></svg><input type="search" id="q" placeholder="اسم الدرس أو المادة… مثلاً: السقوط الحر" autocomplete="off" enterkeyhint="search"><button type="button" data-close>إغلاق</button></div>
<div class="res" id="results" role="listbox"><p class="hint">اكتب اسم درس أو مادة أو صف. مثال: «الكسور رابع»، «الفيزياء ١»، «حرف الباء».</p></div>
</dialog>
<script src="/assets/core.bbf0c06788.js" defer></script>
<script src="/assets/lesson.e4525883a5.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" defer crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/Flip.min.js" defer crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/DrawSVGPlugin.min.js" defer crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/Observer.min.js" defer crossorigin="anonymous"></script>
<script src="/assets/motion.9639d1605c.js" defer></script>
</body>
</html>
