HTML 5 Yenilikleri.

Tuğberk1 · 2 Eyl 2010

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Yeni HTML 5 ile kullanım şekli:

Kod:

<!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:

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:

Kod:

<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

Kod:

<link rel="stylesheet" href="path/to/stylesheet.css" /> 

<script src="path/to/script.js"></script>

HTML 5 İLE WEB KODLAMASI

Kod:

<!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.

Kod:

<!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:

Kod:

<input name="email" type="email" placeholder="tugberk@codermaster.com" />

DİVLER YERİNE ELEMENTLERİN KULLANIMI
Eskiden kullandıgımız kod:

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.

Kod:

<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

Kod:

header, footer, article, section, nav, menu, hgroup { 

display: block; 

}

Java script yardımıyla

Kod:

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.

Kod:

<!--[if IE]> 

<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script> 

<![endif]-->

Header grubunu tanımlama

Kod:

<header> 

<hgroup> 

<h1> Tasarım Rehberi </h1> 

<h2> PHP Blogu </h2> 

</hgroup> 

</header>

Form alanlarında zorunlu alanlar yapma

Kod:

<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:

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:

Kod:

<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:

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)

Kod:

<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 Telekomünikasyon İletişim Başkanlığı
CSS ile on mouse hover yapılması
Örnek:

Kod:

<!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

Kod:

<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

Kod:

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; 

}

mTanriverdi · 3 Eyl 2010

Güzel paylaşım yenilikleri açıklayıcı olmuş.

Tuğberk1 · 6 Eyl 2010

Teşekkürler Kardeş..

Tuğberk1 · 6 Eyl 2010

..

Teşekkürler Kardeş..

mTanriverdi · 6 Eyl 2010

Ama HTML5 'in piyasaya yayılması baya bi seneyi bulacak. 10 sene sonra diye biliyordum.

Ali Emre · 6 Eyl 2010

Teşekkür ederim HTML 5 hakkında ilk defa bu kadar deteylı bilgilendirme gördüm.

mavigece · 5 Ara 2010

gerçekten çok faydalı bir çalışma olmuş. ellerinize sağlık..

sanaluser · 6 Ara 2010

teşekkürler

	Benzer konular	Forum			Tarih
0	Html5 Banner Post Story Gif ve Gif Animasyon - Türkiye Geneli	Freelancer İş Arayanlar	1	959	21 Tem 2020
B	Freelancer - Photoshop - Corel - SonyVegas - HTML5 - Flash - Türkiye Geneli	İş Arayan İlanları	1	1K	20 Ocak 2017
	Adobe'dan HTML5e çeşit çeşit ders	Video Dersleri	0	994	12 Ara 2016
L	Banner & HTML5 Konusunda Deneyimli Freelancer Çalışma Arkadaşı Arıyoruz - Türkiye Geneli	İş Veren İlanları	1	1K	21 Eki 2016
C	HTML5 Hareketli Banner Setler Yapabilecek Uzman Aranıyor - Türkiye Geneli	Sonuçlanan İlanlar	2	2K	8 Nis 2016
P	Html5 Profesyonel Banner Yapabilecek Grafiker Arkadas Ariyoruz - Yutdışı	İş Veren İlanları	2	1K	11 Şub 2016
A	HTML5 ve Php bilen webmaster aranıyor - İstanbul	İş Veren İlanları	1	998	19 Ağu 2015
A	acil wordpress ve html5 bilen - İstanbul	İş Veren İlanları	2	1K	20 Nis 2015

HTML 5 Yenilikleri.

Benzer konular