إذا أردنا إنشاء شريط تنقل بلغة Html، فعلينا اتباع الخطوات الموضحة أدناه. باستخدام هذه الخطوات، يمكننا بسهولة إنشاء شريط التنقل.

الخطوة 1: أولاً، يتعين علينا كتابة كود Html في أي محرر نصوص أو فتح ملف Html الموجود في محرر النصوص الذي نريد إنشاء شريط تنقل فيه.

 Make a Navigation Bar  

الخطوة 2: الآن، يتعين علينا تحديد العلامة في العلامة التي نريد إنشاء الشريط فيها.

 You are at JavaTpoint Site.....  

الخطوه 3: وبعد ذلك علينا أن نحدد

العلامة، والتي تُستخدم لإظهار القائمة غير المرتبة. وبعد ذلك يتعين علينا تحديد عناصر القائمة في
• بطاقة شعار. يتعين علينا تحديد تلك العناصر التي نريد إظهارها في شريط التنقل.

 <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....  

الخطوة 4: بعد ذلك، يتعين علينا وضع المؤشر في المنطقة التي تلي إغلاق علامة العنوان مباشرةً. وبعد ذلك، يتعين علينا تحديد العلامة. الخطوة 4: بعد ذلك، يتعين علينا وضع المؤشر في ما بعد إغلاق علامة العنوان مباشرة. وبعد ذلك، يتعين علينا تحديد العلامة.

 Make a Navigation Bar  

الخطوة 5: الآن، يتعين علينا تحديد سمات معرف مختلفة يتم استخدامها لتعيين موضع شريط التنقل ولونه. لذلك، يتعين علينا استخدام الكود التالي في علامة الرأس. يمكننا أيضًا تغيير قيمة العقارات وفقًا لمتطلباتنا.

 body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; }  

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

 Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....  

يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية: