Ders 13 HTML Dersleri Yapısal HTML 5 Etiketleri

Bu dersimizde HTML 5 konusuna giriş yapıyoruz. Bu dersimizden itibaren HTML 5 ile gelen yeni etiketleri örnekleri ile inceleyeceğiz ve uygulayacağız.

İlkokuldan beri öğretilen kompozisyon yapısında bir kompozisyonun giriş, gelişme ve sonuç bölümü bulunmaktadır. Kompozisyon modeli web sayfaları için de geçerlidir dersek yanlış bir ifade olmaz.

HTML 5′ in yapısal etiketlerinden önce header, content ve footer bölümleri div etiketlerinin id‘ leri ile tanımlanmaktaydı ve standart değildi. Bir örnek vermek gerekirse, HTML 5 öncesi bir web sayfasının yapısı aşağıdaki gibiydi.

Yukarıdaki meşhur div etiketleri ile sayfanın bölümlerinin birbirinden ayrıldığını ve bölümlerinin içeriğinin de id özellikleri ile tanımlandığını görmekteyiz. Id’ nin standart değeri olmayıp her bir geliştirici istediği değeri id’ ye verebilmektedir. Yukarıda ki yapı standart olmadığından her geliştirici kendine göre bir yapı oluşturabilmekteydi. Bu durum da karışık yapıların çıkmasına neden oluyordu.

Div etiketleri anlamsal etiket değildir yani içerisinde nasıl bir veri olduğunu bilemeyiz. Sadece bir blok olduğunu ve içerisinde herhangi bir veri olabileceğini bilebiliriz. Span etiketi de div gibi anlamsal bir etiket değildir. Bunun yanında HTML’ de bulunan img, form ve table  etiketleri içeriği hakkında bilgi vermektedir.

Yapısal etiketler tasarlayacağımız web sitesinin yapılarını belirleyen temel etiketlerdir. Şimdi ise HTML 5 ile gelen yapısal etiketleri listeleyelim.

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figure> ve <figcaption>

Yukarıdaki her bir etiketi teker teker anlatmadan önce bu etiketlerin sayfa içerisinde nasıl konumlandırılabileceğini aşağıdaki şekilde görebiliriz. Basit bir web sitesi şu şekilde oluşur.

Giriş olarak HTML 5 etiketleri ile basit anlamda bir tasarım yapalım.

Tasarımımızda kullandığımız kodlarımız ise şu şekildedir:

Konumuz değil ama HTML etiketleri CSS’ siz düşünülemez. Kodlarımıza ait CSS kodlarımız aşağıdaki gibidir:

CSS kodlarımızın açıklamalarını ise CSS derslerimizde ayrıntılı olarak anlatacağım. Şimdilik takılmaya gerek yok… 

Container tüm yapısal elementlerimizi içine alan kapsayıcı bir yapıdadır. Header sayfamızın logosu ve dahili arama motoru gibi temel öğelerini içerir. Nav [nev okunur]’in açılımı navigation’ dır. Yani navigasyon, sayfamızın menüsünü içerir. Section dilimizde bölüm anlamına gelmektedir ve sitemizle ilgili tüm içerik bu kısımda yer alır. Footer ise sayfamızın yapım tarihi, telif hakları gibi ayrıntıları içerir. Aside ise dilimizde yan taraf gibi bir anlama gelmektedir. Sitemizle ilgili sabit elementleri içerir. Örneğin aside kısmında reklam alanımız, konu kategorileri, takvim gibi ayırıcı nitelikte içerikler olabilir.

HTML 5 ile gelen bu yeni etiketler aslında isim farklılığından çok yeni bir şey katmamakta sadece anlam kazandırmaktadır.

Bu yüzden bu yapısal etiketler aynı div gibi davranırlar. CSS ile konumlarını ve genişliklerini yine geliştiricinin ayarlaması gerekir. Son olarak bu etiketleri desteklemeyen bir tarayıcı kullanıyorsanız CSS olarak aşağıdaki tanımı yapmanız büyük oranda sorunu giderecektir.

article, section, aside, hggroup, nav, header, footer, figure, figcaption { display: block; }

Şimdi lafı uzatmadan tüm bu yapısal etiketleri ayrı ayrı inceleyelim:

YAPISAL HTML 5 ETİKETLERİ

<header> Elementi

Sitemizin logosu, sosyal medya düğmeleri, dâhili arama motoru, ticari sitelerde “üye girişi”, “sepetim” gibi bağlantıların yer aldığı ve sayfa içindeki bazı bölümlerin başlıklarını yazmak için kullanılan etikettir. İlgili olduğu içerik hakkında da  bazı bilgiler (yazar adı, yayınlanma zamanı vb.) verebilir. Bir sayfada birden fazla  <header> etiketi kullanılabilir. Bu etiket de HTML5 ile birlikte gelmiştir. Daha önceden header yerine div’ lere id vermek zorundaydık. Artık tek yapmamız gereken <header> yazmak.

