CSS HTML DERSLERİ Web Tasarım

HTML ve CSS ile Basit Bir Web Sayfası Tasarımı -2

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ı:

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:

3. Sayfa Düzeni ve Stil Özellikleri

CSS ile oluşturduğumuz sayfa düzeni şu şekilde işliyor:

  1. 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.
  2. 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.
  3. 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:

  1. 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.
  1. 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.

Yorum yap