Bölüm 1 - HTML 5 Hakkında
Ders 1 - HTML 5 Yeniliklerine Giriş
HTML 5 Yeniliklerine Giriş
W3.org'un geçen yıl ocak ayında HTML 5'i duyurmasıyla birlikte HTML 5 de yavaş yavaş web tasarım dünyasındaki yerini almaya başlıyor. Bu kısa derlemede HTML 5'in web tasarım camiasına ne gibi yenilikler getirdiğine değinmeye çalışacağız
Öncelikle bu sayfada yer alan referans notlarına baktığımızda 28 tane yeni etiketin olduğunu söyleyebiliriz. Sırasıyla belirtmek gerekirse bunlar şöyle:
<article>, <aside>, <audio>, <canvas>, <command>, <datagrid>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <ruby>, <rp>, <rt>, <section>, <source>, <summary>, <time> ve <video>,
Site şablonuna özel etiketler
Tabii, bu etiketlere tek tek göz atmak yerine içeriklerine göre incelemeye çalışmak daha mantıklı olacaktır. Bu noktada ilk göze çarpan özelliklerden biri kuşkusuz kimi noktalarda div etiketinden kurtulmak diyebiliriz. Bu sayede div ile belirlediğimiz kimi alanların, içeriklerine göre yeni etiketlere kavuşmuş olduğunu söyleyebiliriz. Söylediklerimizi daha açık bir biçimde ifade etmek istersek aşağıdaki şekil bu noktada imdadımıza yetişecektir.
Şekil 1 - HTML 4 ve HTML 5'te site şablonu
Yukarıdaki şekilde de görüldüğü gibi mevcut yapıda kodlamayı <div id="header">, <div id="navigation">, <div id="sidebar">, <div id="footer"> şeklinde yapıyorduk. Yani HTML 4'de genel olarak site şablonunda ihtiyaç duyduğumuz header, navigation, sidebar ve footer gibi alanları tek tek adlandırarak oluşturuyorduk. Fakat HTML 5 sayesinde bu özel alanlar için isimlendirme yapmak gerekmiyor. Bunun yerine bu alanlara özel <header>, <nav>, <section>, <article>, <aside> ve <footer> gibi etiketleri kullanabiliyoruz. Özetle site şablonu hazırlarken bir yandan divler ile bu özel alanları belirtmekten kurtulurken bir diğer yandan da bu özel alanlar kendi etiketlerine kavuşuyor diyebiliriz.
Multimedya desteği
HTML 5 etiketlerindeki göze çarpan bir diğer yenilik de video ve müzik gibi multimedya içerik ile ilgili kuşkusuz. HTML 4'te veya XHTML'de javascript ya da benzeri uygulamalarla sayfaya ses veya video ekleyebiliyorduk. HTML 5'deki yeni etiketler sayesinde video ve ses gibi multimedya içerikleri doğrudan eklemek mümkün oluyor. Bu noktada da <audio>, <video>, <source> ve <embded> gibi etiketleri kullanabiliyoruz.
Video etiketinden başlayacak olursak örnek kodlama şu şekilde yapılıyor:
<video src="movie.ogg" controls="controls"></video>
Burada etiketin autoplay, controls, height, loop, preload, src ve widht gibi nitelikleri sayesinde videonun kaynağı, ne zaman oynatılacağı gibi özellikleri de belirleyebiliyorsunuz.
Ses etiketine gelecek olursak burada da örnek kodlama şu şekilde yapılıyor:
<audio src="horse.ogg" controls="controls"></audio>
Ses etiketinin de yine autoplay, controls, loop, preload ve src gibi özellikleri bulunuyor.
Ya standartlar ?
Bu noktadan itibaren konunun ayrıntılarını incelemeye başladıkça sorunlar da tek tek gün yüzüne çıkıyor diyebiliriz. Öncelikle video formatında ogg ve MPG 4; ses formatında ise şimdilik Ogg Vorbis, MP3 ve Wav destekleniyor. Fakat aşağıda yer alan ses ve video formatları ile hangi tarayıcıların bunları desteklediklerini gösteren tabloya ( kaynak: w3schools.com )bakınca işlerin biraz karıştığı görülüyor.
Şekil 2 - HTML 5'in desteklediği ses formatları ve tarayıcı destekleri
Şekil 3 - HTML 5'in desteklediği video formatları ve tarayıcı destekleri
Özetle şu an için kullanıcıların tarayıcı seçenekleri göz önüne alındığında HTML 5 ses ve video etiketlerinin kullanılarak yapılacak internet sitelerinin ne yazık ki çoğu kullanıcı tarafından tam anlamıyla takip edilemeyeceğini söyleyebiliriz. Bu konuda daha bir çok tartışma varken biz bunlara girmeden tablolar incelendiğinde tarayıcıların hepsinin desteklediği ne ses ne de video formatının olmadığını görüyoruz.
Yeni çizim etiketi: <canvas>
Bar, çizgi, pasta gibi çok sayıda çizim ya da grafiği de yine Javascript destekli bu yeni etiket sayesinde yapabiliyorsunuz. http://www.rgraph.net sayfasındaki örnekler bu noktada bir fikir vermeye yetecektir. Bunun dışında oyun ve saat gibi farklı çalışmalar da yine bu sayede yapılabiliyor. Bu konudaki örneklere ait linkler de yazının en sonunda yer alıyor.
Şekil 4 - Grafik örneği
Şekil 5 - Saat örneği
Yeni form etiketleri ve özellikleri
HTML 5'te dikkat çekici bir diğer gelişme de form ve form denetim etiketleri ile ilgili. Öncelikle form denetiminden başlarsak; <datalist> seçenek listesi, <keygen> kullanıcı doğrulama için şifre ve <output> ise farklı türlerde çıkış almak için kullanılabiliyor.
Form denetiminde de yine telefon (tel), arama alanı (search), URL (url), eposta (email), tarih (date), ay (mount) ve hafta gibi daha daha çok sayıda özellik de eklenmiş.
"HTML 5 Yeniliklerine Giriş" adını verdiğimiz bu derlemeye ele almadığımız kimi noktaların olduğunun bilinciyle son veriyoruz.
HTML 5 konusunda bir fikir vermesi ve yararlı olması dileğiyle...
İlgili linkler:
Ana kaynak:
http://www.w3schools.com/html5/default.asp
Video:
Çizim - Grafik:
http://www.perisic.com/canvasclock/
http://www.phpguru.org/static/clock
Form:
http://diveintohtml5.org/forms.html
|
Kredi : 1
|
Dersi izle
Ders 2 - XHTML Nedir ? - SADECE YAZILI ANLATIM
Öncelikle biraz HTML ‘den bahsedelim. HTML ismi Hyper Text Markup Language kelimlerinin başharflerinden meydana gelmektedir. Yani Türkçe karşılığı; Hareketli Metin İşaretleme Dili ‘dir.
HTML için web sayfasının çatısı diyebiliriz, belli başlı tag ‘lardan(etiketlerden) oluşur ve dinamik bir yapıya sahip değildir. Örneğin mantıksal bir sorgulama (if – else) veya bir döngü yapılamaz.
Az öncede yazdığım gibi web sayfasında bir çatı görevi taşır, sayfa öğerleri html olarak yerleştirilir ve eğer dinamik bir işlem gerekiyorsa browser (Tarayıcı) işlemleri için javacript, vbscript vb.. server tabanli işlemler için Php, Asp, Python, jsp vb.. gibi kodlama dilleriyle desteklenir.
Eğer bir site sadece HTML kodlarından oluşacaksa bu site büyük bir ihtimalle sadece sunum amaçlı bir site olabilir ki günümüzde sadece html’den ibaret bir site çok nadir kullanılmaktadır.
Son olarak HTML dosyaları .html veya .htm uzantılarına sahiptir. Bu iki uzantı arasında hiç bir fark yoktur fakat genellikle .html uzantısı kullanılmaktadır.
HTML hakkında bu kadar bilgiden sonra şimdi XHTML ‘ye geçebiliriz. Aslında XHTML 2000 yılında W3C tarafından kabul edilmiş tüm internet tarayıcıları ve Gsm Telefonları tarafından standart olarak kabul edilmiştir.
HTML biraz daha derlenip, geliştirilip ve belli bir standarta geçirilip XHTML olmuşturulmuştur. XHTML kullanmanın en temel amaçlarından birisi farklı tarayıcılarda sorun çıkarmamasıdır, bunun yanında tarayılar kodu daha çabuk algılar ve web sayfası HTML ‘ya göre daha hızlı çalışır.
Bir diğer avantajı ise başta Google olamak üzere başlıca arama motorları XHTML standarlarına uygun yazılmış siteye tam not veriller ve arama motorlarında kötü kodlanmış rakip sitelere göre üst sıralara yükselir. XHTML Extensible Hyper Text Markup Language , Türkçe karşılığı Esnetilebilir Hareketli Metin İşaretleme Dili anlamındadır.
Her ne kadar Esnetilebilir denilsede bu esneklik kodlayan programcılar değil XHTML ‘yi geliştiren programcılar için geçerlidir, zira XML yapısında var olan söz dizimi ifadelerini bünyesine alan bir dildir. XML ’de var olan sıkı ve uyulması gereken şartlar XHTML ‘de de geçerlidir. Bu doğrultuda XML ’de olan extensible ifadesini bünyesine almıştır.
|
Kredi : 1
|
Dersi izle
Ders 3 - XHTML kodlama mantığı? - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 4 - Doctype Hakkında - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 5 - Yorum Etiketi - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 6 - td ve tr etiketi
|
Kredi : 1
|
Dersi izle
Ders 7 - table etiketi ve alt etiketleri - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 8 - background özelliği
|
Kredi : 1
|
Dersi izle
Ders 9 - cellpading , cellspacing
|
Kredi : 1
|
Dersi izle
Ders 10 - th etiketi
|
Kredi : 1
|
Dersi izle
Ders 11 - thead etiketi
|
Kredi : 1
|
Dersi izle
Ders 12 - tfooter etiketi
|
Kredi : 1
|
Dersi izle
Ders 13 - caption etiketi
|
Kredi : 1
|
Dersi izle
Ders 14 - colgroup ve col etiketleri
|
Kredi : 1
|
Dersi izle
Ders 15 - colspan
|
Kredi : 1
|
Dersi izle
Ders 16 - rowspan
|
Kredi : 1
|
Dersi izle
Ders 17 - Uygulama 1
|
Kredi : 1
|
Dersi izle
Ders 18 - Uygulama 2
|
Kredi : 1
|
Dersi izle
Ders 19 - Uygulama 3
|
Kredi : 1
|
Dersi izle
Ders 20 - Uygulama 4
|
Kredi : 1
|
Dersi izle
Ders 21 - Uygulama 5
|
Kredi : 1
|
Dersi izle
Ders 22 - Form Etiketi
|
Kredi : 1
|
Dersi izle
Ders 23 - İnput Etiketleri - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 24 - Fieldst & Legend Etiketleri
|
Kredi : 1
|
Dersi izle
Ders 25 - form etiketi - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 26 - İnput Text Etiketi
|
Kredi : 1
|
Dersi izle
Ders 27 - İmput Password
|
Kredi : 1
|
Dersi izle
Ders 28 - Input Hidden Etiketi
|
Kredi : 1
|
Dersi izle
Ders 29 - İnput Text Etiketi 2
|
Kredi : 1
|
Dersi izle
Ders 30 - Input Checkbox
|
Kredi : 1
|
Dersi izle
Ders 31 - Input Radio Etiketi
|
Kredi : 1
|
Dersi izle
Ders 32 - Input File
|
Kredi : 1
|
Dersi izle
Ders 33 - Input Button
|
Kredi : 1
|
Dersi izle
Ders 34 - Input Label 1
|
Kredi : 1
|
Dersi izle
Ders 35 - Input Label 2
|
Kredi : 1
|
Dersi izle
Ders 36 - Select Etiketi 1
|
Kredi : 1
|
Dersi izle
Ders 37 - Select Etiketi 2
|
Kredi : 1
|
Dersi izle
Ders 38 - Text Area Etiketi
|
Kredi : 1
|
Dersi izle
Ders 39 - HTML DOM’a Giriş - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 40 - HTML DOM Düğüm Ağacı (Node Tree) - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle
Ders 41 - DOM Düğümleri (Nodes ) - SADECE YAZILI ANLATIM
|
Kredi : 1
|
Dersi izle