HTML Unordered List Example - كتاب المهارات الرقمية - الصف 10 - الفصل 1 - المملكة العربية السعودية

ملخص الصفحة:

1. إنشاء روابط داخلية في شريط التنقل:

يتم إنشاء قائمة مرتبة (شريط تنقل) باستخدام الوسم `

` و `
• `. لربط عنصر في القائمة بجزء معين داخل نفس الصفحة، يتم استخدام خاصية المعرف `id` للجزء المستهدف. يتم وضع المعرف مسبوقًا بعلامة `#` داخل خاصية `href` للرابط. مثال على الكود المستخدم:

  ```html

  • الصفحة الرئيسة

  • التاريخ

  • المعرض

  • نبذة

  • اتصل بنا

  ```

  حيث `#top`، `#history`، `#gallery`، `#about` هي معرفات الأقسام داخل الصفحة.

  2. محتوى صفحة مشجعي كرة القدم:

  - مقدمة: تعمل كرة القدم على جمع الناس معًا، وهدف الجمهور هو تشجيع اللاعبين أثناء المباراة.

  - قسم التاريخ: تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا منتصف القرن التاسع عشر. وُجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة. تم إنشاء العديد من الأندية في أواخر القرن التاسع عشر، واستمر القليل منها فقط، ويعتقد المؤرخون أن هذه الأندية كانت في مناطق أكثر ثراءً حيث كان الناس لا يعملون بعد ظهر السبت ويستطيعون تحمل نفقات حضور المباريات.

  - قسم النبذة: من خلال هذه الصفحة يمكن تبادل الأفكار والآراء حول فريق كرة القدم المفضل أو حول كرة القدم بشكل عام. يمكن أيضًا التواصل عبر نموذج لإضافة المزيد من الصور أو المقالات إلى المعرض.

  3. الارتباط بصفحة أخرى في نفس الموقع:

  بعد ربط ثلاثة عناصر في شريط التنقل بأجزاء داخل نفس الصفحة، سيتم ربط عنصر "اتصل بنا" بصفحة إلكترونية أخرى في الموقع. للقيام بذلك، يتم إنشاء ملف HTML جديد باسم `contact-form.html` وربطه بالصفحة الرئيسية.

  4. بداية إنشاء صفحة "اتصل بنا":

  يظهر هيكل بداية ملف `contact-form.html` في بيئة التطوير، ويتضمن العلامات الأساسية مثل ``، و``، و`` الذي يحتوي على ``، و``.

لربط عنصر بمحتوى على الصفحة، استخدم معرف هذا المحتوى مسبوقًا بوسم (#). طبق هذا الأمر في مشروعك.

<ul> <li><a href="#top">الصفحة الرئيسية</a></li> <li><a href="#history">التاريخ</a></li> <li><a href="#gallery">المعرض</a></li> <li><a href="#about">نبذة</a></li> <li>اتصل بنا</li> </ul>

A diagram showing a webpage with internal links.

ارتباط صفحة إلى أخرى على نفس الموقع

لقد ربطت 3 علامات تبويب في شريط التنقل بأجزاء محددة من نفس الصفحة. ستشير علامة التبويب "اتصل بنا" إلى صفحة إلكترونية أخرى من موقعك. أولاً، لننشئ ملف HTML كما تعلمت في الدرس السابق، وسنربطه بهذا الملف "contact-form.html".

Ministry of Education Logo

180

لربط عنصر بمحتوى على الصفحة، استخدم معرف هذا المحتوى مسبوقًا بوسم (#). طبق هذا الأمر في مشروعك. --- SECTION: HTML Unordered List Example --- <ul> <li><a href="#top">الصفحة الرئيسية</a></li> <li><a href="#history">التاريخ</a></li> <li><a href="#gallery">المعرض</a></li> <li><a href="#about">نبذة</a></li> <li>اتصل بنا</li> </ul> A diagram showing a webpage with internal links. ارتباط صفحة إلى أخرى على نفس الموقع لقد ربطت 3 علامات تبويب في شريط التنقل بأجزاء محددة من نفس الصفحة. ستشير علامة التبويب "اتصل بنا" إلى صفحة إلكترونية أخرى من موقعك. أولاً، لننشئ ملف HTML كما تعلمت في الدرس السابق، وسنربطه بهذا الملف "contact-form.html". Ministry of Education Logo 180 --- VISUAL CONTEXT --- **DIAGRAM**: Football Fan Page Description: A diagram illustrating internal page links in HTML. It shows a screenshot of a webpage titled 'Football Fan Page'. The page has a navigation menu with five items: 'الصفحة الرئيسية', 'التاريخ', 'المعرض', 'نبذة', 'اتصل بنا'. Below the menu are content sections with headers. Curved arrows originate from the navigation links ('التاريخ', 'المعرض', 'نبذة') and point to the matching section headers on the page, visually explaining how clicking a link scrolls the user to the corresponding section on the same page. The text content of the webpage screenshot is as follows: Header 1: تعمل كرة القدم على جمع الناس معًا Paragraph 1: الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة. Header 2: التاريخ Paragraph 2: تُعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وجدت أندية كرة القدم منذ القرن الخامس عشر، لكنها كانت غير منظمة ودون صفة رسمية. لم تؤثر إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. يحتفظ معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراءً قليلاً، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات. Header 3: المعرض Header 4: نبذة Paragraph 4: من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء حول فريق كرة القدم الذي نشجعه أو حول كرة القدم بشكل عام في وقتنا الحالي. يمكننا أيضًا التواصل من خلال النموذج لإضافة المزيد من الصور أو المقالات إلى المعرض. **FIGURE**: Visual Studio Code editor screenshot Description: A screenshot of the Visual Studio Code editor. The left panel is the 'EXPLORER', showing a project's file structure. The structure includes an 'Images' folder, a 'pages' folder containing 'contact-form.html', and a 'footballFanPage.html' file. The right panel shows an open file with HTML code. A breadcrumb at the top indicates the location of the cursor: 'pages > <> contact-form.html > html > head'. The code displayed is: 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>Contact Us</title> 6 </head> 7 <body> **FIGURE**: Ministry of Education Logo Description: The official logo of the Saudi Arabian Ministry of Education. It features the text 'وزارة التعليم' in Arabic and 'Ministry of Education' in English, below a stylized design of green dots. The years '2025 - 1447' are also present.