HTML5 Nedir ? Kodları ve Kullanımı

HTML5 Nedir ? Nasıl Kullanılır ? Kod Yapısı Nasıldır ?

html5 nedir kodlari uyumu

HTML5 Nedir : Hepinizin bildiği gibi son 8 yıldır, tablolu tasarım yerini div ile tasarıma bırakmaya başlamıştı ve günümüzde artık tablo ile tasarım yapanların sayısı çok az belki de yoktur. html in tarihine bakarsak tüm programlamalarda olduğu gibi sürekli bir arayış ve gelişme içerisinde olmuştur. Hatırlarsanız div ile tasarıma başladıktan sonra tablo döneminde ne kadar çok kod kullandığımızı ve çok fazla karmaşa olduğunu fark etmiştik, özellikle de css 2 ve flash ın yerini jquery ye bırakmasının da ardından kodlamalarımız daha da sadeleşmiş ve eskiye dönüp baktığımızda gördüğümüz kod karmaşasını artık tam anlamıyla görmez olmuştuk.

Html5 te tam olarak bu yüzden çıkarılmış gördüğüm, duyduğum ve araştırdığıma göre. Yani artık bir zamanların tablo lu devrinde Div in gelip tabloya “sen artık emekli oldun, çok yavaşsın, çekil köşene” dediği gibi html5 de şimdi div e aynısını demek için kolları sıvamışa benziyor. Fakat tabiki Html5 geldi diye div i komple silmeyeceğiz, sadece kullanımını sadeleştireceğiz.

html5 i biraz daha detaylı araştırdığımızda göreceksiniz. div ler gerçekten de tasarımsal açıdan kod kirliliği yaratıyormuş, hatta bu div lerle birlikte sayfalarımıza yerleştirdiğimiz javascript kodları, video embed kodları da aynı şekilde sayfayı yoran bir yapıya sahip görünüyor.

fakat bu kadar ballandırılan html5 dinamiğimiz henüz genç sayılır ve beta sürümleriyle gözümüze çarpıyor. youtube html5 konusunda öne atıldı ve kendini bir nevi kullanıcıya adayarak denek görevini üstlendi, şu anda beta olarak html5 i yotube da görmekteyiz. Youtube demişken, az evvel bir haber okudum, bazı yotube sayfaları paralı olacakmış (duyurdukları 50 kadar sayfa var)  sanırım 2 dolar istenecek ayda … Kapitalizm işte…

Şunu belirtmek isterimki, html5 in gündeme gelmesi aslında, farklı ekran boyutlarının yaygınlaşmasıdır. bundan 6 yıl önce 800*600 bir web sitesi işimizi görüyorken günümüzde tek bir boyut veremiyoruz sitelerimize, çünkü sitelerimiz tablet lerden de telefonlardan da görülebiliyor bunun haricinde çeşitli ekran çözünürlüklerine sahip bilgisayarlar ve laptoplarda cabası. burada da html5 ile gündeme gelmiş olan “responsive web design” giriyor olaya. responsive web design için bir makale yayınlayacağım ve orada daha detaylı göreceğiz.

şimdi html5 nedir den sonra html5 neler getirdi, kodları ne kadar farklı html4 ile olan farkları nedir gibi konulara da değinmek gerek sanırım.

HTML5 Neler Getirdi ?

Yukarda da bahsettim aslında, En başta getirisi bizi fazla kodlardan ve kod kirliliğinden kurtaracak olmasından bahsedilebilir. Bunun dışında başlıcaları şu şekilde dile getirilebilir.

– Html5 de en göze çarpanlardan birisi de video – ses desteği dir. daha önce bir videoyu web sayfamıza yerleştirmek için satırlarca kullanılan embed kodları yerine <video> tagı nı kullanmamız yeterli oluyor.

– Css3 kullanarak daha işlevsel, haraket kaabiliyeti açısından daha esnek grafiksel öğeler kullanabiliyoruz.

– Dosyalarımıza local kontrol sağlayabiliyoruz ve yine SQL veritabanı da local kullanılabiliyor.

– sitenin iskelet yapısında büyük bir sadeleştirmeye gidip, site yükümüzü azaltarak daha hızlı web sayfalarına dönüştürebiliyoruz.

– html5 ile gelen taglarda form kontrollerimiz daha pratik ve kullanışlı bir duruma getirilmiş görünüyor.

– Sayfalarımızı oluştururken sayfa html dilimizi ve sayfa standartlarımızı belirttiğimiz <Doctype> için uzun uzadıya bilgiler yazmak yerine sadece <!DOCTYPE html> yazmamız yeterli oluyor.

HTML5 İle Gelen Kodlar ?

Canvas

