Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, HTML ve CSS konularını adım adım anlatmaktadır.
- Video, HTML stil kullanımının temellerinden başlayarak CSS seçiciler, klas kullanımı, web geliştirme araçlarının kullanımı, arka plan ve kenarlık ayarları, kutu modeli ve sınır özellikleri gibi konuları kapsamaktadır. Eğitmen, Visual Studio Code ve Live Server eklentisini kullanarak kod örnekleri göstermekte ve pratik uygulamalar sunmaktadır.
- Videoda ayrıca yorum satırı bırakma, web developer tools'un kullanımı, renk atama yöntemleri (normal renk, RGB ve hexadecimal), ColorZilla gibi araçların kullanımı ve "öğeyi incele" özelliği gibi web geliştirme sürecinde faydalı bilgiler de paylaşılmaktadır. Eğitmen, bir sonraki derste id ve class kullanımına geçileceğini belirtmektedir.
- HTML ve CSS Serisi Tanıtımı
- Konuşmacı, daha önce çektiği HDMI serisi videolarının ardından ses olmadan HDMI'nin işe yaramayacağını belirterek yeni bir HDMI serisi çekmeye karar verdiğini açıklıyor.
- Bu seride videoları daha kısa ve öz tutmaya çalışacağını belirtiyor.
- 00:24CSS Nedir?
- CSS, HTML'nin üzerine giydirilen kıyafetler olarak tanımlanabilir ve tamamen stillemeye odaklanmış bir kodlama dilidir.
- CSS sayesinde metinleri görüntüye dönüştürebilir, arka plan rengi ekleyebilir, logo ekleyebilir ve farklı fontlar kullanabilirsiniz.
- CSS, HTML yardımıyla oluşturulan başlıkları, paragrafları ve linkleri farklı biçimlere getirerek stillemenize olanak tanır.
- 01:44Kod Editörü ve Live Server
- Konuşmacı, Studio Code kod editörünü kullanacağını ancak herhangi bir kod editörünün kullanılabilir olduğunu belirtiyor.
- Live Server eklentisinin mutlaka indirilmesi gerektiğini, bu sayede yapılan değişikliklerin otomatik olarak web tarayıcısında gösterileceğini açıklıyor.
- 02:59CSS Kullanım Şekilleri
- İlk kullanım şekli olan inline CSS, sadece yazılan etiketi etkiler ve etiketin içine style etiketi ekleyerek o etiket üzerinde değişiklikler yapmanızı sağlar.
- İkinci kullanım şekli olan div etiketi, etiket aralarında ses özellikleri kullanmanıza olanak tanır ve tüm sayfa etkilenir.
- Üçüncü ve en çok kullanılan kullanım şekli, CSS özelliklerini başka bir sayfadan çekmektir.
- 08:56Yorum Satırı Kullanımı
- Yorum satırı bırakmak için HTML ve yıldız (*) işaretleri kullanılır.
- Yorum satırları, dökümanda değişiklik yaparken hatırlatma aracı olarak, paylaşılacak dökümanda belirli kısımları belirtmek için veya not almak için kullanılabilir.
- 09:53ID ve Class Kullanımı
- Önceki derste tüm sayfada etkin hale getirilen özellikler yerine, sadece belirli etiketlerde uygulamak için ID ve Class kullanılır.
- 10:42CSS'de Ay ve Klas Kullanımı
- CSS'de ay (id) ve klas (class) ayrımı yapmak için nokta ve diyez işareti kullanılır.
- Ay içinde nokta kullanıldığında bir klas oluşturulur, diyez işareti kullanıldığında bir ay oluşturulur.
- Ay ve klas kullanarak belirli etiketlerin özelliklerini özelleştirmek mümkündür.
- 11:33Ay ve Klas Örnekleri
- Ay ve klas kullanarak sadece belirli başlık etiketlerinin veya paragrafların özelliklerini değiştirmek mümkündür.
- Aynı klas farklı etiketlerde de kullanılabilir ve aynı özellikler bu etiketlere uygulanır.
- Hem ay hem klas aynı anda kullanılabilir, bu durumda önce ay sonra klas yazılır.
- 18:28CSS Çalışma Düzeni
- CSS'te genel seçicilerden özele doğru gitmek daha sağlıklı bir çalışma düzenidir.
- Genel seçici, tüm belirli bir etiket türünü kapsarken, özel seçici sadece belirli bir etiket içindeki belirli bir etiketi kapsar.
- Örneğin, "a" seçici tüm linkleri kapsarken, "ul > li > a" seçici sadece belirli bir navigation bar içindeki linkleri kapsar.
- 21:06CSS Stilleri ve Kod Sıralaması
- CSS stillerinde en son yazılan kod her zaman baskın gelir ve diğer stilleri geçersiz kılar.
- Sayfa düzenlerken otomatik olarak atanan margin ve padding değerlerini sıfırlamak, daha özgür bir şekilde çalışmamıza olanak tanır.
- Margin dış kenar boşluğu, padding ise iç kenar boşluğu anlamına gelir ve bunları sıfırlamazsak sayfa düzeni istediğimiz gibi çalışmaz.
- 22:56Web Developer Tools Kullanımı
- Web Developer Tools'u etkin kullanmak, web site geliştiricilerinin çok fazla kullandığı ve işe yarayan bir yöntemdir.
- Sağ tıklayıp "İncele" seçeneği ile açılan pencerede, element kısmında HTML içeriklerini ve özelliklerini görebiliriz.
- Element Style kısmından sayfa üzerinde hızlı değişiklikler yapabiliriz, ancak bu değişiklikler geçici olup sayfayı yenilediğimizde kaybolur.
- 25:44Developer Tools'un Diğer Özellikleri
- Konsol kısmında JavaScript kodları yazılabilir, source kısmında web tarayıcısının içinde bulunduğu veri tabanı görüntülenebilir.
- Network kısmında internetle ilgili verilerin gidiş ve geliş hızları kontrol edilebilir.
- Filter kısmından font family veya renk gibi kriterlere göre arama yaparak istenen özelliklere kolayca erişilebilir.
- 28:01Renk Özelleştirme
- Renkler sadece rengin ismi yazarak veya RGB değerleri kullanarak atanabilir.
- RGB değerleri, her sayının kendine ait bir konumu olan ve her zaman aynı renge giden bir sistemdir.
- Hexadecimal (hex) şeklinde de renk atanabilir ve ColorZilla gibi araçlar kullanılarak sitelerden renk alınabilir.
- 31:55CSS ile Div Oluşturma ve Arka Plan Ayarları
- Visual Studio Code'da div oluşturmak için önce class mı yoksa id mi oluşturacağımızı karar verip, class için nokta, id için tek harf kullanarak isim veriyoruz.
- Div'e arka plan rengi vermek için "background-color" özelliğini kullanabiliriz.
- Div'in boyutunu ayarlamak için "width" ve "height" özelliklerini piksel, santim gibi değerlerle belirleyebiliriz.
- 34:45Resim Ekleme ve Düzenleme
- Div'e resim eklemek için "background-image" özelliğini kullanıp, resmin URL'sini belirtiyoruz.
- Resmin boyutunu ayarlamak için "background-size" özelliğini kullanabiliriz.
- Resmin tekrarlanmasını engellemek için "background-repeat" özelliğini "no-repeat" olarak ayarlayabiliriz.
- 38:51Resim Konumlandırma ve Scroll Ayarları
- Resmin konumunu ayarlamak için "background-position" özelliğini kullanabiliriz.
- Resmin scroll ile birlikte hareket etmesini sağlamak için "background-attachment" özelliğini "fixed" olarak ayarlayabiliriz.
- Resmin konumunu tam ortada tutmak için "background-position" özelliğini "center" olarak ayarlayabiliriz.
- 40:36Border Ayarları
- Div'e kenar kalınlığı eklemek için "border-width" özelliğini kullanabiliriz.
- Borderın rengini ayarlamak için "border-color" özelliğini kullanabiliriz.
- Borderın stilini ayarlamak için "border-style" özelliğini kullanabiliriz.
- 42:16CSS ile Sınırlama Özellikleri
- Katı bir görüntü için "solid" stil kullanılır ve bunun için "border style" etiketi kullanılır.
- Köşeleri ovalleştirmek için "border radius" özelliği kullanılır ve verilen piksel değeri köşelerin yumuşaklık değerini belirler.
- Arka plan, kalınlık, renk ve stil gibi özellikler "background", "width", "color", "solid" ve "radius" özellikleri ile ayarlanır.
- 43:12Kutu Modeli ve Sınırlama Özellikleri
- "Öğeyi incele" seçeneği ile div etiketine uygulanan özellikleri görebilir ve düzenleyebilirsiniz.
- Alt taraftaki boks modeli, sayfa düzeninizde edindiğiniz değerleri gösteren bir kutudur.
- Sadece belirli bir alana sınır vermek için "border left width", "border left color" ve "border left style" gibi özellikler kullanılır.
- 45:09Video Kapanışı
- Videoda temel olarak birçok şey anlatılmıştır ve izleyicilerin birçok şey öğrenmiş olması beklenmektedir.
- Anlatım sade ve kolay bir şekilde yapılmıştır.
- İzleyicilerden videoyu beğenmeleri istenmiştir.