Bu makalede, HTML ve CSS kullanarak modern bir web sayfası tasarımı oluşturacağız. Tasarımda sayfa düzenini özelleştirecek, renk şemalarını ve yazı tiplerini dikkatlice seçecek ve kullanıcılara estetik açıdan hoş bir deneyim sunacağız.
1. HTML Yapısı
HTML, web sayfanızın temel yapısını oluşturur. Başlıklar, paragraflar, bağlantılar ve diğer içerikler HTML etiketleriyle tanımlanır. HTML’de yapıyı doğru bir şekilde oluşturmak, CSS ile görsel stil eklerken işleri kolaylaştırır.
İşte basit bir HTML yapısı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!doctype 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> </head> <body> <header> <h1>Modern Web Tasarımı</h1> <nav> <ul> <li><a href="#home">Anasayfa</a></li> <li><a href="#about">Hakkında</a></li> <li><a href="#services">Hizmetler</a></li> <li><a href="#contact">İletişim</a></li> </ul> </nav> </header> <section id="home"> <h2>Hoş Geldiniz</h2> <p>Web tasarımında modern yaklaşımlar ve en iyi uygulamalar hakkında bilgi edinin.</p> </section> <section id="about"> <h2>Hakkında</h2> <p>Modern web tasarımının önemi ve nasıl etkili bir şekilde uygulanacağı hakkında daha fazla bilgi.</p> </section> <section id="services"> <h2>Hizmetler</h2> <ul> <li>Web Tasarımı</li> <li>SEO Hizmetleri</li> <li>Dijital Pazarlama</li> </ul> </section> <section id="contact"> <h2>İletişim</h2> <p>Bize ulaşmak için aşağıdaki formu doldurun.</p> </section> <footer> <p>© 2024 Modern Web Tasarımı</p> </footer> </body> </html> |
Kodları çalıştırdığımızda:

2. CSS ile Görsel Düzenlemeler
HTML yapısı oluşturduktan sonra, sayfanın görsel stilini eklemek için CSS kullanacağız. Bu, sayfanın düzenini, renklerini, yazı tiplerini ve diğer görsel özelliklerini tanımlar.
Aşağıda, HTML yapısına uygun stil düzenlemeleri yapılmış bir CSS kodu örneği yer alıyor:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; } header { background-color: #333; color: #fff; padding: 10px 0; text-align: center; } header h1 { font-size: 2.5em; margin-bottom: 10px; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; font-size: 1.2em; } nav ul li a:hover { color: #ff6347; } section { padding: 40px; margin: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h2 { color: #333; font-size: 2em; margin-bottom: 20px; } ul { list-style: none; padding-left: 20px; } ul li { margin-bottom: 10px; } footer { text-align: center; padding: 10px; background-color: #333; color: #fff; margin-top: 20px; } |
3. Sayfa Düzeni ve Stil Özellikleri
CSS ile oluşturduğumuz sayfa düzeni şu şekilde işliyor:
- Header (Başlık):
- Sayfa başlığı ve navigasyon menüsüne stil ekledik.
- Başlık için koyu bir zemin rengi kullanarak metni beyaz yaptık.
- Navigasyon menüsündeki bağlantılara stil vererek, kullanıcıların fareyle üzerine geldiğinde renk değişimini sağladık.
- Section (Bölümler):
- Sayfa içeriğini bölümlere ayırdık ve her bir bölüme yeterli boşluk bırakacak şekilde padding verdik.
- Bölümlere yuvarlak köşeler ve hafif gölgelendirme ekleyerek estetik bir görünüm sağladık.
- Footer (Altbilgi):
- Sayfanın en altında basit bir altbilgi ekledik ve benzer şekilde başlık kısmındaki stil ile uyumlu bir arka plan rengi kullandık.
4. Gelişmiş Özellikler
Web tasarımında, tasarımın sadece estetik değil, fonksiyonel olmasını sağlamak da önemlidir. Bu nedenle:
- Responsive Tasarım:
- Sayfa tasarımını mobil cihazlara uyumlu hale getirmek için
@media
sorguları eklenebilir. Bu, sayfanın ekran boyutuna göre uygun bir şekilde yeniden düzenlenmesini sağlar.
- Sayfa tasarımını mobil cihazlara uyumlu hale getirmek için
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @media (max-width: 768px) { header h1 { font-size: 1.8em; } nav ul { text-align: center; } section { margin: 10px; padding: 20px; } } |
- Animasyon ve Geçişler:
- CSS geçişleri ve animasyonları ekleyerek kullanıcı etkileşimlerini daha dinamik hale getirebiliriz. Örneğin, menü öğelerine fareyle tıklanıldığında renk değiştirme veya butonlara hover efekti eklenebilir.
5. Sonuç ve İleri Düzey İpuçları

Bu makalede, HTML ve CSS kullanarak basit ama şık bir web sayfası tasarımı yaptık. Sayfanın yapısı, renk şemaları ve genel düzeni hakkında temel bilgileri öğrendik. Daha ileri düzeyde, JavaScript ile etkileşimli öğeler ekleyebilir, animasyonlar ve dinamik içerikler kullanarak sayfanın işlevselliğini artırabilirsiniz.
Ayrıca, web tasarımında her zaman erişilebilirlik ve hız optimizasyonu gibi konuları da göz önünde bulundurmalısınız.