1. HTML ile Temel Yapıyı Kurma
HTML (HyperText Markup Language), web sayfanızın iskeletini oluşturur. Modern web sayfalarında semantik etiketler büyük önem taşır. Semantik etiketler hem SEO açısından hem de erişilebilirlik için kritik rol oynar.Örnek bir temel HTML yapısı:
HTML:
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Web Sayfası</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Hoş Geldiniz</h2>
<p>Modern web sayfası örneği ile tanışın.</p>
<button id="cta-button">Başlayın</button>
</section>
<section class="features">
<h3>Öne Çıkan Özellikler</h3>
<div class="feature-list">
<div class="feature-item">Hızlı ve Hafif</div>
<div class="feature-item">Responsive Tasarım</div>
<div class="feature-item">Dinamik İçerik</div>
</div>
</section>
</main>
<footer>
<p>© 2025 Tüm Hakları Saklıdır.</p>
</footer>
<script src="script.js"></script>
</body>
</html>Bu yapıda, header, main, section ve footer etiketleri semantik olarak kullanıldı. Bu sayede sayfa hem okunabilir hem de SEO uyumlu oldu.
2. CSS ile Modern Tasarımı Sağlama
CSS (Cascading Style Sheets), web sayfanızın görsel tasarımını ve düzenini yönetir. Modern web tasarımında bazı kritik konular vardır:- Responsive Tasarım: Farklı cihazlarda uyumluluk için media query’ler kullanılır.
- Flexbox ve Grid: Sayfa düzenlerini modern şekilde oluşturur.
- Renk Paleti ve Tipografi: Kullanıcı dostu bir deneyim sağlar.
- Animasyonlar ve Hover Efektleri: Sayfayı daha canlı ve interaktif hale getirir.
Örnek CSS kodu:
CSS:
body {
font-family: 'Arial', sans-serif;
margin: 0;
background: #f9f9f9;
color: #333;
}
header {
background: #1e3a8a;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
nav a:hover {
color: #facc15;
}
.hero {
text-align: center;
padding: 100px 20px;
background: linear-gradient(135deg, #6b73ff, #000dff);
color: white;
}
button {
background-color: #facc15;
border: none;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #eab308;
}
.features {
padding: 50px 20px;
text-align: center;
}
.feature-list {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.feature-item {
background: white;
padding: 20px;
border-radius: 10px;
width: 200px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}Bu CSS kodları ile sayfa hem modern görünüme kavuşur hem de responsive bir yapıya sahip olur.
3. JavaScript ile Etkileşim Eklemek
JavaScript, sayfanıza dinamizm ve etkileşim katar. Örneğin butonlara tıklama, animasyonlar ve form doğrulama gibi özellikler JavaScript ile yapılır.
JavaScript:
document.getElementById("cta-button").addEventListener("click", function() {
alert("Modern web sayfanıza hoş geldiniz!");
});Bu basit kod, kullanıcının “Başlayın” butonuna tıklamasıyla bir uyarı mesajı gösterir. Daha karmaşık senaryolar için modal pencereler, slider’lar ve veri çekme işlemleri de eklenebilir.
4. Modern Tasarım İlkeleri
Modern web sayfaları yalnızca görsellik değil, kullanıcı deneyimi (UX) açısından da güçlü olmalıdır:- Minimalist Tasarım: Gereksiz öğelerden kaçının, içerik ön planda olsun.
- Hızlı Yükleme: Optimize edilmiş görseller ve sıkıştırılmış CSS/JS.
- Erişilebilirlik: Yüksek kontrast, alternatif metinler, klavye navigasyonu.
- SEO Uyumlu Kodlama: Doğru başlık ve meta etiketleri kullanın.
5. Sonuç
HTML, CSS ve JavaScript birlikte kullanıldığında modern, hızlı ve kullanıcı dostu web sayfaları oluşturulabilir.- HTML: Sayfanın iskeleti ve içerik yapısı
- CSS: Görsellik ve tasarım
- JavaScript: Dinamizm ve etkileşim
Modern web tasarımı sadece kod yazmak değil, aynı zamanda kullanıcı odaklı düşünmeyi ve estetik gözü geliştirmeyi gerektirir. Bu üç teknolojiyle yaratıcı ve etkileyici sayfalar geliştirebilirsiniz.
