Web Tasarım - Grafik Tasarım

HTML5’in Getirdiği Yeni Elemanlar

Yapısal Elemanlar

Bir web sayfası tasarlarken muhtemelen sayfanız kabaca bir üst başlık alanı (sitenin tanıtımı için), bir içerik alanı ve yine içerik alanı içerisinde değişik alt başlıklar (bölümler), bir alt başlık ve bir ya da daha fazla navigasyon (yönlendirme) alanlarından oluşacaktır (Değişik site tasarımları olabilir. Burada genel yaklaşımdan söz edilmektedir). Sitenizin yapısını tasarlarken HTML5 ile yeni gelen yapısal elemanları kullanabilirsiniz. Bu elemanların kullanılması; kod okunabilirliğini arttırır, anlamlı eleman gurupları oluşturulmasını sağlar ve CSS’i daha etkili bir şekilde kullanmanıza yardımcı olur.

<header>

Başlık elemanı, bu elemanı kullanarak sayfa başlık alanı (sayfa hakkında bilgiler içeren bölüm), bölüm veya alt bölüm başlığı ya da yönlendirme alanları için başlık oluşturabilirsiniz. Genelde h1, h2, h3 .. h6 elemanlarını ya da hgroup elemanını içerir.

Özellikleri: [Standart Özellikler]

