HTML iFrame

iFrame nedir ve nasıl kullanılır tüm detaylar bu konumuzda.

HTML iFrame

HTML iFrame Nedir?

<iframe> etiketi ile satır içerisinde yer alan çerçevede, başka bir bağlantıdan aldığımız belge, video, resim vb. gibi materyalleri kullanabiliriz. 

Bu etiketin sözdizimi şu şekildedir: 

<iframe src="url" title="açıklama">

iFrame - Yükseklik ve Genişlik Ayarlama

iFrame'in boyutunu ayarlamak için height ve width niteliklerini kullanırız. Bu nitelikleri 2 farklı şekilde kullanabilirsiniz. Örnekler;

<iframe src="https://www.youtube.com/embed/kI3LSxdM80w" height="315" width="560" title="Sagopa Kajmer - Küreksiz Kayıtlar"></iframe>
<iframe src="https://www.youtube.com/embed/kI3LSxdM80w" style="height:315px;width:560px;" title="Sagopa Kajmer - Küreksiz Kayıtlar"></iframe>

Örneklerimizin çıktısı şu şekilde olacaktır: 

iFrame - Kenarlık Kaldırma

iFrame özelliğinin kenarlığını kaldırmak için, style özelliğinin içerisine border:none niteliğini girerseniz, kenarlıklar kalkacaktır. 

<iframe src="https://www.youtube.com/embed/kI3LSxdM80w" style="border:none;" title="Sagopa Kajmer - Küreksiz Kayıtlar"></iframe>

Konumuzun başında da belirttiğimiz gibi, src özelliğinin içerisine satır içerisindeki çerçevede görüntülemek istediğiniz herhangi bir materyali girebilirsiniz. Ben konuyu anlatırken, youtube videosu ekleyerek anlatımımı gerçekleştirdim fakat, sizler farklı materyalleri bu yapı içerisinde kullanabilirsiniz. Farklı kullanıma ufak bir örnek vererek, farklı bir html sayfasını satır içerisindeki çerçevede görüntülemek istiyorum. Gelin örneğimizi inceleyelim. 

<iframe src="https://onurkul.com.tr/html-baglanti-ekleme" style="height:315px;width:560px;" title="Onur KUL - HTML Bağlantı Ekleme"></iframe>

Örneğimizin çıktısı şu şekilde olacaktır: 

Tepkiniz Nedir?

like

dislike

love

funny

angry

sad

wow