📚 استخدام وسوم HTML
المفاهيم الأساسية
وسم ``: لعرض النص بخط مرتفع (Superscript).
وسم ``: لعرض النص بخط منخفض (Subscript).
وسم ``: لتغيير حجم الخط أو نوعه أو لونه.
خريطة المفاهيم
```markmap
الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML
أهداف التعلم
تنسيق باستخدام HTML
- وسوم تنسيق النص
- النص: لتغميق النص (bold).
- النص: لإمالة النص (Italics).
- النص: لتسطير النص (Underlined).
- النص: لتصغير النص.
- النص: لتكبير النص.
- النص: لتمييز النص (Highlighted).
- النص: لوضع خط في منتصف النص.
- النص: لعرض النص بخط منخفض (Subscript).
- النص: لعرض النص بخط مرتفع (Superscript).
- : لتغيير حجم الخط أو نوعه أو لونه.
- خاصية `face`: لتحديد نوع الخط (مثال: Tahoma).
- خاصية `size`: لتحديد حجم الخط (القيم من 1 إلى 9، حيث 1 أصغر و9 أكبر).
- خاصية `color`: لتحديد لون الخط (مثال: blue).
- أمثلة تطبيقية
- مثال 1: استخدام وسمي غامق (bold) ومائل (Italics).
- مثال 2: استخدام وسمي مرتفع (Superscript) ومنخفض (Subscript).
- مثال 3: استخدام وسوم تنسيق الخط.
- مثال تطبيقي: صفحة "Football Fan Page"
-
: لإدخال فاصل سطر.
-
: لتحديد فقرة.
- : لإمالة النص داخل الفقرة.
- تنسيق الصورة
- تنسيق عرض ملف الفيديو
مراجعة: وسوم 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> يستخدم الوسم `<sup>` لكتابة الأسس مثل: x<sup>2</sup>.</li>
<li> يستخدم الوسم `<sub>` لكتابة الرموز المنخفضة مثل: x<sub>3</sub>.</li>
<li> يمكن لوسم `<font>` التحكم في:</li>
<p></ul> - نوع الخط (`face`).</p>
<p> - حجم الخط (`size`) بقيم من 1 (الأصغر) إلى 9 (الأكبر).</p>
<p> - لون الخط (`color`).</p>
<ul><li> يمكن العثور على أسماء ورموز الألوان في HTML من مصادر مثل الموقع المذكور.</li></ul></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><body>
x <sup>2</sup><br>
x <sub>3</sub><br>
</body></div>
<h4>مثال 2: استخدام وسمي مرتفع (Superscript) ومنخفض (Subscript).</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">يقبل وسم حجم الخط القيم من 1 إلى 9 حيث يمثل 1 القيمة الأصغر و 9 تمثل القيمة الأكبر.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><body>
<font face="Tahoma" >تعمل كرة القدم على جمع الناس معاً</font><br>
<font size="+9">تعمل كرة القدم على جمع الناس معاً</font><br>
<font color="blue">تعمل كرة القدم على جمع الناس معاً</font><br>
</body></div>
<h4>مثال 3: استخدام وسوم تنسيق الخط.</h4>
<p><em>نوع: NON_EDUCATIONAL</em></p>
<div style="white-space:pre-wrap;">يمكنك الحصول على المقطع البرمجي للون (مصادر الأكواد) لصيحتك الإلكترونية من الموقع:
https://colorcodeshtml.wikiforschool.com
حيث تجد أسماء الألوان في HTML ودرجاتها رموزها Hex.</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></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;"><body>
x <sup>2</sup><br>
x <sub>3</sub><br>
</body>
--- SECTION: مثال 2: استخدام وسمي مرتفع (Superscript) ومنخفض (Subscript). ---
يقبل وسم حجم الخط القيم من 1 إلى 9 حيث يمثل 1 القيمة الأصغر و 9 تمثل القيمة الأكبر.
<body>
<font face="Tahoma" >تعمل كرة القدم على جمع الناس معاً</font><br>
<font size="+9">تعمل كرة القدم على جمع الناس معاً</font><br>
<font color="blue">تعمل كرة القدم على جمع الناس معاً</font><br>
</body>
--- SECTION: مثال 3: استخدام وسوم تنسيق الخط. ---
يمكنك الحصول على المقطع البرمجي للون (مصادر الأكواد) لصيحتك الإلكترونية من الموقع:
https://colorcodeshtml.wikiforschool.com
حيث تجد أسماء الألوان في HTML ودرجاتها رموزها Hex.
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
وزارة التعليم
Ministry of Education
2025 - 1447</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 4 بطاقة لهذه الصفحة</p>
<article><h3>ما هو الغرض من وسم <sup> في HTML؟</h3><ul><li>أ) تغيير لون النص إلى الأزرق.</li><li>ب) عرض النص بشكل مائل.</li><li>ج) عرض النص بشكل مرتفع (Superscript).</li><li>د) تحديد نوع خط النص.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> عرض النص بشكل مرتفع (Superscript).</p><p><strong>الشرح:</strong> وسم <sup> في HTML هو اختصار لكلمة Superscript. وظيفته الأساسية هي عرض النص المحصور بداخله بحجم أصغر قليلاً وأعلى من مستوى السطر الأساسي، مثل كتابة الأسس (x²).</p><p><strong>تلميح:</strong> يستخدم هذا الوسم عادةً في كتابة الأسس الرياضية أو التواريخ.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>ما هو الغرض من وسم <sub> في HTML؟</h3><ul><li>أ) عرض النص بشكل منخفض (Subscript).</li><li>ب) جعل النص عريضاً.</li><li>ج) تحديد حجم الخط إلى الأكبر.</li><li>د) إضافة خط تحت النص.</li></ul><p><strong>الإجابة الصحيحة:</strong> a</p><p><strong>الإجابة:</strong> عرض النص بشكل منخفض (Subscript).</p><p><strong>الشرح:</strong> وسم <sub> في HTML هو اختصار لكلمة Subscript. وظيفته الأساسية هي عرض النص المحصور بداخله بحجم أصغر قليلاً وأسفل من مستوى السطر الأساسي، مثل كتابة الأرقام في الصيغ الكيميائية (H₂O).</p><p><strong>تلميح:</strong> يستخدم هذا الوسم عادةً في كتابة الصيغ الكيميائية مثل H₂O.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>أي من وسوم HTML التالية يُستخدم لتغيير لون النص؟</h3><ul><li>أ) <font size="..."></li><li>ب) <font face="..."></li><li>ج) <font color="..."></li><li>د) <sup></li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> <font color="..."></p><p><strong>الشرح:</strong> يُستخدم وسم <font> مع السمة `color` لتحديد لون النص في HTML. يمكن تحديد اللون باستخدام اسمه (مثل "blue") أو باستخدام رمز الست عشري (Hex Code).</p><p><strong>تلميح:</strong> يحتوي هذا الوسم على سمة (attribute) خاصة بالألوان.</p><p><em>التصنيف: مفهوم جوهري | المستوى: متوسط</em></p></article>
<article><h3>ما هو نطاق القيم التي يقبلها وسم <font size> في HTML لتحديد حجم الخط؟</h3><ul><li>أ) من 0 إلى 10</li><li>ب) من 1 إلى 9</li><li>ج) من -5 إلى +5</li><li>د) من 10 إلى 20</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> من 1 إلى 9</p><p><strong>الشرح:</strong> يستخدم وسم <font size> في HTML قيماً رقمية لتحديد حجم الخط. وفقاً للمثال في النص، القيمة 1 تمثل أصغر حجم، والقيمة 9 تمثل أكبر حجم. وبالتالي، النطاق الكامل هو من 1 إلى 9.</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=206">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=208">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=204">صفحة 204</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=208">صفحة 208</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=209">صفحة 209</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=210">صفحة 210</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:'9f75cc551d845645',t:'MTc3ODA0NzU3OA=='};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>