Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- "Videokod" kanalında yayınlanan bu eğitim videosunda, bir eğitmen HTML ve CSS kullanarak YouTube tarzı bir web sayfası oluşturma sürecini adım adım anlatmaktadır.
- Video, web sayfasının temel bileşenlerinin (header, arama bölümü, resim-yazı bölümü, YouTube tarzı menü, sol ve sağ bölümler) HTML5 tagleri ile oluşturulması ve CSS ile stil verilmesi üzerine odaklanmaktadır. Eğitmen, position fix, float, padding, border, margin, text-shadow, transition gibi CSS özellikleri kullanarak öğelerin konumlandırılması, boyutlandırılması ve görsel efektlerin nasıl uygulanacağını detaylı şekilde göstermektedir.
- Eğitim boyunca Google Font kullanarak yazı tipi ekleme, YouTube videosu ekleme, footer alanı oluşturma, nokta çizgileri oluşturma, div'leri yan yana yerleştirme, buton ekleme ve resim üzerine efekt uygulama gibi pratik uygulamalar da gösterilmektedir. Video sonunda eğitmen, unuttuğu yerleri açıklamalar bölümünde tamamladığını belirtmektedir.
- 00:11HTML5 Örneği Hazırlama
- Videoda önceki derste öğrendiklerin pekiştirilmesi ve yeni bilgilerin öğrenilmesi için bir HTML5 örneği hazırlanacak.
- Örnek sayfada resim üzerine yazı, YouTube tarzı menü, sol ve sağ bölümler, örnek buton, resim yazı yanına eklenen resim ve başlıkların yanında çizgiler bulunacak.
- Arama bölümünde sola kayan ve genişleyen animasyonlar kullanılacak.
- 01:15Dosya Hazırlığı
- Örneği oluşturmak için üç resim, bir HTML belgesi ve bir CSS belgesi gerekiyor.
- CSS dosyasında Google Font kullanılarak yazı tipi eklenmiş.
- HTML5 örneği oluştururken HTML5 tagleri kullanılacak.
- 02:01Header Bölümü
- Header bölümünde bir kapsayıcı (container) oluşturulacak ve genişliği %80, marjin değeri 0 olacak şekilde ortalanacak.
- Header içine bir logo eklemek için img etiketi kullanılacak.
- Arama bölümü için bir input eklenerek "arama yap" yer tutucusu kullanılacak.
- 05:40Resim ve Yazı Bölümü
- Resim bölümünde div class="resim" ve içinde div class="text" oluşturulacak.
- Yazı için h1 ve h2 etiketleri kullanılacak.
- Video kodunun açıklama yazısı için bir div oluşturulacak.
- 07:00Menü Bölümü
- YouTube tarzı menü için div class="menu" oluşturulacak.
- Menü içine li etiketleri kullanılarak "anasayfa" ve "hakkında" bağlantıları eklenecek.
- Menü için %90 genişliğinde bir konteyner oluşturulacak.
- 08:42Sol ve Sağ Bölüm
- Alt bölüm için yine %90 oranında alan oluşturmak için konteyner kullanılacak.
- Sol bölüm için div class="left" ve içinde div class="left-p" oluşturulacak.
- Sağ bölüm için benzer şekilde div class="right" ve içinde div class="right-p" oluşturulacak.
- 09:59Konum Bölümü
- Konum bölümünde HTML5 kullanılarak açılıp kapatılacak.
- Dört parçaya bölünen bir alan için div class="konum" oluşturulacak.
- Başlıkların yanındaki çizgiler için div class="line" kullanılacak.
- 11:53CSS Stil Tanımlamaları
- Body elemanı için font size 13 pixel, font family olarak tanımlanan yazı tipi kullanılacak.
- Margin değeri sıfırlanarak tarayıcılarda boşluk bırakılmasını engellenecek.
- Menü linkleri için hover özelliğinde yazı rengi değişsin ve alt çizgi eklenmesi sağlanacak.
- 16:38CSS Özelliklerinin Kullanımı
- Position fix özelliği kullanılarak alanın konumu ayarlanıyor ve aşağıya doğru kayma gerçekleşiyor.
- Z indeksi özelliği, üstteki öğelerin alttakileri kapatmasını engellemek için kullanılıyor.
- Logonun display inline block ve float left özellikleri ile sola hizalanması sağlanıyor.
- 18:10Arama Bölümünün Düzenlenmesi
- Arama bölümü için display block özelliği kullanılıyor ve logoyla yan yana hizalanması sağlanıyor.
- Logonun içindeki img etiketine yükseklik değeri verilerek resmin boyutu ayarlanıyor.
- Input etiketine padding, border, genişlik ve font özellikleri eklenerek arama alanının görünümü düzenleniyor.
- 24:39Animasyon ve Etkileşim
- Input'a focus özelliği eklenerek üzerine tıklandığında genişleme efekti oluşturuluyor.
- Transition özelliği kullanılarak genişleme işlemi animasyonlu hale getiriliyor.
- Border bottom özelliği eklenerek arama alanına alt çizgi ekleniyor.
- 27:21Resim ve Metin Bölümü
- Resim bölümü için background-image özelliği kullanılarak arka plan resmi ekleniyor.
- Background-position ve background-size özellikleri ile resmin konumu ve boyutu ayarlanıyor.
- Background-attachment: fixed özelliği sayesinde sayfa kaydırıldığında resim sabit kalıyor.
- 29:56Metin ve Video Ekleme
- Tek satır metni center özelliğini kullanarak ortalanıyor ve beyaz renk ile vurgulanıyor.
- Text-shadow özelliği ile metne gölge efekti ekleniyor.
- YouTube videosu iframe kodu kullanılarak web sitesine ekleniyor.
- 33:21CSS Özelliklerinin Tanımlanması
- Arka plan rengi beyaz olarak tanımlanıyor.
- E2 etiketleri için font size 18 piksel, marjin sıfır ve rengi beyaz olarak ayarlanıyor.
- Display inline block ve position relative özellikleri eklenerek, başlıkların kenarlarındaki çizgilerde hata engelleniyor.
- 34:36Çizgilerin Oluşturulması
- Nokta line çizgileri oluşturmak için before ve after özelliklerine content ekleniyor.
- Çizgiler beyaz renk, 1 piksel solid border ile noktalı olarak tanımlanıyor.
- Right %100 ve margin right 10 piksel değerleri ile çizgiler yerleştiriliyor.
- 35:52Divlerin Düzenlenmesi
- Divlerin genişliği %25 olarak ayarlanıyor ve %1 boşluk bırakılıyor.
- Float left ve display block özellikleri ile divler yan yana yerleştiriliyor.
- Clear bot özelliği kullanılarak float left özelliklerinin sıfırlanması sağlanıyor.
- 43:10Buton ve Resim Ekleme
- Buton için div class buton ekleniyor ve background color özelliği tanımlanıyor.
- Buton için font white bold, padding değerleri ve transition özelliği ekleniyor.
- Resim için img etiketi kullanılarak genişlik 80 piksel, display inline block ve float left özellikleri tanımlanıyor.