📚 معلومات الصفحة

الكتاب: كتاب المهارات الرقمية - الصف 10 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 10 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

📝 ملخص الصفحة

ملخص الدرس:

يحتوي هيكل صفحة HTML على قسمين رئيسيين بين وسمي `` و ``:

قسم ترويسة المستند (Head): يقع بين الوسمين `` و ``. يحدد هذا القسم معلومات عن المستند للمتصفح، مثل العنوان الذي يظهر في شريط المتصفح (``)، وطريقة ترميز النصوص (`<meta charset="UTF-8">`). تحدد الأوامر هنا كيفية تفسير وعرض المستند.</li> <li> <strong>قسم المحتوى (Body):</strong> يقع بين الوسمين `<body>` و `</body>`. هذا هو الجزء الرئيسي الذي يظهر للمستخدم، ويتم فيه برمجة محتوى الصفحة من نصوص وعناوين وصور ووسائط متعددة وروابط.</li></p><p><strong>مثال عملي على هيكل صفحة HTML:</strong></p><p>```html <p><!DOCTYPE html></p> <html dir="rtl" lang="ar"> <head> <p> <title> Page title

! هذا عنوان

هذه فقرة.

```

شرح المثال:

* ``: يحدد أن هذا المستند هو مستند HTML.

* ``: يعلن بداية مستند HTML مع تحديد اتجاه النص من اليمين لليسار واللغة العربية.

