📚 استخدام الوسمي small و big و mark و del
المفاهيم الأساسية
الوسم ``: يعرض النص بحجم خط أصغر من الحجم الافتراضي.
الوسم ``: يعرض النص بحجم خط أكبر من الحجم الافتراضي.
الوسم ``: يميز النص (يضفي عليه لون خلفية مميز).
الوسم ``: يعرض النص مع خط في وسطه للإشارة إلى الحذف.
خريطة المفاهيم
```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: استخدام وسوم تنسيق الخط.
- مثال 4: استخدام الوسمي small و big
- مثال 5: استخدام الوسمي mark و del
- مثال تطبيقي: صفحة "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>الصفحة تحتوي على مثالين تطبيقيين لوسوم تنسيق النص.</li>
<li>المثال 4 يوضح تأثير الوسمين `<small>` و `<big>` على نفس الجملة.</li>
<li>المثال 5 يوضح تأثير الوسمين `<mark>` و `<del>` على نفس الجملة.</li>
<li>هذه الوسوم تُستخدم داخل الوسم `<body>` لتنسيق النص المعروض.</li></ul></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<h4>مثال 4: استخدام الوسمي small و big</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">مثال 4: استخدام الوسمي small و big</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><body>
تعمل كرة القدم على جمع الناس معاً<br>
<small>تعمل كرة القدم على جمع الناس معاً</small><br>
<big>تعمل كرة القدم على جمع الناس معاً</big>
</body></div>
<h4>مثال 4</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً</div>
<h4>مثال 5: استخدام الوسمي mark و del</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">مثال 5: استخدام الوسمي mark و del</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><body>
تعمل كرة القدم على جمع الناس معاً<br>
<mark>تعمل كرة القدم على جمع الناس معاً</mark><br>
<del>تعمل كرة القدم على جمع الناس معاً</del>
</body></div>
<h4>مثال 5</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً</div>
<p><em>نوع: NON_EDUCATIONAL</em></p>
<div style="white-space:pre-wrap;">Ministry of Education
2025 - 1447</div>
<p><em>نوع: METADATA</em></p>
<div style="white-space:pre-wrap;">208</div></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">--- SECTION: مثال 4: استخدام الوسمي small و big ---
مثال 4: استخدام الوسمي small و big
<body>
تعمل كرة القدم على جمع الناس معاً<br>
<small>تعمل كرة القدم على جمع الناس معاً</small><br>
<big>تعمل كرة القدم على جمع الناس معاً</big>
</body>
--- SECTION: مثال 4 ---
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
--- SECTION: مثال 5: استخدام الوسمي mark و del ---
مثال 5: استخدام الوسمي mark و del
<body>
تعمل كرة القدم على جمع الناس معاً<br>
<mark>تعمل كرة القدم على جمع الناس معاً</mark><br>
<del>تعمل كرة القدم على جمع الناس معاً</del>
</body>
--- SECTION: مثال 5 ---
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
تعمل كرة القدم على جمع الناس معاً
Ministry of Education
2025 - 1447
208</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 5 بطاقة لهذه الصفحة</p>
<article><h3>ما هو تأثير الوسم <del> على النص في لغة HTML؟</h3><ul><li>أ) يُظهر النص بخلفية ملونة (مميز).</li><li>ب) يُظهر النص بخط مائل (Italic).</li><li>ج) يُظهر النص بحجم خط أصغر من الحجم الافتراضي.</li><li>د) يُظهر النص بخط مشطوب (Strikethrough)، للإشارة إلى أنه تم حذفه أو أنه غير صالح.</li></ul><p><strong>الإجابة الصحيحة:</strong> d</p><p><strong>الإجابة:</strong> يُظهر النص بخط مشطوب (Strikethrough)، للإشارة إلى أنه تم حذفه أو أنه غير صالح.</p><p><strong>الشرح:</strong> 1. الوسم <del> هو وسم تنسيق نصي في HTML.
2. وظيفته الأساسية هي عرض النص الموجود بين وسمي الفتح والإغلاق بخط مشطوب (خط في وسطه).
3. يُستخدم للإشارة إلى أن النص قد تم حذفه من المستند، أو للإشارة إلى معلومات قديمة أو غير صالحة بعد التحديث.</p><p><strong>تلميح:</strong> فكر في الكلمة الإنجليزية 'delete' ومعناها.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>أي من أزواج الوسوم التالية في HTML يؤدي وظيفة عكسية للآخر فيما يتعلق بحجم الخط؟</h3><ul><li>أ) <mark> و <del></li><li>ب) <small> و <mark></li><li>ج) <big> و <del></li><li>د) <small> و <big></li></ul><p><strong>الإجابة الصحيحة:</strong> d</p><p><strong>الإجابة:</strong> <small> و <big></p><p><strong>الشرح:</strong> 1. الوسم <small> يقلل حجم الخط عن الحجم الافتراضي.
2. الوسم <big> يزيد حجم الخط عن الحجم الافتراضي.
3. لذلك، تأثير كل منهما على حجم الخط هو عكس تأثير الآخر.
4. الوسوم <mark> و <del> لا يؤثران على حجم الخط، بل على مظهر النص (تظليل أو شطب).</p><p><strong>تلميح:</strong> فكر في وسوم تغيير حجم الخط فقط.</p><p><em>التصنيف: فرق بين مفهومين | المستوى: متوسط</em></p></article>
<article><h3>ما هو تأثير الوسم <small> على النص في لغة HTML؟</h3><ul><li>أ) يُظهر النص بحجم خط أكبر من الحجم الافتراضي.</li><li>ب) يُظهر النص بحجم خط أصغر من الحجم الافتراضي.</li><li>ج) يُظهر النص بخط عريض (Bold).</li><li>د) يُظهر النص بخط مائل (Italic).</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> يُظهر النص بحجم خط أصغر من الحجم الافتراضي.</p><p><strong>الشرح:</strong> 1. الوسم <small> هو وسم تنسيق نصي في HTML.
2. وظيفته الأساسية هي عرض النص الموجود بين وسمي الفتح والإغلاق بحجم خط أصغر مقارنة بالنص المحيط به أو الحجم الافتراضي.
3. يُستخدم عادةً للتعليقات الجانبية أو حقوق النشر أو النصوص الثانوية.</p><p><strong>تلميح:</strong> فكر في الكلمة الإنجليزية 'small' ومعناها.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>ما هو تأثير الوسم <big> على النص في لغة HTML؟</h3><ul><li>أ) يُظهر النص بحجم خط أصغر من الحجم الافتراضي.</li><li>ب) يُظهر النص بخط مائل (Italic).</li><li>ج) يُظهر النص بحجم خط أكبر من الحجم الافتراضي.</li><li>د) يُظهر النص بخط مشطوب (Strikethrough).</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> يُظهر النص بحجم خط أكبر من الحجم الافتراضي.</p><p><strong>الشرح:</strong> 1. الوسم <big> هو وسم تنسيق نصي في HTML.
2. وظيفته الأساسية هي عرض النص الموجود بين وسمي الفتح والإغلاق بحجم خط أكبر مقارنة بالنص المحيط به أو الحجم الافتراضي.
3. يُستخدم لتسليط الضوء على أجزاء معينة من النص أو للعناوين الفرعية.</p><p><strong>تلميح:</strong> فكر في الكلمة الإنجليزية 'big' ومعناها.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>ما هو تأثير الوسم <mark> على النص في لغة HTML؟</h3><ul><li>أ) يُظهر النص بخط مشطوب (Strikethrough).</li><li>ب) يُظهر النص بخلفية ملونة (مميز)، كما لو تم تحديده بقلم تظليل.</li><li>ج) يُظهر النص بخط عريض (Bold).</li><li>د) يُظهر النص بحجم خط أكبر من الحجم الافتراضي.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> يُظهر النص بخلفية ملونة (مميز)، كما لو تم تحديده بقلم تظليل.</p><p><strong>الشرح:</strong> 1. الوسم <mark> هو وسم تنسيق نصي في HTML.
2. وظيفته الأساسية هي عرض النص الموجود بين وسمي الفتح والإغلاق مع خلفية ملونة (عادةً باللون الأصفر).
3. يُستخدم لتسليط الضوء على أجزاء مهمة من النص، مما يجعلها تبدو كما لو تم تحديدها بقلم تظليل.</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=207">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=209">الصفحة التالية</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/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/digitaltechnology11-1?page=211">صفحة 211</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:'9f7632839b5e2877',t:'MTc3ODA1MTc2Mw=='};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>