Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde ID Kullanımı adlı yazımızda HTML’de ID kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 12 – ID Kullanımı linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML Iframe konusuna gözatıp, HTML’de iframe kullanımını inceleyip , web sitelerimizin içine başka web sitelerini gömmeyi öğreneyeceğiz.



Iframe Nedir ? Iframe etiketi HTML sayfamızda, herhangi bir web sitesini gömmemize yaramaktadır.Eski bir teknik olsa da, yinede bazı yerlerde kullanım ihtiyacı doğmaktadır. <iframe> etiketi ile bir Iframe tanımlanır. Aşağıda Iframe kullanımı örneği görmektesiniz ;

ÖRNEK KULLANIM
<iframe src="URL"></iframe>


Iframe etiketi içerisinde src parametresine görüntülemek istediğimiz URL (Web Adresi) yazmamız yeterlidir.

Iframe – Yükseklik ve Genişlik Ayarları

Iframe boyutunu belirlemek için height ve width parametreleri kullanılır.

Yükseklik ve Genişlik değerleri varsayılan olarak piksel cinsinden belirtilir, ancak bunlar yüzde cinsinden de (“% 80” gibi) olabilir.

ÖRNEK KULLANIM
<iframe src="https://www.google.com" height="200" width="300"></iframe>


Diğer bir seçenek ise Iframe yüksekliği ve genişliği ayarlamak için style parametresi ile CSS kullanabiliriz.
<iframe src="https://www.google.com" style="height:200px;width:300px;"></iframe>


Iframe – Border(Çerçeve) Kaldırma

Varsayılan olarak Iframe çerçeveli (border) olarak gelir. Bu çerçeve kalınlığını kaldırmak veya düzenlemek için CSS kullanmak gerekir.

Border(Çerçeve) Kaldırma
<iframe src="https://www.google.com" style="border:none;"></iframe>


Çerçeve kalınlığını kaldırmak için style parametresi içerisine border:none; kodunu yazmamız yeterlidir.

Tebrikler! Bu derste HTML’de Iframe Kullanımını, Ifame kavramını , HTML’de Iframe Genişlik ve Yükseklik ayarlamalarını, HTML’de Iframe Çerçeve (Border) kaldırma kullanımını öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.

HTML Derslerinin onüçüncü kısmı olan dersimizde , HTML’de Iframe Kullanımı konusunu öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !