Buradasın

HTML5 ve CSS3 Eğitim Seti: 6. Ders

Yapay zekadan makale özeti

Bu video, HTML5 ve CSS3 eğitim setinin 6. dersi olup, bir eğitmen tarafından sunulan bir web geliştirme eğitimidir.
Videoda, HTML5'teki navigation etiketi, group etiketi ve section etiketi gibi yapısal etiketlerin kullanımı gösterilmektedir. Eğitmen, header ile section arasında bir menü yapısı oluşturarak navigation etiketinin nasıl kullanılacağını, CSS ile menü tasarımının nasıl yapılacağını adım adım anlatmaktadır. Ayrıca, group etiketi ile başlık etiketlerinin nasıl gruplandırılacağı ve footer, aside, section gibi bölümlerin nasıl oluşturulacağı da gösterilmektedir. Video, acemi bir site tasarımı örneği üzerinden bu etiketlerin temel kullanımını öğretmeyi amaçlamaktadır.

00:09HTML ve CSS Eğitim Seti - Navigasyon Etiketi: HTML 5 ve CSS 3 eğitim setinin altıncı dersinde age, group ve navigasyon etiketlerinin kullanımını göreceğiz.
Header ile section arasında bir menü (navigasyon) oluşturacağız.
Navigasyon etiketi ve altında liste (ul) kullanarak menü listeleri oluşturuyoruz.
01:17Menü Tasarımı: Menü için CSS'de "menu" sınıfı oluşturuyoruz.
Menü altına background color uygulayarak arka plan rengi veriyoruz.
Listelerin alt çizgilerini kaldırmak için list-style-type: none kullanıyoruz.
03:29Menü Stil Ayarları: Menü altına padding ve underline ekleyerek daha güzel bir görüntü elde ediyoruz.
Listelerin sağa doğru birbirinden uzaklaşması için padding-right: 25px kullanıyoruz.
Menü linklerine beyaz renk, text-decoration: none ve font-size: 20px uygulayarak görünümü iyileştiriyoruz.
05:55Hover Etkisi ve Group Etiketi: Menü linklerine hover etkisi uygulayarak üzerine geldiğinde arka plan rengini değiştiriyoruz.
Asside kısmına header etiketlerini gruplamak için group etiketi ekliyoruz.
Group etiketi içindeki tüm elementlere alt çerçeve rengi vererek grup görünümünü tamamlıyoruz.
09:40Tasarım Sonucu: Bu tasarım sadece bir örnek olup, gerçek sitelerde bu kadar renklendirmeler olmaz.
Temel amaç, edge grubunun, footer'ın, section'ın, navigation etiketinin ve header yapısal etiketinin nasıl kullanılacağını bilmektir.