ملخص الصفحة:
تتناول هذه الصفحة استكمال بناء صفحة ويب بلغة HTML لمشجعي كرة القدم، مع شرح بعض العناصر الأساسية في اللغة.
محتوى صفحة الويب:
يتم عرض كود HTML كامل لصفحة بعنوان "Football Fan Page". تحتوي الصفحة على:
* عنوان رئيسي `
`: "تعمل كرة القدم على جمع الناس معا".
* فقرة `
`: تشرح هدف حضور الجمهور لتشجيع اللاعبين.
* عنوان ثانوي `
`: "التاريخ".
* عدة أسطر نصية (باستخدام `
` للفاصل) تتحدث عن تاريخ كرة القدم ونشأتها في إنجلترا، وتاريخ الأندية منذ القرن الخامس عشر، واستمرار الأندية في المناطق الأكثر ثراءً.
* عنوانين ثانويين `
`: "المعرض" و"نبذة".
* فقرات ونصوص تشرح أن الصفحة تتيح تبادل الأفكار والآراء حول الفرق، وإمكانية التواصل لإضافة صور أو مقالات جديدة.
عناصر HTML مُشرحة:
وسم الفاصل `
`: يُستخدم لإنهاء جزء من النص وبداية جزء جديد في السطر التالي، مما ينتج فاصل أسطر داخل النص. يُضاف في كل نقطة يراد فيها إنهاء سطر وبداية سطر جديد.
المسافة الفارغة: تدمج لغة HTML المسافات الفارغة المتعددة معًا لتظهر كمسافة فارغة واحدة. يستفيد المطورون من هذه الخاصية في تنسيق الكود لجعله أسهل للقراءة، دون أن يؤثر ذلك على مظهر النص المعروض في المتصفح.مثال توضيحي:
يوجد مثال يوضح كيف أن النص المعروض في المتصفح يختلف عن تنسيق الكود. الكود يحتوي على مسافات وأسطر متعددة، لكن النتيجة النهائية في المتصفح تظهر جملة متماسكة.
العنصر المرئي (لقطة شاشة):
تُظهر لقطة شاشة لمتصفح يعرض كود HTML بسيطًا ويتضمن عنوان الصفحة (`
`) وتعيين الترميز (`<meta charset="UTF-8" />`). الناتج المعروض في نافذة المتصفح هو جملة: "تسمى كرة القدم سوكر في بعض أنحاء العالم."</p></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">كرة القدم</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تعمل كرة القدم على جمع الناس معًا. الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">التاريخ</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">بدأت كرة القدم رياضية ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. تُعد كرة القدم منذ القرن الخامس عشر من أكثر الرياضات انتشارًا، ولكن القليل منها فقط استمر بعد ذلك. يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراءً قليلاً، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل حضور المباريات.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">المعرض</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">نبذة</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء حول كرة القدم الذي نشجعه بشكل عام. يمكننا أيضًا التواصل من خلال النموذج لإضافة المزيد من الصور أو المقالات إلى المعرض.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">ينتج هذا العنصر فاصل أسطر داخل النص، لذلك يتم إضافته في كل نقطة تريد بها إنهاء جزء من النص، وبداية نص آخر بعد وسم <br> في بداية السطر التالي.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">المسافة الفارغة</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">يتم دمج المسافات الفارغة معًا في HTML لتظهر كمسافة فارغة واحدة. يستفيد مطورو الصفحات الإلكترونية من المساحة الفارغة لتسهيل قراءة النص. لا يؤثر هذا على مظهر الفقرة بأي حال من الأحوال.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تسمى كرة القدم سوكر</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">في بعض</div>
<p><em>نوع: NON_EDUCATIONAL</em></p>
<div style="white-space:pre-wrap;">أتحاء العالم</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">Page title</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">File C:/Users/Bina... C/Users/Bina... 08</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تسمى كرة القدم سوكر في بعض أنحاء العالم.</div>
<h3>🔍 عناصر مرئية</h3>
<p>An illustration of a laptop with a screen displaying code or text, and a separate screen showing a webpage. The Ministry of Education logo is visible on the laptop.</p>
<p>A snippet of HTML code showing basic structure including DOCTYPE, html, head, title, and body tags.</p></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">كرة القدم
تعمل كرة القدم على جمع الناس معًا. الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة.
التاريخ
بدأت كرة القدم رياضية ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. تُعد كرة القدم منذ القرن الخامس عشر من أكثر الرياضات انتشارًا، ولكن القليل منها فقط استمر بعد ذلك. يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراءً قليلاً، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل حضور المباريات.
المعرض
نبذة
من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء حول كرة القدم الذي نشجعه بشكل عام. يمكننا أيضًا التواصل من خلال النموذج لإضافة المزيد من الصور أو المقالات إلى المعرض.
ينتج هذا العنصر فاصل أسطر داخل النص، لذلك يتم إضافته في كل نقطة تريد بها إنهاء جزء من النص، وبداية نص آخر بعد وسم <br> في بداية السطر التالي.
المسافة الفارغة
يتم دمج المسافات الفارغة معًا في HTML لتظهر كمسافة فارغة واحدة. يستفيد مطورو الصفحات الإلكترونية من المساحة الفارغة لتسهيل قراءة النص. لا يؤثر هذا على مظهر الفقرة بأي حال من الأحوال.
تسمى كرة القدم سوكر
في بعض
أتحاء العالم
Page title
File C:/Users/Bina... C/Users/Bina... 08
تسمى كرة القدم سوكر في بعض أنحاء العالم.
--- VISUAL CONTEXT ---
**FIGURE**: Untitled
Description: An illustration of a laptop with a screen displaying code or text, and a separate screen showing a webpage. The Ministry of Education logo is visible on the laptop.
Context: Illustrates web page development and content display.
**FIGURE**: Untitled
Description: A snippet of HTML code showing basic structure including DOCTYPE, html, head, title, and body tags.
Context: Demonstrates the basic structure of an HTML document.
</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 2 بطاقة لهذه الصفحة</p>
<article><h3>ما هي الوظيفة الأساسية لوسم `<br>` في لغة HTML عند استخدامه داخل النص؟</h3><ul><li>أ) يبدأ فقرة جديدة بالكامل.</li><li>ب) يضيف مسافة فارغة أفقية كبيرة بين الكلمات.</li><li>ج) يقوم بإدراج فاصل سطر جديد داخل النص.</li><li>د) يعرض النص بخط عريض ومميز.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> يقوم بإدراج فاصل سطر جديد داخل النص.</p><p><strong>الشرح:</strong> وسم `<br>` هو وسم HTML يستخدم لإدراج فاصل سطر. هذا يعني أن أي محتوى يأتي بعد وسم `<br>` سيبدأ في سطر جديد، وهو مفيد لتقسيم الأسطر داخل نفس الكتلة النصية أو الفقرة.</p><p><strong>تلميح:</strong> فكر في كيفية إجبار النص على الانتقال إلى سطر جديد دون بدء فقرة جديدة.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>كيف تتعامل لغة HTML مع المسافات الفارغة المتعددة (whitespace) التي يتم إدراجها في الكود المصدر؟</h3><ul><li>أ) تعرض جميع المسافات الفارغة كما هي بالضبط داخل المتصفح.</li><li>ب) تقوم بدمج جميع المسافات الفارغة المتتالية لتظهر كمسافة فارغة واحدة فقط.</li><li>ج) تحذف جميع المسافات الفارغة تلقائياً لتقليل حجم الصفحة.</li><li>د) تحول المسافات الفارغة إلى أحرف خاصة غير مرئية.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> تقوم بدمج جميع المسافات الفارغة المتتالية لتظهر كمسافة فارغة واحدة فقط.</p><p><strong>الشرح:</strong> في HTML، يتم التعامل مع المسافات الفارغة (مثل المسافات المتعددة، علامات الجدولة، وفاصل الأسطر) عن طريق دمجها في مسافة واحدة عند عرض الصفحة في المتصفح. هذا يسمح لمطوري الويب بتنسيق الكود لتحسين قابلية القراءة دون التأثير على المظهر البصري للفقرات.</p><p><strong>تلميح:</strong> تذكر القاعدة الافتراضية للمتصفحات عند عرض المسافات المتكررة في HTML.</p><p><em>التصنيف: مفهوم جوهري | المستوى: متوسط</em></p></article>
</section>
</main>
<nav aria-label="صفحات الكتاب">
<a href="https://www.idros.ai/reader/digitalskills10-1?page=169">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=171">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=167">صفحة 167</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=168">صفحة 168</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=169">صفحة 169</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=171">صفحة 171</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=172">صفحة 172</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=173">صفحة 173</a>
<a href="https://www.idros.ai/reader/library">العودة إلى المكتبة</a>
</nav>
<footer>
<p>إدرس AI - مدرس ذكاء اصطناعي مجاني للمناهج السعودية | وزارة التعليم</p>
</footer>
</body>
</html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f70333a5873a87d',t:'MTc3Nzk4ODg3OA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>