📚 التنسيق باستخدام وسوم HTML
المفاهيم الأساسية
وسوم تنسيق النص: وسوم HTML خاصة تستخدم لتغيير مظهر النص على الصفحة الإلكترونية، حيث يُكتب النص المراد تنسيقه بين الوسمين المقابلين.
خريطة المفاهيم
```markmap
الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML
أهداف التعلم
تنسيق باستخدام HTML
- وسوم تنسيق النص
- النص: لتغميق النص (bold).
- النص: لإمالة النص (Italics).
- النص: لتسطير النص (Underlined).
- النص: لتصغير النص.
- النص: لتكبير النص.
- النص: لتمييز النص (Highlighted).
- النص: لوضع خط في منتصف النص.
- النص: لعرض النص بخط منخفض (Subscript).
- النص: لعرض النص بخط مرتفع (Superscript).
- : لتغيير حجم الخط أو نوعه أو لونه.
- تنسيق الصورة
- تنسيق عرض ملف الفيديو
مراجعة: وسوم 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>الهدف من الدرس هو تعلم استخدام وسوم HTML لتنسيق الصفحة الإلكترونية، حيث أن لكل متصفح تنسيقًا افتراضيًا خاصًا به.</li>
<li>كل وسم من وسوم التنسيق له وظيفة محددة لتغيير مظهر النص (مثل التغميق، الإمالة، التسطير، التصغير، التكبير، التمييز، إلخ).</li>
<li>يتم تطبيق التنسيق بوضع النص المراد تنسيقه بين الوسم الافتتاحي والوسم الإغلاقي (مثال: `<b>النص</b>`).</li></ul></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<h4>الدرس الأول:</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">الدرس الأول:</div>
<h4>التنسيق باستخدام وسوم HTML</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">التنسيق باستخدام وسوم HTML</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تعلمت في الصف الأول الثانوي لغة ترميز النص التشعبي (HTML) وكيفية استخدام وسوم HTML لإنشاء صفحة إلكترونية بسيطة، وستتعلم في هذا الدرس كيفية استخدام وسوم HTML لتنسيق صفحتك الإلكترونية حيث إن المتصفح يستخدمها تنسيقًا افتراضيًا خاصًا به.</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>
<h4>وسوم تنسيق النص</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">وسوم تنسيق النص</div>
<h4>جدول الوسوم والوظائف</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<p><em>نوع: NON_EDUCATIONAL</em></p>
<div style="white-space:pre-wrap;">رابط الدرس الرقمي
www.ien.edu.sa</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;">--- SECTION: الدرس الأول: ---
الدرس الأول:
--- SECTION: التنسيق باستخدام وسوم HTML ---
التنسيق باستخدام وسوم HTML
تعلمت في الصف الأول الثانوي لغة ترميز النص التشعبي (HTML) وكيفية استخدام وسوم HTML لإنشاء صفحة إلكترونية بسيطة، وستتعلم في هذا الدرس كيفية استخدام وسوم HTML لتنسيق صفحتك الإلكترونية حيث إن المتصفح يستخدمها تنسيقًا افتراضيًا خاصًا به.
--- SECTION: تنسيق النص ---
تنسيق النص
هناك بعض الوسوم الخاصة التي يمكنك استخدامها لتنسيق مظهر النص على صفحتك الإلكترونية وتتطلب كتابة النص الذي تريد تنسيقه بين الوسمين المقابلين.
--- SECTION: وسوم تنسيق النص ---
وسوم تنسيق النص
--- SECTION: جدول الوسوم والوظائف ---
رابط الدرس الرقمي
www.ien.edu.sa
وزارة التعليم
Ministry of Education
2025 - 1447</div>
</section>
</main>
<nav aria-label="صفحات الكتاب">
<a href="https://www.idros.ai/reader/digitaltechnology11-1?page=204">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=206">الصفحة التالية</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=204">صفحة 204</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=208">صفحة 208</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:'9f74f02a8a283334',t:'MTc3ODAzODU2MA=='};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>