Logo Jit-learn Start free
Jit-learn - Job-ready skills in your language
مقدمة / موارد / حول

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

HTML يخبر المتصفح بماهية كل جزء من الصفحة.

تمهيدي

ما الذي تفعله HTML حقًا؟

المتصفح يقرأ علامات HTML ويتصرف بناءً عليها. تخبر HTML المتصفح بما هي الصفحة، وما تعنيه، وما يجب عرضه.

تستخدم HTML العلامات

تُبنى HTML من العلامات.

تخبر العلامات المتصفح بما يمثله كل جزء من الصفحة.


   ...<\/head>
   ...<\/body>
<\/html>

الرأس يتحدث إلى الويب

قسم الرأس ليس محتوى الصفحة المرئي.

يخبر المتصفحات ومحركات البحث ومواقع التواصل الاجتماعي والأنظمة الأخرى كيف تريد الصفحة التواصل مع شبكة الويب العالمية.


   عنوان الصفحة<\/title>
   <meta name="description">
   <link rel="canonical">
<\/head></pre>
      </div>

      <div class="jit_about_block">
         <h3>الجسم يحمل الرسالة</h3>

         <p>يحتوي قسم الجسم على التواصل المرئي.</p>

         <p>هنا تعيش العناوين والفقرات والصور والروابط والقوائم والأزرار والنماذج وأقسام الصفحة عادةً.</p>

<pre><body>
   <h1>العنوان الرئيسي<\/h1>
   <p>رسالة الصفحة<\/p>
   <a href="...">رابط<\/a>
<\/body></pre>
      </div>

      <div class="jit_about_block">
         <h3>الأسلوب يتحكم في المظهر</h3>

         <p>علامة الأسلوب تحتوي على CSS.</p>

         <p>CSS تخبر المتصفح كيف يجب أن تبدو الصفحة: الألوان، التباعد، الخطوط، التخطيط، البطاقات، الأزرار، والتصميم المتجاوب.</p>

<pre><style>
   body { font-family: Arial; }
   .card { border-radius: 18px; }
<\/style></pre>
      </div>

      <div class="jit_about_block">
         <h3>السكريبت يتحكم في السلوك</h3>

         <p>علامة السكريبت تحتوي على JavaScript.</p>

         <p>JavaScript تتيح للصفحة التفاعل: النقرات، القوائم، الفحوصات، النماذج، الحركة، التحقق، والمحتوى الديناميكي.</p>

<pre><script>
   alert("Hello");
<\/script></pre>
      </div>

      <div class="jit_about_block">
         <h3>الأدوات التي تساعد السكريبت</h3>

         <p>JavaScript غالبًا ما تعمل مع النصوص والبيانات المهيكلة.</p>

         <ul>
            <li><b>RegEx</b> يجد ويفحص أنماط النصوص.</li>
            <li><b>JSON</b> يخزن ويتبادل البيانات المهيكلة.</li>
            <li><b>XML</b> يخزن العلامات المهيكلة المستخدمة في الخلاصات وخرائط المواقع والتصدير والأنظمة القديمة.</li>
         </ul>
      </div>

      <div class="jit_about_remember">
         <h3>HTML ليست مجرد نص على صفحة.</h3>

         <p>HTML هي مجموعة من العلامات التي تخبر المتصفح كيف يفهم الصفحة.</p>

         <p>الرأس يتواصل مع الويب. الجسم يتواصل مع الإنسان. الأسلوب يتحكم في المظهر. السكريبت يتحكم في السلوك.</p>
      </div>

   </div>
