Yeni gelen bazı html 5 özellikleri , teknik ve ipuçları
Yeni Doküman tipi kullanımı
Eski kullanım Örnek kod:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Yeni HTML 5 ile kullanım şekli:
<!DOCTYPE html>
Bu yeni HTML 5 ile artık doctype belirtirken daha kısa olarak belirtiyoruz.
Yeni resim içersindeki bilgileri gösterme:
Örnek kod:
<figure> <img src="resimadresi.jpg" alt="resim hakkında" /> <figcaption> <p>Resim ile ilgili kısayazı </p> </figcaption> </figure>
SMALL
HTML 5 den önce small komutu logo yanında kullanırken şimdi small kullanımı sitenin alt bilgisi olarak kullanılmaya başladı. Genel amaçlardan bir taneside cıktı alırken küçük yazı olarak cıkartması
CSS VE JS TANIMLAMA
Eski hali:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
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
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
HTML 5 İLE WEB KODLAMASI
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html>
TYPE A EKLENEN MAIL BOLUMU
Eskiden inputlarda mail adresinin dogru olup olmadıgını js ve ile kontrol etmemiz gerekiyordu. Artık bunun için email tagı eklendi.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html>
PLACEHOLDER
Javascriptde defult olarak degişken gösterdigimiz. On mouse down komutunu kullanmadan place holder ile kullanabiliyoruz.
Örnek kod:
<input name="email" type="email" placeholder="nurettin@tasarimrehberi.com" />
DİVLER YERİNE ELEMENTLERİN KULLANIMI
Eskiden kullandıgımız kod:
<div id="header"> ... </div> <div id="footer"> ... </div>
Eskiden bütün bölümleri div ile kullanırken HTML 5 ile alt ve üst bilgileri header ve footer tagları ile belirleeyecegiz.
<header> ... </header> <footer> ... </footer>
İNTERNET EXPLORER IN HTML 5 KODLARINI ANLAMASINI YARDIMCI OLACAK KOD:
Html 5 elementlerini anlaması için yazılan kodlar:
css yardımı ile
header, footer, article, section, nav, menu, hgroup {
display: block;
}
Java script yardımıyla
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.
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Header grubunu tanımlama
<header> <hgroup> <h1> Tasarım Rehberi </h1> <h2> PHP Blogu </h2> </hgroup> </header>
Form alanlarında zorunlu alanlar yapma
<input type="text" name="ad" required="required">
Eğer bu alan doldurulmazsa hata verecek. Bu sayede js ile kontrol etmemize gerek kalmıyor.
Örnek kod:
<form method="post" action=""> <label for="ad"> isminiz: </label> <input type="text" id="ad" name="ad" placeholder="Nurettin" required> <button type="submit">Gonder</button> </form>
Müzik çaldırma kodu:
<audio autoplay="autoplay" controls="controls"> <source src="mp3adi.ogg" /> </audio>
Bu kodu mp3 formatında olarak 3 adet tarayıcıda denedik ve sonuçlar.(ie 8 de denemeyere gerek yok :p)
Firefox 3.8.6 ve opera 10.6 da görüntü var ama ses yok 
Safari 5 hem görüntü hemde ses yok.
Görüntü 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 çalıştırabileceksiniz.
Örnek kod:
<video controls preload> <source src="videoadi.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="videoadi.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Tarayıcınız eski yenileyin <a href="cohagenPhoneCall.mp4">Videoyu indir.</a> </p> </video>
HTML 5 video destegi olmayan browserlar için güzel bir uyarı sistemide yapılmış. Eğer kişi videyou izleyemezse indirebilecek.
FORM KONTROL ELEMANLARI (Regular Expressions)
<form action="" method="post">
<label for="kullaniciadi">kullanıcıadı: </label>
<input type="text"
name="kullaniciadi"
id="kullaniciadi"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Gonder </button>
</form>
bu örnek 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 gördüm)
Youtube linki http://www.youtube.com/watch?v=XhMN0wlITLk
CSS ile on mouse hover yapılması
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sort of Lame CSS Text Changing</title>
<style>
h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<h1 data-hover-response="I Said Selamlar!"> Selam</h1>
</body>
</html>
Yazı boyutunu ayarlama
<form method="post"> <h1> Toplam ürünler </h1> <input type="range" name="range" min="0" max="10" step="1" value=""> <output name="result"> </output> </form>
Yazı boyutunu 1 fonttan 10 fonta kadar degiştirir.
CSS ile degiştirilmesi
body {
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
text-align: center;
}
input { font-size: 14px; font-weight: bold; }
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
output {
display: block;
font-size: 5.5em;
font-weight: bold;
}
Kaynak:
HTML 5 Yenilikleri