<canvas> Web sitenizde çizim yapmanız için alanlar oluşturmanızı sağlayan bir element canvas. Kullanım alanlarına değinecek olursak aslında geniş bir yelpazeye de sahip ve bu açıdan tutulacağı da aşikar, zaten tutulmaması için hiçbir neden görünmüyor. kullanım kolaylığı açısından bile yeterince çok şey kazandırıyor kullanıcıya. bu element sayesinde grafiksel verilerinizi web sayfanıza kolayca taşıyabileceksiniz. ayrıca, oyun ve sunumlarınızda da bunu kullanabilirsiniz. Yanlız şunu atlamamak lazım, Bu elementi kullanmak için javascript desteği almanız gerekiyor.

Örnek:

<canvas id="cizimK">
 <script type="text/javascript">
 var cizim=document.getElementById('cizimK');
 var ctx=canvas.getContext('2d');
 ctx.fillStyle='#FF0000';
 ctx.fillRect(0,0,80,100)
 </script>
</canvas>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılar desteklemektedir.

Video

<video> elementi ile web sitelerinize eskisi gibi yorucu kodlar, flash lar kullanmadan kolayca videolar ekleyebilir bu videolarınıza fonksiyonel butonlar (durdur, başlat, devam et, otomatik çalıştır) da ekleyebilirsiniz.

Tarayıcı Uyumu  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılar desteklemektedir.

Audio

<audio> Bu da video elementiyle aynı işlevi gören bir elementtir. video elementi gibi video değilde ses dosyası çalıştırmanız için yaratılmıştır.

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılar desteklemektedir.

Progress

<progress> elementi / etiketi; bir görevin nasıl ilerleyeceğini göstermekte kullanılır.

<progress value="38" max="113"></progress>

Tarayıcı Uyumu :  Internet explorer ve safari dışındaki tüm tarayıcılar desteklemektedir.

Caption

<caption> elementi, eskiden olsa tablo kullanmış olsak, bu tablolara başlık vermek için <h1> tagını kullanırdır. işte tamda bu element h1 tagı yerini almaktadır. Yani başlık olarak düşündüğünüz kısımları caption elementi ile ayırmanız gerekecek

Tarayıcı Uyumu :  Tüm Tarayıcılar bu etiketi desteklemektedir.

Header

<header> elementi / etiketi; web tasarım da kullanacağınız bir bölüm için başlık atamanızda kullanılır.

<article>

<header>

<h1>Internet Explorer 9</h1>

<p><time pubdate datetime="2011-03-15"></time></p>

</header>

<p>Internet Exlorer 9 (IE9) 14 Mart 2011'de yayımlandı.</p>

</article>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Nav

<nav> Elementi / etiketi; Ana menülerin (gezinti menüleri) olduğu bölümdeki bağlantıları oluşturmakta kullanılmaktadır. Bu etiket web tasarım yaparken kodlayacağınız sayfada ki diğer linkler için kullanılmaz.

<nav>

<a href="/web-design/">Web Design</a> |

<a href="/grafik-design/">Grafik Design</a> |

<a href="/seo/">seo</a> |

<a href="/kartvizit-tasarim/">kartvizit Tasarım</a>

</nav>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Footer

<footer> bu element adından da anlayacağınız üzere, web sitesi nin alt kısmının ayrıştırılmasında kullanılır. Buna bağlı olarak ta amacına uygun içeriklerin yerleştirilmesi gerekmektedir. copyright, iletişim, tasarlayan… bilgileri gibi

<footer>

<p>Tüm hakları saklıdır.</p>

<p>Kullanım koşullarını okumak için tıklayınız.</p>

</footer>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Section

<section> elementi / etiketi, bir web sitesi yaparken html5 ile tasarılıyorsanız, içerik kısmını belirtmeniz gerekecek, bunu da section elementi sayesin de yapabileceksiniz.

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Aside

<aside> Elementi – etiketi, İçerik (section) kısmında bulunan bir kelime ya da cümle ile ilgili açıklama yapmamızı sağlar. Bu etiket mutlaka içerikle ilgili olmalıdır.

<p>Akşam üzeri arkadaşlarla Espark AVM'de turladık.</p>

<aside>

<h4>Espark AVM</h4>

<p>Espark AVM Eskişehir merkezinde bulunan alışveriş merkezidir.</p>

</aside>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Article

<article> elementi / etiketi; Section alanının dışında bulunan, makale, blog yazı alanı, yorum kısmı, haber alanı gibi bölgeler için kullanılan blog elementidir.

</pre>
<article>

<h1>Webledim Kimdir ?</h1>

<p>Webledim Freelance web, grafik tasarımcınızdır</p>

</article>
<pre>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Embed

