HTML 5 Nedir ? - Beyaz.Net

Trang chủ » Html5 Te Desteklenmeyen Etiketler » HTML 5 Nedir ? - Beyaz.Net

Có thể bạn quan tâm

resim

HTML 5 nedir?

HTML 5 HTML dilinin son 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, 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.

Audio veya video etiketleri gibi bir çok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web aplikasyonları yaratmakta da kullanılabilmektedir. CSS3 ve JavaScript ile birleştirmek çok daha güçlü uyumlu ve sağlam aplikasyonları mümkün kılmaktadır. Aplikasyonlar 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.

HTML 5 ile tasarlanmış bir siteyi örnek göstererek anlatmaya başlıyorum gerçi daha yeni yeni yazmaya başladı insanlar ama tam olarak 2022 yılında gelişimi tamamlanacak onuda belirterek sitenin link'ini Gönderiyorum : http://www.w3.org/html/logo/index.html

Bu da Video Oynatma Örneği : http://html5demos.com/video

HTML 5'e neden ihtiyaç duyuldu ?

Eski sürümlerdeki hata ayıklama sorunlarında daha etkili

Yapısal Ögeler ve Etiketler

Yerleşik Apiler Sayesinde Web Uygulamaları geliştirme kolaylaşacak

Yeni Gelen Kodlarla Ses ve Video kullanımında Kolaylık

Web tasarımın şu günlerde Javascript üzerinde yoğunlaşması nedeni ile html5 de 3.parti yazılımlara

araçlar ve eklenti desteği

HTML 5 ' nasıl ortaya çıktı ?

2004 yılında html den memnun olmayan Opera,Mozilla,Apple gibi şirketler tarafından html4 standartı belirlendi Daha sonra 2005 yılında web application1.0 taslağı oluştu.

2007 yılında geliştirilen standartlar doğrultusunda html 5 teknolojisi gelişti

html 5'in tamamlanması yaklaşık 2022 yılını bulabileceğide konuşulmakta

HTML 5'i Tarayıcıların Destekleme Durumu:

CHROME FIREFOX EXPLORER OPERA SAFARI
New semantic tags 4.0* 3.6* x 10.1* 4.0*
Canvas 4.0* 3.5* x 9* 3.0*
Video element 4.0 3.0 x 10.5 3.2
localStorage 4.0 3.0 8 10.5 4.0
Offline apps 4.0 3.6 8* x 4.0
HTML5 Forms 4.0* x x 10.1* 5.0*
Drag and drop 4.0 3.5 7* x 4.0

HTML5 ile HTML4 Arasındaki Farklılıklar

Örnek Göstermek Gerekirse Doctype Tagı :

HTML4 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" HTML5: <!DOCTYPE html > Karakter Kodlaması : HTML4 : < meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-UTF-8&quot; />

HTML5:

  • Audio

  • Header

  • Footer

  • Section

  • Time

  • Video

Gibi Özelliklerin Kullanımı daha Kolay ve Özelliklerinin Artması sağlanmış

Yeni Araçlar web 2.0 uyumludur mesela submit butona url verilebilecek artık

Yeni gelecek özellikler

Tarih ve Renk Araçları

Formlara Özel E-posta alanları

Özel Arama ve Url alanları

Delete ve Put Metodları

HTML5 ile gelen yeni yapısal etiketler

<section> </section> Etiketi :

Uygulama yada Dökümanın genel bölümünü belirtir bu etiket yardımı ile aynı temayı içeren içerikleri bir arada sunabilirsiniz

<article> </article> Etiketi:

Bölümlerdeki makale içeriklerini belirlemek için kullanırız

<aside></aside> Etiketi:

Manşet Bloklarını belirlemek için kullanabiliriz birde blog tarzı yani benim sitemin sağ tarafta bulunan sidebarlar gibi bölümler oluşturulabilir

ve oluşturulan bölümler düzenlenebilir.

<header></header> Etiketi:

Başlık Eklemek İçin Kullanabiliriz oldukça sadece ve kolay şekilde HTML5 de düzenlenmiş

