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 .