11 - Gömülü Html5 Etiketleri

2020-11-22

Arkadaşlar merhabalar bu yazımda gömülü html5 etiketlerinden bahsedeceğim.Kısaca bu yazıda hangi etiketler anlatılacak tek bir fotoğraf ile özetleyelim.

Yukarıdaki fotoğraftan anlaşılacağı gibi audio etiketini ilk başta görecez yani sitemizin içerisine nasıl müzik ekleyebiliriz onu görecez, sonra photo yani fotoğraf ekleyeceğiz sitemize , sonra da iframe etiketi ile bir çerçeve eklenmesini göreceğiz sonra da video nasıl eklenir onu görecez.Daha doğrusu yukarıda görüyorsunuz ama ben biraz daha detayına girip yukarıdakiler nedir ona bakcaz.

Öncelikle müzik eklemek için audio etiketini kullanarak controls eklememiz gerekiyor yani kontroller eğer bunu eklemezsek siteniz göstermez.Tagımızın içerisine bir source etiketi ekledik yani kaynak , ben masaüsüme testses.mp3 adlı bir müzik dosyası indirdim , türü de audio/mpeg olacak eğer ogg kullanırsanız audio/ogg bunların detayını buradan öğrenebilirsiniz.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

Sonra da en baştaki gibi bir müzik dosyası eklenir.İkincisinin birincisinden farkı autoplay yani otomatik oynatma , direk site açılınca şarkının başlamasını istiyorsanız autoplay demeniz yeterli.Üçüncüsünün ikincinsinden farkı ise loop yani döngü otomatik oynat sitede şarkı otomatik olarak başlayacak eğer şarkı biterse otomatik olarak baştan başlatacak.

Diğer etiketimiz img yani image fotoğrafımızı ekleyeceğiz buraya source attribute yani src ekliyoruz ben masaüstüme indirdim bir foto ve adını hack.jpg yaptım burada da hack.jpg olarak belirttim width olarak yani genişlik olarak 200px height yani yükseklik olarak da 200 px verdim.

Diğer etiketimiz frame yani çerçeve ben bu çerçeve içerisine bir source verdim yani kaynak , kaynak olarak ise benim sitemin adresini yazdım . Gördüğünüz gibi benim sitemi localimde ki siteye çerçeveletip astı :)

Diğer etiketimiz video , bu etiketle videolarımızı ekliyoruz burada da içerisine source ekledik yani kaynağımız ekledik yukarıdaki verdiğim siteden de mime types ulaşabilirsiniz.Ben bi şarkı indirdim youtubeden onun adını sarki.mp4 yaptm orda da sourcesini verdim.Unutulmamalı ki video etiketine controls attributesini de vermelisiniz yoksa çalışmayabilirrr.

Bu dersimiz burada bitiyor umarım anlaşılmıştır.Kodları alta bırakıyorum.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Kerem</title>

    </head>

    <body>

        

        <audio controls>

            <source src="testses.mp3" type="audio/mpeg">

        </audio>

        <audio controls autoplay>

            <source src="testses.mp3" type="audio/mpeg">

        </audio>

        <audio controls autoplay loop>

            <source src="testses.mp3" type="audio/mpeg">

                Your browser does not support the audio element.

        </audio>

        

        <img src="hack.jpg" width="200px" height="200px"/>

        

        <iframe src="https://www.junioryazilim.com" width="500px" height="400px">

            <p>Your browser does not support iframe </p>

        </iframe>

        

        <video width="400" height="400" controls>

            <source src="sarki.mp4" type="video/mp4">

        </video>

    </body>

</html>