133 رابط الدرس الرقمي www.ien.edu.sa الدرس الثانى بنية المحتوى القوائم هناك نوعان من القوائم المستخدمة في المواقع الإلكترونية قائمة مرتبة Ordered List) في هذه القائمة، يتم اتباع تسلسل رقمي بحيث يتم ترقيم كل عنصر في القائمة. > قائمة غير مرتبة nordered List): يتم تمييز عناصر هذه القائمة بتعداد نقطي. القائمة المرتبة يتم إنشاء القائمة المرتبة باستخدام وسم <ol> ، حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق <li/> وزارة التعليم Ministry of Education 2024-1446 <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <h1/>ألعاب جماعية <h1> <ol> <li/> كرة القدم <li> <li/> كرة السلة <li> <li/>كرة اليد<li> <li/> کریکیت<li> </ol> </body> </html> 四 Examples لاحظ المثال التالي: C File | C:/Users/bina.... as ألعاب جماعية 1 كرة القدم 2 كرة السلة 3. كرة اليد 4 كريكيت

القوائم

القائمة المرتبة

القائمة غير المرتبة يتم إنشاء القائمة غير المرتبة باستخدام الوسم <ul> حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق <li/>. لاحظ المثال التالي: <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <h1/> ألعاب جماعية <h1> <ul> <li/> كرة القدم <li> <li/> كرة السلة<li> <li/>كرة اليد<li> <li/> کریکیت<li> </ul> </body> </html> Examples C A x + File | C:/Users/bina... ad ألعاب جماعية كرة كرة السلة كرة اليد كريكيت صفحة مشجعي كرة القدم كي تضيف قوائم نادي مشجعي كرة القدم في مشروعك. عليك أولا أن تنشئ قائمة تكون بمثابة شريط للتنقل داخل الموقع وتضم العناصر وزارة التعليم Ministry of Education 2024-1446 التالية: > الصفحة الرئيسة > التاريخ > المعرض > نبذة > اتصل بنا 134

القائمة غير المرتبة

صفحة معجبي كرة القدم

الصفحة الرئيسة التاريخ المعرض <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title> Football Fan Page</title> <meta charset="UTF-8" /> </head> <body> <ul> <li/> الصفحة الرئيسة <li> <li/> التاريخ <li> <li/> المعرض <li> <li/>نبذة<li> <li/> اتصل بنا<li> </ul> <h1/>تعمل كرة القدم على جمع الناس معا<h1> x + File | C:/Users/binar/Desktop/Football_Fan_... تعمل كرة القدم على جمع الناس معا الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة. التاريخ تحد كرة القدم رياضة ذات تاريخ طويل نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، تم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر تراة قليلا. حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات. أنشئ قائمة تعداد نقطي لعرض موادك الدراسية في المدرسة. Football Fan Page جرب بنفسك 135 وزارة التعليم Ministry of Education 2024-1446

تعمل كرة القدم على جمع الناس معا

أنشئ قائمة تعداد نقطي لعرض موادك الدراسية في المدرسة

