MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
BossTR avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

BossTR HTML5 Teknolojisi [Makale]


Sponsor Reklam
media venus

Çevrimdışı BossTR
 Tarih: 15-03-2014, Saat:21:48
#1
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.

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>
Cevapla
Bunu Beğenenler: usameavci
Sponsor Reklam
sponsor reklam sponsor reklam

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  HTML5 Eğitim Dersleri ardaduyan 1 938 23-12-2013, Saat:00:59
Son Yorum: Screwy
  HTML5 başlangıç yeni etiketleri tanıma telays 0 882 15-07-2012, Saat:18:40
Son Yorum: telays



Konuyu Okuyanlar: 1 Ziyaretçi