Sayfalar Arası Gezinti Menüsü Oluşturma

HTML sayfalar arası gezinti menüsü oluşturmak için, genellikle menü öğelerinin her birine diğer sayfalara yönlendiren bağlantıları eklersiniz. İşte basit bir örnek:

index.html (Ana Sayfa):

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ana Sayfa</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } nav { background-color: #f2f2f2; padding: 10px; } nav a { text-decoration: none; color: #333; margin-right: 15px; } </style> </head> <body> <nav> <a href="index.html">Ana Sayfa</a> <a href="sayfa1.html">Sayfa 1</a> <a href="sayfa2.html">Sayfa 2</a> </nav> <h1>Ana Sayfa</h1> <p>Bu, ana sayfadaki içeriktir.</p> </body> </html>

sayfa1.html:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sayfa 1</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } nav { background-color: #f2f2f2; padding: 10px; } nav a { text-decoration: none; color: #333; margin-right: 15px; } </style> </head> <body> <nav> <a href="index.html">Ana Sayfa</a> <a href="sayfa1.html">Sayfa 1</a> <a href="sayfa2.html">Sayfa 2</a> </nav> <h1>Sayfa 1</h1> <p>Bu, Sayfa 1'deki içeriktir.</p> </body> </html>

sayfa2.html:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sayfa 2</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } nav { background-color: #f2f2f2; padding: 10px; } nav a { text-decoration: none; color: #333; margin-right: 15px; } </style> </head> <body> <nav> <a href="index.html">Ana Sayfa</a> <a href="sayfa1.html">Sayfa 1</a> <a href="sayfa2.html">Sayfa 2</a> </nav> <h1>Sayfa 2</h1> <p>Bu, Sayfa 2'deki içeriktir.</p> </body> </html>

Bu örnekte, her sayfa aynı menüyü paylaşır, bu da kullanıcıların farklı sayfalar arasında geçiş yapmalarını sağlar. Sayfa içi gezinti menüsünü düzenlemek veya farklı bir stil eklemek için CSS ve HTML kodlarını özelleştirebilirsiniz.



Yorum Ekle

Üzerine gel