136 الروابط التشعبية من المفيد استخدام الروابط الموجودة في الموقع الإلكتروني الخاص بك لأنها تتيح لك الانتقال من صفحة إلكترونية إلى أخرى. أمثلة على الروابط التشعبية (Hyperlinks) روابط من صفحة إلى أخرى في نفس الموقع. روابط من جزء في الصفحة الإلكترونية إلى جزء آخر في نفس الصفحة. روابط من موقع إلى آخر. روابط تفتح في نافذة متصفح جديدة. روابط تفتح تطبيق بريدك الإلكتروني لإنشاء رسالة بريد إلكتروني جديدة. يتم إنشاء الروابط باستخدام وسم الفتح <a> ووسم الإغلاق <a/>، حيث إن كل ما يقع بين هذا الوسم ووسم الإغلاق يصبح قابلا للضغط عليه، ويمكننا تحديد العنوان الهدف الصفحة التي سيتم فتحها عند الضغط على الرابط باستخدام خاصية href. النص الذي يضغط الصفحة التي عليه المستخدم سيتم فتحها الخاصية href هي اختصار لـ Hypertext Reference (مرجع النص التشعبي و تحدد عنوان صفحة URL التي ينتقل إليها الارتباط. إذا لم تكن الخاصية href موجودة، فلن يكون الوسم <a> ارتباطًا تشعبيًا. <a/> اضغط هنا </a href="https://www.moe.gov.sa> وسم النهاية تحديد الرابط التشعبي URL هذا الرابط خاص بالموقع الإلكتروني (URL) حيث ترى أن قيمة خاصية href هنا هي اسم الموقع الإلكتروني، تمامًا مثل العنوان الذي تكتبه في متصفحك لزيارة تلك الصفحة. وزارة التعليم Ministry of Education 2024-1446

الروابط التشعبية

137 وزارة التعليم Ministry of Education 2024-1446 لتر مثالا على رابط تشعبي لمواقع إلكترونية أخرى. <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <a /> اضغط هنا</a href="https://www.moe.gov.sa> </body> </html> 3 دعني أساعدك + File C:/Users/binar/Desktop/exa... سينقلك الضغط على هذا النص مباشرة إلى الموقع المحدد. + X وزارة التعليم A https://www.moe.gov.sa/ar/Pages/default.aspx - طالب طالب جامعي معلم / إداري باحث جونة ارشادية الاقتراحات مستمر : اضغط هنا

لنر مثالا على رابط تشعبي لمواقع ويب أخرى

خاصية الهدف عندما تستخدم خاصية الهدف Target) في معلومات الارتباط التشعبي، فإنك تحدد موقع فتح الصفحة المرتبطة بعنوان URL هذا. يمكن أن تأخذ هذه الخاصية القيم التالية: خاصية target الوصف blank_ self parent_ top_ القيمة ستفتح الصفحة في علامة تبويب جديدة. ستفتح الصفحة في علامة التبويب نفسها. ستفتح الصفحة في النافذة الرئيسة. ستفتح الصفحة في محتوى النافذة. <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" />> </head> <body> <a/> اضغط هنا<"a href="https://www.moe.gov.sa/" target="_blank> </body> </html> دعني أساعدك الاقتراحات وزارة التعليم Ministry of Education 2024-1446 Examples 2 exa... + x وزارة التعليم A https://www.moe.gov.sa/ar/Pages/default.aspx طالب طالب جامعي معلم / إداري باحث جولة ارشادية 7 مستثمر 曲 X اضغط هنا + 138

خاصية الهدف

139 صفحة مشجعي كرة القدم إنشاء شريط التنقل لقد أضفت في مشروعك قائمة مرتبة على شكل شريط للتنقل، وتتكون هذه القائمة من مجموعة من الروابط. بشكل عام، يجب أن ترتبط بعض عناصر هذه القائمة بجزء معين من الصفحة، بينما سيرتبط العنصر اتصل بنا Contact Us) بصفحة أخرى في نفس الموقع. الارتباط بجزء معين في نفس الصفحة قبل أن تبدأ بإنشاء ارتباط بجزء معين في نفس الصفحة، يجب أن تُميّز الجزء من الصفحة الذي سيتم الرجوع إليه عبر هذا الرابط ، ولهذا الغرض سوف تستخدم خاصية "id" كمعرف. يتم استخدام خاصية "id" مع جميع عناصر HTML لتمييز العنصر عن باقي الصفحة الإلكترونية. يمكن تعيين المعرف id بكلمة تبدأ بحرف أو بشرطة سفلية (_) ولا يمكن تعيين نفس اسم المعرف لعنصرين مختلفين في نفس الصفحة. <h2/> التاريخ <"h2 id="history> <br>. تعدّ كرة القدم رياضة ذات تاريخ طويل ، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر <p> <br> وُجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، ثم تمّ إنشاء <br>. الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك <br> ، يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراءً قليلًا <p/> . حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات <h2/> المعرض h2 id="gallery> <h2/> نبذة <"h2 id="about> <br> من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء <p> <br> حول فريق كرة القدم الذي نشجعه أو حول كرة القدم بشكل عام في وقتنا الحالي <p/>. يمكننا أيضًا التواصل من خلال النموذج لإضافة المزيد من الصور أو المقالات إلى المعرض </body> </html> وزارة التعليم Ministry of Education 2024-1446

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

