Yeni Dokuman tipi kullanımı
Eski kullanım Ornek kod:
Yeni HTML 5 ile kullanım şekli:
PHP:
Bu yeni HTML 5 ile artık doctype belirtirken daha kısa olarak belirtiyoruz.
Yeni resim icersindeki bilgileri gosterme:
Ornek kod:
PHP:
Resim ile ilgili kısayazı SMALL
HTML 5 den once small komutu logo yanında kullanırken şimdi small kullanımı sitenin alt bilgisi olarak kullanılmaya başladı. Genel amaclardan bir taneside cıktı alırken kucuk yazı olarak cıkartması
CSS VE JS TANIMLAMA
Eski hali:
PHP:
Sayfamıza css veya js uzantısı eklerken uzun olarak type olarak bildirmek zorunda kalıyorduk. HTML 5 ile bu bildirim ortadan kalktı.
Yeni Hali
PHP:
HTML 5 İLE WEB KODLAMASI
PHP:
untitled [h=2]To-Do List[/h]
- Break mechanical cab driver.
- Drive to abandoned factory
- Watch video of self
TYPE A EKLENEN MAIL BOLUMU
Eskiden inputlarda mail adresinin dogru olup olmadıgını js ve ile kontrol etmemiz gerekiyordu. Artık bunun icin email tagı eklendi.
PHP:
untitled Email: Submit Form
PLACEHOLDER
Javascriptde defult olarak degişken gosterdigimiz. On mouse down komutunu kullanmadan place holder ile kullanabiliyoruz.
Ornek kod:
PHP:
DİVLER YERİNE ELEMENTLERİN KULLANIMI
Eskiden kullandıgımız kod:
PHP:
...
...
Eskiden butun bolumleri div ile kullanırken HTML 5 ile alt ve ust bilgileri header ve footer tagları ile belirleeyecegiz.
PHP:
... ...
İNTERNET EXPLORER IN HTML 5 KODLARINI ANLAMASINI YARDIMCI OLACAK KOD:
Html 5 elementlerini anlaması icin yazılan kodlar:
css yardımı ile
PHP:
header, footer, article, section, nav, menu, hgroup
Java script yardımıyla
PHP:
document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu");
İnternet explorer olup olmadıgını kontrol eden kod ve bu kod ile elementler js ile oluşturulur.
PHP:
Header grubunu tanımlama
PHP:
[h=1]Tasarım Rehberi[/h] [h=2]PHP Blogu[/h]
Form alanlarında zorunlu alanlar yapma
PHP:
Eğer bu alan doldurulmazsa hata verecek. Bu sayede js ile kontrol etmemize gerek kalmıyor.
Ornek kod:
PHP:
isminiz: Gonder
Muzik caldırma kodu:
PHP:
Bu kodu mp3 formatında olarak 3 adet tarayıcıda denedik ve sonuclar.(ie 8 de denemeyere gerek yok
Firefox 3.8.6 ve opera 10.6 da goruntu var ama ses yok
Safari 5 hem goruntu hemde ses yok.
Goruntu dedigimiz kısım playerdir.
Firefox ve safari bir sonraki versiyonunda ogg formatını destekledigi gibi mp3 formatınıda destek verecek. Opera ise şu anda sadece waw formatını desteklemede.
VİDEO DESTEGİ
Video dosyalarını artık direk olarak calıştırabileceksiniz.
Ornek kod:
PHP:
Tarayıcınız eski yenileyin Videoyu indir.
HTML 5 video destegi olmayan browserlar icin guzel bir uyarı sistemide yapılmış. Eğer kişi videyou izleyemezse indirebilecek.
FORM KONTROL ELEMANLARI (Regular Expressions)
PHP:
kullanıcıadı: Gonder
bu ornek kodda en az 4 karekterli en fazla 10 karekterli olacak ve zorunlu alan olarak tutmuş ve sadece harfler girilebilinir.
HTML 5 in desteklemedikleri
SVG,CSS3,Geolocation,Client Storage, Web sockets (quake 2 oyunu gordum)
["allowFullScreen":"true","allowScriptAccess":"alwa ys","src":"http://www.youtube.com/v/XhMN0wlITLk&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_ US&feature=player_embedded&fs=1","allowfullscreen" :"true"]
Youtube linki http://www.youtube.com/watch?v=XhMN0wlITLk
CSS ile on mouse hover yapılması
Ornek:
PHP:
Sort of Lame CSS Text Changing [h=1]Selam[/h]
Yazı boyutunu ayarlama
PHP:
[h=1]Toplam urunler[/h]
Yazı boyutunu 1 fonttan 10 fonta kadar degiştirir.
CSS ile degiştirilmesi
PHP:
body input input[type=range]:before input[type=range]:after output
Kaynak belirtildigi surece kullanabilinir.
Kaynak:
http://www.tasarimrehberi.net/html-5-yenilikleri.html
Nurettin Sezer