<hgroup></hgroup> Etiketi:

Alt Başlıkları gruplandırmak için kullanabiliriz.

<footer></footer> Etiketi:

Footer Etiketi sayfanın altındaki copyright @ felan gibi yazıları yazabileceğiniz etiket.

<nav></nav> Etiketi:

Sayfa Sonunu Belirtmek için kullanırız bir sonraki sayfaya geçileceğinide burdan belirtiriz.

HTML5 ile Gelen İçerik Etiketleri:

<figure></figure> Etiketi:

Medya ögeleri ile bağlantı kurmak için Kullanılacak tag

<video></video> Etiketi:

Video kodlarını gömüceğimiz taglar.

<audio></audio> Etiketi:

Ses İçeriklerini Gömeceğimiz taglar.

<embed></embed> Etiketi:

HTML4'de kullanılan bir oluşumdu ama HTML5 de sadeleştirilmiş ve problemleri giderilmiş şekilde karşımızda , Flash ve Ortam Dosyalarını Gömmek için kullanılacak tagdır.

<canvas></canvas> Etiketi:

Grafik çizimler oluşturmak için veya resim boyutlandırmak kesmek gibi kullanılacak bir tag.

HTML5 ile Gelen Uygulama Etiketleri:

<meter></meter> Etiketi:

Belirli yer ve belirli ölçülerin tanımlanması için mesela 720px div genişliği

<progress></progress>

Uygulamanın şuanda hangi görevi yaptığını belirtir.

<time></time>

Zaman veya süreyi ifade eden tagdır.

<details></details>

Şuanda Kendi Sitem de denediğim bir tagdır 13 temmuz 2011 çarşamba günü bu tag hiç bir tarayıcıda çalışmamıştır. W3org da belirtildiği üzere yazılan dökümanın detayları belirtmektedir

<command></command>

Kullanıcaya özel alanlar eklemek için kullanılan tagdır.

HTML5 ile Gelen Hata ayıklama etiketleri:

HTML 4 de kullanılan hata ayıklama kodlarının pekde işe yaradığı söylenemez daha önce var olup şimdi kullanımdan kaldırılan html hata ayıklama etiketleri şunlardı.

  • Base font

  • big

  • center

  • font

  • s

  • strike

  • tt

  • u frame

  • frameset

  • noframes

  • acronym

  • applet

  • isindex

HTML5 ile API lere genel bakış:

Daha önce dhtml xhtml gibi api destekli uygulamalar artık html5'in içerisinde yer alacak tabi buda daha kolay geliştirlebilir apiler demek

Apilerin HTML5'e dahil olması ile birlikte mobil cihazlardan , tarayıcı ve bilgisayar uyumluluğu sağlanacak

  • Online Editing API : Özelliği ile bir sayfada yönetim panelini ihtiyaç duymaksızın kullanıcı istediği içeriği çok rahat düzenleyebilir duruma gelecek mesela kendi blogumu istediğim zaman yönetim paneline ihtiyaç duymadan güncelleyebilirim.

  • Offline Editing API: Eğer Ben Blogumda bir makale yazarken internet bağlantısı kesilmişse güncelle dediğimde Sayfa Görüntülenemiyor hatası alabilirim ve yazdıklarım kaybolabilir. Artık bu sistemde değişecek bu API sayesinde yazdığım makale hafızada kalıcak internet geldiğinde güncellenecek

  • History API : Tarayıcının geçmişte ziyaret etmiş olduğu bir sayfayı çağırtmak için kullanılabilecek mesela siz daha önce benim bloguma 'a girmişseniz ve ben anasayfamda bir değişiklik yapmamışsam sayfa History API den çağırtılıp daha hızlı yüklenmesi sağlanacak.

  • Drag and Drop API : Sayfadaki Sürükle Bırak ögelerin çalışmasını sağlaycak yani artık web siteler birer masaüstü gibi olucak istediğiniz ögeyi sürükle bırak şeklinde taşıyacaksınız .

HTML5 'de İçerik Modelleri

İçerik modellemede HTML4 de kullanılan özellikler HTML5 geliştirilerek devam edilme kararı alınmıştır. Bunlar