Şu örnekte ne demek istediğimi anlayacaksınız:

<nav> Elementi

Açılımı navigation’dır. Dilimizde navigasyon (yönlendirme) anlamına gelir. HTML5 ile gelen yeni bir etikettir. Sitemizdeki menü <nav> elementi içine yazılır. <nav> etiketi sayfa içerisinde başka bölümlere ulaşmak veya başka sayfalara bağlantı vermek için kullanılır. Diğer bir tabirle menü elemanıdır.

Şu örnekte <nav>’i daha iyi kavrayabilirsiniz:

Çıktısı ise şu şekilde olacaktır:

 

Bu kodlarımızı CSS ile biçimlendirip daha görsel ve interaktif hale getirmeyi CSS derslerimizde detaylı bir şekilde işleyeceğiz.

<section> Elementi

Dilimizde kesim, kısım gibi bir anlama gelir. HTML5 ile gelen yeni bir etikettir. Bazen tasarımda o kadar çok <div> kullanırız ki bu div’ lerin birbirleri ile karışmaması için <section> etiketi kurtarıcı niteliktedir. Web sayfanızda farklı bölümler (içerik bölümü vs.) oluşturmak için kullanılır. Bir web sayfası içinde birden fazla <section>  etiketi kullanılabilir. 

Her iki durumu da gösteren iki örneği aşağıda görebiliriz.

ÖRNEK 1

ÖRNEK 2

 

<article> Elementi

Bu etiket de HTML 5 ile gelen yeni bir etikettir. Article dilimizde makale anlamına gelmektedir. Sitemizde yer alan metinsel içerik bu etiket içinde yer alır. Diğer bir ifade ile sitenizde yer alan her bir müstakil içeriği belirtmek için kullanılır. Mesela sayfanızda yer alan her bir makale alanını bu öge (element) ile oluşturabilirsiniz. <article>  kendi başına bir içerik olabileceği gibi sayfa içerisinde birden fazla sayıda kullanılabilir. <section> etiketi ile birlikte kullanılması tavsiye edilir.

Kullanımı aşağıdaki gibidir:

Çıktısı ise şu şekildedir:

<aside> Elementi

HTML 5 ile gelen yeni bir etikettir. Sayfanın sidebar olarak tanımlanan yan tarafını veya reklam alanları vb. oluşturmak için bu element kullanılır. Sayfanın ya sağındadır ya da solundadır. Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, arama kutusu, anketler, sabit bağlantılar ve reklam alanı ( banner ) yer alır.

Kullanımı aşağıdaki gibidir:

Çıktımız ise şu şekilde olacaktır:

<figure> ve <figcaption> Elementi

Dilimizde figür, şekil gibi bir anlama gelmektedir. HTML5 ile gelmiştir. <figure> etiketi içeriğinde resim, fotoğraf, diyagram vb. görsel elemanları içerebilir. Sitemizde yer alan görsellerin bu etiket içinde yer alması tavsiye edilmektedir. <figure> etiketi içerisinde yer alan <figcaption> etiketi ise görsel ile ilgili kısa bilgi verir. 

Örnek <figure> elementi kullanımı şu şekildedir:

Çıktısı işe şu şekildedir:

 

Örnek <figcaption> elementi kullanımı ise şu şekildedir:

Çıktısı işe şu şekildedir:

<hggroup> Elementi

Başlık etiketlerini gruplandırmak için kullanılır.

Örnek kullanımı şu şekildedir.

Ekran görüntüsü ise aşağıdaki gibidir.

<footer> Elementi

Sitemizin yapım yılı, telif hakları gibi ayrıntılarının yer aldığı kısımdır. Sayfanın en altında yer alır. Ticari sitelerde referans adresleri, “hakkımızda”, “iletişim” gibi bağlantılar ile diğer bazı önemli site içi bağlantılar bu kısımda kullanılır.

Kullanımı aşağıdaki gibidir:

Footer etiketinin içinde <small> ve <address> etiketlerinin kullanılması ile daha görsel bir görünüm elde edilir. Çıktımız ise şu şekilde olacaktır:

 

YAPISAL OLMAYAN ANLAMSAL ETİKETLER

<mark> Elementi

Bazen cümle içindeki bir kelimeyi ya da sözcük öbeğini dikkat çekmek için fosforlu kalemle çizilmiş gibi (highlight) ön plana çıkartmak ve kullanıcının dikkatini çekmek isteyebiliriz. Bunun için <mark> etiketini kullanabiliriz.

Kullanımı aşağıdaki gibidir:

Ekran görüntüsü ise şu şekildedir:

<bdi> Elementi

