بنية المحتوى | الوحدة الرابعة | الدرس الثاني
بنية المحتوى هو عنوان الدرس الثاني من الوحدة الثالثة التي تحمل اسم “البرمجة باستخدام لغة ترميز النص التشعبي” في الفصل الدراسي الأول من مقرر “تقنية رقمية 1 – 1”.
ستتعرف في هذا الموضوع على كيفية إنشاء محتوى موقع إلكتروني، وعلى وجه التحديد كيفية إنشاء القوائم، واستخدام الارتباطات التشعبية وإضافة الصور في موقع إلكتروني.
لذا قم بقراءة نواتج التعلُّم جيدًا، ثم أعد قراءتها وتأكَّد من تحصيل كافة محتوياتها بعد انتهائك من دراسة الموضوع.
نواتج التعلُّم
- التمييز بين القوائم المرتبة وغير المرتبة، وإضافتها على الموقع الإلكتروني.
- إضافة رابط تشعبي لموقع إلكتروني آخر.
- إضافة رابط تشعبي ينقلك إلى جزء آخر في نفس الصفحة.
- إضافة رابط تشعبي يفتح صفحة أخرى على نفس الموقع.
- إضافة رابط تشعبي يفتح البريد الإلكتروني.
- استخدام وسوم HTML، لإضافة الصور ومقاطع الفيديو إلى الموقع الإلكتروني.
هيا لنبدأ!
القوائم
هناك نوعان من القوائم المُستخدَمة في المواقع الإلكترونية:
- قائمة مرتبة (Ordered List): في هذه القائمة، يتم اتّباع تسلسل رقمي بحيث يتم ترقيم كل عنصر في القائمة.
- قائمة غير مرتبة (Unordered List): يتم تمييز عناصر هذه القائمة بتعداد نقطي.
القائمة المرتبة
يتم إنشاء القائمة المرتبة باستخدام وسم <ol>، حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق </li>.
لاحظ المثال التالي:
القائمة غير المرتبة
يتم إنشاء القائمة غير المرتبة باستخدام الوسم <ul> حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق </li>.
لاحظ المثال التالي:
صفحة مشجعي كرة القدم
كي تضيف قوائم نادي مشجعي كرة القدم في مشروعك. عليك أولًا أن تنشئ قائمة تكون بمثابة شريط التنقُّل داخل الموقع وتضم العناصر التالية:
- الصفحة الرئيسة.
- التاريخ.
- المعرض.
- نبذة.
- اتصل بنا.
الروابط التشعبية
من المفيد استخدام الروابط الموجودة في الموقع الإلكتروني الخاص بك لأنها تتيح لك الانتقال من صفحة إلكترونية إلى أخرى.
أمثلة على الروابط التشعبية (Hyperlinks):
- روابط من صفحة إلى أخرى في نفس الموقع.
- روابط من جزء في الصفحة الإلكترونية إلى جزء آخر في نفس الصفحة.
- روابط من موقع إلى آخر.
- روابط تفتح في نافذة متصفح جديدة.
- روابط تفتح تطبيق بريدك الإلكتروني لإنشاء رسالة بريد إلكتروني جديدة.
يتم إنشاء الروابط باستخدام وسم الفتح <a> ووسم الإغلاق </a>، حيث إن كل ما يقع بين هذا الوسم ووسم الإغلاق يصبح قابلًا للضغط عليه، ويمكِننا تحديد العنوان الهدف (الصفحة التي سيتم فتحها عند الضغط على الرابط) باستخدام خاصية href.
لاحظ أن
الخاصية href هي اختصار لـ Hypertext Reference (مرجع النص التشعبي) وتحدد عنوان صفحة URL التي ينتقل إليها الارتباط. إذا لم تكن الخاصية href موجودة، فلن يكون الوسم <a> ارتباطًا تشعبيًا.
لترَ مثالًا على رابط تشعبي لمواقع إلكترونية أخرى.
لمعرفة المزيد من المعلومات عن الروابط التشعبية، قم بالاطّلاع على الرابط التالي:
مفهوم الروابط التشعبية في مواقع الويب – أكاديمية حسوب
خاصية الهدف
عندما تستخدم خاصية الهدف (Target) في معلومات الارتباط التشعبي، فإنك تحدد موقع فتح الصفحة المرتبطة بعنوان URL هذا.
يمكِن أن تأخذ هذه الخاصية القيم التالية:
إنشاء شريط التنقل
لقد أضفت في مشروعك قائمة مرتبة على شكل شريط التنقُّل، وتتكوَّن هذه القائمة من مجموعة من الروابط.
بشكل عام، يجب أن ترتبط بعض عناصر هذه القائمة بجزء معيَّن من الصفحة، بينما سيرتبط العنصر “اتصل بنا” (Contact Us) بصفحة أخرى في نفس الموقع.
الارتباط بجزء معين في نفس الصفحة
قبل أن تبدأ بإنشاء ارتباط بجزء معيَّن في نفس الصفحة، يجب أن تميِّز الجزء من الصفحة الذي سيتم الرجوع إليه عبر هذا الرابط، ولهذا الغرض سوف تستخدم خاصية “id” كمعرف.
يتم استخدام خاصية “id” مع جميع عناصر HTML لتمييز العنصر عن باقي الصفحة الإلكترونية.
لربط عنصر بمحتوى على الصفحة، استخدم معرف هذا المحتوى مسبوقًا بوسم (#). طبِّق هذا الأمر في مشروعك.
بإمكانك مراجعة محتوى موضوع “بنية المحتوى” من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:
ارتباط صفحة إلى أخرى على نفس الموقع
لقد ربطت 3 علامات تبويب في شريط التنقُّل بأجزاء محددة من نفس الصفحة. ستشير علامة التبويب “اتصل بنا” إلى صفحة إلكترونية أخرى من موقعك.
أولًا، لتنشئ ملف HTML كما تعلمت في الدرس السابق، وستربطه بهذا الملف “contact-form.html”.
عند الارتباط بصفحات أخرى في نفس الموقع فإنك تستخدم عنوان URL ذا الصلة. إذا كانت صفحات الموقع في نفس المجلد، فإن قيمة خاصية href تكون عبارة عن اسم الملف المرتبط بها.
روابط البريد الإلكتروني
هناك نوع من الروابط يقوم بفتح تطبيق البريد الإلكتروني للمُستخدِم عند الضغط عليه. يتم هذا عن طريق تعيين قيمة الخاصية href لتبدأ بـ: mailto متبوعًا بعنوان البريد الإلكتروني الذي سيتم الإرسال إليه.
صفحة مشجعي كرة القدم
أنشئ قسمًا آخر على موقعك باسم “معلومات مفيدة” (Useful Information) حيث ستضيف عنوان بريد إلكتروني وعناوين بعض المواقع الإلكترونية التي قد تُعرِّف المُستخدِمين بلعبة كرة القدم.
لاحظ أن
يجب وضع الوسوم الرئيسة داخل قسم (<body>…</body>) من مستند HTML، فوضعها في أي مكان آخر سيؤدي إلى ظهور أخطاء.
إضافة الصور ومقاطع الفيديو
من المهم إضافة الصور في الموقع الإلكتروني الخاص بك وإظهارها بطريقة جذّابة واحترافية.
من الممارسات الجيدة الاحتفاظ بالصور في مجلد منفصل عن باقي ملفات الموقع، لذلك تم إنشاء مجلدٍ فرعيٍ باسم “Images” يتم فيه إضافة الصور التي ستستخدمها في موقعك.
يتم استخدام وسم <img> لإضافة صور إلى الصفحة الإلكترونية. يجب الانتباه إلى أن هذا الوسم لا يحتوي على وسم إغلاق.
يمكِنك أيضًا إضافة مقطع فيديو إلى المستند الخاص بك باستخدام وسم <video> يحتوي هذا الوسم على بعض الميزات التي تتيح لك التحكُّم في الفيديو.
صفحة مشجعي كرة القدم
أضف صورًا إلى الموقع الإلكتروني الخاص بك:
بإمكانك مراجعة محتوى موضوع “بنية المحتوى” بدايةً من عنوان “ارتباط صفحة إلى أخرى على نفس الموقع” وحتى نهاية الموضوع، من خلال الرابط التالي:
اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:
الواجب الإلكتروني
إلى هنا يكون قد انتهى موضوع “بنية المحتوى“، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!