* الوسم `` داخل قسم `<head>`: يحدد النص الذي سيظهر في شريط عنوان المتصفح.</p> <p>* الوسم `<meta charset="UTF-8" />`: يحدد ترميز الأحرف للمستند.</p> <p>* الوسم `<h1>` داخل قسم `<body>`: لإنشاء عنوان رئيسي.</p> <p>* الوسم `<p>`: لإنشاء فقرة نصية.</p><p><strong>التطبيق العملي:</strong> يُطلب من الطالب كتابة المقطع البرمجي السابق في محرر فيجوال ستوديو كود ومشاهدة النتيجة.</p><p><strong>عنصر مرئي:</strong> توجد صورة لمحرر الأكواد تعرض كود HTML.</p></div> </section> <section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">وسوم HTML الأساسية</div> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">هناك قسمان بين وسمي <html> و </html> في الصفحة الإلكترونية، أولهما هو قسم ترويسة المستند، والآخر هو قسم المحتوى.</div> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">تحدد أن هذا المستند هو مستند HTML.</div> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">تحدد النص الذي سيظهر في شريط العنوان في نافذة متصفح المواقع الإلكترونية.</div> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">تحدد الأوامر البرمجية الموجودة بين الوسمين <head> </head> كيفية تفسير المستند بواسطة المتصفح وكيفية عرض المستند.</div> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">يتم هنا برمجة الموضوع الرئيسي للصفحة الإلكترونية الخاصة بك. تقع جميع النصوص والرسومات والصوت والفيديو والروابط المؤدية إلى صفحات أخرى بين الوسمين <body> و </body>.</div> <h4>اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة.</h4> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة.</div> <h3>🔍 عناصر مرئية</h3> <h4>HTML Structure</h4> <p>A diagram illustrating the basic structure of an HTML document, showing the relationship between DOCTYPE, html, head, and body tags. It uses lines to connect descriptive text boxes on the left to the corresponding HTML code snippets on the right.</p> <h4>Examples.html</h4> <p>A screenshot of the Visual Studio Code editor displaying the content of an 'Examples.html' file. It shows the file explorer on the left and the code editor pane on the right.</p></section> <section> <h2>📄 النص الكامل للصفحة</h2> <div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">وسوم HTML الأساسية هناك قسمان بين وسمي <html> و </html> في الصفحة الإلكترونية، أولهما هو قسم ترويسة المستند، والآخر هو قسم المحتوى. تحدد أن هذا المستند هو مستند HTML. تحدد النص الذي سيظهر في شريط العنوان في نافذة متصفح المواقع الإلكترونية. تحدد الأوامر البرمجية الموجودة بين الوسمين <head> </head> كيفية تفسير المستند بواسطة المتصفح وكيفية عرض المستند. يتم هنا برمجة الموضوع الرئيسي للصفحة الإلكترونية الخاصة بك. تقع جميع النصوص والرسومات والصوت والفيديو والروابط المؤدية إلى صفحات أخرى بين الوسمين <body> و </body>. --- SECTION: اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة. --- اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة. --- VISUAL CONTEXT --- **DIAGRAM**: HTML Structure Description: A diagram illustrating the basic structure of an HTML document, showing the relationship between DOCTYPE, html, head, and body tags. It uses lines to connect descriptive text boxes on the left to the corresponding HTML code snippets on the right. Data: Illustrates the hierarchical structure of HTML tags and their purpose. Key Values: DOCTYPE declaration, html tag with direction and language attributes, head section for metadata and title, body section for content Context: Explains the fundamental structure of an HTML page and the roles of different tags. **DIAGRAM**: Examples.html Description: A screenshot of the Visual Studio Code editor displaying the content of an 'Examples.html' file. It shows the file explorer on the left and the code editor pane on the right. Data: Shows a practical example of an HTML file being edited in a code editor. Key Values: HTML code structure, File path in VS Code Context: Provides a visual example of how HTML code is written and displayed in a code editor, complementing the explanation of HTML tags. </div> </section> <section> <h2>🎴 بطاقات تعليمية للمراجعة</h2> <p>عدد البطاقات: 4 بطاقة لهذه الصفحة</p> <article><h3>أي من الأقسام التالية في مستند HTML هو المسؤول عن برمجة المحتوى الرئيسي الظاهر للمستخدم؟</h3><ul><li>أ) قسم <head></li><li>ب) قسم <body></li><li>ج) وسم <html></li><li>د) إعلان <!DOCTYPE></li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> قسم <body></p><p><strong>الشرح:</strong> 1. مستند HTML يتكون من قسمين رئيسيين بين وسمي <html>: <head> و <body>. 2. قسم <head> يحتوي على معلومات تعريفية (ميتاداتا) مثل العنوان. 3. قسم <body> يحتوي على جميع العناصر المرئية مثل النصوص، الصور، الروابط، والفيديوهات التي تشكل محتوى الصفحة.</p><p><strong>تلميح:</strong> هذا القسم يحوي كل ما يراه المستخدم ويتفاعل معه مباشرة على الصفحة.</p><p><em>التصنيف: مفهوم جوهري | المستوى: سهل</em></p></article> <article><h3>ما هو التسلسل الهرمي الصحيح للوسوم الأساسية في هيكل مستند HTML؟</h3><ul><li>أ) <head> ثم <body> ثم <html> ثم <!DOCTYPE>.</li><li>ب) <!DOCTYPE> ثم <head> ثم <body> ثم <html>.</li><li>ج) <html> ثم <!DOCTYPE> ثم <head> و <body> داخله.</li><li>د) <!DOCTYPE> ثم <html> ثم <head> و <body> داخله.</li></ul><p><strong>الإجابة الصحيحة:</strong> d</p><p><strong>الإجابة:</strong> <!DOCTYPE> ثم <html> ثم <head> و <body> داخله.</p><p><strong>الشرح:</strong> 1. يبدأ كل مستند HTML بإعلان <!DOCTYPE html> لتعريف إصدار HTML. 2. يلي ذلك وسم <html> الذي يمثل جذر المستند ويحيط بكل المحتوى. 3. داخل <html> يوجد قسمان أساسيان: <head> (للمعلومات التعريفية) و <body> (للمحتوى المرئي).</p><p><strong>تلميح:</strong> ابدأ بالإعلان عن نوع المستند، ثم الوسم الرئيسي الذي يحيط بكل شيء، ثم الأقسام الداخلية.</p><p><em>التصنيف: صيغة/خطوات | المستوى: متوسط</em></p></article> <article><h3>ما هو دور قسم <head> في مستند HTML؟</h3><ul><li>أ) احتواء النصوص والصور التي يراها الزائر.</li><li>ب) تحديد بنية وهيكل العلاقة بين جميع الوسوم.</li><li>ج) تحديد كيفية تفسير المستند بواسطة المتصفح وكيفية عرضه.</li><li>د) الإعلان عن أن المستند مكتوب بلغة HTML5.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> تحديد كيفية تفسير المستند بواسطة المتصفح وكيفية عرضه.</p><p><strong>الشرح:</strong> 1. قسم <head> يقع داخل وسم <html> ويسبق قسم <body>. 2. يحتوي على معلومات تعريفية (ميتاداتا) تتحكم في سلوك الصفحة وإعداداتها. 3. أمثلة على محتوياته: العنوان (<title>)، ربط ملفات الأنماط (CSS)، ربط ملفات السكريبت (JavaScript)، وتعريف مجموعة الأحرف.</p><p><strong>تلميح:</strong> هذا القسم يحتوي على معلومات 'خلفية' عن الصفحة، وليس المحتوى المرئي نفسه.</p><p><em>التصنيف: مفهوم جوهري | المستوى: متوسط</em></p></article> <article><h3>ما هو الغرض الرئيسي من الوسم <title> في قسم <head> من مستند HTML؟</h3><ul><li>أ) تحديد لغة المستند واتجاه النص.</li><li>ب) تحديد النص الذي سيظهر في شريط العنوان في نافذة المتصفح.</li><li>ج) احتواء جميع النصوص والرسومات الرئيسية للصفحة.</li><li>د) تحديد كيفية تفسير المستند بواسطة المتصفح.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> تحديد النص الذي سيظهر في شريط العنوان في نافذة المتصفح.</p><p><strong>الشرح:</strong> 1. الوسم <title> يُكتب داخل قسم <head> من مستند HTML. 2. النص الموضوع بين وسمي الفتح والإغلاق <title> و </title> يظهر في شريط العنوان (Tab) للمتصفح. 3. هذا يساعد في تعريف محتوى الصفحة للمستخدم ومحركات البحث.</p><p><strong>تلميح:</strong> هذا الوسم يؤثر على ما يراه المستخدم في الجزء العلوي من نافذة المتصفح، وليس داخل محتوى الصفحة.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article> </section> </main> <nav aria-label="صفحات الكتاب"> <a href="https://www.idros.ai/reader/digitalskills10-1?page=164">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=166">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=162">صفحة 162</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=163">صفحة 163</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=164">صفحة 164</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=166">صفحة 166</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=167">صفحة 167</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=168">صفحة 168</a> <a href="https://www.idros.ai/reader/library">العودة إلى المكتبة</a> </nav> <footer> <p>إدرس AI - مدرس ذكاء اصطناعي مجاني للمناهج السعودية | وزارة التعليم</p> </footer> </body> </html>