HTML5 Kodları

html5

HTML5 Nedir?

HTML5, HyperText Markup Language adıyla da bildiğimiz HTML dilinin 5. sürümüdür. İnternet teknolojileri sürekli güncellenmekte olduğundan HTML dili de ortaya çıktığı günden itibaren sürekli güncellenmiş ve beşinci sürüme kadar gelmiştir. HTML5 henüz deneme aşamasında kabul edilse de neredeyse tüm tarayıcıların güncel sürümleri HTML5 desteği sunmaktadır. Alışageldiğimiz diğer sürümleri değil de neden HTML5 kullanmalıyız derseniz HTML5’in avantajları arasında en büyük pay daha az kod kullanacak olmamızdır. Ayrıca video ve ses etiketleri sayesinde web uygulamalarında da kolaylık sağlamaktadır. Kodlama yaparken kullanacağımız HTML5 etiketleri ile de daha düzenli ve anlaşılır kod bloklarına sahip olabilirsiniz; hatalarınızı da oldukça hızlı çözümleyebilirsiniz.

HTML5 Etiketleri

HTML5 ile gelen yeni elementler aşağıda sıralanmıştır:

<template>, <section>, <nav>, <article>, <aside>, <header>, <footer>, <main>, <figure>, <figcaption>, <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <wbr>, <embed>, <video>, <audio>, <source>, <track>, <canvas>, <svg>, <math>, <datalist>, <keygen>, <output>, <progress>, <meter>, <details>, <summary>, <menuitem>, <menu>

Listede yer alan elementlerden önemli gördüklerimi edindiğim bilgiler ve deneyimlerim çerçevesinde açıklamaya çalışacağım. Fakat açıklamaya başlamadan önce HTML5 doctype hakkında bilgi vermek istiyorum. HTML5 burada da oldukça sade bir kullanım tercih etmiş, aşağıda görüldüğü şekilde doctype tanımlaması yapabilirsiniz:

<!DOCTYPE html>

<audio> ve <video> Etiketleri

Bu elementleri isimlerinden az çok anlayabiliyoruz. Web sitelerin çoğunda ses olsun, video olsun çeşitli medya içerikleriyle karşılaşıyoruz. Böyle büyük öneme sahip bir içeriğe ait HTML etiketi olmaması büyük eksiklikti ve HTML5 ile bu sorunun üstesinden rahatlıkla gelebilirsiniz. audio elementi örnek kullanımı:

<audio src="ses.ogg" autoplay>
Tarayıcınız <i>audio</i> elementini desteklememektedir.
</audio>

Detaylı özelliklerine göz atmak isterseniz burayı ziyaret edebilirsiniz.

video elementi örnek kullanımı:

<video src="video.ogg" autoplay poster="poster.jpg">
Üzgünüz, tarayıcınız <i>video</i> elementini desteklememektedir
ama <a href="video.ogg">buraya tıklayarak</a> video dosyasını indirebilirsiniz.
</video>

Detaylı özelliklerine göz atmak isterseniz burayı ziyaret edebilirsiniz.

<iframe> Etiketi

iframe elementi kullanırken dikkat etmeniz gereken en önemli madde alışık olduğumuzun dışında frameborder=”0″ şeklindeki kullanımın tarihe karışması ve border tanımını CSS üzerinden yapılmasıdır. frameborder yerine style=”border:0;” yazarak bu sorunu çözebilirsiniz.

iframe elementi örnek kullanımı:

<iframe width="200px" height="100px" style="border:0;" src="http://website">

<figure> ve <figcaption> Etiketleri

Resimleriniz için kullanabileceğiniz bir elementtir. <figcaption> ile de <figure> elementinin başlığını belirleyebilirsiniz.

<header> Etiketi

header sayfamızın üst kısmını temsil etmektedir. Bu element sayesinde sayfanızın üst kısmını belirtebilirsiniz.

<nav> Etiketi

nav sayfamızdaki menü bölümünü temsil etmektedir. Bu element sayesinde genellikle header kısmının altında bulunan menü bölümünüzü belirtebilirsiniz.

<aside> Etiketi

aside elementi daha önceden kullandığımız sidebar etiketine benzer biçimdedir. Yan menülerinizi belirtmek için kullanabilirsiniz.

<article> Etiketi

Sayfanızın içerik bölümünü article elementini kullanarak belirtebilirsiniz.

<section> Etiketi

Sayfalarınızı bölümlere ayırmak için section elementini kullanabilirsiniz.

<footer> Etiketi

Yabancısı olmadığınız bir bölüm olan footer yani sitenin alt kısmı footer elementi kullanılarak belirtilebilir.

HTML5 İle Neler Değişti?

HTML5’den önce çok fazla div etiketi kullanılıyordu ve bu da düzensizliği beraberinde getiriyordu. Aşağıda buna bir örnek görebilirsiniz:

eski html

HTML5 ile birlikte artık daha düzenli, anlaşılır ve duyarlı kodlar yazma olanağı oluştu. HTML5 ile kodlanmış bir örnek bir web site inceleyecek olursak en kaba tabir ile şu şekildedir:

yeni html5

Görüldüğü gibi çok daha düzenli, belirgin bir kodlamaya olanak sağlıyor.

Örnek Şablonu GörüntüleÖrnek Şablonu İndir

Tasarımınızı yaptıktan sonra HTML5 standartlarına uygun olup olmadığını kontrol etmek için buradaki adresi kullanabilirsiniz.

 

Kaynaklar:

04.05.2014 HTML Yorum yapılmamış

, , , , ,

Yorum yapılmamış

Yorum Yazın

kod.gen.tr