صفحة 303 - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المنهج السعودي - وزارة التعليم

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

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

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

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 إنشاء جدول درجات الطلبة في HTML

المفاهيم الأساسية

الوسم ``: لإضافة رأس إلى العمود في جدول HTML.

الوسم ``: لإنشاء صف في جدول HTML.

خريطة المفاهيم

```markmap

الفصل الخامس: لغة جافا سكريبت

طرق استدعاء الدالة sayHello

الطرق الصحيحة

sayHello();

طرق خاطئة

call sayHello();
call function sayHello();
function sayHello();

أخطاء التنفيذ

خطأ في التحويل البرمجي (Compile Error)

خطأ في وقت التشغيل (Runtime Error)

تغيير محتوى HTML

الدالة الصحيحة

document.getElementById("id").innerHTML = "نص جديد";

ناتج تنفيذ مقاطع برمجية

مثال 1: نطاق المتغير var

var a = 5; داخل if
document.write(a); خارج if
الناتج: 5

مثال 2: التعليقات في الكود

//document.write("مرحباً");
الناتج: لا تتم طباعة أي شيء

تدريب 3: إضافة JavaScript إلى HTML

المطلوب

إضافة مقطع برمجي JavaScript إلى ملف HTML

الهدف

عرض مربع تنبيه لزائري الصفحة

محتوى التنبيه

"انتبه! معلومات الصفحة قديمة"

ملف HTML الأساسي

يحتوي على هيكل صفحة عادية
عنوان: "تبدأ بطولة كرة القدم المدرسية في الأول من نوفمبر"

تدريب 4: إضافة JavaScript لعرض التاريخ والوقت

المطلوب

إضافة مقطع برمجي JavaScript إلى ملف HTML

الهدف

عرض التاريخ والوقت

ملف HTML الأساسي

يحتوي على عنوان: "احصل على معلومات حول التاريخ والوقت."

تدريب 5: إضافة JavaScript لعرض التاريخ والوقت (استكمال)

المطلوب

إضافة مقطع برمجي جافا سكريبت إلى ملف HTML التالي

الهدف

عرض التاريخ والوقت بالضغط على زر

ملف HTML الأساسي

يحتوي على meta tags و title
يحتوي على عنوان: "احصل على معلومات حول التاريخ والوقت"

تدريب 6: جعل شريط التنقل متجاوباً مع الهواتف

المطلوب

فتح مجلد Adventure_Site
إكمال المخطط

الهدف

إضافة أيقونة القائمة لتناسب متصفح الهاتف الذكي

طريقة التنفيذ

إضافة برنامج نصي (script) في HTML
إجراء التغييرات المناسبة على استعلام الوسائط (media query) في ملف CSS

الدرس السادس: الرسائل الإخبارية الرقمية

الهدف

إعلام الجمهور عبر بريد إلكتروني

القيود

قيود على الحجم والتنسيق والتخطيط والتصميم

الأجزاء الرئيسية

رأس الصفحة (Header)
محتوى الرسالة الإخبارية (Newsletter Content)
التذييل (Footer)

طريقة الإنشاء

استخدام جدول HTML لإنشاء البنية

الدرس السابع: جدول HTML

هيكل الجدول

يتكون من صفوف وأعمدة
الأعمدة تُنشأ من خلال الخلايا

الوسوم الأساسية

``
: يحدد بداية ونهاية الجدول
``: يحدد صفاً (Table Row)
``: يحدد خلية بيانات (Table Data)

مثال تطبيقي

جدول عرض درجات الطلاب
رؤوس الأعمدة: اسم الطالب، درجة الرياضيات، درجة التاريخ

إنشاء جدول درجات الطلبة في HTML

استخدام CSS للتصميم

يمكن استخدام CSS لتنسيق الجدول (حدود، حشوة، محاذاة نص)

مثال كود HTML

جدول بثلاثة طلاب ودرجاتهم في الرياضيات والتاريخ

الوسوم المستخدمة

``: لإضافة رأس العمود
``: لإنشاء صف

```

نقاط مهمة

يمكن استخدام CSS لتنسيق الجدول (إضافة حدود، حشوة داخلية، محاذاة النص في المنتصف).
مثال الجدول في الصفحة يوضح هيكل جدول HTML لدرجات الطلاب.
الوسم `` يستخدم لرؤوس الأعمدة (مثل: اسم الطالب، درجة مادة الرياضيات).
الوسم `` يستخدم لبداية كل صف جديد في الجدول.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

نوع: محتوى تعليمي

إنشاء جدول درجات الطلبة في HTML

نوع: محتوى تعليمي

يمكنك استخدام CSS لتصميم جدولك.

