Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, HTML'de div etiketinin kullanımını ve CSS ile nasıl biçimlendirileceğini adım adım göstermektedir.
- Video, div etiketinin web sayfalarının tasarımını ve iskeletini oluşturmak için nasıl kullanıldığını anlatmaktadır. İlk bölümde temel div etiketi örneği oluşturulup CSS ile genişlik, yükseklik, arka plan rengi ve padding gibi özellikler verilmektedir. İkinci bölümde ise div'lerin float left özelliğiyle hizalanması, class kullanarak birden fazla div'e aynı stil özelliklerini uygulama ve Instagram benzeri bir tasarım oluşturma süreci gösterilmektedir.
- Eğitim, div'lerin yan yana veya alt alta yerleştirilmesi için margin ve float özellikleri, resim ekleme ve iç içe div kullanımı gibi konuları da kapsamaktadır. Video, ileriki derslerde sıfırdan web sayfası tasarımlarının yapılacağını belirterek sonlanmaktadır.
- 00:01HTML'de Div Etiketi
- Bu derste HTML'de div etiketi tanıtılacak ve web sayfalarını tasarlarken en çok kullanılan etiketlerden biri olarak vurgulanacak.
- Div etiketi, web sayfasının tasarımını ve iskeletini oluşturmak için kullanılan, blog şeklinde kullanılabilen elementlerdir.
- 00:36HTML Dosyası Oluşturma
- Masaüstünde yeni bir HTML dosyası oluşturulup, HTML'in genel iskeleti çağrılıyor.
- Div etiketi kullanılarak "Merhaba Dünya" yazısı ekleniyor.
- Oluşturulan HTML dosyası açıldığında görsel olarak hiçbir şey görünmüyor, sadece içine yazılan yazı görüntüleniyor.
- 02:12CSS Dosyası Bağlama
- Dışarıdan bir CSS dosyası (style.css) HTML dosyasına bağlanıyor.
- CSS dosyası, HTML dosyasının en alt kısmına link etiketi kullanılarak bağlanıyor.
- CSS dosyasında div etiketine özel özellikler veriliyor: genişlik, yükseklik, arka plan rengi ve yazı rengi.
- 04:32Div Etiketlerine Stil Uygulama
- CSS dosyasında verilen özellikler sayesinde div etiketleri görsel olarak kutu şeklinde görüntüleniyor.
- Div etiketlerine padding (iç boşluk) özelliği eklenerek daha hoş bir görüntü elde ediliyor.
- Farklı div etiketlerine farklı id'ler (blok1, blok2, blok3) verilerek farklı stil özellikleri uygulanıyor.
- 09:08Div Etiketlerinin Düzenlenmesi
- Div etiketlerinin birbirine yapışmasını önlemek için margin top özelliği kullanılarak üst taraftan boşluk veriliyor.
- Div etiketlerini yan yana yerleştirmek için float left özelliği kullanılıyor.
- Div etiketlerinin yan taraflarından boşluk vermek için margin left özelliği kullanılıyor.
- 11:53Div Etiketlerinin Kullanımı
- HTML sayfalarında görülen kutular, menüler ve Facebook'ta görülen postlar div etiketleriyle oluşturuluyor.
- Div etiketlerinin yapısını anlamak sayfaları tasarlarken çok önemlidir.
- Div etiketleri içinde başka div etiketleri de açılabiliyor, örneğin bir div içinde header ve content gibi alt div'ler oluşturulabilir.
- 14:28CSS ile Div Özelliklerinin Tanımlanması
- Div'lerin float left özelliğine sahip olmadığı için birbirine karışıyor ve boşlukları doldurmaya çalıştığı için saçma bir görüntü elde ediliyor.
- Class'lara hiçbir style dosyası yazılmadığı için class'ların post veya farklı olması hiçbir anlam ifade etmiyor.
- Post class'ına genişlik, yükseklik, arka plan rengi, yazı rengi ve float left özellikleri tanımlanıyor.
- 16:25Header Class'ının Özellikleri
- Header class'ına genişlik, yükseklik, padding, font family ve arka plan rengi özellikleri tanımlanıyor.
- Header class'ının arka plan rengi mavi, yazı rengi beyaz olarak ayarlanıyor.
- Padding değerleri ayarlanarak div'lerin üst üste binmesi engelleniyor.
- 20:38Float Özelliklerinin Kullanımı
- Sayfada float left özelliğine sahip üç div ve float özelliğine sahip olmayan iki div bulunuyor.
- Float left özelliğine sahip div'ler birbirini tanımıyor ve kendi başına hareket ediyorlar.
- Float özelliğine sahip olmayan div'ler alt alta bir yapı oluşturuyor.
- 21:55Resim Ekleme ve Düzenleme
- Div'in içerisine resim ekleniyor ve resmin yolu belirleniyor.
- Resmin alt etiketine değer vermek önemli çünkü Google'ın botları bunları önem veriyor.
- Resmin genişliği post class'ının genişliğine eşitlenerek sayfanın tamamını kaplamaması sağlanıyor.
- 25:10Div'leri Hizalama ve Class Kullanımı
- Div'lere float left özelliği verilerek sola hizalanıyor ve margin left ile soldan boşluk veriliyor.
- Float right özelliği verilerek div'ler sağa hizalanabiliyor.
- Class özelliği kullanılarak birden fazla aynı tasarıma sahip div oluşturulabiliyor.