Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Infinity Technology tarafından hazırlanan HTML5 eğitim serisinin bir bölümüdür. Eğitmen, HTML5'in temel özelliklerini ve yeni etiketlerini detaylı şekilde anlatmaktadır.
- Video, HTML5'in tarihçesi ve avantajları ile başlayıp, HTML4 ile karşılaştırmasını yapmaktadır. Ardından yeni etiketler (section, article, header, footer, video, audio, embed, canvas, mit, progress, time, details, input), içerik modelleri, form oluşturma, numerik değerler, tarih seçici, API desteği, sürükleyip bırakma özelliği, çevrimdışı uygulamalar ve video desteği gibi konular ele alınmaktadır.
- Eğitim içeriğinde ayrıca div etiketinin kullanımı, id ve class özellikleri, karakter kodlaması, temel sayfa yapısı, form geliştirme, yeni veri giriş türleri, otomatik odaklanma, yer tutucu ve doğrulama özellikleri gibi pratik bilgiler de sunulmaktadır. Her bir özellik için kod örnekleri ve kullanım alanları gösterilmektedir.
- 00:18HTML5 Eğitimine Giriş
- Infinity Technology tarafından hazırlanan HTML5 eğitiminde web siteleri ve uygulamaları ilgilendiren yeni standartlar ve özellikleri tanıtılacak.
- HTML5'in temeli 1995 yılında ortaya çıkan HTML2.0'a dayanıyor ve 2004 yılında geliştirilen geliştirmelerle HTML5 standardı oluştu.
- HTML5, daha önceki standartların üzerine çıkarak web tasarımcılara mobil ve web uygulamaları oluştururken kolaylık sağlıyor.
- 01:19HTML5'in Gerekliliği ve Gelişimi
- HTML5 tabanına bağlı bir standart olduğu için daha önceki bütün sürümlerle uyumlu çalışıyor ve hata ayıklama sorunlarına karşı gelişmiş özelliklere sahip.
- 2004 yılında HTML'den memnun olmayan Apple, Mozilla ve Opera gibi şirketler HTML4 standardını getirdi, ancak 2007 yılında geliştirilen standartlarla birlikte HTML5'in yeni sürümü ortaya çıktı.
- HTML5 gelişimine hala devam etmekte ve 2020 yılında test aşamasının bitmesi, 2022 yılında da tam anlamıyla hazır hale gelmesi planlanan bir projedir.
- 02:53Tarayıcıların HTML5 Destekleme Durumu
- HTML5'in yaygınlaşması ile birlikte birçok tarayıcı bu standarda uyum sağlamaya çalışıyor.
- Chrome ve Safari tarayıcıları bütün özellikleri uyum gösterirken, diğer tarayıcıların sürümlerine göre farklılıklar bulunuyor.
- Yeni geliştirilmekte olan Internet Explorer 9 sürümü birçok HTML5 özelliğini destekleyecek.
- 03:37HTML5 Yenilikleri
- HTML5 yalnızca HTML4'ün değil, XHTML1 ve HTML2'nin de yerini alıyor.
- HTML5'te doctype bölümündeki kodlama tek satırda yapılabilir ve karakter kodlaması sadeleştirilmiş.
- HTML5 yeni etiketler sunuyor: audio, header, footer, section, time, video gibi etiketler sayesinde özelliklerin var olan işlevinin ve gücünün artması sağlanmış.
- 04:51HTML5'in Avantajları
- Web2.0 özellikleri HTML5'e eklendi, bu sayede web2.0 uyumlu daha kullanışlı formlar geliştirebilirsiniz.
- Tarih ve renkleri kolay seçebileceğiniz araçlar, input alanına e-posta, arama ve URL seçenekleri ekleyebilir ve DOM metotları ile birçok uygulamada işlerinizi kolaylaştırabilirsiniz.
- HTML5, içeriği kolayca yapılandırabileceğiniz etiketleri kullanımınıza sunuyor.
- 05:40İçerik Yapılandırma Etiketleri
- Section etiketi uygulama veya dökümanın genel bölümünü belirtir ve aynı temayı içeren içerikleri bir arada sunabilirsiniz.
- Article etiketi makale olarak değerlendireceğiniz içerikleri belirlemek için kullanılır.
- Header etiketi herhangi bir konuyla ilgili manşet bloğu içeriğini sunarken, footer etiketi sayfanın altında sayfa numarası veya copyright ifadesi gibi öğeleri eklemek için kullanılır.
- 06:55Yeni İçerik Etiketleri
- Video etiketi video kaynaklarını belirtmek için, audio etiketi ses içeriklerini eklemenizi sağlar.
- Embed etiketi başka bir ortamdan yüklediğiniz dosya, içerik veya eklentiler için kullanılır, özellikle Flash kaynaklı öğeleri web sayfanıza eklerken bu etiket işinize yarayacak.
- Canvas etiketi grafik çizimlerini oluşturmak için kullanılır, bu sayede grafikleri doğrudan sayfanıza ekleyebilirsiniz.
- 07:37Uygulama Odaklı Etiketler
- Metric etiketi maksimum ve minimum değerleri belirli olan ölçüleri tanımlamanızı sağlar.
- Progress etiketi sürmekte olan bir görevin tamamlanma oranını belirte bilmenizi sağlar.
- Time etiketi zaman veya süreyi ifade etmek için kullanılır, örneğin doğum günü hatırlatıcısı hazırlarken bu etiketi kullanabilirsiniz.
- 08:22Hata Ayıklama Etiketleri
- HTML5 bazı öğeleri kaldırarak hata ayıklama konusunda ilerleme sağladı.
- Font center, font strike etiketleri artık kullanılmıyor.
- Erişilebilirlik için frame etiketleri kaldırıldı, ayrıca acronim ve index etiketleri de kullanımdan kaldırıldı.
- 09:08HTML5'in API Desteği
- HTML5 ile ve uygulamalarının odağında medya verileri, etkileşim ve iletişim öne çıkıyor.
- HTML5 kodları tarayıcıda, bilgisayarda veya mobil cihazlarda olmak üzere pek çok ortamda çalışabiliyor.
- HTML5'in içerdiği en önemli API'ler video ve ses API'leridir, bu API'ler ses ve video dosyalarını içeriye kolayca ekleme olanağı sağlıyor.
- 10:50İçerik Modelleri
- HTML4'te temel olarak blok ve inline olarak belirlenen iki içerik modeli vardı.
- HTML5 artık yedi ayrı içerik modelini barındırıyor: metadata, embedded, interactive, heading, flow ve section.
- Metadata modelin içeriği genellikle üst kısmında yer alan ve sayfa ile ilgili bilgiler içeren bir modeldir, elemanları audio, embed, frame, object ve videodur.
- 12:56Taslak Algoritması ve İçerik Modelleri
- İçerik modelleri birbirleriyle kesişen ve birbirini kapsayan bölümler içerir.
- Taslak algoritması sayfanın yapısını gösterir ve anlamsal yapıyı kurmanıza yardımcı olur.
- HTML5'te taslak oluşturmak için body bölümü temel olarak değerlendirilir ve öğeler taslağı bölüm içeriğinin altında kalır.
- 14:17Div Etiketinin Rolü
- HTML5 için div etiketinin pek bir anlamı yoktur, daha uygun etiketler varken kullanılması düşük erişilebilirliği ve güvenlik sorunlarına neden olabilir.
- İçerik modeli uygunsa sadece section ve article etiketlerini kullanın, bunlar yeni bölüm başlıkları oluşturur.
- Birbirleriyle ilişkili içerikler için div etiketini, başlık ve dipnot içeriğini gruplamak için h1 ve h2 etiketlerini kullanın.
- 15:32ID ve Class Kullanımı
- HTML5'te id ve class global özelliklerdir, id değerleri her sayfa için benzersiz olmalıdır.
- Class etiketi bir sayfada sıklıkla kullanılabilir ve class değerleri kullanılmalıdır.
- HTML5, id ve class kullanma gereğini azalttı, birden fazla başlık kullanabileceğiniz için gerektiği yerde id değerini kullanmaktan kaçınmayın.
- 17:13Karakter Kodlaması
- HTML4'te karakter kodlaması işleminin nasıl yapıldığına bakıldığında, bazı eklemeler yapılarak sorunlar giderilmeye çalışılırdı.
- HTML5 yenilikleri ile karakter kodlaması daha kolaylaştırıldı.
- Eski kod yapısındaki meta tek ile başlayan satırın tamamını silip, yeni kodlama şeklini kullanmak akılda kalıcı ve kolay kullanım sağlar.
- 18:02Temel Sayfa Yapısı
- Bir sayfayı oluştururken öncelikle önem sırasını belirleyerek bir taslak hazırlayın.
- Başlık alanlarında div etiketi yerine header etiketini, ilişkili bölümlerde section etiketini kullanabilirsiniz.
- Sayfa içeriğindeki tablo ve benzeri öğeleri ilgili başlıkların altına eklemek için section bölümleri içinde article etiketinden yararlanabilirsiniz.
- 19:23Başlıkları Düzenleme ve Form Oluşturma
- Birbirine bağlantılı başlıklarda group etiketini kullanabilirsiniz, ayrıca alt başlıkları da gruplandırabilirsiniz.
- HTML5 ile form oluşturma işlemlerinde veri girişi için kullanılan input alanı en yaygın kullanılan özelliktir.
- HTML5 daha güçlü ve kullanıcı ihtiyaçlarına daha iyi yanıt verebilecek öğeleri kullanımınıza sunuyor.
- 20:34HTML5'in Yeni Veri Giriş Türleri
- HTML5'in yeni veri giriş türleri e-posta veya web sitesi gibi bilgileri normal metin alanlarından ayırır.
- E-posta adresi almak istediğiniz alanın türünü email olarak tanımlayabilirsiniz, tarayıcı bu veri türünü desteklerse o alan diğer metin alanlarından farklı olacaktır.
- Web sitesi adresi aldığınızda ilgili alanı url olarak tanımlayabilirsiniz, tarayıcı bu özelliği destekliyorsa bu alanın diğer metin alanlarından farklı olduğunu algılayacaktır.
- 21:42Form Davranışları
- HTML5 ile bazı form davranışları öğelerinin birer özelliği haline getirildi, böylece ayrıca script kontrolüne olan gereksinim azaltıldı.
- Otomatik odaklanma özelliğini yapılandırdığınızda, kullanıcı formu doldurmak için ona tıklamak zorunda kalmayacak.
- Yer tutucular, o alana girilecek veri veya verinin özelliği ile ilgili bilgi verir, örneğin ad ve soyad veya telefon numarası formatını göstermek gibi.
- 22:59Zorunlu Alanlar
- Doğrulama özelliğini kullanarak doldurulması zorunlu alanları belirleyebilirsiniz.
- Formunuzdaki bir alana girilmesi zorunlu bir alan olarak belirlemek için input etiketi içerisindeyken required özelliğini kullanabilirsiniz.
- Kullanıcı bu alanları gerektiği gibi doldurmadan bilgi girişini tamamlayamaz.
- 23:45HTML5'te Numerik Değerler ve Tarih Seçici
- HTML5'te numerik değerler kullanmak için input etiketinin type değerini number olarak belirlemek gerekir.
- Tarih seçici özelliği, formun bir özelliği olarak kolaylıkla kullanılabilir ve kullanıcı doğum tarihini kolayca girebilir.
- 24:44HTML5'in API Desteği
- HTML5, sürükle-bırak uygulamalarını gerçekleştirmek için API desteği sunmaktadır.
- Sürüklenebilen öğeler kopyalanabilir, taşınabilir ve bağlantılılanabilir.
- Sürükle-bırak işlemi için enter-handler, over-handler ve drop-handler işlevleri tanımlanabilir.
- 25:49Çevrimdışı Uygulamalar API'si
- Çevrimdışı uygulamalar API'si, internet bağlantısı olmasa da çalışır ve önbellekte tutulur.
- Bağlantı tekrar sağlandığında sunucu üzerinde bilgiler güncellenir.
- Uygulamanın parçası olan sayfalar belirli bir dosya türü ile ilişkilendirilir ve bu dosya keş manifest adı verilen bir text dosyasıdır.
- 26:47Keş Manifest ve Önbellek
- Keş manifest dosyası içinde cash, back ve network olmak üzere üç ana bölüm yer alır.
- Cash başlığı, kendinden sonra listelenecek olan dosyaların önbellekte tutulacağını belirtir.
- Network başlığı altında tanımlanan dosya önbelleği alınmaz ancak referansı tutulur ve internet bağlantısı bağlandığında çalışır.
- 27:31HTML5'in Video Desteği
- HTML5 ile birlikte online videoları izlemek için Quick Time Real Player gibi üçüncü parti eklentiler kurmak gerekmez.
- Video etiketinde source özelliğini videonun adresini, width ve height özelliklerini genişlik ve yüksekliği belirlemek için kullanabilirsiniz.
- Videonun çalışabilmesi için ayrıca control özelliğini eklemeli ve değerinde "play" olarak belirlemelisiniz.