📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
بنية الصفحة الإلكترونية
نوع: محتوى تعليمي
يُطلق اسم الوسوم (Tags) على أحد أجزاء المقطع البرمجي المكتوب بلغة HTML. في العادة تأتي وسوم HTML بصورة أزواج مثل وسم الفتح <p> ووسم الإغلاق </p>، حيث يوقف الرمز "/" الموجود في الوسم الثاني تشغيل الأمر.
نوع: محتوى تعليمي
يجب أن تتبع الصفحة الإلكترونية المصممة بتنسيق HTML بنية معينة لكي يتم ترجمتها بصورة صحيحة من قبل المتصفح. فالمقطع البرمجي المصدرى للصفحة الإلكترونية يجب وضعه بـ <html > و </html >.
نوع: محتوى تعليمي
محرر HTML
نوع: محتوى تعليمي
على الرغم من إمكانية التحكم في برمجة HTML في أي صفحة HTML المتخصصة توفر إمكانات تحرير وأدوات برمجية فقط، بل تمتد وظائفها لتشمل تقنيات خاصة بإنشاء صفحات الويب مثل (JavaScript)، من هذه المحررات على سبيل المثال فيجوال ستوديو كود (Visual Studio Code).
نوع: محتوى تعليمي
لفتح محرر فيجوال ستوديو كود
نوع: محتوى تعليمي
افتح فيجوال ستوديو كود لبدء الترميز.
نوع: محتوى تعليمي
1. اضغط زر البحث.
< في شريط البحث اكتب
Visual Studio Code (فيجوال ستوديو كود) 2 اضغط على
Visual Studio Code (فيجوال ستوديو كود) لفتح البرنامج.
🔍 عناصر مرئية
A flowchart illustrating the structure of an HTML page. It shows 'الوسوم' (Tags) as a central concept, branching into 'وسم البداية' (Start Tag) and 'وسم النهاية' (End Tag). The tags '<p>' and '</p>' are shown as examples of start and end tags, connected by lines indicating their relationship. The overall structure suggests nested tags within an HTML document.
Visual Studio Code
A screenshot of the Visual Studio Code application interface, likely from a search or file explorer view. It shows a search bar at the top with the text 'Search work and web' and a list of search results below. The application window is partially visible, with a blue border and some UI elements like tabs ('All', 'Apps', 'Documents', 'Web', 'More'). A blue highlight indicates 'Visual Studio Code App' as the selected item in the search results.
The distinctive blue and black icon for Visual Studio Code, appearing next to the 'Visual Studio Code App' search result.
An icon representing a window or application launch, associated with the 'Visual Studio Code App' entry.
📄 النص الكامل للصفحة
بنية الصفحة الإلكترونية
يُطلق اسم الوسوم (Tags) على أحد أجزاء المقطع البرمجي المكتوب بلغة HTML. في العادة تأتي وسوم HTML بصورة أزواج مثل وسم الفتح <p> ووسم الإغلاق </p>، حيث يوقف الرمز "/" الموجود في الوسم الثاني تشغيل الأمر.
يجب أن تتبع الصفحة الإلكترونية المصممة بتنسيق HTML بنية معينة لكي يتم ترجمتها بصورة صحيحة من قبل المتصفح. فالمقطع البرمجي المصدرى للصفحة الإلكترونية يجب وضعه بـ <html > و </html >.
محرر HTML
على الرغم من إمكانية التحكم في برمجة HTML في أي صفحة HTML المتخصصة توفر إمكانات تحرير وأدوات برمجية فقط، بل تمتد وظائفها لتشمل تقنيات خاصة بإنشاء صفحات الويب مثل (JavaScript)، من هذه المحررات على سبيل المثال فيجوال ستوديو كود (Visual Studio Code).
لفتح محرر فيجوال ستوديو كود
افتح فيجوال ستوديو كود لبدء الترميز.
1. اضغط زر البحث.
< في شريط البحث اكتب
Visual Studio Code (فيجوال ستوديو كود) 2 اضغط على
Visual Studio Code (فيجوال ستوديو كود) لفتح البرنامج.
--- VISUAL CONTEXT ---
**DIAGRAM**: Untitled
Description: A flowchart illustrating the structure of an HTML page. It shows 'الوسوم' (Tags) as a central concept, branching into 'وسم البداية' (Start Tag) and 'وسم النهاية' (End Tag). The tags '<p>' and '</p>' are shown as examples of start and end tags, connected by lines indicating their relationship. The overall structure suggests nested tags within an HTML document.
Context: Illustrates the basic structure of HTML tags and their nesting within a web page.
**IMAGE**: Visual Studio Code
Description: A screenshot of the Visual Studio Code application interface, likely from a search or file explorer view. It shows a search bar at the top with the text 'Search work and web' and a list of search results below. The application window is partially visible, with a blue border and some UI elements like tabs ('All', 'Apps', 'Documents', 'Web', 'More'). A blue highlight indicates 'Visual Studio Code App' as the selected item in the search results.
Context: Demonstrates the process of finding and opening Visual Studio Code, a popular code editor for web development.
**IMAGE**: Untitled
Description: The distinctive blue and black icon for Visual Studio Code, appearing next to the 'Visual Studio Code App' search result.
Context: Visual identifier for the Visual Studio Code application.
**IMAGE**: Untitled
Description: An icon representing a window or application launch, associated with the 'Visual Studio Code App' entry.
Context: Indicates an action or status related to the Visual Studio Code application.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
ما هو الاسم الذي يُطلق على الأجزاء الأساسية في المقطع البرمجي المكتوب بلغة HTML؟
- أ) الأوامر (Commands)
- ب) المتغيرات (Variables)
- ج) الوسوم (Tags)
- د) الدوال (Functions)
الإجابة الصحيحة: c
الإجابة: الوسوم (Tags)
الشرح: 1. الوسوم هي اللبنات الأساسية لبناء صفحات HTML.
2. تأتي عادة على شكل أزواج: وسم فتح ووسم إغلاق.
3. مثال: <p> للنص و </p> لإغلاقه.
4. هي التي تخبر المتصفح بكيفية عرض المحتوى.
تلميح: هي التي تحدد بنية ومحتوى صفحة الويب.
التصنيف: تعريف | المستوى: سهل
كيف يتم تمييز وسم الإغلاق في لغة HTML عن وسم الفتح؟
- أ) بوجود علامة التعجب (!) قبل اسم الوسم.
- ب) بوجود الشرطة المائلة للأمام (/) قبل اسم الوسم.
- ج) بكتابة اسم الوسم بحروف كبيرة.
- د) باستخدام أقواس مربعة [] بدلاً من الزاوية <>.
الإجابة الصحيحة: b
الإجابة: بوجود الشرطة المائلة للأمام (/) قبل اسم الوسم.
الشرح: 1. وسم الفتح يكتب داخل أقواس زاوية: <اسم الوسم>.
2. وسم الإغلاق يكتب بنفس الطريقة، لكن مع إضافة رمز '/' قبل اسم الوسم.
3. مثال: وسم الفتح <p>، وسم الإغلاق </p>.
4. الرمز '/' هو الذي يوقف تشغيل الأمر الخاص بالوسم.
تلميح: انظر إلى مثال الوسم المغلق في النص.
التصنيف: مفهوم جوهري | المستوى: سهل
ما هو الوسم الأساسي الذي يجب أن يوضع بداخله كامل المقطع البرمجي المصدر لصفحة HTML؟
- أ) وسم <head> و </head>
- ب) وسم <body> و </body>
- ج) وسم <html> و </html>
- د) وسم <code> و </code>
الإجابة الصحيحة: c
الإجابة: وسم <html> و </html>
الشرح: 1. يجب أن تتبع صفحة الويب بنية محددة ليتم تفسيرها بشكل صحيح.
2. الوسم <html> يمثل بداية مستند HTML.
3. الوسم </html> يمثل نهاية مستند HTML.
4. جميع محتويات الصفحة (العنوان، الرأس، الجسم) توضع بين هذين الوسمين.
تلميح: هذا الوسم يحدد بداية ونهاية مستند HTML.
التصنيف: صيغة/خطوات | المستوى: متوسط
أي مما يلي يصف وظيفة محرر HTML مثل فيجوال ستوديو كود بشكل صحيح؟
- أ) يقتصر فقط على كتابة وتحرير أكواد HTML دون أي تقنيات أخرى.
- ب) يستخدم حصرياً لتصميم الرسومات والصور لصفحات الويب.
- ج) يوفر إمكانات تحرير وأدوات برمجية متقدمة تتجاوز كتابة HTML لتشمل تقنيات أخرى مثل JavaScript.
- د) هو برنامج مخصص لاختبار سرعة تحميل صفحات الويب فقط.
الإجابة الصحيحة: c
الإجابة: يوفر إمكانات تحرير وأدوات برمجية متقدمة تتجاوز كتابة HTML لتشمل تقنيات أخرى مثل JavaScript.
الشرح: 1. محررات HTML المتخصصة ليست مجرد برامج لكتابة النص.
2. وظائفها تمتد لتشمل تقنيات إنشاء صفحات الويب المختلفة.
3. مثال على هذه التقنيات: JavaScript لإنشاء صفحات تفاعلية.
4. فيجوال ستوديو كود هو مثال على محرر قوي يدعم هذه الميزات.
تلميح: المحرر لا يقتصر على HTML فقط.
التصنيف: مفهوم جوهري | المستوى: متوسط