نوع: محتوى تعليمي

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8" />
<style>
table, th, td {
  border: 1px solid;
  padding: 3px;
  text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>اسم الطالب</th><th>درجة مادة الرياضيات</th><th>درجة مادة التاريخ</th>
</tr>
<tr>
<td>حفد</td><td>19</td><td>20</td>
</tr>
<tr>
<td>سعد</td><td>18</td><td>19</td>
</tr>
<tr>
<td>فهد</td><td>18</td><td>20</td>
</tr>
</table>
</body>
</html>

نوع: محتوى تعليمي

يستخدم الوسم <th> لإضافة رأس إلى العمود.

نوع: محتوى تعليمي

يستخدم الوسم <tr> لإنشاء صف.

🔍 عناصر مرئية

A cartoon robot with a screen-like face, speaking in a speech bubble. The speech bubble contains text about creating tables in HTML and styling them with CSS.

📄 النص الكامل للصفحة

إنشاء جدول درجات الطلبة في HTML

يمكنك استخدام CSS لتصميم جدولك.

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8" />
<style>
table, th, td {
  border: 1px solid;
  padding: 3px;
  text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>اسم الطالب</th><th>درجة مادة الرياضيات</th><th>درجة مادة التاريخ</th>
</tr>
<tr>
<td>حفد</td><td>19</td><td>20</td>
</tr>
<tr>
<td>سعد</td><td>18</td><td>19</td>
</tr>
<tr>
<td>فهد</td><td>18</td><td>20</td>
</tr>
</table>
</body>
</html>

يستخدم الوسم <th> لإضافة رأس إلى العمود.

يستخدم الوسم <tr> لإنشاء صف.

--- VISUAL CONTEXT ---
**TABLE**: Untitled
Description: No description
Table Structure:
Headers: اسم الطالب | درجة مادة الرياضيات | درجة مادة التاريخ
Rows:
Row 1: حفد | 19 | 20
Row 2: سعد | 18 | 19
Row 3: فهد | 18 | 20
Context: Demonstrates a simple HTML table with student names and their scores in Math and History, styled with basic CSS for borders, padding, and text alignment.

**FIGURE**: Untitled
Description: A cartoon robot with a screen-like face, speaking in a speech bubble. The speech bubble contains text about creating tables in HTML and styling them with CSS.
Context: Visual aid to introduce the concept of creating and styling HTML tables.

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 4 بطاقة لهذه الصفحة

ما هو الغرض الأساسي من الوسم <th> في لغة HTML عند إنشاء جدول؟

أ) يستخدم لإنشاء صف جديد في الجدول.
ب) يستخدم لإضافة رأس إلى عمود في الجدول.
ج) يستخدم لتحديد نمط حدود الجدول.
د) يستخدم لإدراج صورة داخل خلية الجدول.

الإجابة الصحيحة: b

الإجابة: يستخدم لإضافة رأس إلى عمود في الجدول.

الشرح: 1. الوسم <th> هو اختصار لـ 'Table Header'. 2. يُستخدم داخل الوسم <tr> لإنشاء صف. 3. يُحدد خلية تحتوي على معلومات وصفية (رأس) لعمود أو صف. 4. المتصفحات تعرض محتواه بشكل غامق ومركز افتراضياً.

تلميح: هذا الوسم يحدد نوع محتوى الخلية في بداية الصف أو العمود.

التصنيف: تعريف | المستوى: سهل

ما هو دور الوسم <tr> في هيكل جدول HTML؟

أ) يستخدم لإنشاء عمود رأسي في الجدول.
ب) يستخدم لتحديد عنوان الجدول الرئيسي.
ج) يستخدم لإنشاء صف (صف أفقي) في الجدول.
د) يستخدم لربط جدول CSS بالصفحة.

الإجابة الصحيحة: c

الإجابة: يستخدم لإنشاء صف (صف أفقي) في الجدول.

الشرح: 1. الوسم <tr> هو اختصار لـ 'Table Row'. 2. يُستخدم داخل الوسم <table>. 3. يحتوي على وسوم <td> للبيانات أو <th> للعناوين. 4. كل وسم <tr> يمثل صفاً واحداً في الجدول.

تلميح: هذا الوسم هو حاوية للخلايا التي تشكل صفاً واحداً من البيانات.

التصنيف: تعريف | المستوى: سهل

أي من أكواد CSS التالية يطبق بشكل صحيح الحدود والتوسيط على خلايا جدول HTML كما في المثال؟

أ) table { border: 1px solid; } th, td { padding: 3px; text-align: center; }
ب) table, th, td { border: 1px solid; padding: 3px; text-align: center; }
ج) th, td { border: 2px dotted; margin: 5px; text-align: right; }
د) table { border-collapse: collapse; } th, td { border: 1px solid black; }

الإجابة الصحيحة: b

الإجابة: table, th, td { border: 1px solid; padding: 3px; text-align: center; }

الشرح: 1. الكود الصحيح يستخدم محددات متعددة (table, th, td) مفصولة بفواصل. 2. يطبق خاصية `border` لإنشاء حدود. 3. يطبق خاصية `padding` لإضافة مسافة داخلية. 4. يطبق خاصية `text-align` لتوسيط النص داخل الخلايا.

تلميح: انظر إلى خصائص CSS التي تتحكم بالمظهر المرئي للجدول وحدوده ومحاذاة النص.

التصنيف: صيغة/خطوات | المستوى: متوسط

في سياق إنشاء جداول HTML، ما الفرق الأساسي بين الوسمين <th> و <td>؟

أ) <th> يُستخدم للصفوف بينما <td> يُستخدم للأعمدة.
ب) <th> يُستخدم لخلايا الرأس (العناوين)، بينما <td> يُستخدم لخلايا البيانات العادية.
ج) <th> و <td> لهما نفس الوظيفة ولكن <th> أقدم.
د) <th> يُستخدم داخل <head> بينما <td> يُستخدم داخل <body>.

الإجابة الصحيحة: b

الإجابة: <th> يُستخدم لخلايا الرأس (العناوين)، بينما <td> يُستخدم لخلايا البيانات العادية.

الشرح: 1. <th> (Table Header): يحدد خلية رأس. محتواه عادةً وصفي (مثل 'اسم الطالب'). 2. <td> (Table Data): يحدد خلية بيانات عادية تحتوي على المعلومات الفعلية (مثل 'حفد', '19'). 3. المتصفحات تعرض محتوى <th> بخط غامق ومركز افتراضياً. 4. كلاهما يُوضع داخل الوسم <tr> ليشكلا صفاً.

تلميح: فكر في الغرض من المحتوى داخل الخلية: هل هو وصف للبيانات أم البيانات نفسها؟

التصنيف: فرق بين مفهومين | المستوى: متوسط