الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
📚 معلومات الصفحة
الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1
الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
نوع المحتوى: درس تعليمي
📝 ملخص الصفحة
📚 ربط صفحة CSS بـ HTML
المفاهيم الأساسية
ملف CSS الخارجي: ملف منفصل يحتوي على قواعد التنسيق للموقع، يُنشأ باسم `style.css` داخل مجلد المشروع.
وسم ``: وسم يُوضع داخل قسم `
` في ملف HTML لربط صفحة الأنماط (CSS) الخارجية بالصفحة.
خريطة المفاهيم
```markmap
تصميم الموقع الإلكتروني
مراحل الإنشاء
3. التنفيذ
#### تقسيم الصفحة إلى أقسام
##### استخدام HTML و CSS
###### وسم التقسيم `
`
حاوية لعناصر HTML
لتطبيق أنماط CSS على المجموعة
###### خاصية `class`
لتطبيق نفس التنسيق على عناصر متعددة
#### تخطيط العناصر
##### مثال تطبيقي: صفحة مشجعي كرة القدم
###### Menu
يحتوي على قائمة روابط التنقل (الصفحة الرئيسية، التاريخ، المعرض، نبذة، اتصل بنا)
###### Main
يحتوي على المحتوى الرئيسي
####### ألبوم الصور
مكان لتبادل الأفكار والآراء
يمكن إضافة صور أو مقالات عبر نموذج
صور مرتبطة بكرة القدم (كأس العالم، الملعب، الاستاد، شعار السعودية)
####### معلومات مفيدة
طرق التواصل: البريد الإلكتروني (info@example.com)
مواقع زيارة: Fifa.com، UEFA.com
###### Photos (اليوم الصور)
قسم لعرض مجموعة واسعة من الصور
صور المباريات واللاعبين والفرق والبطولات
يهدف لتوفير تجربة بصرية غنية
###### Footer (نبذة)
قسم يحتوي على معلومات مفيدة
يلخص أهداف الصفحة
#### تطبيق الأنماط باستخدام CSS
##### إنشاء ملف CSS
يُنشأ ملف باسم `style.css` في مجلد الصفحات (مثال: في محرر Visual Studio Code)
##### ربط CSS بـ HTML
استخدام وسم `` داخل قسم `` في ملف HTML
مثال: ``
```
نقاط مهمة
بعد تعلم قواعد CSS، تُستخدم لإثراء الموقع بتصميم مناسب.
الخطوة الأولى: إنشاء ملف CSS جديد باسم `style.css` داخل مجلد المشروع.
الخطوة الثانية: ربط ملف CSS بصفحة HTML باستخدام وسم `` يوضع داخل وسم ``.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
الآن وبعد أن تعلمت الصيغة العامة لـ CSS وقواعدها، ستستخدمها في إثراء موقعك الإلكتروني بتصميمه مناسب.
نوع: محتوى تعليمي
في البداية ستنشئ تصميم CSS في مجلد الصفحات في محرر فيجوال ستوديو كود باسم: style.css
نوع: محتوى تعليمي
ملف CSS الجديد لصفحتك.
نوع: محتوى تعليمي
وبعد ذلك ستنشئ مرجعاً إلى صفحة الأنماط (stylesheet) الموجودة في مقطع البرمجي HTML باستخدام رابط لوسم يوضع داخل وسم <head>.
🔍 عناصر مرئية
Shows a file explorer interface within Visual Studio Code. The 'OPEN EDITORS' section displays open files: '#style.css', 'footballFanPage.html', '#myCSSFile.css', and 'Examples1.html'. The 'EXAMPLES' section shows folders and files like 'images', 'pages', and various '.html' files. A blue speech bubble points to '#style.css' with the text 'ملف CSS الجديد لصفحتك.'
footballFanPage.html - examples - Visual Studio Code
Displays a snippet of HTML code within a Visual Studio Code editor. The code includes the basic structure of an HTML document: <!DOCTYPE html>, <html> with dir='rtl' lang='ar', <head> containing <title>Football Fan Page</title> and <meta charset="UTF-8" />. Crucially, it shows a <link rel="stylesheet" type="text/css" href="style.css"> tag within the <head> section, establishing the link to the CSS stylesheet. The <body> tag is also visible.
📄 النص الكامل للصفحة
الآن وبعد أن تعلمت الصيغة العامة لـ CSS وقواعدها، ستستخدمها في إثراء موقعك الإلكتروني بتصميمه مناسب.
في البداية ستنشئ تصميم CSS في مجلد الصفحات في محرر فيجوال ستوديو كود باسم: style.css
ملف CSS الجديد لصفحتك.
وبعد ذلك ستنشئ مرجعاً إلى صفحة الأنماط (stylesheet) الموجودة في مقطع البرمجي HTML باستخدام رابط لوسم يوضع داخل وسم <head>.
--- VISUAL CONTEXT ---
**DIAGRAM**: Untitled
Description: Shows a file explorer interface within Visual Studio Code. The 'OPEN EDITORS' section displays open files: '#style.css', 'footballFanPage.html', '#myCSSFile.css', and 'Examples1.html'. The 'EXAMPLES' section shows folders and files like 'images', 'pages', and various '.html' files. A blue speech bubble points to '#style.css' with the text 'ملف CSS الجديد لصفحتك.'
Context: Illustrates the file structure and the creation of a new CSS file within a web development project using Visual Studio Code.
**DIAGRAM**: footballFanPage.html - examples - Visual Studio Code
Description: Displays a snippet of HTML code within a Visual Studio Code editor. The code includes the basic structure of an HTML document: <!DOCTYPE html>, <html> with dir='rtl' lang='ar', <head> containing <title>Football Fan Page</title> and <meta charset="UTF-8" />. Crucially, it shows a <link rel="stylesheet" type="text/css" href="style.css"> tag within the <head> section, establishing the link to the CSS stylesheet. The <body> tag is also visible.
Key Values: href="style.css"
Context: Demonstrates how to link an external CSS stylesheet to an HTML document using the <link> tag within the <head> section, which is essential for applying styles to a webpage.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
أين يتم وضع الوسم <link> لربط ملف CSS خارجي بصفحة HTML؟
أ) داخل وسم <body>
ب) داخل وسم <footer>
ج) داخل وسم <head>
د) في نهاية ملف HTML
الإجابة الصحيحة: c
الإجابة: داخل وسم <head>
الشرح: 1. ملف CSS الخارجي يحتوي على قواعد التنسيق.
2. لربطه بصفحة HTML، نستخدم وسم <link>.
3. يجب وضع هذا الوسم داخل قسم <head> من مستند HTML.
4. السبب: يجب تحميل أنماط التصميم قبل تحميل محتوى الصفحة لضمان التطبيق الصحيح.
تلميح: هذا القسم يحتوي على معلومات تعريفية عن الصفحة وليس المحتوى المرئي.
التصنيف: مفهوم جوهري | المستوى: سهل
ما هو الغرض من السمة 'rel' في وسم <link> المستخدم لربط ملف CSS؟
أ) لتحديد لغة الملف المرتبط
ب) لتحديد علاقة الملف المرتبط بأنه ورقة أنماط (stylesheet)
ج) لتحديد موقع الملف على الخادم
د) لتحديد حجم الملف المرتبط
الإجابة الصحيحة: b
الإجابة: لتحديد علاقة الملف المرتبط بأنه ورقة أنماط (stylesheet)
الشرح: 1. وسم <link> يستخدم لربط موارد خارجية بصفحة HTML.
2. السمة 'rel' (اختصار لـ relationship) تحدد طبيعة العلاقة.
3. عند ربط ملف CSS، تكون القيمة 'stylesheet'.
4. هذا يخبر المتصفح أن الملف المرتبط هو ملف أنماط يجب تطبيقه على الصفحة.
تلميح: هذه السمة تخبر المتصفح عن نوع العلاقة بين الصفحة الحالية والملف المرتبط.
التصنيف: تعريف | المستوى: متوسط
ما هي السمة المستخدمة في وسم <link> لتحديد مسار ملف CSS؟
أ) السمة src
ب) السمة link
ج) السمة href
د) السمة path
الإجابة الصحيحة: c
الإجابة: السمة href
الشرح: 1. وسم <link> يحتوي على عدة سمات.
2. السمة 'href' (اختصار لـ Hypertext REFerence) تحدد مسار الملف المراد ربطه.
3. القيمة هي اسم الملف أو المسار النسبي/المطلق.
4. في المثال، href="style.css" يعني أن ملف الأنماط موجود في نفس مجلد الصفحة.
تلميح: هذه السمة شائعة الاستخدام في الروابط لتحديد العنوان أو المرجع.
التصنيف: تعريف | المستوى: سهل
ما هو الإجراء الصحيح لربط ملف أنماط خارجي (CSS) بصفحة HTML لضمان تطبيق التنسيقات على الموقع؟
أ) إضافة رابط الملف داخل وسم <body> باستخدام وسم <style>
ب) استخدام وسم <link> ووضعه داخل قسم <head>
ج) كتابة مسار الملف مباشرة داخل وسم <title>
د) استخدام وسم <script> في نهاية الصفحة قبل إغلاق </html>
الإجابة الصحيحة: b
الإجابة: استخدام وسم <link> ووضعه داخل قسم <head>
الشرح: 1. يتم إنشاء ملف تنسيق مستقل بامتداد .css (مثل style.css).
2. لربط هذا الملف بصفحة HTML، نستخدم وسم الارتباط <link>.
3. يُشترط وضع هذا الوسم داخل وسم <head> في ملف الـ HTML لضمان تحميل التنسيقات قبل عرض محتوى الصفحة في المتصفح.
تلميح: فكر في القسم المخصص لمعلومات الصفحة الوصفية (Metadata) والوسم المسؤول عن إنشاء الروابط التشعبية للملفات الخارجية.