Metadata, embeded,interactive,heading,flow,phrasing,sectioning

Şimdi Bunları Modelleri İnceleyelim.

MetaData: Sayfanın üst kısımnda yer alan ve sayfa ile ilgili bilgileri barındıran kısımdır.bazı temel etiketleri şunlardır.

  • Base

  • command

  • link

  • meta

  • noscript

  • script

  • style

  • title

Embedded : Dış Ögeleri eklemek için kullanılan özelliktir temel tagları.

  • Audio

  • canvas

  • embed

  • iframe

  • image

  • math

  • object

  • svg

  • video

Heading : Başlıkları Tanımlamak için kullanılır buna tablo başlıklarıda dahildir.etiketleri

  • h1

  • h2

  • hgroup

Phrasing : Dökümanın metin bölümünü tanımlar ve temel tagları

  • iframe

  • cite

  • script

Flow: Dökümanın normal akışını sağlayan içerik modelini oluşturur.

Sectioning : başlık ile dipnot arasında belirtilir temel tagları

  • article

  • aside

  • nav

  • section

HTML5 de Div Etiketinin Rolü

Bazı eklenen etiketlerden sonra içeriği göstermek için div den daha güzel etiketler bulunmaktadır zaten div etiketinden şikayetçi olan kullanıcılara gün doğuyor div HTML5 ile bitecek.

Şimdi diğer etiketleri inceleyelim

İçerik Modeli uygunsa sadece seciton ve article etiketi kullanın bu etiketleri yeni bir bölüm başlığı oluşturmak için kullanırız

İçiçe İçerik ekleyecekseniz aside etiketi kullanın çünkü bu etiket içiçe eklenen içeriğin arasında anlamsal bir bağ olduğunu gösterir

Başlık oluştururken header dipnot için ise footer kullanın

Yani sitenin başlığı belirlerken tutup div etiketi kullanırsanız çok büyük google seo sorunları yaşıyabilirsiniz artık tasarımlarınızı bu şekilde yönlendirin

HTML5'de ID ve Class Özelliklerini Kullanmak.

Bir Sayfanın style'ni oluşturmak için genelde kullandığımız taglar

<div id="wrapper"> , <h1> dı şimdi bunlarıda bir kenara koyalım ve HTML5'ile gelen yenilikleri araştıralım

HTML 4

HTML5

<div id = "header">

<h1>Deneme</h1>

</div>

<div id = "baslik">

<h2> baslik</h2>

</div>

<header>

<h1>Deneme</h1>

</header>

<seciton>

<header>

<h2> baslik</h2>

</header>

</section>

Gördüğünüz gibi çok sade ve kolay artık HTML5 de 2 adet başlığı aynı anda kullanabildiğiniz için kodlamayı çok rahat şekilde yapabilirsiniz

HTML5'de En Üst Seviye Elemanları Yapılandırmak:

Başlık alanlarında div etiketi yerine header etiketini kullanabiliriz.

Örnek :

<header = id="mainHeader">

<h1><span>Ahmet Bozkurt</span></h1>

Tasarımlarınızı Yapıcağınız yerde

<section id ="tasarim">

Şeklinde yapılandırabilirsiniz

seciton tagları içerinde ayrıca footer ve aside taglarınıda duruma göre kullanabilirsiniz

Yine Sayfanın Bir sonraki bölüme geçiş bölümlerinde div yerine <nav>ve<article> etiketlerinden yararlanabilirsiniz

Birbirine bağlı etiketlerde <hgroup> özelliğini kullanabilirsiniz

HTML5 de Form Oluşturmak:

Şimdi nasılki eskiden textbox eklediğimizde type'nı password yaptığımızda yazdığımız yazı şifre türünde gözüküyordu şimdide e-postaya özel textboxlar gelecek

diğer bir özellik olan tarih ve saat özelliği ilede otomatik kontrol yapıları çalıştıralbilirsiniz

Eskiden bildiğiniz gibi input butonlarına herhangi bir URL tanımlayamıyorduk artık o özellikde mümkün <input type = "url"> şeklinde URL gösterebilirsiniz

