المحتوى
يُعد المخطط الزمني طريقة مفيدة لعرض قائمة بالأحداث على صفحة ويب ، ويمنح المخطط الزمني التفاعلي المستخدمين التحكم في عرض المحتوى. في حين أن هناك العديد من الطرق لإنشاء جدول زمني تفاعلي ، يحتاج الكثير منها إلى أكثر من HTML. ومع ذلك ، هناك حل HTML بسيط للغاية: يمكنك إنشاء أشرطة تمرير تفاعلية على خطك الزمني باستخدام سمة "نمط" HTML. من خلال القيام بذلك ، سيتمكن المستخدمون من التنقل حول المحتوى بحرية.
الخطوة 1
قم بإنشاء ملف HTML الخاص بك. افتح مستندًا جديدًا في محرر نصوص وأنشئ صفحة HTML أساسية. أضف هذه الشفرة في قسم "النص الأساسي" في HTML:
الحاجز ("div") عبارة عن حاوية لقائمة الأحداث في مخططك الزمني. تضيف القيمة "auto" في "overflow" أشرطة تمرير تفاعلية عندما يكون الخط الزمني أطول أو أوسع من الحاوية. احفظ الصفحة باسم "timeline.html".
الخطوة 2
قم بإنشاء المحتوى. في المسافة بين علامتي "div" ، أضف الأحداث في المخطط الزمني بترتيب تصاعدي أو تنازلي. أضف كل حدث في قسم HTML جيد التنسيق الخاص به. احفظ الصفحة باستمرار أثناء عملك.
الخطوه 3
اختبر كود HTML الخاص بك. افتح الملف "timeline.html" في متصفح الويب بجهاز الكمبيوتر. إذا كان المحتوى أكبر من حاوية "div" ، فسترى شريط تمرير تفاعلي. اضبط قيمتي "العرض" و "الارتفاع" للحاوية لتلائم حدها الرأسي أو الأفقي.