HTML İle Iframe Kullanımı


HTML İle Iframe Kullanımı


IFrame sözcüğü Inline Frame’in kısaltılmış halidir . Web tasarlama konusundaki en güçlü etiketlerdendir (tag ) . 
HTML dökümanlarımıza farklı sitelerden , kanallardan video , harita , haber , hava durumu vb. gibi içerikleri eklemek için kukllanılan kod yapısıdır . 
Bir çoğumuz internet üzerinde farklı farklı web sitelerinde çeşitli işlemler yapmışızdır . Ve yine bir çoğumuz örneğin YouTube dışındaki sitelere yerleştirilmiş bir çok farklı YouTube videosu görmüşüzdür . 
Muhtemelen o web sayfanın web tasarımcısı o web sitesinin web sayfasına iFrame etiketi eklemiştir .
Fakat unutulmamalıdır ki  iFrame etiketi gereğinden fazla kullanılmamalıdır . Web sayfalarımızı yavaşlatabilir ve güvenlik riski oluşturma ihtimali vardır .

Kodumuz ve Kullanım Şekli

<iframe src="içerik adresi"> .......... </iframe>
Şimdi iki uygulama örneği ile iframe etiketimizin nasıl kullanılacağını görelim . 

Youtube ile iframe etiketimizin nasıl kullanıldığını öğrenmeye başlayalım . 



Öncelikle youtube web sitesine giriş yapalım ve web sitemize eklemek istediğimiz videoyu bulalım . Ardından o videonun altında yer alan Paylaş komutuna tıklayalım . 

Paylaş komut düğmesine tıkladığımızda karşımıza gelen mini iletişim penceresinde , bu videoyu nerede paylaşmak istediğimize dair seçenekler sunulmuştur . 
Biz bu videoyu web sitemize yerleştirmek istiyoruz . Bu yüzden yerleştir komutunu tıklayalım . 

Yerleştir komutunu tıkladığımızda web sitemiz bize hemen iframe kodunu verecektir . Bizde bu kodu kopyalayacağız . 
Kodumuzu kopyaladıktan sonra HTML editörümüzü açıyoruz . 

Ve kopyalamış olduğumuz kodları HTML editörümüze yapıştırıp , HTML dökümanımızı kaydediyoruz . 
HTML dökümanımızı tarayıcımızda görüntülediğimizde ise videomuzun görüntülendiğini görebiliriz. 

Haritalar ile iframe etiketimizin nasıl kullanıldığını görelim . 

İnternet destek alabileceğimiz birçok harita servisi mevcuttur . Arama motorumuza haritalar yazalım , harita servisi alabileceğimiz siteleri göreceğiz . 

Ben Google Haritalar ' a giriş yapıyorum . 

İstediğim konumu belirliyorum . 


Konumunu belirlediğimiz haritadan , varış noktasının üzerine bir kez tıklayalım . 


Varış noktasının üzerine tıkladıktan sonra sol kısımda yol tarifi , kaydet , yakınında vb. seçenekler bulunmaktadır . 

Bu komutlardan Paylaş ' ı tıklayalım . 


Paylaş iletişim penceresi karşımıza çıktığında  " Harita Yerleştirme " başlığına tıklayalım . 


iframe etiket satırları karşımıza gelecektir . Bu kodları kopyalayalım ve HTML editörümüze yerleştirelim .



HTML dökümanımızı kaydedelim ve tarayıcıda görüntüleyelim . 




Iframe etiketi ile farklı sitelerden veri alarak kendi web sayfamızda kullandık .