Jit-learn - Job-ready skills in your language

مقدمة / موارد / حول

تعلم تعليمات الصفحة قبل عرض الصفحة.

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

تمهيدي

ما الذي يفعله رأس HTML حقًا؟

الرأس هو منطقة التحكم في صفحة الويب. يخبر المتصفحات ومحركات البحث وأنظمة الذكاء الاصطناعي ومنصات وسائل التواصل الاجتماعي والويب الأوسع كيفية فهم الصفحة.

1. الرأس هو إعداد الصفحة

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

يحتوي على تعليمات ومعلومات الهوية للبرامج التي تقرأ الصفحة.


   |
   +--   إعداد الصفحة
   |
   +--   المحتوى المرئي

2. العنوان والوصف

العنوان يسمي الصفحة.

الوصف يشرح ما تدور حوله الصفحة للبحث والمعاينات وأدوات الذكاء الاصطناعي.

عنوان الصفحة<\/title>

<meta name="description"
   content="ملخص قصير للصفحة."></pre>
      </div>

      <div class="jit_about_block">
         <h3>3. منفذ العرض والشاشات المحمولة</h3>

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

         <p>بدونه، قد تظهر الصفحات المحمولة مكبرة أو صعبة القراءة.</p>

<pre><meta name="viewport"
   content="width=device-width, initial-scale=1"></pre>
      </div>

      <div class="jit_about_block">
         <h3>4. خريطة الموقع والروابط الأساسية</h3>

         <p>خريطة الموقع تساعد الأنظمة في اكتشاف الصفحات المهمة.</p>

         <p>الرابط الأساسي يخبر أي عنوان URL هو النسخة الرئيسية من الصفحة.</p>

<pre><link rel="sitemap"
   type="application\/xml"
   href="\/sitemap\/sitemap.xml">

<link rel="canonical"
   href="https:\/\/example.com\/page"></pre>
      </div>

      <div class="jit_about_block">
         <h3>5. اللغات البديلة</h3>

         <p>روابط اللغات البديلة تخبر محركات البحث أن نفس المحتوى موجود بلغات أو مناطق أخرى.</p>

         <p>هذا مهم للمواقع متعددة اللغات.</p>

<pre><link rel="alternate"
   hreflang="en"
   href="https:\/\/en.example.com\/">

<link rel="alternate"
   hreflang="fr"
   href="https:\/\/fr.example.com\/"></pre>
      </div>

      <div class="jit_about_block">
         <h3>6. Open Graph</h3>

         <p>Open Graph يتحكم في كيفية ظهور الصفحة عند مشاركتها في وسائل التواصل الاجتماعي وتطبيقات الدردشة وبطاقات المعاينة.</p>

<pre><meta property="og:title"
   content="عنوان الصفحة">

<meta property="og:description"
   content="ملخص الصفحة">

<meta property="og:image"
   content="https:\/\/example.com\/image.png"></pre>
      </div>

      <div class="jit_about_block">
         <h3>7. الروبوتات والفهرسة</h3>

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

<pre><meta name="robots"
   content="index,follow">

<meta name="googlebot"
   content="index,follow"></pre>
      </div>

      <div class="jit_about_block">
         <h3>8. الأيقونات، الثيم، النمط، والسكربت</h3>

         <p>يمكن للرأس أيضًا ربط الأيقونات، ألوان الثيم، أوراق الأنماط، الخطوط، والسكربتات.</p>

