Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan teknik bir eğitim içeriğidir. Eğitmen, Abdulkadir hocanın derslerini pekiştirmek amacıyla HTML, CSS ve jQuery konularını daha açıklayıcı bir şekilde anlatmaktadır.
- Video, HTML ve CSS temel konseptlerini adım adım göstermektedir. İçerik, HTML belgesi yapısı ve temel etiketlerle başlayıp, CSS ile arka plan rengi, padding, margin, border gibi özellikleri ayarlama konularına geçmektedir. Daha sonra form oluşturma, input elemanları, form doğrulama özellikleri ve buton oluşturma gibi konular ele alınmaktadır.
- Eğitmen, "Üye Kayıt Formu" örneği üzerinden pratik kod örnekleri göstermekte ve her değişikliğin etkisini somutlaştırmaktadır. Video, ilk hafta dökümanı kapsamında bir ders olduğunu belirterek sonlanmakta ve eğitmen, diğer dökümanlar için de benzer anlatımlar yayınlayacağını söylemektedir.
- 00:01HTML ve CSS Temelleri
- HTML belgesi yazarken sabit bir yapı vardır: html etiketi açılır, içine head etiketi ve başlık bilgileri girilir, ardından body etiketi arasında tüm sitenin içeriği yazılır.
- HTML belgesinde title etiketi sayfanın başlığını belirtirken, charset="iso-8859-9" Türkçelik belgesinin kodlamasını gösterir.
- Notepad++ kullanırken Türkçe karakterlerde sorun yaşanmaması için kodlama bölümünden karakter tanımı kısmından Türkçe seçeneğini seçmek gerekir.
- 01:12CSS Kullanımı
- CSS (Cascading Style Sheets) kullanarak HTML belgesindeki öğelerin görünümü ayarlanabilir.
- CSS kodları head etiketi içindeki <style> etiketi arasına yazılır.
- Body etiketi için CSS stil tanımlarken, etiketin başına herhangi bir işaret veya nokta koymadan direkt "body" yazarak bu etiket için CSS uygulanmasını sağlayabilirsiniz.
- 03:24Div Etiketi ve CSS Sınıfları
- Form tasarımı için div etiketi kullanılır ve bu div etiketine CSS sınıfı atanarak görünümü ayarlanabilir.
- CSS sınıfı tanımlarken "." işareti kullanılır ve div etiketine "class" özelliği ile bu sınıf atanır.
- CSS'de padding özelliği, div etiketi ile içeriği arasındaki boşluğu belirler.
- 06:35CSS Özellikleri
- CSS'de "border" özelliği, div etiketinin kenar çizgisini belirler; örneğin "border: 1px solid renk" ifadesi 1 piksel kalınlığında düz çizgi ile renkli bir kenar çizgisi oluşturur.
- "background-color" özelliği, div etiketinin arka plan rengini belirler.
- CSS kodlarında Türkçe karakter kullanılmamalıdır, aksi takdirde tanımlama sorunları yaşanabilir.
- 12:19CSS Padding ve Margin Kavramları
- Padding, sağdan, soldan, yukarıdan ve aşağıdan eşit boşluk bırakma özelliğidir.
- Padding, yazıdan çerçeveye olan mesafeyi belirler ve boyut genişliği gibi bir özellik sunar.
- Margin ise öğelerin etrafındaki boşluğu belirler ve öğeleri birbirinden ayırır.
- 14:51CSS Özelliklerinin Kullanımı
- Border, bir öğenin etrafına çerçeve ekler ve "border: 1px solid renk-kodu" şeklinde kullanılır.
- Font-family, font-size, font-weight, text-align gibi özellikleri kullanarak yazı tipi, boyutu, kalınlığı ve hizasını ayarlayabilirsiniz.
- Letter-spacing, harfler arası boşluğu belirler ve "letter-spacing: 5px" şeklinde kullanılır.
- 19:45Form Etiketleri ve Kullanımı
- Form etiketi, kullanıcıdan veri toplamak için kullanılır ve "method" ve "action" özellikleri ile sunucuya veri gönderir.
- P etiketi, paragraf oluşturmak için kullanılır ve yazıları alt alta yerleştirir.
- CSS'de ".yazı" gibi sınıflar tanımlanarak belirli öğelere özel stiller uygulanabilir.
- 25:31CSS Class Kullanımı
- Yazı büyüklüğü font size 12px ve yazı tipi bold olarak tanımlanmıştır.
- Class kullanmak için nokta işareti kullanılır ve aynı isimdeki class'lar birden fazla kullanılabilirken, id gibi aile isimleri sadece bir kez kullanılabilir.
- P etiketi için class tanımlandığında, sadece o class'ı çağıran paragraflara CSS kuralları uygulanır.
- 30:03Input Etiketi Kullanımı
- Adınız soyadınız için textbox oluşturmak için "input type text" kullanılır.
- Placeholder özelliği ile textbox boş iken belirtilen metin (örneğin "Adınız Soyadınız") görüntülenir.
- P etiketi içinde input kullanıldığında otomatik olarak marjin ayarlanır ve hizalama sağlanır.
- 36:43TextBox Şekillendirme
- TextBox'un padding, arka plan rengi ve çerçeve rengi ayarlanabilir.
- TextBox'un köşeleri radius özelliği ile oval hale getirilebilir.
- CSS kodları ile textbox'un görünümü şekillendirilebilir.
- 37:49HTML ve CSS ile Input Kutucuğu Düzenleme
- Konuşmacı, input type özelliğini kullanarak bir metin kutucuğu oluşturmayı ve CSS ile düzenlemeyi gösteriyor.
- Metin kutucuğunun yüksekliğini 20 piksel, genişliğini 200 piksel olarak ayarlıyor.
- Class özelliği olarak "txt" kullanarak CSS seçiciyi oluşturuyor.
- 39:39CSS Özelliklerinin Uygulanması
- Class özelliği eklendikten sonra metin kutucuklarının daha kalın, daha yüksek ve daha güzel göründüğünü gösteriyor.
- Arka plan rengi (background color) ve çerçeve rengi (border) özellikleri eklenerek kutucukların görünümü değiştiriliyor.
- Border radius özelliği ile kutucukların köşeleri yumuşatılıyor, 5 piksel değerinde yumuşak bir görüntü elde edilirken, 10 piksel değerinde daha tatlı bir görüntü oluşuyor.
- 41:49Padding Kullanımı
- Padding kullanarak yazı ile çerçevenin arasındaki boşluğu ayarlayabiliriz.
- Padding, yazının çerçeveye temas etmesini engelleyerek görünümü güzelleştirir.
- Padding değeri ayarlanabilir, örneğin 5 piksel olarak ayarlanabilir.
- 43:07Gerekli Alanlar ve Yer Tutucu
- Alanın boş geçilmemesini sağlamak için "required" parametresi kullanılır.
- "Place holder" (yer tutucu) parametresi, boş alanlarda varsayılan metin göstermek için kullanılır.
- Place holder, kullanıcıya ne yazması gerektiğini gösterir.
- 45:01Tarih Seçici Alanı
- Tarih seçici alanı için "input type date" kullanılır.
- Minimum ve maksimum değerlerle tarih aralığı belirlenebilir.
- İçinde bulunduğunuz tarih, minimum tarihten sonra ve maksimum tarihten önceyse otomatik olarak seçilebilir.
- 48:33Sayı Alanı ve Kontroller
- Sayı girişi için "input type number" kullanılır.
- Sayı alanlarında artırma ve azaltma işareti ile değerler değiştirilebilir.
- Minimum, maksimum ve step değerleri ile sayı aralığı ve artış miktarı belirlenebilir.
- 51:47Kaydet Butonu Ekleme
- Çalışmanın son halini görmek için kaydet butonu eklenecek.
- Kaydet butonu, input type submit tipinde bir değer olarak ekleniyor.
- Buton için input etiketi kullanılarak type="submit" ve value="kaydet" değerleri belirleniyor.
- 53:50Butonun Görünümünü Düzenleme
- Kaydedilen bilgiler kontrol ediliyor ve yaş alanına 30 veya daha küçük bir değer girilmesi gerekiyor.
- Butonun görünümü CSS ile düzenleniyor: genişlik 100px, yükseklik 30px, padding 5px.
- Arka plan rengi, çerçeve rengi ve border-radius değerleri eklenerek butonun görünümü değiştiriliyor.
- 56:33Sonuç ve Kapanış
- Butonun beyaz renkli ve oval görünümü için color değeri #FFFFFF olarak ayarlanıyor.
- Tüm kodlar tek tek incelenerek nasıl yazıldığı gösteriliyor.
- Video, ilk hafta dökümanının bir dersi olarak sunulmuş ve diğer dökümanlar için de anlatım yapılması planlanıyor.