CSS, web sayfalarınızın görünümünü ve düzenini kontrol etmenizi sağlayan bir dildir. Ancak, CSS’nin genellikle istemci tarafında işlem gördüğünü ve aslında bir yönlendirme işlemi gerçekleştirmek için tasarlanmadığını belirtmekte fayda var. Yönlendirme genellikle sunucu tarafında ya da JavaScript gibi bir istemci tarafı dilinde gerçekleştirilir.
Yine de, belirli durumlarda, CSS ve HTML’i kullanarak basit bir yönlendirme sayfası oluşturmak mümkündür. Bu, kullanıcıyı belirli bir süre sonra otomatik olarak başka bir sayfaya yönlendiren bir “splash” ya da giriş sayfası gibi bir şeye ihtiyaç duyduğunuzda kullanılabilir. Aşağıda bu tür bir yönlendirme sayfasını nasıl oluşturabileceğinizi anlatacağım.
Otomatik Yönlendirme İçin Meta-Etiketi Kullanmak
HTML’de, bir sayfayı otomatik olarak başka bir sayfaya yönlendirebilmek için <meta> etiketini kullanabiliriz. Bu, belirli bir süre sonunda sayfanın başka bir URL’ye yönlendirilmesini sağlar. Örneğin, aşağıdaki kodu kullanarak kullanıcıyı sayfa yüklendikten 5 saniye sonra başka bir sayfaya yönlendirebiliriz:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5; URL=https://www.bilgihat.com">
<title>Yönlendiriliyorsunuz</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
margin-bottom: 20px;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div>
<h1>Yönlendiriliyorsunuz...</h1>
<div class="loader"></div>
</div>
</body>
</html>
Bu örnekte, bir yükleme animasyonu eklemek için CSS keyframes ve animasyon özelliklerini kullandık. .loader sınıfına ait div, bir yuvarlak dönen “yükleniyor” göstergesi oluşturur. Bu, kullanıcının sayfanın başka bir sayfaya yönlendirme sürecinde olduğunu anlamasına yardımcı olur.
Dikkat çeken bir diğer nokta, flex özelliğinin kullanılmasıdır. Bu, yükleme animasyonunu ve başlığı ekranın ortasına yerleştirmek için kullanılır. justify-content: center; ve align-items: center; özellikleri, bu öğelerin hem yatay hem de dikey olarak merkeze hizalanmasını sağlar. height: 100vh; özelliği ise, body elementinin tam ekran boyutunda olmasını sağlar, böylece yükleme animasyonu ve başlık her zaman ekranın ortasında kalır.
Unutmayın, CSS ve HTML ile oluşturulan bu tip yönlendirme sayfaları, daha karmaşık yönlendirme ihtiyaçları için genellikle yetersiz kalır. Bu durumda, sunucu tarafında bir yönlendirme çözümü (örneğin, PHP veya Node.js kullanarak) ya da JavaScript gibi bir istemci tarafı dili kullanmayı düşünmelisiniz.
Bu basit yöntem, kullanıcıya belirli bir mesaj göstermek veya belirli bir gecikme sağlamak için idealdir. Ancak, kullanıcının bir URL’den diğerine düzgün bir şekilde yönlendirilmesini sağlamak için genellikle daha gelişmiş yöntemler gereklidir.