<pre><link rel="icon" href="\/favicon.ico">
<meta name="theme-color" content="#f4efe3">
<link rel="stylesheet" href="\/style.css">
<script src="\/app.js"><\/script></pre>
      </div>

      <div class="jit_about_remember">
         <h3>الرأس يتواصل مع الويب</h3>

         <p>الجسم يتواصل مع الناس.</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-head-primer">

   <div class="jit_about_head">
      <h2>ما الذي يفعله رأس HTML حقًا؟</h2>

      <p class="jit_about_lede">
         الرأس هو منطقة التحكم في صفحة الويب. يخبر المتصفحات ومحركات البحث وأنظمة الذكاء الاصطناعي ومنصات وسائل التواصل الاجتماعي والويب الأوسع كيفية فهم الصفحة.
      </p>
   </div>

   <div class="jit_about_body">

      <div class="jit_about_block">
         <h3>ما هو رأس HTML؟</h3>
         <p>الرأس هو منطقة المعلومات في صفحة HTML.</p>
<pre><head>
   <title>صفحتي<\/title>
   <meta name="description" content="ملخص قصير للصفحة.">
<\/head></pre>
      </div>

      <div class="jit_about_block">
         <h3>أين يذهب الرأس؟</h3>
         <p>الرأس يذهب داخل html وقبل الجسم.</p>
<pre><html>
   <head>
      إعداد الصفحة
   <\/head>

   <body>
      محتوى الصفحة المرئي
   <\/body>
<\/html></pre>
      </div>

      <div class="jit_about_block">
         <h3>3. العنوان والوصف</h3>
         <p>العنوان يسمي الصفحة. الوصف يلخص الصفحة للبحث والمعاينات وأدوات الذكاء الاصطناعي.</p>
<pre><title>عنوان الصفحة<\/title>

<meta name="description"
   content="ما تدور حوله هذه الصفحة."></pre>
      </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">
            بطاقات ممارسة HEAD الجاهزة للعمل
         </h2>

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

      <div class="roy_lessons_grid">

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

<article id="title_and_description.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">توجيه الرأس: هوية صفحة واضحة<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/title_and_description.lecture.1.php">محاضرة</a></div>
         </article>

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

         <article id="robots_and_indexing.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">توجيه مباشر: التحكم في الفهرسة<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/robots_and_indexing.lecture.php">محاضرة</a></div>
         </article>

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

         <article id="twitter_x_cards.lecture" class="roy_lesson_card roy_card_has_lecture" tabindex="0" role="link">
            <h3>حسن المعاينات على خلاصات X ونمط تويتر</h3>
            <p>أضف بيانات تعريف البطاقة حتى تظهر الصفحات المشتركة بشكل أفضل.</p>
            <div class="roy_lesson_seen">تُرى عندما تُشارك الصفحات على X، المنشورات الاجتماعية، الرسائل، وبطاقات المعاينة.</div>
            <div class="roy_lesson_code">توجيه مباشر: معاينة بطاقة أفضل<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/twitter_x_cards.lecture.php">محاضرة</a></div>
         </article>

         <article id="favicon_and_app_icons.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">توجيه مباشر: هوية موقع مصقولة<br>نسخة بدون أيقونة: أيقونة متصفح عامة</div>
            <div class="roy_lesson_includes"><b>يشمل:</b><ul><li>Favicon</li><li>أيقونة لمس أبل</li><li>علامة تبويب المتصفح</li><li>الإشارات المرجعية</li><li>أيقونات التطبيقات</li></ul></div>
            <div class="roy_lesson_links"><a href="lectures/favicon_and_app_icons.lecture.php">محاضرة</a></div>
         </article>

         <article id="viewport_and_mobile.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">توجيه مباشر: صفحة جاهزة للجوال<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/viewport_and_mobile.lecture.php">محاضرة</a></div>
         </article>

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

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

         <article id="ai_search_metadata.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">توجيه مباشر: معنى قابل للقراءة آلياً<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/ai_search_metadata.lecture.php">محاضرة</a></div>
         </article>

      </div>

   </div>
</section>

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

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

         <p>
            الهدف ليس حفظ كل قاعدة من قواعد بيانات التعريف أولاً. الهدف هو التعرف على ما ينتمي إلى الرأس، وما يؤثر على البحث والمعاينات، وما يجب التحقق منه قبل أن تصبح الصفحة مباشرة.
         </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>