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
|
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
|
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.
10024 kez okundu.