</section>
      </details>

      <details class="jit_course_toggle">
         <summary>الموارد</summary>
         <div class="roy_resource_links">
            <a href="https://developer.mozilla.org/en-US/" target="_blank">وثائق MDN Web</a>
            <a href="https://web.dev/learn/" target="_blank">web.dev تعلم</a>
            <a href="https://html.spec.whatwg.org/" target="_blank">معيار HTML من WHATWG</a>
            <a href="https://www.w3.org/WAI/" target="_blank">وصولية W3C</a>
            <a href="https://caniuse.com/" target="_blank">هل يمكنني استخدام</a>
            <a href="https://developer.chrome.com/docs/" target="_blank">مطورو كروم</a>
            <a href="https://docs.github.com/" target="_blank">وثائق GitHub</a>
            <a href="https://platform.openai.com/docs/" target="_blank">وثائق OpenAI</a>
            <a href="https://developers.google.com/search" target="_blank">مركز بحث جوجل</a>
            <a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
         </div>
      </details>

      <details class="jit_course_toggle">
         <summary>حول</summary>
         <section class="jit_about" id="about-html-browser">

   <div class="jit_about_head">
      <h2>عرض المصدر مقابل المفتش</h2>

      <p class="jit_about_lede">
         يعتقد معظم الناس أن المتصفح يعرض ببساطة ملف HTML. هذا ليس ما يحدث فعليًا.
      </p>
   </div>

   <div class="jit_about_body">

      <div class="jit_about_block">
         <h3>المتصفح يفعل أكثر من عرض HTML</h3>

         <p>المتصفح يقرأ HTML، يفسرها، يطبق CSS، ينفذ JavaScript، ثم يعرض النتيجة.</p>

         <p>لفهم الويب، تحتاج إلى فهم ما يبنيه المتصفح فعليًا.</p>

<pre>HTML
   |
   +-- المتصفح يقرأها
   +-- المتصفح يفسرها
   +-- المتصفح يعرضها
   +-- صفحة الويب</pre>
      </div>

      <div class="jit_about_block">
         <h3>عرض المصدر</h3>

         <p>عرض المصدر يظهر ملف HTML الأصلي المرسل من الخادم.</p>

         <p>يجيب على سؤال واحد: ما الذي تم إرساله؟</p>

<pre>الخادم
   |
   +-- ملف HTML
            |
            +-- عرض المصدر</pre>
      </div>

      <div class="jit_about_block">
         <h3>المفتش</h3>

         <p>المفتش يظهر ما بناه المتصفح بعد قراءة الملف.</p>

         <p>يجيب على سؤال مختلف: ما الذي يعمل عليه المتصفح الآن؟</p>

<pre>HTML
   |
   +-- المتصفح يقرأها
   +-- CSS مطبقة
   +-- JavaScript تعمل
   +-- المفتش</pre>
      </div>

      <div class="jit_about_block">
         <h3>كيفية فتحها</h3>

         <p>تسمح لك معظم المتصفحات بفتح كلا الأداتين من قائمة النقر بزر الماوس الأيمن.</p>

<pre>النقر بزر الماوس الأيمن
   |
   +-- عرض مصدر الصفحة

النقر بزر الماوس الأيمن
   |
   +-- فحص</pre>

         <p>يمكنك أيضًا تجربة F12، Ctrl + Shift + I، أو Cmd + Option + I.</p>
      </div>

      <div class="jit_about_block">
         <h3>لماذا المفتش مهم</h3>

         <p>يقضي المطورون المحترفون وقتًا أطول بكثير في المفتش مقارنة بعرض المصدر.</p>

         <ul>
            <li>هيكل HTML</li>
            <li>قواعد CSS</li>
            <li>نشاط الشبكة</li>
            <li>أخطاء JavaScript</li>
            <li>التخزين والكوكيز</li>
            <li>معلومات الأداء</li>
         </ul>

         <p>عندما لا يعمل شيء ما، يكون المفتش عادةً هو المكان الأول للنظر.</p>
      </div>

      <div class="jit_about_remember">
         <h3>وهذا هو مقدمة HTML</h3>

         <p>عرض المصدر يظهر الملف الأصلي.</p>

         <p>المفتش يظهر النسخة العاملة للمتصفح.</p>

         <p>المتصفح لا يعرض ملف HTML الأصلي. المتصفح يعرض تفسيره لذلك الملف.</p>
      </div>

   </div>
</section>
      </details>

   </div>
</section>

<style>
.jit_course_toggle
{
   margin: 1.5rem 0;
   padding: 1rem;
   border-radius: 22px;
   background: rgba(255,255,255,.10);
   border: 1px solid rgba(255,255,255,.25);
}

.jit_course_toggle summary
{
   cursor: pointer;
   display: inline-block;
   padding: .75rem 1.25rem;
   border-radius: 999px;
   background: #d99a35;
   color: #221e18;
   font-weight: 900;
}

.jit_course_toggle[open] summary
{
   margin-bottom: 1rem;
}
.roy_statement::after
{
   pointer-events: none !important;
}

.roy_statement .roy_wrap
{
   position: relative;
   z-index: 2;
}
</style>

<style>
.jit_about
{
   width: 85%;
   margin: 3rem auto;
   padding: 2rem;
   border-radius: 28px;
   background: #f8f3e8;
   border: 3px solid #d99a35;
   color: #1f1b16;
}

.jit_about .jit_about_head
{
   max-width: 900px;
   margin-bottom: 2rem;
}

.jit_about h2
{
   margin: 0 0 1rem;
   font-size: clamp(2rem, 4vw, 3.4rem);
   line-height: 1.05;
}

.jit_about .jit_about_lede
{
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 1.55;
}

.jit_about .jit_about_body
{
   display: grid;
   gap: 1.25rem;
}

.jit_about .jit_about_block,
.jit_about .jit_about_remember
{
   padding: 1.4rem;
   border-radius: 22px;
   background: #ffffff;
   border: 1px solid rgba(0,0,0,.12);
}

.jit_about h3
{
   margin: 0 0 .8rem;
   font-size: 1.45rem;
}

.jit_about p,
.jit_about li
{
   font-size: 1.05rem;
   line-height: 1.65;
}

.jit_about pre
{
   margin: 1rem 0 0;
   padding: 1rem 1.25rem;
   border-radius: 18px;
   background: #163f38;
   color: #ffffff;
   overflow: auto;
   line-height: 1.7;
}

.jit_about .jit_about_remember
{
   background: #223f38;
   color: #ffffff;
}

@media (min-width: 850px)
{
   .jit_about .jit_about_body
   {
      grid-template-columns: 1fr 1fr;
   }

   .jit_about .jit_about_remember
   {
      grid-column: span 2;
   }
}

@media (max-width: 700px)
{
   .jit_about
   {
      width: 96%;
      padding: 1.2rem;
   }
}
</style>


<style>
.jit_course_toggle[open]
{
   max-height: 70vh;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 1.25rem;
}
</style>

<style>
.jit_section_top
{
   margin: 1rem 0;
   padding: .7rem 1.1rem;
   border: 0;
   border-radius: 999px;
   background: #d99a35;
   color: #221e18;
   font-weight: 900;
   cursor: pointer;
}
</style>

<section class="roy_section" id="lessons">
   <div class="roy_wrap">

      <div class="roy_section_head">
         <div class="roy_kicker">محاضرة + ورقة عمل</div>

         <h2 class="roy_section_title">
            بطاقات ممارسة HTML الجاهزة للعمل
         </h2>

         <p class="roy_section_sub">
            كل بطاقة لها هدف واضح. تفتح البطاقة بأكملها المحاضرة.
         </p>
      </div>

      <div class="roy_lessons_grid">

<div class="lecture_free_badge">✓ الدرس 1 مجاني • لا يتطلب تسجيل دخول</div>

<article id="="complete_html_page.lecture.1"" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link" aria-label="Open lecture: A Complete HTML Page">
            <h3>صفحة HTML كاملة</h3>
            <p>شاهد كل جزء من صفحة HTML حقيقية في مكان واحد — نقطة مرجعية لكل ما تمت مناقشته في هذه السلسلة.</p>
            <div class="roy_lesson_seen">يمكنك العودة إليه مرارًا وتكرارًا أثناء متابعتك الدورة. قم بحفظ علامة مرجعية له.</div>
            <div class="roy_lesson_code">I'm ready to translate to Arabic (ar). However, I don't see the complete page content provided in your message. 

Please provide the text you'd like me to translate, and I'll translate it to Arabic while preserving all HTML tags, attributes, URLs, and code exactly as they are.<br>أمثلة معزولة: أجزاء بدون الكل</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>نوع المستند</li><li>رأس</li><li>وسوم meta</li><li>جسم</li><li>البنية الكاملة</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/complete_html_page.lecture.1.php">محاضرة</a></div>
         </article>

<article id="semantic_page_structure.lecture.1" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>بناء هيكل صفحة ويب حقيقي</h3>
            <p>تعلم كيف يتم تنظيم المواقع الحقيقية بحيث يمكن للمتصفحات ومحركات البحث والأشخاص فهم صفحاتك.</p>
            <div class="roy_lesson_seen">يُرى في كل موقع احترافي، موقع أعمال، لوحة تحكم، وتطبيق ويب.</div>
            <div class="roy_lesson_code">HTML مباشر: هيكل ذو معنى<br>نسخة عشوائية من div: صعبة الصيانة لاحقًا</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>رأس</li><li>الرئيسي</li><li>قسم</li><li>مقالة</li><li>التذييل</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/semantic_page_structure.lecture.php">محاضرة</a></div>
         </article>

         <article id="forms_and_inputs.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>بناء نماذج تجمع المعلومات</h3>
            <p>إنشاء نماذج تسمح للزوار بإرسال الرسائل، البحث، التسجيل، تسجيل الدخول، وإدخال البيانات.</p>
            <div class="roy_lesson_seen">يُرى في صفحات الاتصال، تسجيل الدخول، التسجيلات، أنظمة الدفع، وتطبيقات الأعمال.</div>
            <div class="roy_lesson_code">HTML مباشر: جمع مدخلات المستخدم<br>نسخة نصية فقط: لا يمكن للزوار التفاعل</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>نماذج</li><li>مدخلات</li><li>التسميات</li><li>أزرار</li><li>التحقق</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/forms_and_inputs.lecture.php">محاضرة</a></div>
         </article>

         <article id="tables_and_data.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>عرض البيانات بوضوح</h3>
            <p>عرض المعلومات في جداول عندما تجعل الصفوف والأعمدة المحتوى أسهل للفهم.</p>
            <div class="roy_lesson_seen">يُرى في التقارير، صفحات التسعير، الجداول الزمنية، قوائم المنتجات، وأنظمة الأعمال.</div>
            <div class="roy_lesson_code">HTML مباشر: معلومات منظمة<br>نسخة الفقرات فقط: صعبة القراءة</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>طاولة</li><li>الصفوف</li><li>الأعمدة</li><li>الرؤوس</li><li>خلايا البيانات</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/tables_and_data.lecture.php">محاضرة</a></div>
         </article>

         <article id="images_and_media.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>إضافة الصور، الفيديو، والوسائط</h3>
            <p>عرض الصور، الصوت، الفيديو، والملفات القابلة للتنزيل بشكل صحيح على صفحة الويب.</p>
            <div class="roy_lesson_seen">يُرى في المدونات، المتاجر، المعارض، الدروس، صفحات التسويق، والمحافظ.</div>
            <div class="roy_lesson_code">HTML مباشر: صفحات أغنى<br>نسخة نصية فقط: تواصل محدود</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>الصور</li><li>الصوت</li><li>الفيديو</li><li>التنزيلات</li><li>علامات الوسائط</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/images_and_media.lecture.php">محاضرة</a></div>
         </article>

         <article id="accessibility_basics.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>جعل الصفحات أسهل للجميع</h3>
            <p>بناء صفحات تعمل بشكل أفضل لقارئات الشاشة، لوحات المفاتيح، الأجهزة المحمولة، والقدرات المختلفة.</p>
            <div class="roy_lesson_seen">يُرى في المواقع الحكومية، التعليمية، الصحية، والمواقع الاحترافية.</div>
            <div class="roy_lesson_code">HTML مباشر: تصميم شامل<br>نسخة تجاهل الوصول: الزوار يتم حجبهم</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>نص بديل</li><li>التسميات</li><li>العناوين الفرعية</li><li>التنقل</li><li>أساسيات الوصول</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/accessibility_basics.lecture.php">محاضرة</a></div>
         </article>

         <article id="seo_friendly_html.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>مساعدة محركات البحث على فهم صفحاتك</h3>
            <p>استخدام هيكل HTML يساعد محركات البحث على تحديد الغرض والمحتوى لصفحتك.</p>
            <div class="roy_lesson_seen">يُرى في مواقع الأعمال، المدونات، المتاجر، ومنصات المحتوى.</div>
            <div class="roy_lesson_code">HTML المباشر: فهم أفضل للصفحة<br>النسخة العشوائية: أصعب في الاكتشاف</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>العناوين</li><li>العناوين الفرعية</li><li>العلامات الدلالية</li><li>الأوصاف</li><li>أساسيات تحسين محركات البحث</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/seo_friendly_html.lecture.php">محاضرة</a></div>
         </article>

         <article id="navigation_systems.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>بناء القوائم والتنقل</h3>
            <p>إنشاء أنظمة تنقل تساعد الزوار على التحرك عبر الموقع دون أن يضيعوا.</p>
            <div class="roy_lesson_seen">يُرى في كل موقع يحتوي على أكثر من صفحة واحدة.</div>
            <div class="roy_lesson_code">HTML المباشر: الزوار يجدون المحتوى<br>النسخة بدون تنقل: الزوار يغادرون مشوشين</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>القوائم</li><li>روابط</li><li>التنقل</li><li>هيكل الموقع</li><li>تدفق المستخدم</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/navigation_systems.lecture.php">محاضرة</a></div>
         </article>

         <article id="embedded_content.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>تضمين المحتوى من مصادر أخرى</h3>
            <p>إضافة خرائط، فيديوهات، نماذج، تقاويم، ومحتوى خارجي إلى صفحتك بأمان.</p>
            <div class="roy_lesson_seen">يُرى في صفحات الاتصال، مواقع التدريب، الأحداث، صفحات الدعم، والأعمال التجارية.</div>
            <div class="roy_lesson_code">HTML المباشر: محتوى متصل<br>النسخة المستقلة: وظائف محدودة</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>إطارات</li><li>الخرائط</li><li>فيديوهات</li><li>محتوى خارجي</li><li>أساسيات التضمين</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/embedded_content.lecture.php">محاضرة</a></div>
         </article>

         <article id="modern_html_features.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>استخدام ميزات HTML الحديثة</h3>
            <p>استخدام عناصر HTML الأحدث التي تقلل التعقيد وتحسن الاستخدامية دون كود إضافي.</p>
            <div class="roy_lesson_seen">يُرى في المواقع الحديثة، تطبيقات الويب، والواجهات المتجاوبة.</div>
            <div class="roy_lesson_code">HTML المباشر: حلول أبسط<br>النسخة القديمة: كود إضافي في كل مكان</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>تفاصيل</li><li>ملخص</li><li>علامات حديثة</li><li>دعم المتصفح</li><li>تنسيق أنظف</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/modern_html_features.lecture.php">محاضرة</a></div>
         </article>

         <article id="real_website_structure.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>بناء صفحة موقع كاملة</h3>
            <p>دمج الهيكل، التنقل، المحتوى، الوسائط، النماذج، الوصول، والتنظيم في صفحة واقعية.</p>
            <div class="roy_lesson_seen">يُرى في كل مشروع حقيقي يتجاوز الأمثلة البسيطة.</div>
            <div class="roy_lesson_code">HTML المباشر: بناء صفحة كاملة<br>النسخة التعليمية فقط: لا تصل أبدًا إلى الإنتاج</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>التخطيط</li><li>التنقل</li><li>المحتوى</li><li>نماذج</li><li>الوسائط</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/real_website_structure.lecture.php">محاضرة</a></div>
         </article>

      </div>

   </div>
