HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür.Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Kısaca H5 Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi Youtube, deneme aşamasında HTML5'i kullanıcılarına sunmaktadır.
HTML5 kullanmak aynı zamanda UI (kullanıcı arabirimi) mühendislerinin ve back end (sunucu uygulama) geliştiricilerinin sadece tek codebase kullanımından yararlanabiliyor olmaları demektir. Yapının temelleri aynı kalsa da, her platforma entegre edilmiş back end layerlar ve görüntüler olabilecektir. Bu, birbirine bağlı bir ürün tecrübesinin yaratılmasına yardım eden ürün çizgisinin karşısında, gelişimin yayılma sürecini hızlandırmaktadır.
Ses veya film etiketleri gibi birçok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web uygulamaları yaratmakta da kullanılabilmektedir. CSS3 ve JavaScript ile birleştirmek çok daha güçlü uyumlu ve sağlam uygulamaları mümkün kılmaktadır. Uygulamalar bu sayede binlerce cihazda birçok ihtimale uygun şekilde kullanılabilmektedir. Özellikle de iliştirilmiş platformlar ve bağlanmış cihazlarla çok daha güçlü olacaklardır.
HTML5 tüm HTML Sürümleri (HTML1.0 vb) ile uyumludur.
Yeni Elementler
canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
<audio>: Sayfaya ses oynatıcı bir modül ekler.
<video> : Video oynatıcı bir modül ekler.
<progress> : İşlem süreci göstergesi ekler.
<caption> : Başlık olarak düşünülen metinleri düzenler.
<header> : Sitenin başlık ve açıklama içeriğini alır.
<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> : Sitelerin en alt kısmını içine alır.
<section> : Sitelerin ana içerik kısmını içine alır.
<aside> : Ana içerikte ayrı yazılan kısımdır.
<article> : Makale, deneme tarzı yazıları kapsar.
<embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> : Detay bilgisi içerir.
<summary> : Yazının başlığını belirler.
<time> : Tarih, saat verilerini kapsar.
<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<figcaption> : <figure> elementinin başlığını belirler.
<figure> : Çeşitli medya içeriği gruplarını belirler.
<hgroup> : Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.
<datalist> : Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar
Canvas Çizgi Stilleri
Html5 canvas tagları kullanılarak geliştirilmiş çizgi stilleri uygulamasının örnek kodları aşağıdaki gibidir. Kodumuz 3 bölümden oluşmaktadır.
Html sayfaya aşağıdaki kodı yazınız.
javascript olarak aşağıdaki kodu yazınız.
css olarakta aşağıdaki kodu kullanınız.
Boş HTML-5 Sayfa Örneği
HTML5 kullanmak aynı zamanda UI (kullanıcı arabirimi) mühendislerinin ve back end (sunucu uygulama) geliştiricilerinin sadece tek codebase kullanımından yararlanabiliyor olmaları demektir. Yapının temelleri aynı kalsa da, her platforma entegre edilmiş back end layerlar ve görüntüler olabilecektir. Bu, birbirine bağlı bir ürün tecrübesinin yaratılmasına yardım eden ürün çizgisinin karşısında, gelişimin yayılma sürecini hızlandırmaktadır.
Ses veya film etiketleri gibi birçok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web uygulamaları yaratmakta da kullanılabilmektedir. CSS3 ve JavaScript ile birleştirmek çok daha güçlü uyumlu ve sağlam uygulamaları mümkün kılmaktadır. Uygulamalar bu sayede binlerce cihazda birçok ihtimale uygun şekilde kullanılabilmektedir. Özellikle de iliştirilmiş platformlar ve bağlanmış cihazlarla çok daha güçlü olacaklardır.
HTML5 tüm HTML Sürümleri (HTML1.0 vb) ile uyumludur.
Yeni Elementler
canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
<audio>: Sayfaya ses oynatıcı bir modül ekler.
<video> : Video oynatıcı bir modül ekler.
<progress> : İşlem süreci göstergesi ekler.
<caption> : Başlık olarak düşünülen metinleri düzenler.
<header> : Sitenin başlık ve açıklama içeriğini alır.
<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> : Sitelerin en alt kısmını içine alır.
<section> : Sitelerin ana içerik kısmını içine alır.
<aside> : Ana içerikte ayrı yazılan kısımdır.
<article> : Makale, deneme tarzı yazıları kapsar.
<embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> : Detay bilgisi içerir.
<summary> : Yazının başlığını belirler.
<time> : Tarih, saat verilerini kapsar.
<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<figcaption> : <figure> elementinin başlığını belirler.
<figure> : Çeşitli medya içeriği gruplarını belirler.
<hgroup> : Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.
<datalist> : Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar
Canvas Çizgi Stilleri
Html5 canvas tagları kullanılarak geliştirilmiş çizgi stilleri uygulamasının örnek kodları aşağıdaki gibidir. Kodumuz 3 bölümden oluşmaktadır.
Html sayfaya aşağıdaki kodı yazınız.
Kod:
<canvas id="tutorial" width="400" height="400"></canvas>
javascript olarak aşağıdaki kodu yazınız.
Kod:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.lineCap = "square";
ctx.beginPath();
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 20;
ctx.moveTo(150,200);
ctx.lineTo(200,150);
ctx.lineTo(250,200);
ctx.stroke();
ctx.lineCap = "butt";
ctx.beginPath();
ctx.strokeStyle = '#00FF00';
ctx.lineWidth = 20;
ctx.moveTo(150,250);
ctx.lineTo(200,200);
ctx.lineTo(250,250);
ctx.stroke();
ctx.lineCap = "round";
ctx.beginPath();
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 20;
ctx.moveTo(150,300);
ctx.lineTo(200,250);
ctx.lineTo(250,300);
ctx.stroke();
}
css olarakta aşağıdaki kodu kullanınız.
Kod:
canvas { border: 1px solid black; }
Boş HTML-5 Sayfa Örneği
Kod:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 template</title>
<metacharset = "utf-8"/>
<scripttype = "text/javascript">
document.createElement('header');
document.createElement('menu');
document.createElement('content');
document.createElement('footer');
</script>
<style type="text/css">
* {
margin:0 ;
padding:0 ;
}
header, menu, content, footer {
display:block ;
}
menu ul {
list-style-type:none ;
}
menu ul li {
float:left ;
padding:5px20px ;
}
content, footer {
clear:both ;
}
</style>
</head>
<body>
<header>
<h1>A Blank HTML5 template</h1>
<menu>
<ul>
<li>
<ahref = "<a href="http://html5snippets.com/">http://html5snippets.com</a>"title = "snippets">HTML5 snippets</a>
</li>
<li>
<ahref = "<a href="http://charlesdagley.cz.cc/">http://charlesdagley.cz.cc/</a>"title = "Portfolio">Dagley Designs</a>
</li>
<li>
<ahref = "link"title = "link">link</a>
</li>
<li>
<ahref = "link"title = "link">link</a>
</li>
<li>
<ahref = "link"title = "link">link</a>
</li>
</ul>
</menu>
</header>
<content>
<h2>This is our content area</h2>
<p>This is just a free html5 blank template</p>
</content>
<footer>
As found on html5snippets.com---Follow @charlesdagley
</footer>
</body>
</html>