📚 أمثلة على وسوم تنسيق النص في HTML
المفاهيم الأساسية
* وسوم التنسيق: تستخدم لتغيير مظهر النص داخل صفحة الويب (مثل الغامق والمائل).
خريطة المفاهيم
```markmap
الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML
أهداف التعلم
تنسيق باستخدام HTML
- وسوم تنسيق النص
- النص: لتغميق النص (bold).
- النص: لإمالة النص (Italics).
- النص: لتسطير النص (Underlined).
- النص: لتصغير النص.
- النص: لتكبير النص.
- النص: لتمييز النص (Highlighted).
- النص: لوضع خط في منتصف النص.
- النص: لعرض النص بخط منخفض (Subscript).
- النص: لعرض النص بخط مرتفع (Superscript).
- : لتغيير حجم الخط أو نوعه أو لونه.
- أمثلة تطبيقية
- مثال 1: استخدام وسمي غامق (bold) ومائل (Italics).
- مثال تطبيقي: صفحة "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> يجب <strong>إغلاق الوسم</strong> بعد استخدامه.</li>
<li> <strong>المبالغة في إضافة التنسيقات</strong> للنصوص قد يؤدي إلى نتيجة عكسية ويجعل الصفحة تظهر بشكل غير جيد.</li>
<li> يمكنك <strong>تجربة</strong> الأجزاء البرمجية بنفسك لفهم تأثير كل وسم.</li></ul></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">أمثلة على بعض هذه الوسوم:</div>
<h4>مثال 1</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">استخدام وسمي غامق (bold) ومائل (Italics).</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>Football Fan Page</title>
<meta charset="UTF-8" />
</head>
<body></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;"><p>الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة</p><p><i>الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة</i></p></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"></body>
</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>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">جرب هذا الجزء من المقطع البرمجي:</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><body>
<br>تعمل كرة القدم على جمع الناس معاً<br>
تعمل كرة القدم على جمع الناس معاً<u></u></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"></body></div></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">أمثلة على بعض هذه الوسوم:
--- SECTION: مثال 1 ---
استخدام وسمي غامق (bold) ومائل (Italics).
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>Football Fan Page</title>
<meta charset="UTF-8" />
</head>
<body>
لا تنس إغلاق الوسم.
تعمل كرة القدم على جمع الناس معاً<br>تعمل كرة القدم على جمع الناس معاً
<p>الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة</p><p><i>الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة</i></p>
</body>
</html>
المبالغة في إضافة التنسيقات على النصوص في صفحتك الإلكترونية قد يؤدي إلى نتيجة عكسية تجعل صفحتك تظهر بشكل غير جيد.
جرب بنفسك
جرب هذا الجزء من المقطع البرمجي:
<body>
<br>تعمل كرة القدم على جمع الناس معاً<br>
تعمل كرة القدم على جمع الناس معاً<u></u>
</body></div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 3 بطاقة لهذه الصفحة</p>
<article><h3>ما هو تأثير المبالغة في استخدام تنسيقات النصوص (مثل الغامق والمائل والتسطير) في صفحة ويب؟</h3><ul><li>أ) يجعل الصفحة أسرع في التحميل.</li><li>ب) يحسن ترتيب الصفحة في محركات البحث (SEO).</li><li>ج) قد يؤدي إلى نتيجة عكسية تجعل الصفحة تظهر بشكل غير جيد.</li><li>د) يضمن توافق الصفحة مع جميع المتصفحات.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> قد يؤدي إلى نتيجة عكسية تجعل الصفحة تظهر بشكل غير جيد.</p><p><strong>الشرح:</strong> 1. التنسيقات (مثل الغامق والمائل) تُستخدم لتحسين القراءة وتسليط الضوء على نقاط مهمة.
2. الإفراط في استخدامها يجعل الصفحة مشوشة ويصعب قراءتها.
3. هذا يقلل من جمالية التصميم ويؤثر سلباً على تجربة المستخدم.
4. النتيجة: ظهور الصفحة بشكل غير جيد.</p><p><strong>تلميح:</strong> فكر في تجربة المستخدم وجاذبية التصميم.</p><p><em>التصنيف: مفهوم جوهري | المستوى: سهل</em></p></article>
<article><h3>ما هو الغرض الأساسي من استخدام وسمي <b> (غامق) و <i> (مائل) في HTML؟</h3><ul><li>أ) لإنشاء روابط تشعبية داخل الصفحة.</li><li>ب) لتحديد لغة ترميز الصفحة.</li><li>ج) لتنسيق النص وتسليط الضوء على أجزاء معينة لتحسين القراءة والتأكيد.</li><li>د) لإدراج الصور والوسائط المتعددة.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> لتنسيق النص وتسليط الضوء على أجزاء معينة لتحسين القراءة والتأكيد.</p><p><strong>الشرح:</strong> 1. وسم <b> يجعل النص غامقاً (bold).
2. وسم <i> يجعل النص مائلاً (italic).
3. يستخدمان للتأكيد البصري على كلمات أو جمل مهمة.
4. الغرض: تحسين قابلية القراءة وجذب انتباه القارئ لأجزاء محددة.</p><p><strong>تلميح:</strong> هذه الوسوم تؤثر على مظهر النص وليس على معناه الهيكلي.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>أي من العبارات التالية يصف مبدأً مهماً في تصميم صفحات الويب بناءً على المثال المقدم؟</h3><ul><li>أ) يجب استخدام أكبر عدد ممكن من الألوان لجذب الانتباه.</li><li>ب) التوازن في استخدام عناصر التنسيق (مثل الغامق والمائل) مهم للحصول على تصميم جيد.</li><li>ج) يجب تجنب استخدام أي تنسيقات نصية للحفاظ على بساطة الصفحة.</li><li>د) سرعة تحميل الصفحة هي العامل الوحيد المهم في التصميم.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> التوازن في استخدام عناصر التنسيق (مثل الغامق والمائل) مهم للحصول على تصميم جيد.</p><p><strong>الشرح:</strong> 1. المثال يوضح استخدام وسوم التنسيق <b> و <i>.
2. ثم يحذر من المبالغة في استخدامها.
3. المبدأ المستفاد: الاعتدال والتوازن في التصميم.
4. الهدف النهائي: صفحة ويب ذات مظهر جيد وسهل القراءة.</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=205">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=207">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=203">صفحة 203</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=207">صفحة 207</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/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:'9f7559640d4d4440',t:'MTc3ODA0Mjg3MA=='};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>