الدرس الثالث: إنشاء نموذج بلغة HTML
يتناول هذا الدرس كيفية إنشاء صفحة ويب باستخدام لغة HTML، مع التركيز على الهيكل الأساسي للوسوم.
المحتوى التعليمي:
مراجعة: تمت الإشارة إلى أن الطالب تعلم سابقًا كيفية إنشاء صفحة باستخدام الوسوم الأساسية في HTML.
مثال برمجي: تم تقديم نموذج كود HTML يوضح الهيكل الأساسي للصفحة:
```html
Page title
! هذا عنوان
>p< هذه فقرة.>/p<
```
* ملاحظة: يحتوي الكود المعروض على أخطاء في كتابة بعض الوسوم (مثل `
` و `>p<`) لغرض تعليمي، حيث يُطلب من الطالب كتابته ومشاهدة النتيجة لاكتشاف هذه الأخطاء.
شرح مكونات هيكل HTML:
* ``: يحدد أن نوع المستند هو HTML.
* وسم ``:</strong> يحدد النص الذي سيظهر في شريط عنوان نافذة المتصفح.</p>
<p> * <strong>قسم `<head>`:</strong> يحتوي على الوسوم التي تحدد للمتصفح كيفية تفسير وعرض المستند (مثل `<title>` و `<meta charset="UTF-8">` لتحديد ترميز الأحرف).</p>
<p> * <strong>قسم `<body>`:</strong> هو المكان الذي يتم فيه برمجة المحتوى الرئيسي للصفحة، حيث يوضع كل النصوص والرسومات والصوت والفيديو والروابط التشعبية.</p><p><li> <strong>التطبيق العملي:</strong> تم توجيه الطالب إلى كتابة المقطع البرمجي السابق في محرر "فيجوال ستوديو كود" ثم مشاهدة النتيجة النهائية في المتصفح.</li></p><p><li> <strong>توضيح بيئة العمل:</strong> تم عرض لقطة شاشة لمحرر "فيجوال ستوديو كود" تظهر فيه الملف (`Examples.html`) مع الكود المكتوب، مما يساعد الطالب على التأكد من كتابة الكود في المكان الصحيح ومراجعة ترقيم الأسطر.</li></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.</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>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة.</div>
<h3>🔍 عناصر مرئية</h3>
<p>A diagram explaining the basic structure of an HTML document. It shows callout boxes pointing to different parts of an HTML code snippet.</p>
<h4>Examples.html</h4>
<p>A screenshot of Visual Studio Code displaying an HTML file named 'Examples.html'. The code shows a basic HTML structure with <!DOCTYPE html>, html, head, title, meta, body, h1, and p tags.</p></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">تعلمت سابقا كيفية إنشاء صفحة بلغة HTML باستخدام الوسوم الأساسية.
تحدد أن هذا المستند هو مستند HTML.
تحدد النص الذي سيظهر في شريط العنوان في نافذة متصفح المواقع الإلكترونية.
تحدد الأوامر البرمجية الموجودة بين الوسمين <head> و </head> كيفية تفسير المستند بواسطة المتصفح وكيفية عرض المستند.
يتم هنا برمجة الموضوع الرئيسي للصفحة الإلكترونية الخاصة بك. تقع جميع النصوص والرسومات والفيديو والروابط المؤدية إلى صفحات أخرى بين الوسمين <body> و </body>.
اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة.
--- VISUAL CONTEXT ---
**DIAGRAM**: Untitled
Description: A diagram explaining the basic structure of an HTML document. It shows callout boxes pointing to different parts of an HTML code snippet.
Context: Explains the purpose of different HTML tags like <!DOCTYPE html>, <html>, <head>, <title>, <meta>, and <body> in structuring a web page.
**CODE_SNIPPET**: Examples.html
Description: A screenshot of Visual Studio Code displaying an HTML file named 'Examples.html'. The code shows a basic HTML structure with <!DOCTYPE html>, html, head, title, meta, body, h1, and p tags.
Data: Code snippet showing HTML structure.
Key Values: dir="rtl", lang="ar", charset="UTF-8"
Context: Demonstrates how to write basic HTML code in a code editor and shows the resulting structure of an HTML page.
</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 4 بطاقة لهذه الصفحة</p>
<article><h3>أين يتم وضع المحتوى الرئيسي المرئي (مثل النصوص والصور) في صفحة HTML؟</h3><ul><li>أ) بين الوسمين <head> و </head></li><li>ب) بين الوسمين <title> و </title></li><li>ج) بين الوسمين <body> و </body></li><li>د) بعد الوسم <!DOCTYPE html> مباشرة</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> بين الوسمين <body> و </body></p><p><strong>الشرح:</strong> 1. الوسم <body> يبدأ بعد إغلاق الوسم </head>. 2. جميع العناصر التي تريد عرضها للمستخدم توضع بين الوسمين <body> و </body>. 3. هذه العناصر تشمل العناوين (<h1>)، والفقرات (<p>)، والصور (<img>)، والروابط (<a>)، وغيرها.</p><p><strong>تلميح:</strong> هذا هو الجزء الذي يراه المستخدم عند زيارة الصفحة.</p><p><em>التصنيف: مفهوم جوهري | المستوى: سهل</em></p></article>
<article><h3>ما هو الغرض الرئيسي من الوسم <!DOCTYPE html> في مستند HTML؟</h3><ul><li>أ) يحدد النص الذي سيظهر في شريط العنوان.</li><li>ب) يحدد أن هذا المستند هو مستند HTML.</li><li>ج) يحدد كيفية تفسير المستند بواسطة المتصفح.</li><li>د) يحتوي على الموضوع الرئيسي للصفحة الإلكترونية.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> يحدد أن هذا المستند هو مستند HTML.</p><p><strong>الشرح:</strong> 1. الوسم <!DOCTYPE html> هو أول سطر في أي مستند HTML. 2. وظيفته الأساسية هي تعريف المتصفح بأنه يتعامل مع مستند HTML5. 3. هذا يساعد المتصفح على عرض الصفحة بشكل صحيح.</p><p><strong>تلميح:</strong> هذا الوسم يخبر المتصفح عن نوع المستند الذي يقرأه.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>أي من الوسوم التالية يحدد النص الذي سيظهر في شريط عنوان نافذة المتصفح؟</h3><ul><li>أ) الوسم <body></li><li>ب) الوسم <head></li><li>ج) الوسم <title></li><li>د) الوسم <!DOCTYPE html></li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> الوسم <title></p><p><strong>الشرح:</strong> 1. الوسم <title> يُكتب داخل الوسمين <head> و </head>. 2. النص الموضوع بين الوسمين <title> و </title> يظهر في شريط العنوان (Tab) للمتصفح. 3. هذا يساعد المستخدم في التعرف على محتوى الصفحة.</p><p><strong>تلميح:</strong> هذا الوسم يقع داخل قسم <head> من المستند.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>ما هو دور الوسمين <head> و </head> في هيكل مستند HTML؟</h3><ul><li>أ) تحتوي على المحتوى المرئي الرئيسي للصفحة.</li><li>ب) تحدد أن المستند هو مستند HTML.</li><li>ج) تحدد كيفية تفسير المستند بواسطة المتصفح وكيفية عرضه.</li><li>د) تحدد النص الذي سيظهر في شريط العنوان.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> تحدد كيفية تفسير المستند بواسطة المتصفح وكيفية عرضه.</p><p><strong>الشرح:</strong> 1. القسم المحدد بالوسمين <head> و </head> يحتوي على معلومات وبيانات تعريفية (Metadata). 2. هذه المعلومات تشمل العنوان (<title>)، وتشفير الأحرف (<meta charset>)، وروابط ملفات التنسيق (CSS)، وغيرها. 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=187">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=189">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=185">صفحة 185</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=186">صفحة 186</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=187">صفحة 187</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=189">صفحة 189</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=190">صفحة 190</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=191">صفحة 191</a>
<a href="https://www.idros.ai/reader/library">العودة إلى المكتبة</a>
</nav>
<footer>
<p>إدرس AI - مدرس ذكاء اصطناعي مجاني للمناهج السعودية | وزارة التعليم</p>
</footer>
</body>
</html>