الارتباط بجزء معين في نفس الصفحة

140 لربط عنصر بمحتوى على الصفحة استخدم معرف هذا المحتوى مسبوقًا بوسم . طبق هذا الأمر في مشروعك. <ul> <a></li/>الصفحة الرئيسة <"li><a href="#top> <a></li/> التاريخ <"li><a href="#history> <a></li/>المعرض <"li><a href="#gallery> <a></li/> نبذة < " li><a href="#about> <li/> اتصل بنا<li> X الصفحة الرئيسة المعرض 1 Football Fan Page x + -> CA File C:/Users/binar/Desktop/Football_Fan_... تعمل كرة القدم على جمع الناس معا الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة. التاريخ تحد كرة القدم رياضة ذات تاريخ طويل نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، تم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر تراة قليلا حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات. المعرض نبذة من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء حول فريق كرة القدم الذي نشجعه أو حول كرة القدم بشكل عام في وقتنا الحالي. يمكننا أيضا التواصل من خلال النموذج الإضافة المزيد من الصور أو المقالات إلى المعرض. </ul> ارتباط صفحة إلى أخرى على نفس الموقع لقد ربطت 3 علامات تبويب في شريط التنقل بأجزاء محددة من نفس الصفحة ستشير علامة التبويب "اتصل بنا" إلى صفحة إلكترونية أخرى من موقعك. أولًا، لتنشئ ملف HTML كما تعلمت في الدرس السابق، وستربطه بهذا الملف "contact-form.html". EXPLORER OPEN EDITORS X <> contact-form.html... 1 File Edit Selection View Go Run Terminal Help contact-form.html X pages> <> contact-form.html> html > > head <!DOCTYPE html> 2 HTML E 3 <html> › Images 4 <head> pages 5 <title> Contact Us</title> <> contact-form.html 6 </head> <> footballFanPage.html 7 <body> وزارة التعليم Ministry of Education 2024-1446

لربط عنصر بمحتوى على الصفحة نستخدم معرف هذا المحتوى مسبوقا بوسم

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

عند الارتباط بصفحات أخرى في نفس الموقع فإنك تستخدم عنوان URL ذا الصلة. إذا كانت صفحات الموقع في نفس المجلد، فإن قيمة خاصية href تكون عبارة عن اسم الملف المرتبط بها. 141 وزارة التعليم Ministry of Education 2024-1446 <ul> <a></li/> الصفحة الرئيسة <"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><a href="contact-form.html" target="_blank> </ul> 10 Football Fan Page C x + File C:/Users/binar/Desktop/Football_Fan_... الصفحة الرئيسة التاريخ المعرض اتصل بنا X تعمل كرة القدم على جمع الناس معا الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة. التاريخ تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، تم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر تراة قليلا، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات. المعرض نبذة من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء حول فريق كرة القدم الذي تشجعه أو حول كرة القدم بشكل عام في وقتنا الحالي. يمكننا أيضا التواصل من خلال النموذج لإضافة المزيد من الصور أو المقالات إلى المعرض. Football Fan Page X Contact Us C File | C:/Users/binar/Deskt... +

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

142 روابط البريد الإلكتروني هناك نوع من الروابط يقوم بفتح تطبيق البريد الإلكتروني للمستخدم عند الضغط عليه. يتم هذا عن طريق تعيين قيمة الخاصية href لتبدأ بـ :mailto متبوعا بعنوان البريد الإلكتروني الذي سيتم الإرسال إليه. <a /> نص قابل للضغط عليه <"a href="mailto:emailaddress@example.com> صفحة مشجعي كرة القدم أنشئ قسمًا آخر على موقعك باسم معلومات مفيدة (Useful Information) حيث ستضيف عنوان بريد إلكتروني وعناوين بعض المواقع الإلكترونية التي قد تُعرّف المستخدمين بلعبة كرة القدم. التاريخ <h2/> معلومات مفيدة <h2> <ul> <li><a href="mailto:info@example.com">info@example.com</a></li> <li><a href="https://www.fifa.com/" target="_blank"> Fifa.com </a></li> <li><a href="https://www.uefa.com/" target="_blank">UEFA.com </a></li> <ul> تعد كرة القدم رياضة ذات تاريخ طويل نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، تم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر تراء قليلا حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات. المعرض نبذة من خلال هذه الصفحة يمكننا تبادل الأفكار والآراء حول فريق كرة القدم الذي نشجعه أو حول كرة القدم بشكل عام في وقتنا الحالي. يمكننا أيضا التواصل من خلال النموذج الإضافة المزيد من الصور أو المقالات إلى المعرض. معلومات مفيدة info@example.com Fifa.com UEFA.com افتح الملف الذي أنشأته مسبقًا بقائمة المواد الدراسية، وأضف رابطا لموقع المدرسة الإلكتروني وبريدها الإلكتروني. يجب وضع الوسوم الرئيسة داخل قسم (<body>....</body>) من مستند HTML، فوضعها في أي مكان آخر سيؤدي إلى ظهور أخطاء. جرب بنفسك وزارة التعليم Ministry of Education 2024-1446

روابط البريد الإلكتروني

أفتح الملف الذي أنشأته مسبقا بقائمة المواد الدراسية وأضف رابطا لموقع المدرسة الإلكتروني وبريدها الإلكتروني

143 إضافة الصور ومقاطع الفيديو من المهم إضافة الصور في الموقع الإلكتروني الخاص بك وإظهارها بطريقة جذابة واحترافية. من الممارسات الجيدة الاحتفاظ بالصور في مجلد منفصل عن باقي ملفات الموقع، لذلك تم إنشاء مجلدٍ فرعي باسم "Images" يتم فيه إضافة الصور التي ستسخدمها في موقعك. وزارة التعليم Ministry of Education 2024-1446 BIB Images File Home Share View « G10.51.03_Football_fan_page > Images Search G10S1U3.L1 This PC 3D Objects Desktop Documents Downloads football_stadium. jpg Soccer_field.jpg Soccer_field_emp ty.jpg Music Pictures Videos Local Disk (C) Storage (D) 5 items soccer-saudi-ara World_Cup.jpg عند استخدام فيجوال ستوديو كود Explorer 9 (Visual Studio Code) (المستكشف)، يوجد مجلد فرعي باسم Images (الصور) يمكنك من معاينة جميع ملفات الصور المتاحة للاستخدام في الموقع. يُستخدم وسم <img> لإضافة صور إلى الصفحة الإلكترونية. يجب الانتباه إلى أن هذا الوسم لا يحتوي على وسم إغلاق. File Edit Selection View Go EXPLORER OPEN EDITORS Run X <>footballFanPage.html pages G10.S1.03_FOOTBALL_FAN_PAGE Images football stadium.jpg n Soccer_field_empty.jpg Soccer_field.jpg soccer-saudi-arabia-logo.jpg | World_Cup.jpg pages contact-form.html footballFanPage.html يتم تحديد عرض الصورة بوحدة البكسل. يتم إخبار المتصفح بموقع العثور على ملف الصورة <img src="file's path" alt="description" width="600" height="400" /> يتم تحديد ارتفاع الصورة بوحدة البكسل. يوفر وصفًا نصيًا للصورة إن لم تستطع أن تراها.

إضافة الصور ومقاطع الفيديو

وزارة التعليم Ministry of Education 2024-1446 <"img src="picture.jpg> مسارات ملف HTML الوصف توجد صورة picture.jpg في نفس المجلد كما الصفحة الحالية. المسار <"img src="images/picture.jpg> <"img src="/images/picture.jpg> <"img src="../picture.jpg> توجد صورة picture.jpg في مجلد الصور في نفس الفهرس الحالي. توجد صورة picture.jpg في مجلد الصور في المجلد الرئيس للصفحة الحالية. توجد picture.jpg في مجلد أعلى بمستوى واحد من المجلد الحالي. يمكنك أيضًا إضافة مقطع فيديو إلى المستند الخاص بك باستخدام وسم <video> يحتوي هذا الوسم على بعض الميزات التي تتيح لك التحكم في الفيديو. يتم تحديد ارتفاع وعرض الفيديو بوحدة البكسل. ستظهر الصورة في أثناء تنزيل الفيديو أو حتى بضغط المستخدم على زر التشغيل. <video src="file's path" poster="file's path" width="600" height="400" preload controls loop> يتم إخبار المتصفح بما يجب يشير إلى ضرورة وجود أزرار خاصة في المتصفح لكي يعمل الفيديو فعله عند تحميل الصفحة 00:00 00:27 يشير إلى أنه سيتم تشغيل الفيديو تلقائيًا بعد انتهائه. 144

مسارات ملف HTML

145 وزارة التعليم Ministry of Education 2024-1446 هذا تعليق، لاحظ أنه لا يتم عرض التعليقات في المتصفح. صفحة مشجعي كرة القدم أضف صورًا إلى الموقع الإلكتروني الخاص بك:  <h2/> المعرض "h2 id="gallery> <img src="/Images/World_Cup.jpg" width="600" height="400"> <img src="/Images/Soccer_field.jpg" width="600" height="400"> <img src="/Images/football_stadium.jpg" width="600" height="400"> <img src="/Images/soccer-saudi-arabia-logo.jpg" width="600" height="400"> جرب بنفسك football Fan Page WORLD FIFA WO أنشئ فيديو باستخدام صور مايكروسوفت Microsoft Photos) من صور مختلفة خاصة بكرة القدم، ثم أضف الفيديو إلى صفحة مشجعي كرة القدم.

لنضف صورا إلى موقع الويب الخاص بنا

أنشئ فيديو باستخدام صور مايكروسوفت من صور مختلفة خاصة بكرة القدم ثم أضف الفيديو إلى صفحة مشجعي كرة القدم

وزارة التعليم Ministry of Education 2024-1446 وسوم HTML المستخدمة في الدرس الثاني الوظيفة تحدد قائمة مرتبة. تحدد عنصر قائمة. تحدد قائمة غير مرتبة. تعرّف الارتباط التشعبي. يتم استخدامها لإدراج صورة. يتم استخدامها لإدراج الفيديو <DOCTYPE html> <html dir="rtl" lang="ar"> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <h1/> المواد الدراسية <h1> <ul> <li> الرياضيات <li> <li> اللغة العربية <li> <li> التاريخ <li> </body> </html> الوسم <ol> <li> <ul> <a> <img> <video> لنطبق معًا تدريب 1 حدّد وأصلح الأخطاء في المقطع البرمجي التالي: 146

وسوم HTML المستخدمة في الدرس الثاني تحدد قائمة مرتبة

حدد وأصلح الأخطاء في البرنامج التالي

تدريب 2 أنشئ صفحة إلكترونية تتكون من قائمة غير مرتبة بعنوان "البريد الإلكتروني للأصدقاء". تتضمن هذه الصفحة عناوين البريد الإلكتروني لأصدقائك، ويتم فتح تطبيق البريد الإلكتروني في علامة تبويب مختلفة وذلك عند الضغط على أحد هذه العناوين تدريب 3 > أنشئ قائمة عناصر مرتبة تتكون من 3 روابط لمواقع مختلفة يفتح كل منها في نافذة جديدة. > أنشئ قائمة بأطعمتك المفضلة. > اعرض صورة بحيث يتم فتح صفحة إلكترونية لمحرك بحث من اختيارك (مع مراعاة أن يفتح في نافذة جديدة) وذلك عند الضغط على تلك الصورة. تدريب 4 استمر بإنشاء الموقع الإلكتروني الذي أنشأته في الدرس السابق الخاص بالمعلومات السياحية للمسافرين. افتح مجلد "Adventure_website" في فيجوال ستوديو كود ونفذ ما يلي: > أنشئ قائمة غير مرتبة من العناصر التالية : الصفحة الرئيسة حول ألبوم الصور الاتصال ستكون هذه القائمة شريط تنقل حيث يتم ربط كل عنصر بقسم خاص به من الصفحة أضف الصور التي تريدها. > أضف مقطع فيديو. > أنشئ قائمة غير مرتبة أسفل الصفحة تحتوي على روابط مفيدة للمستخدم، كما يمكنك إضافة بريدك الإلكتروني لكي يتمكن المستخدم من الاتصال بك. 147 وزارة التعليم Ministry of Education 2024-1446