Bir yeni özellikde otomatik odaklanma özelliği örnek olarak forma tıklama zorunluluğunu ortadan kaldırabilirsiniz

Formlarınıza Yer Tutucu Özelliği Ekleyip girilecek alan hakkında bilgi verebiliriniz mesela kutucuğun üzerine gelindiğinde adınızı giriniz gibi özellikler ekleyebilirsiniz kod olarak placeholder'i kullanabilirsiniz

Numerik alanlar kullanmak için input tanımlaması yapıldıktan sonra min = 10 max =100 şekilde komutlar verilerek inputlarda numaralarla çalışmayı kolaylaştırabiliriz

HTML5 API Desteği:

Sürükle Bırak Uygulamaları Geliştirebilirsiniz: yazdığınız kodu kapatmadan sonuna draggable kodunu eklemeniz yeterli olacaktır ayrıca fotoğrafın sürüklenip bırakılacağı alanlarıda belirleyebiliriz bununla ilgili kodlar ise Dragenterhandler , drapoverhandler,drophandler

Offline Editing API de anlattığımız olayı burada tekrar açıklamak istiyorum : internetiniz gittiğinde dosyalar html manifest dosyasına aktarılır ve siz bu depolanacak cache dosyasını daha önceden header taglarına tanımlamış olmanız gerekmektedir

Kategorideki Güncel Makaleler

Sql Injection Nedir?

Sql injection özet olarak querystringler ile sorgulara müdahalede bulunup veritabanına erişerek veritabanındaki bilgileri görüntülemek şeklind

XSS Nedir?

XSS (Cross Site Scripting) script kodları üzerinden (genelde javascript) bir web sayfasına saldırı yapılmasıdır. XSS çoğunlukla tarayıcıda sakl

CSRF Nedir?

CSRF (Cross Site Request Forgery) genel yapı olarak sitenin açığından faydalanarak siteye sanki o kullanıcıymış gibi erişerek işlem yapmasını s

Php'de diziler

Php'de Diziler Dizileri kısaca tanımlarsak diziler aynı veri tipindeki (integer,string,double vb.) birden çok değerin aynı yerde toplandığı bir

htaccess nedir?

Htaccess'in açılımı hypertext access'dir.htaccess dosyası ile web sayfamızda yetki,kısıtlama ve url ayarları gibi bazı ayarları yapabiliriz. Ge

Php array shift ve count fonksiyonları

Merhaba Arkadaşlar, Sizlere bu makalemde php'de kullanılan array_shift ve count fonksiyonlarından bahsedeceğim. array_shift fonksiyonu biz di

Php'de fonksiyonlar ve kullanımları

Fonksiyonlar genel olarak birden fazla tekrarlanan işlemlerin tek seferde yapılması için kullanılmaktadır. Birden çok yapılacak işlem için fonksiyon

Php Kod Standartları

Merhaba Arkadaşlar, Sizlere bu makalemde PHP deki kodlama standartlarından bahsedeceğim. Kod Standartları nedir? Kod standartları adı üzerind

PHP'DE JSON FONKSİYONLARI

Merhaba Arkadaşlar, Önceki makalemde sizelere JSON'dan bahsetmiştim. Bugün ise PHP'de kullanılan JSON fonksiyonlarından bahsedeceğim. json_e

Curl Nedir?

Curl fonksiyonu ile file_get_contents gibi diğer sitelerin kaynak kodunu çekebilir, diğer sitelerden hostunuza dosya download edebilirsiniz. file_get_

Curl Kurulumu

Merhabalar, Bu makalemde sizlere php'nin curl kütüphanesinin Linux işletim sistemindeki kurulumundan bahsedeceğim. İlk işlem olarak term

PHP'de strlen fonksiyonu

PHP deki strlen() fonksiyonu ile değişkenlerimiz içinde bulunan karakter sayılarını sayabiliriz. Yani değişkenimizin içindeki kelime Erdem olsun, fonk

Từ khóa » Html5 Te Desteklenmeyen Etiketler