📚 وسوم HTML الأساسية (مراجعة)
المفاهيم الأساسية
وسم HTML: أمر برمجي يحدد هيكل ومحتوى صفحة الويب.
خريطة المفاهيم
```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>أوراق الأنماط المتتالية (CSS)</h4>
<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>` تحوي `<head>` و `<body>`.</li>
<li>وسم `<meta charset="UTF-8">` ضروري لعرض النص العربي بشكل صحيح في المتصفح.</li>
<li>المحتوى الذي يراه المستخدم (كالعناوين والفقرات) يوضع داخل وسم `<body>`.</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>
<h4>هذا عنوان!</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">هذا عنوان!</div>
<h4>هذه فقرة.</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">هذه فقرة.</div>
<h3>🔍 عناصر مرئية</h3>
<h4>Page title</h4>
<p>A screenshot of a web browser displaying a page with the title 'Page title'. The address bar shows 'File | C:/Users/Desktop/examples/'. The content area shows 'هذا عنوان!' and 'هذه فقرة.'.</p></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">--- SECTION: هل تذكر؟ ---
هل تذكر؟
--- SECTION: وسوم HTML التي سبق تعلمها في الصف الأول الثانوي ---
وسوم HTML التي سبق تعلمها في الصف الأول الثانوي
--- SECTION: هذا عنوان! ---
هذا عنوان!
--- SECTION: هذه فقرة. ---
هذه فقرة.
--- VISUAL CONTEXT ---
**FIGURE**: Page title
Description: A screenshot of a web browser displaying a page with the title 'Page title'. The address bar shows 'File | C:/Users/Desktop/examples/'. The content area shows 'هذا عنوان!' and 'هذه فقرة.'.
Context: Illustrates how HTML tags like <body>, <h1>, <p>, and <br> render in a web browser.
</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 3 بطاقة لهذه الصفحة</p>
<article><h3>ما هو الدور الأساسي للوسم `<h1>` في لغة 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. الوسم `<h1>` مخصص لتعريف العنوان الرئيسي (Top-level heading) في صفحة الويب.
2. يُعتبر هذا الوسم الأكثر أهمية من ناحية البنية الدلالية (semantic importance) للصفحة.
3. محركات البحث تستخدمه كعامل أساسي لفهم المحتوى الرئيسي للصفحة.
4. يليه في الأهمية وسوم العناوين الأخرى مثل `<h2>`، `<h3>` وهكذا حتى `<h6>`.</p><p><strong>تلميح:</strong> فكر في التسلسل الهرمي للعناوين في أي مستند، من الأهم إلى الأقل أهمية.</p><p><em>التصنيف: مفهوم جوهري | المستوى: سهل</em></p></article>
<article><h3>في لغة HTML، ما هي الوظيفة الأساسية للوسم `<h1>` كما هو مشار إليه في المثال "هذا عنوان!"؟</h3><ul><li>أ) لإنشاء فقرة نصية عادية.</li><li>ب) لتعريف العنوان الرئيس أو الأكثر أهمية في الصفحة.</li><li>ج) لجعل النص مائلاً للتأكيد.</li><li>د) لإدراج فاصل أسطر (سطر جديد).</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> لتعريف العنوان الرئيس أو الأكثر أهمية في الصفحة.</p><p><strong>الشرح:</strong> يُستخدم الوسم `<h1>` لتحديد العنوان الرئيسي (Heading 1) في صفحة الويب. يعتبر هذا الوسم الأعلى في التسلسل الهرمي للعناوين (من `<h1>` إلى `<h6>`) ويجب استخدامه مرة واحدة فقط في الصفحة عادةً للإشارة إلى الموضوع الأساسي، مما يساعد في تحسين محركات البحث (SEO) وتنظيم المحتوى.</p><p><strong>تلميح:</strong> فكر في كيفية تنظيم المستندات والكتب، حيث يوجد عنوان رئيسي ثم عناوين فرعية.</p><p><em>التصنيف: مفهوم جوهري | المستوى: سهل</em></p></article>
<article><h3>ما الوظيفة الأساسية لوسم HTML <h1>؟</h3><ul><li>أ) يستخدم لعرض عنوان رئيسي في صفحة الويب.</li><li>ب) يستخدم لعرض فقرة نصية في صفحة الويب.</li><li>ج) يستخدم لتحديد محتوى صفحة الويب الرئيسي.</li><li>د) يستخدم لإدراج فاصل أسطري في صفحة الويب.</li></ul><p><strong>الإجابة الصحيحة:</strong> a</p><p><strong>الإجابة:</strong> يستخدم لعرض عنوان رئيسي في صفحة الويب.</p><p><strong>الشرح:</strong> 1. وسم <h1> هو واحد من وسوم العناوين في HTML (من <h1> إلى <h6>).
2. يستخدم <h1> لتحديد العنوان الرئيسي والأهم في صفحة الويب.
3. يساعد في تنظيم هيكل الصفحة وتحسين إمكانية الوصول ومحركات البحث.
4. مثال: <h1>هذا عنوان!</h1> يعرض كنص كبير وغامق.</p><p><strong>تلميح:</strong> تلميح: الرقم '1' في <h1> يشير إلى مستوى العنوان.</p><p><em>التصنيف: مفهوم جوهري | المستوى: سهل</em></p></article>
</section>
</main>
<nav aria-label="صفحات الكتاب">
<a href="https://www.idros.ai/reader/digitaltechnology11-1?page=202">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=204">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=200">صفحة 200</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=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/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:'9f7492466ed8376a',t:'MTc3ODAzNDcxNA=='};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>