<iframe>
<iframe> elemanı ile bir başka dokümanın mevcut HTML sayfası içerisinde gösterilmesi sağlanır. Bu eleman bilinen tüm tarayıcılar tarafından desteklenmesine rağmen mevcut sayfaya çekilecek dokümanın gösterilememesi durumuna tedbir olarak etiketlerin arasına alternatif bir yazı yazılabilir.
Gösterilecek dokümanın adresi src niteliğinin karşısına girilir ve oluşturulacak çerçevenin genişliği ve yüksekliği sırasıyla width ve height niteliklerinin karşısına yazılır. Bu niteliklerin karşısına yazılan değerler piksel olarak değerlendirilir fakat istenirse sayının sonuna yüzde işareti yazılarak yüzde cinsinden de ölçü belirtilebilir.
Çerçeveye name niteliği ile isim verilebilir. Link hedefi olarak çerçeve gösterileceğinde bu isim kullanılabilir. Çerçevede bir başka doküman göstermek yerine çerçevenin içeriği de belirtilebilir. Bu durumda srcdoc niteliği karşısına çerçevenin içereceği kod yazılır. srcdoc niteliği src niteliği ile doküman belirtilirse bunun yok sayılmasına sebep olur. srcdoc niteliği yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.
seamless niteliği bir değere eşitlenmeden kullanılır ve HTML5 standartlarına göre bu nitelik kullanıldığında çerçeve gösterildiği sayfanın bir parçası gibi görüntülenir, sınırlar ya da kaydırma çubukları görüntülenmez.
sandbox niteliği ile çerçeve için ekstra kısıtlamalar oluşturulabilir. Bu nitelik boş olarak, yani sanbox="" şeklinde kullanılırsa çerçeve tanımlanan her türlü kısıtlamaya maruz kalır. Bu durumda çerçeve içerisindeki formlar ve scriptler çalışmaz, çerçeve içerisindeki içerik pop-up pencereler açamaz, kendisini içeren sayfada başka bir içerik gösterilmesini sağlayamaz ve gösterilen içerik çerçeveyi içeren sayfayla aynı sunucudan olsa bile başka bir sunucudan gelmiş gibi muamele görür -örneğin bu sitenin çerezlerini okuyamaz. Bu kısıtlamalardan bazılarını kaldırmak için sırasıyla allow-forms, allow-scripts, allow-popups, allow-topnavigation ve allow-same-origin değerleri kullanılabilir. Bu değerlerden birden fazlası bir arada kullanılmak istenirse aralarına boşluk konulmalıdır. Aşağıdaki örnek form gönderme dışındaki tüm kısıtlamaları çerçeveye eklemiştir. Bu nedenle koddaki script çalışmayacaktır. Örneği denemek için aşağıdaki kodları içerden iki HTML dosyası oluşturmalı ve alttaki HTML dosyasını "cerceve.html" olarak adlandırmalısınız. İki dosya da aynı klasör içerisinde olmalıdır. İlk dosyanız ikinci dosyayı görüntüleyecektir.
<!DOCTYPE html>
<html>
<head>
<title>Çerçeve</title>
</head>
<body>
<iframe src="cerceve.html" width="1000" heigth="500" sandbox="allow-forms">
</iframe>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Çerçeve</title>
</head>
<body>
<form action="">
İsim:<input name="isim" type="text"><br>
Soyisim: <input name="soyisim" type="text"><br>
<br>
<br>
<input type="submit">
</form>
<script>
document.write("Bu yazı JavaScript ile yazılmıştır.");
</script>
</body>
</html>
sandbox niteliğinin karşısındaki değeri boş bırakmanız, yani bu niteliği sandbox="" şeklinde kullanmanız durumunda form da çalışmayacaktır. Fakat örnekte bu görülemez çünkü form zaten bir sunucuya gönderilmemektedir. Eğer sandbox niteliği sandbox="allow-forms allow-scripts" şeklinde kullanılsaydı bu sefer JavaScript kodu da çalıştırılacaktı.
<embed>
<embed> elemanı ile sayfanın içerisine dış kaynaklı bir uygulama eklenebilir. src niteliği ile bu uygulamanın adresi, width ve heigth nitelikleri ile sırasıyla uygulamanın gösterileceği alanın piksel cinsinden genişliği ve yüksekliği type niteliği ile gösterilecek uygulamanın medya tipi belirtilir. Medya tipleri için arama motorlarında "IANA types" şeklinde arama yapılabilir. <embed> elemanı kapanış etiketi olmadan kullanılır.
<!DOCTYPE html>
<html>
<head>
<title>Embed</title>
</head>
<body>
<embed src="https://dl.dropboxusercontent.com/u/53524685/banner.swf" width="1000" heigth="200" type="application/vnd.adobe.flash-movie">
</body>
</html>
<object> ve <param>
<object> elemanı ile de video, audio, Flash animasyonu gibi multimedya dosyaları sayfanın içine gömülebilir. Bu eleman açılış ve kapanış etiketleriyle kullanılır. Etiketlerin arasına yazılan yazı tarayıcı tarafından gömülen içeriğin görüntülememesi durumunda gösterilmesi için bir alternatiftir.
data niteliğinin karşısına gömülecek içeriğin adresi yazılır. type niteliği ile ise gömülecek dosyanın medya tipi belirtilir. Bu tiplerin toplu listesi için "MIME types" ya da "IANA types" şeklinde arama yapılabilir.
width ve height niteliklerinin karşısına piksel olarak gömülen dosyanın gösterileceği alanın sırasıyla genişliği ve yüksekliği girilir.
name niteliği ile <object> elemanına isim verilebilir. form niteliği ile de <object> elemanının bir forma bağlanabileceği HTML5 standartlarınca belirtilmiştir fakat yazının yazıldığı an itibarı ile form niteliğini destekleyen tarayıcı bulunmamaktadır.
Gömülecek dosyanın görsel olması durumunda usemap niteliği ve <map> elemanları ile tıklanabilir alanlar oluşturulabilir. Bunu <object> elemanı ile yapmak <img> elemanında yapmayla aynıdır. Bu işlem Görseller kısmında <img> elemanı için anlatılmıştır.
<param> elemanları <object> elemanlarının içine yerleştirilir ve gömülen içerik hakkında parametrelerin girilmesini sağlarlar. <param> elemanı kapanış etiketi olmadan name ve value nitelikleri ile kullanılır. Bu niteliklere girilebilecek değerler gömülen multimedyayı çalıştıracak olan eklentinin dokümanlarında bulunabilir.
<!DOCTYPE html>
<html>
<head>
<title>Object</title>
</head>
<body>
<object data="https://dl.dropboxusercontent.com/u/53524685/banner.swf" width="1000" heigth="200" type="application/vnd.adobe.flash-movie">
<param name="bgcolor" value="#000000">
</object>
</body>
</html>
Yukarıdaki örnek <embed> elemanı için verilen örnekteki ile aynı animasyon dosyasını sayfaya gömmektedir. Adobe firmasının sitesinde Flash Player için verilen parametre isim ve değerlerinden bgcolor ismi ve siyah renk değeri <param> elemanında kullanılarak animasyonun arka plan rengi siyah yapılmıştır.
<audio>
<audio> elemanı ile sayfaya ses dosyası eklenebilir. Standartlara göre kullanılabilecek dosya türleri MP3, ogg ve wav ile sınırlandırılmıştır. Bununla birlikte her tarayıcı her dosya türünü desteklememektedir. Hangi tarayıcının hangi dosya türlerini desteklediğini görmek için aşağıdaki tabloya bakılabilir.
MP3
|
WAV
|
OGG
|
|
Internet Explorer
|
+
|
-
|
-
|
Mozilla Firefox
|
+
|
+
|
+
|
Google Chrome
|
+
|
+
|
+
|
Opera
|
-
|
+
|
+
|
Safari
|
+
|
+
|
-
|
src niteliği ile ses dosyasının adresi belirtilir. preload niteliği ile sayfa yüklendiğinde ses dosyasının da yüklenip yüklenmeyeceği belirtilir. Fakat autoplay niteliğinin kullanılması durumunda bu nitelik yok sayılır, tarayıcı başka durumlarda da bu niteliği yok saymakta serbesttir. Bu niteliğin alabileceği üç değer vardır: auto değeri sayfa yüklendiğinde ses dosyasının da yükleneceğini belirtir, metadata değeri sadece meta verinin yükleneceğini söylerken, none değeri ses dosyasının yüklenmemesi gerektiğini söyler. preload niteliği yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.
autoplay niteliği ses dosyasının sayfa yüklenir yüklenmez çalışmasını sağlar. loop niteliği ile ses dosyasının tekrar tekrar çalınması sağlanır. muted niteliği kullanıldığında ses dosyasının sesi kapalı olur. controls niteliği kullanıldığında ses dosyasının oynatılması ile ilgili butonlar görüntülenir. Bu dört nitelik de bir değere eşitlenmeden kullanılır. muted niteliği yazının yazıldığı an itibarı ile Safari tarafından desteklenmemektedir.
<audio> niteliği açılış ve kapanış etiketleriyle birlikte kullanılır. Etiketler arasında ses dosyasının çalışmaması durumunda gösterilecek alternatif bir yazı yazılabilir.
<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<audio src="https://dl.dropboxusercontent.com/u/53524685/twinkle.mp3" controls muted>
</audio>
</body>
</html>
Yukarıdaki örnekte butonlar görüntülenecek ve başlangıçta ses dosyasının sesi kısılmış olacaktır.
<video>
<video> elemanı ile sayfaya video dosyası eklenebilir. Standartlara göre kullanılabilecek dosya türleri MP4, ogg ve WebM ile sınırlandırılmıştır. Bununla birlikte her tarayıcı her dosya türünü desteklememektedir. Hangi tarayıcının hangi dosya türlerini desteklediğini görmek için aşağıdaki tabloya bakılabilir.
MP4
|
WebM
|
OGG
| |
Internet Explorer
|
+
|
-
|
-
|
Mozilla Firefox
|
+
|
+
|
+
|
Google Chrome
|
+
|
+
|
+
|
Opera
|
-
|
+
|
+
|
Safari
|
+
|
-
|
-
|
width ve height nitelikleriyle sırasıyla videonun gösterileceği alanın genişlik ve yüksekliği piksel cinsinden belirtilebilir. poster elemanının karşısına da bir görsel dosyasının adresi girilebilir. Bu görsel video oynatılana kadar videonun gösterileceği alanda gösterilir.
src niteliği ile video dosyasının adresi belirtilir. preload niteliği ile sayfa yüklendiğinde video dosyasının da yüklenip yüklenmeyeceği belirtilir. Fakat autoplay niteliğinin kullanılması durumunda bu nitelik yok sayılır, tarayıcı başka durumlarda da bu niteliği yok saymakta serbesttir. Bu niteliğin alabileceği üç değer vardır: auto değeri sayfa yüklendiğinde video dosyasının da yükleneceğini belirtir, metadata değeri sadece meta verinin yükleneceğini söylerken, none değeri video dosyasının yüklenmemesi gerektiğini söyler. preload niteliği yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.
autoplay niteliği video dosyasının sayfa yüklenir yüklenmez çalışmasını sağlar. loop niteliği ile video dosyasının tekrar tekrar çalınması sağlanır. muted niteliği kullanıldığında video dosyasının sesi kapalı olur. controls niteliği kullanıldığında video dosyasının oynatılması ile ilgili butonlar görüntülenir. Bu dört nitelik de bir değere eşitlenmeden kullanılır.
<video> niteliği açılış ve kapanış etiketleriyle birlikte kullanılır. Etiketler arasında video dosyasının çalışmaması durumunda gösterilecek alternatif bir yazı yazılabilir.
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video src="https://dl.dropboxusercontent.com/u/53524685/twinkle.mp4" width="300" height="300" controls>
</video>
</body>
</html>
<source>
<source> elemanı ile bir <audio> ya da <video> elemanına birden fazla ses ya da video dosyası adresi girilebilir. Tarayıcı bu dosyalardan hangisini oynatacağını kendi seçer. Örneğin çalınmak istenen bir şarkının MP3 ve .vaw versiyonları eklenip tüm tarayıcıların şarkıyı çalması sağlanabilir.
<source> elemanı kapanış etiketi olmadan kullanılır. src niteliği ile dosyanın adresi ve type niteliği ile dosyanın tipi belirtilir. media niteliği ile de ses ya da video dosyasının hangi ortam için optimize edildiğinin belirtilebileceği HTML5 standartları ile belirtilmiştir. Fakat bu nitelik yazının yazıldığı an itibarı ile hiçbir tarayıcı tarafından desteklenmemektedir.
<audio> ve <video> elemanları için kullanılabilecek dosyaların MIME tipleri için aşağıdaki tablo kullanılabilir.
Ses
|
Video
|
||
Dosya türü
|
MIME tipi
|
Dosya türü
|
MIME tipi
|
MP3
|
audio/mpeg
|
MP4
|
video/mp4
|
Wav
|
audio/wav
|
WebM
|
video/webm
|
Ogg
|
audio/ogg
|
Ogg
|
video/ogg
|
<source> kodunun kullanımını görmek için aşağıdaki örnek incelenebilir.
<!DOCTYPE html>
<html>
<head>
<title>Source</title>
</head>
<body>
<audio controls>
<source src="https://dl.dropboxusercontent.com/u/53524685/twinkle.mp3" type="audio/mpeg">
<source src="https://dl.dropboxusercontent.com/u/53524685/twinkle.wav" type="audio/wav">
</audio>
</body>
</html>
<track>
<track> elemanı ile video dosyalarına yazı eklenebilir. label niteliği ile yazı dosyaları etiketlendirilebilir. src niteliği ile yazı dosyasının adresi srclang niteliği ile de yazı dosyasının dili belirtilir. kind niteliği ile yazının türü belirtilir. Bu niteliğin alabileceği beş değer vardır. captions efektleri, subtitles alt yazıları, chapters kısım başlıklarını, descriptions video hakkındaki açıklamaları, metadata video hakkındaki teknik bilgileri göstermek için kullanılabilir. default niteliği bir değere eşitlenmeden kullanılır ve seçilen yazı dosyasının kullanıcı herhangi bir seçim yapmadığı sürece varsayılan olacağını belirtir.
Track Örneği
<!DOCTYPE html>
<html>
<head>
<title>Track</title>
</head>
<body>
<video controls>
<source src="twinkle.mp4" type="video/mp4">
<track src="altyazi_tr.vtt" kind="subtitles" srclang="tr" label="turkce" default>
</video>
</body>
</html>
Yukarıdaki örnek dosyadaki HTML dosyası yukarıda yazılmış olan kodu içermektedir. Fakat bu örneğin düzgün çalışabilmesi için HTML dosyası bir sunucu üzerinde çalıştırılmalı ve sunucu .vtt dosyalarını text/vtt MIME tipi ile sunacak şekilde ayarlanmalıdır.
<canvas>
<canvas> elemanı içerisine grafik çizilebilen bir dikdörtgen tanımlar. height ve width nitelikleri ile sırasıyla dikdörtgenin yükseklik ve genişliği piksel cinsinden belirtilir. <canvas> elemanının içerisine çizilecek grafik JavaScript gibi bir kodlama dili ile yapılır. <canvas> elemanı açılış ve kapanış etiketleriyle kullanılır ve etiketlerin arasına <canvas> elemanının gösterilememesi durumunda gösterilecek alternatif bir yazı yazılabilir.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="ornek_canvas" height="300" width="300">
</canvas>
<script>
var a = document.getElementById("ornek_canvas");
var ctx = a.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,120,0,2*Math.PI);
ctx.stroke();
</script>
</video>
</body>
</html>
Yukarıdaki örnekte bir <canvas> elemanı oluşturulmuş ve bunun içerisine bir çember çizdirilmiştir.