</section>

<section class="roy_section">
   <div class="roy_wrap">

      <div class="roy_final">
         <h2>استخدام الذكاء الاصطناعي بشكل أسرع، ولكن فهم ما يكفي للبقاء في السيطرة.</h2>

         <p>
            الهدف ليس حفظ كل وسم HTML أولاً. الهدف هو التعرف على ما ينتمي إلى الصفحة، وما يعطي الصفحة معنى، وما يجب التحقق منه قبل أن تصبح الصفحة مباشرة.
         </p>

         <div class="roy_cta_row" style="justify-content:center;">
            <a class="roy_button roy_button_ghost" href="#primer">راجع المقدمة</a>
            <a class="roy_button roy_button_primary" href="#lessons">ابدأ الدروس</a>
         </div>
      </div>

   </div>
</section>

</main>

<script>

/* MARKER: make-card-the-lecture-link
   Old course.dom.php files may contain separate Lecture and Worksheet buttons.
   This keeps those files usable, but makes the card itself open the lecture.
*/
function make_roy_cards_use_lecture_link()
{
   var cards = document.querySelectorAll( ".roy_lesson_card" );

   cards.forEach( function( card ){
      var lecture_link = card.querySelector( ".roy_lesson_links a[href*='lecture'], .roy_lesson_links a:first-child" );

      if ( ! lecture_link )
      {
         return;
      }

      var lecture_href = lecture_link.getAttribute( "href" );

      if ( ! lecture_href )
      {
         return;
      }

      card.classList.add( "roy_card_has_lecture" );
      card.setAttribute( "tabindex", "0" );
      card.setAttribute( "role", "link" );
      card.setAttribute( "aria-label", "Open lecture: " + ( card.querySelector( "h3" ) ? card.querySelector( "h3" ).textContent : "lesson" ) );

      card.addEventListener( "click", function( event ){
         var clicked_link = event.target.closest( "a" );

         if ( clicked_link )
         {
            event.preventDefault();
         }

         window.location.href = lecture_href;
      });

      card.addEventListener( "keydown", function( event ){
         if ( event.key === "Enter" || event.key === " " )
         {
            event.preventDefault();
            window.location.href = lecture_href;
         }
      });
   });
}

document.addEventListener( "DOMContentLoaded", make_roy_cards_use_lecture_link );

function toggle_roy_panel( panel_id, clicked_button )
{
   var selected_panel = document.getElementById( panel_id );
   var panels = document.querySelectorAll( ".roy_panel" );
   var buttons = document.querySelectorAll( ".roy_tab" );

   if ( ! selected_panel )
   {
      return;
   }

   if ( selected_panel.classList.contains( "is_open" ) )
   {
      selected_panel.classList.remove( "is_open" );

      if ( clicked_button )
      {
         clicked_button.setAttribute( "aria-expanded", "false" );
      }

      return;
   }

   panels.forEach( function( panel ){
      panel.classList.remove( "is_open" );
   });

   buttons.forEach( function( button ){
      button.setAttribute( "aria-expanded", "false" );
   });

   selected_panel.classList.add( "is_open" );

   if ( clicked_button )
   {
      clicked_button.setAttribute( "aria-expanded", "true" );
   }
}
</script>

<hr class="rule">

    <div class="support-line">
      moc.rt-tij [ta] troppus
      <div style="unicode-bidi: revert; font-weight: normal; font-size: smaller">
        (التخصيص متاح)
      </div>
    </div>
     <p class="footer-note">
        <em>© 2026 - <a href="https://jit4all.com" target="_blank">https://jit4all.com</a> - تم بناؤه وترجمته بالتعاون مع ChatGPT، مدعوم بنماذج OpenAI.</em><br><br>
        <em>التكامل بواسطة متصفح ترجمة فورية بديل في <a href="https://jit-browser.com" target="_blank">https://jit-browser.com</a><br>تطور من <a href="https://jit-tr.com" target="_blank">https://jit-tr.com</a><br>جزء من إنترنت الترجمة البديلة <a href="https://jit4.com" target="_blank">https://jit4.com</a></em><br><br>تقنية قيد الحصول على براءة اختراع.<br><br>
     <em>الأعلام من الخدمة المجانية على https://flagpedia.net<br>
    الخرائط © مساهمو OpenStreetMap (https://www.openstreetmap.org)<br>
    تم العرض باستخدام Leaflet (https://leafletjs.com)</em><br><br>
    </p>

<button id="to-top" aria-label="Back to top" title="Back to top" style="position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: grid; place-items: center; width: 64px; height: 64px; border: 0px; border-radius: 999px; cursor: pointer; opacity: 1; pointer-events: auto; transform: translateY(0px); transition: opacity 0.2s, transform 0.2s, box-shadow 0.16s;" onclick="(function(){
    var prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) { window.scrollTo(0,0); return; }
    window.scrollTo({ top:0, behavior:'smooth' });
  })()">
  <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" style="display:block; fill:#fff">
    <path d="M12 4l7 7h-4v9H9v-9H5l7-7z"></path>
  </svg>
</button>

<style>
.support-line {
	margin: 0 auto 3rem auto;
	font-size: x-large;
	font-weight: bold;
	unicode-bidi: bidi-override;
	direction: rtl;
	text-align: center;
}
.footer-note {
	margin: 18px 0 0 0;
	text-align: center;
	font-size: small;
	opacity: 0.90;
}
.rule {
	height: 9px;
	background: var( --accent );
	margin: 18px 0;
	border: 0;
}
#to-top {
	--pulse-period: 2s;
	scale: 1;
	animation: toTopHeartbeat var(--pulse-period) ease-in-out infinite;
	background: radial-gradient(130% 130% at 28% 28%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%), radial-gradient(140% 140% at 70% 85%, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 70%), linear-gradient(90deg, var(--cta, #FF7A00), color-mix(in oklab, var(--cta, #FF7A00) 65%, var(--brand, #0B5F82)));
	box-shadow: inset 0 0 0 8px var(--paper, #fff), inset 0 2px 4px rgba(255,255,255,.30), inset 0 -4px 8px rgba(0,0,0,.25), 0 18px 44px rgba(0,0,0,.20);
}</style>

</body></html>
</main>

<script>

/* MARKER: make-card-the-lecture-link
   Old course.dom.php files may contain separate Lecture and Worksheet buttons.
   This keeps those files usable, but makes the card itself open the lecture.
*/
function make_roy_cards_use_lecture_link()
{
   var cards = document.querySelectorAll( ".roy_lesson_card" );

   cards.forEach( function( card ){
      var lecture_link = card.querySelector( ".roy_lesson_links a[href*='lecture'], .roy_lesson_links a:first-child" );

      if ( ! lecture_link )
      {
         return;
      }

      var lecture_href = lecture_link.getAttribute( "href" );

      if ( ! lecture_href )
      {
         return;
      }

      card.classList.add( "roy_card_has_lecture" );
      card.setAttribute( "tabindex", "0" );
      card.setAttribute( "role", "link" );
      card.setAttribute( "aria-label", "Open lecture: " + ( card.querySelector( "h3" ) ? card.querySelector( "h3" ).textContent : "lesson" ) );

      card.addEventListener( "click", function( event ){
         var clicked_link = event.target.closest( "a" );

         if ( clicked_link )
         {
            event.preventDefault();
         }

         window.location.href = lecture_href;
      });

      card.addEventListener( "keydown", function( event ){
         if ( event.key === "Enter" || event.key === " " )
         {
            event.preventDefault();
            window.location.href = lecture_href;
         }
      });
   });
}

document.addEventListener( "DOMContentLoaded", make_roy_cards_use_lecture_link );

function toggle_roy_panel( panel_id, clicked_button )
{
   var selected_panel = document.getElementById( panel_id );
   var panels = document.querySelectorAll( ".roy_panel" );
   var buttons = document.querySelectorAll( ".roy_tab" );

   if ( ! selected_panel )
   {
      return;
   }

   if ( selected_panel.classList.contains( "is_open" ) )
   {
      selected_panel.classList.remove( "is_open" );

      if ( clicked_button )
      {
         clicked_button.setAttribute( "aria-expanded", "false" );
      }

      return;
   }

   panels.forEach( function( panel ){
      panel.classList.remove( "is_open" );
   });

   buttons.forEach( function( button ){
      button.setAttribute( "aria-expanded", "false" );
   });

   selected_panel.classList.add( "is_open" );

   if ( clicked_button )
   {
      clicked_button.setAttribute( "aria-expanded", "true" );
   }
}
</script>

<hr class="rule">

    <div class="support-line">
      moc.rt-tij [ta] troppus
      <div style="unicode-bidi: revert; font-weight: normal; font-size: smaller">
        (customization available)
      </div>
    </div>
     <p class="footer-note">
        <em>© 2026 - <a href="https://jit4all.com" target="_blank">https://jit4all.com</a> - Co-built and translated with ChatGPT, powered by OpenAI models.</em><br><br>
        <em>Integration by an alternate instant-translation browser at <a href="https://jit-browser.com" target="_blank">https://jit-browser.com</a><br>Evolved from <a href="https://jit-tr.com" target="_blank">https://jit-tr.com</a><br>Part of an alternate-translation internet a <a href="https://jit4.com" target="_blank">https://jit4.com</a></em><br><br>Patent pending technology.<br><br>
     <em>Flags from the free service at https://flagpedia.net<br>
    Maps © OpenStreetMap contributors (https://www.openstreetmap.org)<br>
    Rendered with Leaflet (https://leafletjs.com)</em><br><br>
    </p>

<button id="to-top" aria-label="Back to top" title="Back to top" style="position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: grid; place-items: center; width: 64px; height: 64px; border: 0px; border-radius: 999px; cursor: pointer; opacity: 1; pointer-events: auto; transform: translateY(0px); transition: opacity 0.2s, transform 0.2s, box-shadow 0.16s;" onclick="(function(){
    var prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) { window.scrollTo(0,0); return; }
    window.scrollTo({ top:0, behavior:'smooth' });
  })()">
  <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" style="display:block; fill:#fff">
    <path d="M12 4l7 7h-4v9H9v-9H5l7-7z"></path>
  </svg>
</button>

<style>
.support-line {
	margin: 0 auto 3rem auto;
	font-size: x-large;
	font-weight: bold;
	unicode-bidi: bidi-override;
	direction: rtl;
	text-align: center;
}
.footer-note {
	margin: 18px 0 0 0;
	text-align: center;
	font-size: small;
	opacity: 0.90;
}
.rule {
	height: 9px;
	background: var( --accent );
	margin: 18px 0;
	border: 0;
}
#to-top {
	--pulse-period: 2s;
	scale: 1;
	animation: toTopHeartbeat var(--pulse-period) ease-in-out infinite;
	background: radial-gradient(130% 130% at 28% 28%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%), radial-gradient(140% 140% at 70% 85%, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 70%), linear-gradient(90deg, var(--cta, #FF7A00), color-mix(in oklab, var(--cta, #FF7A00) 65%, var(--brand, #0B5F82)));
	box-shadow: inset 0 0 0 8px var(--paper, #fff), inset 0 2px 4px rgba(255,255,255,.30), inset 0 -4px 8px rgba(0,0,0,.25), 0 18px 44px rgba(0,0,0,.20);
}</style>

</body>
</html>



<style>
.roy_cs_backdrop
{
   position: fixed;
   inset: 0;
   z-index: 999999;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 24px;
   background: rgba( 0, 0, 0, 0.66 );
}

.roy_cs_backdrop.is_open
{
   display: flex;
}

.roy_cs_modal
{
   width: min( 92vw, 540px );
   padding: 34px;
   border-radius: 26px;
   background: #fdfbf5;
   color: #221e18;
   text-align: center;
   box-shadow: 0 30px 90px rgba( 0, 0, 0, 0.42 );
   border: 1px solid rgba( 255, 255, 255, 0.55 );
   font-family: Arial, Helvetica, sans-serif;
}

.roy_cs_modal h2
{
   margin: 0 0 14px 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp( 2rem, 5vw, 3rem );
   line-height: 1.05;
}

.roy_cs_modal p
{
   margin: 0 0 26px 0;
   font-size: 1.12rem;
   line-height: 1.55;
}

.roy_cs_modal button
{
   border: 0;
   border-radius: 999px;
   padding: 13px 30px;
   background: #c2502f;
   color: #ffffff;
   font-weight: 900;
   cursor: pointer;
   font-size: 1rem;
}

.roy_cs_modal button:hover
{
   background: #9c3b1f;
}
</style>

<div id="roy_cs_backdrop" class="roy_cs_backdrop" onclick="royCloseComingSoon(event);">
   <div class="roy_cs_modal" role="dialog" aria-modal="true" aria-labelledby="roy_cs_title" onclick="event.stopPropagation();">
      <h2 id="roy_cs_title">قريباً</h2>

      <p>يتم إعداد هذا الدرس بلغتك.</p>

      <button type="button" onclick="royCloseComingSoon(event);">
         OK      </button>
   </div>
</div>

<script>
function royComingSoon( e )
{
   if ( e )
   {
      e.preventDefault();
   }

   var modal = document.getElementById( "roy_cs_backdrop" );

   if ( modal )
   {
      modal.classList.add( "is_open" );
   }

   return false;
}

function royCloseComingSoon( e )
{
   if ( e )
   {
      e.preventDefault();
   }

   var modal = document.getElementById( "roy_cs_backdrop" );

   if ( modal )
   {
      modal.classList.remove( "is_open" );
   }

   return false;
}

document.addEventListener( "keydown", function( e )
{
   if ( e.key === "Escape" )
   {
      royCloseComingSoon( e );
   }
});

document.addEventListener("click", function(e)
{
   var card = e.target.closest(".roy_lesson_card");

   if (card && card.closest("#lessons"))
   {
      var lecture = card.querySelector(".roy_lesson_links a");

      /*
         NON-EN copied pages:
         Only .lecture.1.php is available.
         Any other lecture link shows Coming Soon.
      */
      if (
         lecture &&
         document.body.classList.contains("la_non_en") &&
         lecture.getAttribute("href").indexOf(".lecture.1.php") === -1
      )
      {
         e.stopPropagation();
         e.preventDefault();
         royComingSoon(e);
         return false;
      }

      /*
         Existing rule:
         Any lecture link with c=1 still shows Coming Soon.
         Keep this.
      */
      lecture = card.querySelector(".roy_lesson_links a[href*='c=1']");

      if (lecture)
      {
         e.stopPropagation();
         e.preventDefault();
         royComingSoon(e);
         return false;
      }
   }
}, true);
</script>




<!-- <
link rel="stylesheet" href="_smart_search/indexer.css"> 


<script src="_smart_search/indexer.js"></script>

-->

</body>
</html>