HTML DERSLERİ ANASAYFA ÖNCEKİ DERS SIRADAKİ DERS
Konu başlığına tıklayarak detayları görebilirsiniz!!!
HTML sayfamıza medya eklemek için kullandığımız etiketler medya etiketleridir. Audio (ses) ve video (görüntü) dosyalarını eklemek için kullandığımız etiketlerdir.
Ses dosyaları için <audio> </audio> etiketlerini kullanıyoruz. Bu etiketlerin içerisinde oynatma düğmelerinin çıkması için controls niteliğini belirtmemiz gerekiyor. Sonrasında ise audio etiketlerimiz arasında <source> etiketi ile kullanmak istediğimiz ses dosyasının yolunu src niteliğini kullanarak belirtmemiz gerekiyor. Ayrıca type niteliğini de kullanarak ses dosyasının türünü de belirtmemiz gerekiyor. HTML'de tür için mime type öğesini kullanıyoruz, google'da "mp3 mime type" gibi bi arama yaptığınızda büyük ihtimalle size mpeg türünü verecektir. Bunu diğer türler içinde aratıp türü ona göre yazabilirsiniz.
<audio> eitketi içerisinde iki adet nitelik daha kullanabiliriz. Bunlardan birisi loop yani çalan ses dosyamınız sona geldiğinde başa dönerek tekrar tekrar çalmasını sağlar. Diğeri ise muted yani kullanıcı sayfamızı açtığında ses dosyamız default olarak sesi kısık şekilde sitemize yerleştirilmiş olur. Kullanıcı isterse daha sonra sesi kendisi açabilir.
<audio controls loop muted>
<source src="Dua Lipa-Love is a Religion.mp3" type="audio/mpeg">
</audio>
İkinci medya etiketimiz ise video etiketleridir. Bunun için de <video> </video> etiketlerini kullanıyoruz. Yine <source> etiketi ile kullanmak istediğimiz video dosyasının yolunu src niteliğini kullanarak belirtmemiz gerekiyor. type niteliği ile de videomuzun mime type olarak türünü belirtmemiz gerekiyor. Ben mp4 kullandığım için mp4 olarak belirtiyorum.
Yine audio etiketinde olduğu gibi oynatma düğmelerininin çıkması için <video> etiketi içerisinde controls niteliğini ve loop niteliğini kullanarak videomuz sona geldiğinde başa dönmesini sağlayabiliriz. Ayrıca oynatma ekranının büyüklüğünü ayarlamak için de genişliği değiştirmek için width="400" niteliğini ve yüksekliği ayarlamak için height="300" gibi nitelikleri de kullanabiliriz.
<video controls loop width="400" height="300" >
<source src="deneme.mp4" type="video/mp4">
</video>
Bunların dışında bir de poster="avengers.png" şeklinde bir nitelik kullanırsanız eğer seçtiğiniz resim dosyası ilk olarak video da belirir.
Son olarak videolarda altyazı eklemel için ise <track> etiketini kullanıyoruz. Yine içerisinde src="altyazi.vtt" niteliğini kullanarak altyazının yolunu belirtebilirsiniz. kind="subtitles" niteliği ile türünü belirtiyoruz. srclang="en" ile dili belirtebilirsiniz ingilizce için "en" gibi. label="İngilizce" yani kullanıcının göreceği kısımda da dilin açıklamasını yazabiliriz. Bu kullanım standart bir kullanımdır ama kaynak altyazı dosyalarınızın da aynı sunucu da olması gerekiyor. O nedenle burada örnek olarak göstermedim.
TOPLU DERS KODU:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ders11_Medya_Etiketleri</title> </head> <body> <audio controls loop muted> <source src="Dua Lipa-Love is a Religion.mp3" type="audio/mpeg"> </audio> <br> <br> <video controls loop width="400" height="300" > <source src="deneme.mp4" type="video/mp4"> </video> </body> </html>
TARAYICI EKRAN GÖRÜNTÜSÜ:
Iframe ile HTML'de sayfamız içerisinde başka bir sayfayı gösterebiliriz. Bunun için eklediğimiz sayfanında kendi sayfamıza eklenmeye açık olması gerekiyor. Mesela google adresini denersek bize açmayacaktır. Çünkü google buna izin vermiyor.
Herhangi bir sayfayı kendi sayfamız içerisinde gösterebilmek için <iframe> </iframe> etiketini kullanıyoruz. <iframe> etiketi içerisinde src niteliğini kullanarak açmasını istediğimiz sayfayı belirtiyoruz. width niteliğini kullanarak tırnaklar içerisinde açmasını istediğimiz genişlik boyutunu ve height kullanarak da yükseklik boyutunu belirtebiliriz. Aynı şekilde src kısmına bir youtube veya google maps linki yazarsak bunlarıda sayfamızda otomatik olarak görebileceğiz. Hem youtube hem de google maps için kendi share kısımlarından da otomatik bize <iframe> linklerini veriyor zaten. Bunun yanı sıra kendimize ait başka bir html dosyasını açmak için de src içerisinde yolunu belirtmemiz yeteli olacaktır.
<iframe src="https://orhanes.com" width="500" height="800"></iframe>
TARAYICI EKRAN GÖRÜNTÜSÜ:
TOPLU DERS KODU:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ders12_Iframe_Etiketi</title> </head> <body> <iframe src="https://orhanes.com" width="500" height="800"></iframe> </body> </html>