<embed> elementi / Etiketi; Siteye dışardan dosya çağırmak için kullanılmaktadır. (.swf…gibi).

Tarayıcı Uyumu :  Tüm tarayıcılarda sorunsuz kullanılmaktadır.

Details

<details> Elementi/Tagı; Bu tag göster/gizle tagı olarak ta tanımlanabilir, daha geiş ifadeyle, kullanıcı details tagı ile tanımlanmış içeriği gizleyip görüntüleyebilmektedir. Yani bu etiket, açılıp kapanır durumda haraketli bir öğe tanımlar.

<details>
 <summary>Göster / Gizle</summary>
 <p>Göster/Gizle Başlığına tıklanıldığında bu içerik kısmı etkileşimli olarak görünüp kaybolacaktır.</p>

</details>

Tarayıcı Uyumu :  Sadece Chrome tarayıcısı desteklemektedir.

Summary

<summary> elementi / Etiketi; details tagı içerisinde başlık kısmını tanımlamakta kullanılır. summary etiketi details etiketinin ilk öğesi şeklinde tanımlanmalıdır.

Tarayıcı Uyumu :  Sadece Chrome tarayıcısı desteklemektedir.

Time

<time> elementi/Etiketi; adından da anlaşılacağı gibi zaman (tarih,saat), bu etiketin, tarayıcılar üzerinde görünür bir izi yoktur.

<p>Her sabah <time>10:00</time> gibi kalkarım.
 <p>Özel bir gün <time datetime="2012-02-14">Sevgililer günü</time>'ne az bir zaman kaldı.</p>

Tarayıcı Uyumu :  Tarayıcılarda görsel bir etki bırakmadığı için sorun teşkil etmemektedir.

Mark

<mark> Elementi/Tagı; Seo ile uğraşanlar bilir; Bir cümle yazarken o cümlede geçen bazı kelime ya da kelime öbeklerini vurgulamamız gerekir, mesela kalın, altı çizgili, renk olarak parlak ve göze çarpan renklerle falan. İşete bu tag tam olarako işi görüyor. bir cümle içerisinde vurgulamak istediğiniz kelime ya da kelime öbeklerini bu etiketle yazarsanız amacınıza ulaşmışsınız demektir.

<p>Webledim.com <mark>freelance web tasarım</mark> alanında hizmet vermektedir.</p>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Figure

<figure> elementi/etiketi; resimler (image), çizimler gibi çeşitli öğelerin gösterilmesinde kullanılır. Bu etiket section etiketinin akışı içerisinde olsa da section dan bağımsızdır.

<figure>
 <img src="webledim.png" alt="webledim başlık" width="145" height="218">
 </figure>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Figcaption

<figcaption> elementi/etiketi; figure etiketi için başlık belirlemekte kullanılır. figure etiketinin birinci ya da sonuncu etiketi olarak kullanılabilir.

<figure>
 <img src="webledim.png" alt="webledim Başlık" width="145" height="218">
 <figcaption>Webledim.png Webledim için Başlık kısmı<figcaption>
 </figure>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Hgroup

<hgroup> elementi/etiketi; web sitesi nin başlıklarının gruplandırılmasında kullanılır. heading tagları (h1,h2,h3…) bu etiketler içerisinde kullanılır.

<hgroup>
 <h1>Webledim Ana Başlık</h1>
 <h2>Webledim Alt Başlık</h2>
 </hgroup>
 <p>Webledim'e ait diğer içerikler burada</p>

Tarayıcı Uyumu :  Internet explorer 8 ve önceki sürümleri hariç tüm tarayıcılarda kullanılmaktadır.

Details

<details> Elementi/Etiketi; <input> etiketi için önceden belirlenmiş açılır başlıklar tanımlanmasında kullanılır. <datalist> etiketi <input> etiketiyle kullanılırken input etiketinin listeleme fonksiyonu kullanılır.

<input list="konular">
 <datalist id="konular">
 <option value="web tasarım nedir">
 <option value="html5 nedir">
 <option value="html5 kodları">
 <option value="html5 in html4 ten farkları">
 <option value="css kullanımı">
 </datalist>

Tarayıcı Uyumu :  Sadece Chrome tarayıcısı desteklemektedir.

Mesaj 2 Comments

  1. mamo dedi ki:

    Yakında kursuna başlayacağım inşallah. Şuanda yine de çat pat biliyorum ama olsun bilginin üzerine birşeyler eklenmezse o bilgi bilgi değildir 😀

  2. okan2327 dedi ki:

    günümüzde tekrar yaygınlaşan bir etken oldu html 5 yayınlanması mutlaka tasarımda kullanılmasının yararı olacaktır.

Leave A Reply