HTML 5 ile yeni gelen bir etikettir.  BDİ’ nin açılımı Bi-directional Isolation (Çift yönlü ayırma)’anlamına gelir. <bdi> etiketi farklı yöne doğru yazılan bir metni, tersi yönde yazılan metinden ayırmaya yarar. Diğer bir tabirle içerik yönünü belirlemede kullanılır. (Örneğin Arapça ve İbranice sağdan sola yazılır). Metin yönü farklı içerik oluştururken sayfa düzenin sağlanması için ve kullanıcı tarafından oluşturulmuş yazım yönü bilinmeyen içerikleri gömmek için bu etiketi kullanmak fayda sağlar.

Bunu bir örnek ile açıklamaya çalışalım.

 

Örneğimizde metin yönü sağdan sola yazdırıldı. Bir örnek daha yapalım ve soldan sağa doğru yazdıralım.

Bu örneğimize ait çıktımız ise şu şekildedir:

<bdi> etiketi (Bi-Directional Isolation) çift yönlü içeriğin gerçekleştirilmesi amacıyla, kendisini kaplayan içerikten farklı yönde yazılması gereken metinleri tutar. Örneğin, veritabanından çekilen ve hangi yönde yazıldığı bilinmeyen (soldan sağa mı yoksa sağdan sola mı) metni sabit bir yönde yazmaya yarar. Yazarlar <bdi> etiketinde dir özniteliğini ayarlamak zorundadır. Sağdan sola içerik yönü için rtl (right to left – sağdan sola) ve ltr (left to right – soldan sağa) değeri verilebilir.

<details> ve <summary> Elementi

Bir döküman hakkında ayrıntılı bilgi verilmek istenildiğinde kullanılır. Eğer özel olarak belirtilmediyse kullanıcı tıkladığında görünür ve tekrar tıkladığında kapanır. Görünmediği zamanlarda <summary> etiketi içinde yazılanlar gösterilir.

Kullanımı aşağıdaki gibidir:

Ekran çıktısı şu şekildedir.

Kullanıcı Detaylar yazısının sağındaki oku tıkladığında ise aşağı doğru açılarak detaylar içeriği gözükür. Ekran görüntüsü aşağıdaki gibidir.

<dialog> Elementi

Dialog penceresinin oluşmasını ve üzerine gelindiğinde açılmasını sağlar.

Kullanımı aşağıdaki gibidir:

Ekran görünümü aşağıdaki gibidir.

<progress> Elementi

Bir işlemin ilerleme durumunu gösterge ile göstermek için kullanılır. Diğer bir tabir ile devam eden bir işlemin hangi aşamada olduğunu göstermek için kullanılabilir. 

Javascript ile sahip olduğu değer değiştirilebilir.

Kullanımı aşağıdaki gibidir:

Örnekte HTML içerisinde javascript kodu kullanarak “7” yerine ne yazarsak progress değeri de o şekilde değişecektir. Bu aracı bir sürecin devam durumu hakkında bilgi vermek için kullanabiliriz.

Ekran çıktısı aşağıdaki gibidir.

<meter> Elementi

Bir değeri, bir kesirli sayıyı veya ölçümü bar grafik içinde görsel olarak göstermek için kullanılır.

Kullanımı aşağıdaki gibidir:

Ekran çıktısı aşağıdaki gibidir.

Bu etiket ile beraber; value (zorunlu), optimum, min, max, high, low ve form nitelikleri kullanılır. Bunlardan kullanımı zorunlu olan value niteliği, sayfada görsel olarak gösterilecek olan değeri görmek için kullanılır.

<ruby> <rt> ve <rp> Elementleri

Uzak doğu dillerindeki karakterler için kullanırlar.

Örnek kullanımı aşağıdaki gibidir.

Ekran çıktısı aşağıdaki gibidir.

 

<wbr> Elementi

Uzun metinler ekrana sığmadığında bazen uygun olmayan yerlerden alt satıra geçebiliyorlar.  Bu problemden kurtulmak için <wbr> etiketi kullanılır.Bu etiket alt satıra belli bir yerde geçilebileceğini gösterir ama <br /> etiketi gibi direk alt satıra geçmeye zorlamaz. Tarayıcı duruma göre alt satıra geçmeye karar verir. 

Örnek kullanımı şu şekildedir.

Yukarıdaki örnekte olduğu gibi kelimenin iki farklı bölümünde, eğer cümle satıra sığmaz ise tarayıcı alt satıra geçecektir. Satır tüm ekrana sığıyorsa tarayıcı olduğu gibi yazıyı gösterecektir.

Bu bölümde HTML 5 ile gelen yeni etiketlerden bahsettik. Bir sonraki dersimizde HTML 5 ile gelen veri giriş tiplerinden ve özelliklerinden bahsedeceğiz.

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir