HTML 5 Nedir?

Html 5 Nedir?

Sitemizdeki bu konudan önceki tüm Html konuları HTML 4.1 verisoyunu kullanılarak anlatılmıştır. Şu an itibariyle dünyada en çok kullanılan Html versiyonu da yine Html 4.1 versiyonudur. 

Html 5 versiyonu henüz deneme aşamasında olsa da tarayıcıların son versiyonları ile gayet uyumlu çalışabilmekte ve gereksiz kod kalabalığının önüne geçmek için büyük avantajlar sağlamaktadır. 

Html 5'in getirdiği en büyük yenilik, yeni Html etiketleridir. Header, section, nav, footer gibi bir çok yeni etiket kullanıma girmiştir. Bu yeni etiketlerin isimleri web tasarımcıların tercihleri incelenerek belirlenmiştir.

Yapılan araştırmalarda web tasarımcıların, sitenin başlık bilgilerini yerleştirmek için kullandıkları katmana (div) en çok "header" ismini verdikleri görülmüş ve bu isimde yeni bir etiket oluşturulmuştur.

Dolayısıyla eskiden <div id="header"> şeklinde oluşturduğumuz başlık kısmını, artık <header> etiketi ile oluşturabiliriz. Yine amacına uygun diğer etiketleri de kullanarak, sayfalarımızı Html 5 ile kolayca ve sade bir biçimde hazırlayabiliriz.

Öncelikle Html 5 ile gelen yeni etiketlerin en önemlilerine bir göz atalım. Burada yer almayan diğer etiketleri, internet ortamında arayarak bulabilirsiniz.

Html 5 Etiketleri

header etiketi

Sitenin ya da sayfanın başlık bilgileri burada yer alır.

section etiketi

Sitelerin ana içerik kısmını içine alır.

article etiketi

Makale tarzında, konu anlatım ve metinsel içeriklerin yer aldığı kısımdır.

footer etiketi

Sitenin en altında bulunur. Alt bilgileri içerir.

nav etiketi

Menü gibi elemanlar ile sitede navigasyonun sağlandığı kısımdır.

hgroup etiketi

H1, H2 gibi elemanların bir arada gruplanmasıyla oluşan başlık grubudur. Birden fazla başlık etiketi kullanılacaksa hgroup etiketi içerisine alınabilir.

embed etiketi

Geçmişte flash animasyon (swf) dosyalarını sayfamıza yerleştirmek için çok kullanılırdı. Embed etiketi ile sayfamıza resim, ses, video, animasyon gibi çok farklı türde dosyalar ekleyebiliriz.

<embed src="animasyon.swf" width="400" heigth="300" ></embed> şeklinde kullanılabilir.

embed etiketi içerisinde type parametresi ile ilgili dosyanın türü (MIME türü) belirtilir. Örneğin mp4 dosyası eklemek için type parametresi şu şekilde kullanılır:

<embed src="ders.mp4" type="video/mp4" width="400" heigth="300" ></embed> şeklinde kullanılabilir.

Type parametresine yazılacak değer dosyanın türüne bağlıdır. Tüm MIME türlerinin listesine ulaşmak için tıklayabilirsiniz.

video etiketi

Video dosyasını sayfamızda istediğimiz yere eklemeye yarar. Bir çok video formatı desteklenmektedir.

<video width="320" height="240" autoplay>
  <source src="ders1.mp4" type="video/mp4">
  <source src="ders1.ogg" type="video/ogg">
Tarayıcınız bu dosyayı desteklemiyor.
</video>

Yukarıdaki örnekte olduğu gibi hangi dosyanın kullanılacağı source etiketi ile belirtilir. Birden fazla source etiketi kullanılmasının sebebi ziyaretçinin tarayıcısı ilk dosyayı çalıştıramazsa ikinciyi denesin diyedir. Şayet hiçbir dosya çalıştırılamazsa en sondaki metin videonun yerine görüntülenecektir.

audio etiketi

Sayfaya ses oynatıcı bir modül ekleyerek istenen ses dosyasının çalınmasını sağlar.

figure etiketi

Konuyla alakalı görseller, grafikler vb burada yer alır. <figcaption> etiketi kullanılarak kullanılan nesneye alt bilgi verilebilir.

<figure>  
<img src="images/resim1.jpg" />
<figcaption>Açıklamayı buraya yaz..</figcaption>
</figure>

aside etiketi

Bulunduğu yerdeki içerik ile ilgili önemli ve alakalı bilgiler aside etiketleri arasına yazılabilir.

mark etiketi

Yazı içerisinde özellikle üstünde durulan, anahtar kelimeleri belirler. Arama motorları açısından çok önemlidir. 

canvas etiketi

Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.

progress etiketi

İşlem süreci göstergesi ekler.

<progress value="90" max="100"> </progress> Şeklinde kullanıldığında yüzde 90'ı dolmuş bir gösterge çubuğu görünecektir.

caption etiketi

Başlık olarak düşünülen metinleri düzenler.

<table border=”1″>  <caption>Monthly savings</caption>  <tr> .......

details ve summary etiketleri

Bir başlığa tıklandığında alta doğru açılarak, içerik kısmının görüntülenmesi ya da gizlenmesini sağlayan yapıdır. Normalde jquery ya da javascript ile yapılabilecek bu iş son derece basitleştirilmiştir. 

<details open="open">
İçerik yani yazı, resim vb...
<summary>Başlık</summary>
</details>

Ancak bu etiketler şu an için sadece Chrome üzerinde çalışmaktadır. :(

time etiketi

Tarih ve saat verilerini kapsar.

datalist etiketi

Açılır liste gibi elemanlara otomatik tamamlama özelliği verilmesini sağlar. Yani kullanıcı fare ile listeden seçebileceği gibi kutuya yazarken olası seçenekler altta gösterilir. Bu özellikde şimdilik sadece Chrome'da çalışmaktadır.

<form action="" method="post">
<input list="iller" name="iller">
<datalist id="browsers">
  <option value="İstanbul">
  <option value="Ankara">
  <option value="İzmir">
  <option value="Bursa">
  <option value="Antalya">
</datalist>
</form>

 

html 5 örnekleri, html 5 etiketleri, html 5 nasıl kullanılır, yeni html 5 özellikleri, resme alt bilgi ekleme, web sayfasına video ses ekleme

KONU İLE İLGİLİ ÖRNEKLER

Html 5 ile yapılmış sayfa örneği ve kodları - 2 Kendin Dene

div ile sayfa oluşturma

Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.

Örnekte header, section, article ve footer etiketleri css ile biçimlendirilerek bir sayfa oluşturulmuştur.

Html 5 ile yapılmış sayfa örneği ve kodları Kendin Dene

div ile sayfa oluşturma

Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.

Örnekte header, section, article ve footer etiketleri css ile biçimlendirilerek bir sayfa oluşturulmuştur.



YORUMLAR




9309  kez okundu.

Online Kullanıcı Sayısı 663



HTML-5-Nedir