HTML 5 Yeni Medya Etiketleri

HTML 5 Yeni Medya Etiketleri
  • 20
    Nis

Gelişen web tasarım altyapılarında HTML5 ile işler şüphesiz daha da kolaylaştı. Bu yazımızda da sizlerle HTML 5 ile gelen yeni medya etiketleri nelerdir sorusunu cevaplayacağız.

HTML5’in ne olduğu hakkında şu kısa bilgiyi vermemiz gerekiyor : HTML5 internetin çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür. Dolayısıyla aşağıda bahsedeceğimiz etiketler varolanların üzerine eklenen veya yerine gelenlerdir. Etiketleri aşama aşama birer kod örneği ile paylaşarak daha anlaşılabilir bir hale getirelim.

Medya Etiketleri

<audio>

<audio src="muzik.mp3" controls>Tarayıcınız bu etiketi desteklemiyor.</audio>

src özelliğine çalınacak ses dosyasının linkini eklememiz gerekiyor. Kod içerisinde bulunan controls özelliği ise oynat, durdur, ses ayarı, tekrar çal gibi özelliklerin playerda çıkmasını sağlar.

<video>

<video width="300" height="300" controls src="film.mp4">Tarayıcınız bu etiketi desteklemiyor.</video>

Bu etiketin audio etikentinden çok bir farkı yok. Audio ses bu ise film oynatıyor. Tek fark genişlik ve yükseklik parametrelerini eklemeniz gerekebilir.

media-etiketleri

<source>

<audio controls>
<source src="muzik.ogg" type="audio/ogg">
<source src="muzik.mp3" type="audio/mp3">
</audio>

Bu örnekte tarayıcı için iki tane seçenek sunuluyor. Aynı dosyadan iki adet var fakat uzantıları farklı. Hangi uzantıyı tarayıcı destekliyorsa onu seçerek çalacaktır.

<embed>

<embed src="slayt.swf">

Embed kodu ile sayfa içerisine dışarıdan dosya gömebilirsiniz.

<track>

<audio controls>
<source src="muzik.ogg" type="audio/ogg">
<source src="muzik.mp3" type="audio/mp3">
<track src="altyazi.vtt" label="Türkçe">
</audio>

Bu etiket audio veya video etiketi ile birlikte kullanılarak dosya çalarken o dosyayla ilgili yazıların çıkmasını sağlar (altyazı vs. gibi.)

HTML5 ile gelen yeni medya etiketleri kullanım açısından eskiye göre daha avantajlı ve daha kısa. Bu nedenle yeni nesil kodlama ve arama motorlarına uyum açısından bu etiketlere dikkat etmekte fayda var. HTML ile gelen form etiketleri ve yapısal etiketleri de ayrı içeriklerle sizlerle paylaşıyor olacağız.


Bir önceki yazımız olan Domain Otoritesi Nedir ? başlıklı makalemizde domain otoritesi hakkında bilgiler verilmektedir.