سننشئ في هذا الجزءالملاحه بحيث يمكن للزوار التبديل بين الصفحات.
يمكن أن يكون التنقل بسيطًا مثل بعض الارتباطات إلى الصفحات الأخرى. سنبدأ بهذا النهج البسيط للغاية ونعمل على تحسينه باستمرار حتى يتوفر تنقل جميل وكامل على جميع الصفحات.
نبدأ من خلال برمجة الملاحة في صفحتنا الرئيسية. فقط عندما ننتهي ، سنقوم بنسخ رمز التنقل في جميع الصفحات الأخرى
الملاحة و التنقل مع الروابط
افتح index.html لصفحتك الرئيسية.
مع روابط بسيطة يمكننا القفز من صفحتنا الرئيسية إلى صفحات أخرى. يجب أن يكون التنقل في بداية الجزء body من الجسم. دعنا ندخل الروابط الأربعة التالية بين علامة body والعنوان.
index.html
<body>
<a href="/">Home </a>
<a href="/blog">Blog </a>
<a href="/projects">Projects</a>
<a href="/contact">Contact</a>
ملاحظة: الرابط إلى / يشير إلى الدليل الجذر. يمكن العثور على مزيد من المعلومات حول ذلك في قسم عناوين URL النسبية والمطلقة.
يجب أن يبدو التنقل الخاص بنا الآن كما يلي:
تحقق من أن الروابط تعمل بالفعل وأنهم يقودونك إلى الصفحة المطلوبة.
ملاحظة:
ملاحظة: إذا قمت بفتح الصفحة كملف مباشرة في المستعرض ( بدون خادم Live ) ، فقد لا تعمل الروابط بشكل صحيح. السبب هو أن نظام الملفات يعرض ببساطة محتويات المجلد ولا يفتح index.html تلقائيًا. سيكون عليك النقر يدويًا على index.html .
بمجرد نشر الموقع على خادم ، يجب أن تعمل الروابط بشكل طبيعي.
قوائم روابط الملاحه في HTML
في الوقت الحالي ، التنقل لدينا عبارة عن سلسلة من الروابط. في الغالب ، في HTML ، يتم استخدام قائمة الروابط للتنقلات.
باستخدام قائمة HTML ، يمكن تجميع عناصر معًا أفقيًا أو رأسيًا مما يسهل عملية الانتقال من صفحه لاخرى.
دعونا نتعلم كيفية إنشاء قوائم HTML.
انشاء قوائم الانتقال
هناك العديد من المواقف التي نستخدم فيها القوائم. في HTML ، هناك ثلاثة أنواع مختلفة من القوائم:
- 1 - القوائم المرتبة
- 2 - القوائم غير المرتبة
- 3 - قوائم الوصف
. لا تستخدم قوائم الوصف في كثير من الأحيان. لذلك ، سوف ننظر فقط في الأولين بمزيد من التفصيل.
قوائم غير مرتبة
القائمة غير مرتبة هي ببساطة قائمة بالإدخالات التي يكون فيها الطلب غير متوقع. يتم إنشاء قوائم غير مرتبة بتنسيق HTML باستخدام العنصر <ul> (يرمز إلى unordered list ). لكل إدخال في القائمة ،
هناك حاجة إلى عنصر <li>
يشير الى
( list item )
داخل العنصر
<ul>
فيما يلي مثال لقائمة المهام النموذجية:
<ul>
< li/ >الذهاب للعمل < li >
< li/ >الذهاب للتسوق < li >
< li/ >الاتصال بالصيانه < li >
<ul/>
- • الذهاب للعمل
- • الذهاب للتسوق
- • الاتصال بفريق الصيانه
قوائم مرتبة
في القوائم المرتبة ، يكون الترتيب مهمًا وبالتالي يتم ترقيمه. في HTML ، يبدو مشابهًا للغاية للقائمة غير مرتبة
نستخدم عنصر <ol> بدلاً من <ul>
مثال نموذجي على قائمة مرتبة :
<ol>
< li/ >الذهاب للعمل < li >
< li/ >الذهاب للتسوق < li >
< li/ >الاتصال بالصيانه < li >
<ol/>
- 1 - الذهاب للعمل
- 2 - الذهاب للتسوق
- 3 - الاتصال بفريق الصيانه
الملاحة كقائمة
سنقوم الآن ببرمجة التنقل في مروعنا كقائمة غير مرتبة.
يتم وضع روابط التنقل الخاصة بنا في
العناصر
< li >
التي
تحتوي على عنصر
< ul >
<ul>
<a href="/">Home </a>
<a href="/blog">Blog </a>
<a href="/projects">Projects</a>
<a href="/contact">Contact</a>
<ul>
النتيجة تبدو مثل هذا:
في الجزء الأخير من هذا البرنامج التعليمي ، سنرى كيف يمكن عرض التنقل بشكل أفقي وصغير. بمجرد اكتمال التنقل ، سنقوم بنسخه إلى جميع الصفحات الأخرى.
مدخلات المدونة كقائمة
قد وضعنا تعليقًا على صفحة المدونة الخاصة بنا حيث أردنا إدراج إدخالات المدونة الخاصة بنا. الآن بعد أن عرفنا كيف يتم إنشاء القوائم في HTML
، يمكننا تحديد إدخالات المدونة.
افتح blog/index.html فى صفحة المدونة . أسفل عنوان "مقالات المدونة" ، أدخل قائمة الإدخالات على النحو التالي.
ملاحظة: غالبًا ما يتم سرد إدخالات المدونة بترتيب زمني عكسي حتى يظهر الإدخال الأخير في أعلى القائمة.
هذاالمقال مترجم عن مقال
Marco Jakob
code.makery
نرجو الرجوع الى المقاله السابقه للاطلاع على بعض المعلومات المهمه لتعلم برمجه الوب
المصادر
نرجو ان تترك لنا تعليق او اذا كان لديك استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك