📚 HTML - القائمة غير المرتبة
المفاهيم الأساسية
القائمة غير المرتبة (Unordered List): قائمة تُنشأ باستخدام الوسم `
`، ويوضح كل عنصر فيها بين وسمي الفتح ``.خريطة المفاهيم
```markmap
الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML
أهداف التعلم
تنسيق باستخدام HTML
- تنسيق النص
- تنسيق الصورة
- تنسيق عرض ملف الفيديو
مراجعة: وسوم HTML الأساسية
- : يحدد نوع المستند.
- : الحاوية الرئيسية (يدعم النص العربي).
- : يحتوي على معلومات تعريفية عن الصفحة.
- : يحدد نص شريط العنوان.</p>
<p> - <meta charset="UTF-8">: يعرّف الترميز لعرض الأحرف العربية.</p>
<ul><li><body>: يحتوي على المحتوى الرئيسي المعروض.</li>
<p></ul> - <h1> إلى <h6>: تحدد العناوين.</p>
<p> - <p>: تحدد فقرة.</p>
<p> - <br>: يُدخل فاصل سطر.</p>
<h4>القوائم في HTML</h4>
<p>#### القائمة غير المرتبة (Unordered List)</p>
<ul><li>الوسم: `<ul>`</li>
<li>عنصر القائمة: `<li>`</li>
<li>مثال: قائمة ألعاب جماعية</li>
<p></ul><h4>أوراق الأنماط المتتالية (CSS)</h4></p>
<ul><li>إنشاء ملفات CSS</li>
<li>استخدام قواعد CSS في التصميم</li>
<li>ربط ملف CSS بالصفحة</li>
<p></ul><h4>إنشاء المواقع</h4></p>
<ul><li>مراحل إنشاء موقع إلكتروني</li>
<li>الموقع المستجيب (ماهيته ومزاياه)</li>
<li>إنشاء موقع مستجيب</li>
<li>الموقع التفاعلي (ماهيته)</li>
<li>إنشاء موقع تفاعلي باستخدام جافا سكربت</li>
<p></ul><h4>تحسين محركات البحث (SEO)</h4></p>
<ul><li>تقنيات SEO لرفع تصنيف الموقع</li>
<p></ul><h4>الرسائل الإخبارية الرقمية</h4></p>
<ul><li>ماهيتها والهدف منها</li>
<li>إنشاؤها</li>
<p></ul><h3>الأدوات</h3></p>
<ul><li>محرر فيجوال ستوديو كود (Visual Studio Code Editor)</li>
<p></ul>```</p><p><h4>نقاط مهمة</h4></p>
<ul><li> مثال على القائمة غير المرتبة: قائمة بعنوان "ألعاب جماعية" تحتوي على: كرة القدم، كرة السلة، كرة اليد، كريكت.</li>
<li> لإضافة صور إلى الموقع، استخدم الوسم `<img>` مع كتابة المسار الصحيح للصورة وامتدادها.</li>
<li> مثال على إضافة معرض صور: استخدام الوسم `<img src="مسار_الصورة.امتداد" width="600" height="400">` لأربع صور مرتبطة بكرة القدم.</li></ul></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">القائمة غير المرتبة (Unordered List)</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تنشأ القائمة غير المرتبة باستخدام الوسم <ul> حيث يوضح كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق </li>.
لاحظ المثال التالي:</div>
<h4>ألعاب جماعية</h4>
<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;"><!--Let's add the images to our site-->
<h2 id="gallery">المعرض</h2>
<img src="/Images/World_Cup.jpg" width="600" height="400" >
<img src="/Images/Soccer_field.jpg" width="600" height="400" >
<img src="/Images/football_stadium.jpg" width="600" height="400" >
<img src="/Images/soccer-saudi-arabia-logo.jpg" width="600" height="400" ></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">عليك كتابة المسار الصحيح للصورة وكذلك الامتداد الصحيح حتى تظهر الصورة في المتصفح.</div>
<p><em>نوع: METADATA</em></p>
<div style="white-space:pre-wrap;">Ministry of Education
2025 - 1447</div>
<h3>🔍 عناصر مرئية</h3>
<h4>ألعاب جماعية</h4>
<p>A browser window showing an unordered list with four items: كرة القدم, كرة السلة, كرة اليد, كريكت.</p>
<h4>المعرض</h4>
<p>A browser window displaying a gallery of four football-related images arranged in a 2x2 grid. The top-left image shows a football team. The top-right image shows a trophy. The bottom-left image shows a Saudi Arabian football logo. The bottom-right image shows a football stadium at night.</p></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">القائمة غير المرتبة (Unordered List)
تنشأ القائمة غير المرتبة باستخدام الوسم <ul> حيث يوضح كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق </li>.
لاحظ المثال التالي:
--- SECTION: ألعاب جماعية ---
كرة القدم
كرة السلة
كرة اليد
كريكت
إضافة صورًا إلى الموقع الإلكتروني الخاص بك:
<!--Let's add the images to our site-->
<h2 id="gallery">المعرض</h2>
<img src="/Images/World_Cup.jpg" width="600" height="400" >
<img src="/Images/Soccer_field.jpg" width="600" height="400" >
<img src="/Images/football_stadium.jpg" width="600" height="400" >
<img src="/Images/soccer-saudi-arabia-logo.jpg" width="600" height="400" >
عليك كتابة المسار الصحيح للصورة وكذلك الامتداد الصحيح حتى تظهر الصورة في المتصفح.
Ministry of Education
2025 - 1447
--- VISUAL CONTEXT ---
**DIAGRAM**: ألعاب جماعية
Description: A browser window showing an unordered list with four items: كرة القدم, كرة السلة, كرة اليد, كريكت.
Table Structure:
Headers: N/A
Rows:
Row 1: كرة القدم
Row 2: كرة السلة
Row 3: كرة اليد
Row 4: كريكت
Context: Illustrates the HTML structure for an unordered list using <ul> and <li> tags.
**DIAGRAM**: المعرض
Description: A browser window displaying a gallery of four football-related images arranged in a 2x2 grid. The top-left image shows a football team. The top-right image shows a trophy. The bottom-left image shows a Saudi Arabian football logo. The bottom-right image shows a football stadium at night.
Table Structure:
Headers: N/A
Rows:
Row 1: Image: World_Cup.jpg (600x400) | Image: Soccer_field.jpg (600x400)
Row 2: Image: football_stadium.jpg (600x400) | Image: soccer-saudi-arabia-logo.jpg (600x400)
Calculation needed: HTML image display
Context: Demonstrates how to embed multiple images in an HTML page using the <img> tag and specifies their source files and dimensions.
</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 4 بطاقة لهذه الصفحة</p>
<article><h3>ما الوسم المستخدم لإنشاء قائمة غير مرتبة (Unordered List) في HTML؟</h3><ul><li>أ) الوسم <ol></li><li>ب) الوسم <li></li><li>ج) الوسم <ul></li><li>د) الوسم <list></li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> الوسم <ul></p><p><strong>الشرح:</strong> 1. القائمة غير المرتبة هي قائمة لا تعتمد على تسلسل رقمي أو أبجدي. 2. في HTML، يتم إنشاؤها باستخدام الوسم <ul>. 3. يتم وضع كل عنصر من عناصر القائمة داخل الوسم <li>.</p><p><strong>تلميح:</strong> يبدأ اسم هذا الوسم بحرف 'u'.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>ما الوسم المستخدم لتحديد عنصر فردي داخل قائمة مرتبة أو غير مرتبة في HTML؟</h3><ul><li>أ) الوسم <item></li><li>ب) الوسم <li></li><li>ج) الوسم <ul></li><li>د) الوسم <point></li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> الوسم <li></p><p><strong>الشرح:</strong> 1. داخل الوسم <ul> أو <ol>، يتم وضع محتوى كل عنصر من عناصر القائمة. 2. يتم وضع هذا المحتوى بين وسمي الفتح والإغلاق <li>. 3. مثال: <li>كرة القدم</li>.</p><p><strong>تلميح:</strong> هذا الوسم يحيط بالنص الفعلي لكل عنصر في القائمة.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>ما الغرض من السمات width و height في وسم <img> في HTML؟</h3><ul><li>أ) تحديد دقة ووضوح الصورة.</li><li>ب) تحديد موقع الصورة على الخادم.</li><li>ج) تحديد اسم ملف الصورة وامتداده.</li><li>د) تحديد عرض وارتفاع الصورة المعروضة بالبكسل.</li></ul><p><strong>الإجابة الصحيحة:</strong> d</p><p><strong>الإجابة:</strong> تحديد عرض وارتفاع الصورة المعروضة بالبكسل.</p><p><strong>الشرح:</strong> 1. السمات width (العرض) و height (الارتفاع) في وسم <img> تحدد حجم الصورة. 2. القيم تُعطى عادةً بوحدة البكسل (px). 3. مثال: <img src='image.jpg' width='600' height='400'>.</p><p><strong>تلميح:</strong> تتحكم هذه السمات في الأبعاد المرئية للصورة على الصفحة.</p><p><em>التصنيف: مفهوم جوهري | المستوى: متوسط</em></p></article>
<article><h3>ما الوسم الأساسي في HTML المستخدم لإنشاء قائمة غير مرتبة (تُعرض عادة بنقاط أو رموز)؟</h3><ul><li>أ) الوسم <ol></li><li>ب) الوسم <ul></li><li>ج) الوسم <li></li><li>د) الوسم <list></li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> الوسم <ul></p><p><strong>الشرح:</strong> في HTML، تُنشأ القوائم غير المرتبة باستخدام وسوم زوجية محددة. 1. الوسم <ul> هو وسم الحاوية الرئيسي الذي يحدد بداية ونهاية القائمة غير المرتبة. 2. كل عنصر فردي داخل القائمة يُوضع داخل وسوم <li> و </li>. 3. يقوم المتصفح تلقائياً بتنسيق العناصر داخل <ul> لعرضها كنقاط أو رموز، اعتماداً على التصميم.</p><p><strong>تلميح:</strong> تذكر أن هناك وسوماً مختلفة للقوائم المرتبة وغير المرتبة. فكر في الوسم الذي يحدد نوع القائمة نفسه وليس عناصرها.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
</section>
</main>
<nav aria-label="صفحات الكتاب">
<a href="https://www.idros.ai/reader/digitaltechnology11-1?page=203">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=205">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=201">صفحة 201</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=202">صفحة 202</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=203">صفحة 203</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=205">صفحة 205</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=206">صفحة 206</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=207">صفحة 207</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:'9f749304ea4ac465',t:'MTc3ODAzNDc0NQ=='};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>