Örnek:

 

  • Yukarıdaki uygulamada site için örnek bir başlık alanı oluşturulmuştur. Ekran görüntüsüne bakalım.<hgroup>Başlık elemanlarını  (heading elements, h1 .. h6) gruplamak ve bir belge ya da bölüm başlığı oluşturmak  için kullanılır.Özellikleri: [Standart Özellikler]Örneğin;<hgroup><h1>Web Developers</h1><h2>HTML5</h2></hgroup><nav>Navigasyon (yönlendirme, link) alanları oluşturmak için kullanılır. Burada şunu belirtelim <nav> elemanı link oluşturmak için kullandığımız <a> elemanının ya da<ul>, <ol> elemanlarının yerlerine kullanılmaz. Sadece bu elemanları kapsar (baş-ka elemanları da kapsayabilir) ve içerdiği eleman gurubunu bir navigasyon alanıolarak tanımlar.Özellikleri: [Standart Özellikler]Örneğin;
    <div id=”nav_1”>
    <ul><li><a href=”#”>Birinci Link</a></li><li><a href=”#”>İkinci Link</a></li><li><a href=”#”>Üçüncü Link</a></li><li><a href=”#”>Dördüncü Link</a></li></ul></div>

    …şeklindeki bir kullanım yerine aşağıdaki kullanımı tercih edebilirsiniz.

    <nav>

    <ul>

    <li><a href=”#”>Birinci Link</a></li>

    <li><a href=”#”>İkinci Link</a></li>

    <li><a href=”#”>Üçüncü Link</a></li>

    <li><a href=”#”>Dördüncü Link</a></li>

    </ul>

    </nav>
    Örnek:

    <artıcle>

    Sayfanın ana içerik alanında anlamsal bir bütünlüğü olan (farklı konu başlıklarına ya da davranışlara göre ayrılmış) alt bölümler (içerikler) oluşturmak için kullanılır. Örneğin; bir blog sayfasında ana içerik bölümü içindeki farklı blog yazı alanlarını bu elemanla oluşturabilirsiniz. Ya da gazete, dergi makaleleri içeren alanlar, kullanıcı girişi, kullanıcı yorumları gibi alanları bu elemanla oluşturmanız mümkündür. article elemanını kullanarak biçimlendirdiğiniz alanları sayfanın değişik bölgelerinde kullanabilirsiniz.

    Özellikleri: [Standart Özellikler]

    Örnek:

    <sectıon>

    Sayfa içerisinde genel bölümler (ana içerik bölümü, diğer bölümler vb.) oluşturmak için kullanılır. HTML5 bu elemanı mantıksal, tematik alanlar (Örneğin; eğer şöyle derseniz birinci <section> elemanı içerisinde bulunan etiketler sayfanın ana icerik bölümünü oluşturuyor. Bu durumda section elemanının oluşturduğu alan mantıksal bir alan olarak ifade edilebilir) oluşturmak için tanımlasa da biz section elemanını sadece mantıksal alanlar oluşturmak için değil, aynı zamanda div elemanının yerine biçimlendirilmiş ana bölümler oluşturmak içinde kullanabiliriz.

    Özellikleri: [Standart Özellikler]

    Örnek:

     

    <asıde>

    içerik bölümleri ile alakalı ek bilgi alanları oluşturmak için kullanılırlar. Bu durumda içerik bölümünün yanına konumlandırılırlar. Ya da sayfanın ana bölümlerinin dışında sayfa kenarlarında reklam alanları, yan açıklama ve ek bilgi alanları tanımlamak için kullanılırlar.

    Özellikleri: [Standart Özellikler]

    Örnek:

    <footer>

    Bu elemanı kullanarak sayfa, bölüm ya da alt bölümler için alt bilgi alanları oluşturabilirsiniz. Alt bilgi alanları genelde içerik yazarı hakkında bilgi, içeriğin oluşturulma tarihi ya da sayfa sahibi ile ilgili iletişim bilgilerini içerir.

    Özellikleri: [Standart Özellikler]

    Örnek:

    <fıgure>

    Resim, fotoğraf alanları (ya da media alanları) tanımlamak için kullanılır. Bu şekil alanlarına bir metin iliştirmek için <figcaption> elemanı kullanılır.

    Özellikleri: [Standart Özellikler]

    Örneğin;
    <figure>
    <img src=”arge.jpg” width=”304” height=”228” />

    </figure>
    ya da resme tanımlayıcı bir metin ekleyebilirsiniz.
    <figure>

    <img src=”arge.jpg” width=”304” height=”228” />

    <figcaption>

    Şirketimizin Arge Bölümü

    </figcaption>

    </figure>

    NOT

    Yukarıda anlatılan elemanların blok seviyesinden elemanlar olduklarını fark etmişsinizdir. HTML elemanları sayfadaki yerleşim düzeylerine göre ikiye ayrılır. Bunlar; satır içi (inline element), blok seviyesi elemanı (block level element)’dır. Tarayıcı blok seviyesi elemanından önce ve sonra bir satır sonu oluşturur.

    Örnek:

    Yukarıda anlatılan elemanlar IE9, Firefox 4, Opera (Presto 2.7.70), Safari 5.0 tarayıcılarının alt sürümleri tarafından desteklenmemektedir. Peki, ya bu alt sürümler bu elemanı sayfaya nasıl yerleştirecekler? Hemen açıklayalım.

    Internet Explorer alt sürümleri bu elemanları hiç tanımayacaktır. Bu elemanları hedef alan CSS kodlarını uygulamazlar. Bu durumun çözümü için JavaScript yardımıyla belirtilen  elemanları programatik  olarak  oluşturmak yeterli  olacaktır. IE9’un tanımadığı diğer yeni elemanları da bu şekilde oluşturup sayfa içerisinde kullanabilirsiniz.
    <!–[if lt IE 9]>

    <script type=”text/javascript”>

    var elemanlar=[“header”,”hgroup”,”nav”,”article”,”section”,”aside”, “footer”,”figure”];

    for(var i=0;i<elemanlar.length;i++){

    document.createElement(elemanlar[i]);

    /*Yeni bir  element (eleman) oluşturmak için  kullanılır.

    *Kullanımı:

    *createElement(elementName):HTMLElement

    *Örneğin; document.createElement(“div”);

    *DOM Level 1,2

    */

    }

    </script>

    <![endif]–>
    Yukarıdaki Script bloğu sadece IE9 alt sürümlerinde çalışacaktır.

    Belirtilen elemanları IE9 alt sürümlerinde blok seviyesin den bir eleman olarak kullanmak için aşağıdaki CSS tanımlamasını yapalım.

    header, hgroup, nav, article, section, aside, footer, figure {

    display:block;

    }

    Artık IE9 alt sürümlerinde bu elemanları kullanabiliriz.

    Örnek:

    Aşağıdaki JavaScript kodunu HEAD arasına ekleyiniz!

    <!–[if lt IE 9]>

    <script type=”text/javascript”> var elemanlar=[“header”,”hgroup”,”nav”,”article”,”section”, “aside”,”footer”,”figure”]; for(var i=0;i<elemanlar.length;i++){ document.createElement(elemanlar[i]); } ;</script>–>

    <![endif]–>

     

    Firefox 4.0 ve Opera (Presto 2.7.70) gibi diğer tarayıcıların alt sürümleri bu elemanları satır içi bir eleman olarak oluştururlar oysa ki bu elemanlar sayfa bölümleri ve alt bölümler oluşturmak için kullanılırlar (Blok seviyesinden elemanlar olmaları gerekir). Bu problemin çözümü için aşağıdaki CSS tanımlaması yeterli olacaktır.

    header, hgroup, nav, article, section, aside, footer, figure {

    display:block;

    }