HTML 5 Yenilikleri.

Php, Asp, Perl, Html - HTML 5 Yenilikleri. Sponsorlu Bağlantılar 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 ...

Cevapla
HTML 5 Yenilikleri.
Tuğberk isimli Üye şimdilik offline konumundadır

Tuğberk

Webmaster / Adana

Standart

HTML 5 Yenilikleri.

Alt 02-09-2010 #1
Sponsorlu Bağlantılar

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="[email protected]" />
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 )
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
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; 

}
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

mTanriverdi isimli Üye şimdilik offline konumundadır

mTanriverdi(30)

Forumdan Uzaklaştırıldı

Hiç Biri / İstanbul

Standart
Alt 02-09-2010 #2
                             Sponsorlu Bağlantılar
Güzel paylaşım yenilikleri açıklayıcı olmuş.
Bu mesajdan alıntı yap
Tuğberk isimli Üye şimdilik offline konumundadır

Tuğberk

Webmaster / Adana

Standart
Alt 05-09-2010 #3
Teşekkürler Kardeş..
Bu mesajdan alıntı yap
Tuğberk isimli Üye şimdilik offline konumundadır

Tuğberk

Webmaster / Adana

Standart

..

Alt 05-09-2010 #4
Teşekkürler Kardeş..
Bu mesajdan alıntı yap
mTanriverdi isimli Üye şimdilik offline konumundadır

mTanriverdi(30)

Forumdan Uzaklaştırıldı

Hiç Biri / İstanbul

Standart
Alt 06-09-2010 #5
Ama HTML5 'in piyasaya yayılması baya bi seneyi bulacak. 10 sene sonra diye biliyordum.
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 06-09-2010 #6
Teşekkür ederim HTML 5 hakkında ilk defa bu kadar deteylı bilgilendirme gördüm.
Bu mesajdan alıntı yap
mavigece isimli Üye şimdilik offline konumundadır

mavigece

Webmaster / Bolu

Standart
Alt 05-12-2010 #7
gerçekten çok faydalı bir çalışma olmuş. ellerinize sağlık..
Bu mesajdan alıntı yap
sanaluser isimli Üye şimdilik offline konumundadır

sanaluser

Webmaster / İstanbul

Standart
Alt 06-12-2010 #8
teşekkürler
Bu mesajdan alıntı yap
Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Adobe illustrator cs5 yenilikleri yildizimyildiz Illustrator 8 02-09-2010 23:24:19
CS4 yenilikleri brushlar hakkinda deniz bahtiyar Photoshop Soru ve Sorunlarınız 0 06-03-2010 19:50:05
İndex.Html Sayfasının Arka Planında Radyo Yayını İçin "html" kod Lazım... yqzsnkya Web Tasarımı 5 10-07-2009 09:02:55
3ds max 2009 yenilikleri memed 3D Studio Max 0 27-09-2008 00:50:20
Flash CS3 Yenilikleri Ali Emre Flash 0 10-10-2007 20:11:50

Kapat
Şifremi Unuttum?