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

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

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

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

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

📝 ملخص الصفحة

📚 جدول HTML

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

جدول HTML: وسيلة لعرض البيانات بشكل جدولي (صفوف وأعمدة) في ملف HTML.

الوسم `

`: يُستخدم لتعريف بداية ونهاية الجدول.

الوسم `

`: اختصار لـ "table row"، يُستخدم لإنشاء صف في الجدول.

الوسم `

`: يحدد صفاً (Table Row)
`
: يحدد خلية بيانات (Table Data)
مثال تطبيقي

جدول عرض درجات الطلاب

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

```
نقاط مهمة

يتم تعريف الجدول في HTML باستخدام الوسمين `

`: اختصار لـ "table data"، يُستخدم لإنشاء خلية بيانات داخل الصف.

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

```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

هيكل الجدول

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

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

``
: يحدد بداية ونهاية الجدول
`

` و `

`.
داخل الجدول، يُستخدم الوسم `` لإنشاء كل صف.

داخل كل صف (``)، يُستخدم الوسم `` لإنشاء كل خلية.

لا يتم إنشاء الأعمدة مباشرة، بل تتشكل تلقائياً من عدد الخلايا في الصفوف.

مثال عملي: يمكن استخدام الجداول لعرض بيانات مثل أسماء الطلاب ودرجاتهم في مواد مختلفة.

📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل

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

تتكون الجداول من صفوف وأعمدة، ويمكنك استخدامه في ملف HTML لعرض البيانات بشكل جدولي (Tabular) مثل جدول البيانات.

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

ويُعرّف جدول HTML باستخدام الوسمين </table></tag> و <table>، وداخل الوسم <td> لإنشاء خلية. ويمكنك استخدام الوسم <tr> لإنشاء صف، والوسم <td> لإنشاء خلية.

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

لتشاهد المخطط العام للجدول في HTML.

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

في HTML لا يتم إنشاء الأعمدة مباشرة، ولكن يتم إنشاؤها من خلال الخلايا.

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

لتشاهد مثالاً على الجدول في HTML، يحتوي الجدول على أسماء ودرجات الطلبة في مادة الرياضيات ومادة تاريخ.

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

رأس العمود (Column Head)

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

صف من الجدول.

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

خلية من الجدول.

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

يُعدّ اسم الوسم <tr> اختصاراً لكلمتي "table row" بينما اسم الوسم <td> هو اختصار لكلمتي "table data".

🔍 عناصر مرئية

Illustrates the basic structure of an HTML table using tags like <table>, <tr>, and <td>.

A cartoon illustration of a robot's head with a speech bubble above it.

A table showing student names and their grades in two subjects: Mathematics and History.

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

تتكون الجداول من صفوف وأعمدة، ويمكنك استخدامه في ملف HTML لعرض البيانات بشكل جدولي (Tabular) مثل جدول البيانات. ويُعرّف جدول HTML باستخدام الوسمين </table></tag> و <table>، وداخل الوسم <td> لإنشاء خلية. ويمكنك استخدام الوسم <tr> لإنشاء صف، والوسم <td> لإنشاء خلية. لتشاهد المخطط العام للجدول في HTML. في HTML لا يتم إنشاء الأعمدة مباشرة، ولكن يتم إنشاؤها من خلال الخلايا. لتشاهد مثالاً على الجدول في HTML، يحتوي الجدول على أسماء ودرجات الطلبة في مادة الرياضيات ومادة تاريخ. رأس العمود (Column Head) صف من الجدول. خلية من الجدول. يُعدّ اسم الوسم <tr> اختصاراً لكلمتي "table row" بينما اسم الوسم <td> هو اختصار لكلمتي "table data". --- VISUAL CONTEXT --- **DIAGRAM**: Untitled Description: Illustrates the basic structure of an HTML table using tags like <table>, <tr>, and <td>. Table Structure: Headers: N/A Rows: Row 1: <table> Row 2: <tr> Row 3: <td>....</td> Row 4: </tr> Row 5: .... Row 6: </tr> Row 7: </table> Context: Demonstrates the HTML code structure for creating tables. **FIGURE**: Untitled Description: A cartoon illustration of a robot's head with a speech bubble above it. Context: The speech bubble contains a note about HTML table creation. **TABLE**: Untitled Description: A table showing student names and their grades in two subjects: Mathematics and History. Table Structure: Headers: اسم الطالب | درجة مادة الرياضيات | درجة مادة التاريخ Rows: Row 1: أحمد | 20 | 19 Row 2: سعد | 19 | 18 Row 3: فهد | 20 | 18 X-axis: Student Name, Mathematics Grade, History Grade Y-axis: Row Number Data: Table contains student names (Ahmed, Saeed, Fahd) and their grades in Mathematics and History. Key Values: Ahmed: Math 20, History 19, Saeed: Math 19, History 18, Fahd: Math 20, History 18 Context: Provides a practical example of a table displaying student data.

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

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

ما الوسم المستخدم في HTML لإنشاء خلية بيانات داخل صف في جدول؟
أ) الوسم <tr>
ب) الوسم <table>
ج) الوسم <td>
د) الوسم <col>
الإجابة الصحيحة: c
الإجابة: الوسم <td>
الشرح: 1. الوسم <td> هو الوسم المستخدم لإنشاء خلية بيانات (Table Data) داخل صف (<tr>) في جدول HTML. 2. يتم وضع محتوى الخلية (مثل النص أو الأرقام) بين وسمي الفتح والإغلاق <td> و </td>. 3. الإجابة الصحيحة هي الوسم <td>.
تلميح: هذا الوسم هو اختصار لكلمتين إنجليزيتين تعنيان 'بيانات الجدول'.
التصنيف: تعريف | المستوى: سهل

ما هو الوسم الذي يحدد بداية ونهاية جدول HTML؟
أ) الوسم <body>
ب) الوسم <table>
ج) الوسم <div>
د) الوسم <tr>
الإجابة الصحيحة: b
الإجابة: الوسم <table>
الشرح: 1. الوسم <table> هو الوسم الأساسي الذي يعلن عن بداية جدول HTML. 2. جميع محتويات الجدول (الصفوف <tr> والخلايا <td>) يجب أن تكون داخل هذا الوسم. 3. الوسم المغلق </table> يعلن عن نهاية الجدول. الإجابة الصحيحة هي الوسم <table>.
تلميح: يُستخدم هذا الوسم كحاوية رئيسية لجميع عناصر الجدول الأخرى.
التصنيف: مفهوم جوهري | المستوى: سهل

كيف يتم إنشاء الأعمدة في جدول HTML؟
أ) باستخدام الوسم <column>
ب) يتم إنشاؤها بشكل غير مباشر من خلال الخلايا (<td>) داخل الصفوف (<tr>).
ج) باستخدام الوسم <colgroup> فقط
د) يتم إنشاؤها تلقائياً عند تحديد عدد الصفوف
الإجابة الصحيحة: b
الإجابة: يتم إنشاؤها بشكل غير مباشر من خلال الخلايا (<td>) داخل الصفوف (<tr>).
الشرح: 1. في HTML، لا يوجد وسم مباشر لإنشاء عمود مثل <col> (يستخدم لأغراض التنسيق). 2. يتم تشكيل الأعمدة بشكل ضمني من خلال ترتيب الخلايا (<td>) بجانب بعضها داخل الصفوف (<tr>). 3. عدد الخلايا في كل صف يحدد عدد الأعمدة في الجدول. الإجابة الصحيحة هي من خلال الخلايا داخل الصفوف.
تلميح: لا يوجد وسم خاص باسم <column> في HTML.
التصنيف: مفهوم جوهري | المستوى: متوسط

ما الوسم المستخدم في HTML لإنشاء صف في جدول؟
أ) الوسم <table>
ب) الوسم <td>
ج) الوسم <tr>
د) الوسم <th>
الإجابة الصحيحة: c
الإجابة: الوسم <tr>
الشرح: 1. الوسم <tr> هو الوسم الأساسي لإنشاء صف (Table Row) داخل جدول HTML. 2. يتم وضع الوسوم <td> أو <th> داخل الوسم <tr> لإنشاء خلايا البيانات أو العناوين. 3. الإجابة الصحيحة هي الوسم <tr>.
تلميح: هذا الوسم هو اختصار لكلمتين إنجليزيتين تعنيان 'صف الجدول'.
التصنيف: تعريف | المستوى: سهل