HTML ‘de başka bir internet sayfasından içerik görüntüleyebilmek için HTML5 iframe etiketi kullanımı işlemini gerçekleştirebilirsiniz. Sadece başka bir internet sayfasından içerik görüntüleyebilmek değil, kendi olan internet sayfalarınızdan o sayfaya bir görüntülenecek yeri çekebilirsiniz.
HTML iframe kullanımı sayesinde göstermek istediğimiz bir sayfayı o sayfa içinde gösterme işlemini gerçekleştirirken bir bakıma gösterilecek içeriğin boyutunu, genişliğini ve çerçeve kenarlığı gibi diğer özellikleri de kullanabilmemiz mümkün.
İframe Nedir Nasıl Kullanılır ?
Örneğin ister WordPress içerik yönetim sistemini kullanın isterseniz de HTML ile bir internet sitesi oluşturun. İnternet sitenize ise PHP ile bir şey ekleme işlemini gerçekleştireceğinizi varsayıyorum. PHP ile ekleyeceğiniz içeriği ise internet sitenizin sunucusuna attıktan sonrasında dosya yolu ile göstermek isteyeceğiniz sayfaya iframe etiketi sayesinde istediğiniz yükseklik ve boyutta gösterebilmeniz mümkün. Aşağıda yer alan HTML iframe örnekleri ve öznitelikleri sayesinde tam olarak HTML iframe etiketinin kullanımı öğrenebilirsiniz.
[accordion] [accordion_content title=”İframe Etiketi Kullanımı” icon=”” active=”active”]HTML alt yapılı bir sayfaya iframe etiketi ile bir başka internet sitesinden yada kendimize ait internet sitesinden bir kısmı aynı olduğu şekilde gösterebilmemiz mümkün. Bunun için ise yapmamız gereken işlem :
<iframe src="https://webdunya.com"></iframe>
Yukarıda yer alan kod parçacığını kullanmak olacaktır. Bu sayede “webdunya.com” internet sitesinin ana sayfası bizim bu kodu yazacağımız sayfanın içinde gösterilmiş olur. Kaynak hedefi belirtmek için ise src etiketi kullanılır.[/accordion_content][accordion_content title=”İframe Yükseklik ve Genişlik Değerini Ayarlama” icon=”” active=”active”]Biz internet sitemize başka bir internet sitesinden yada dosya yolu ile kendi içinden çekeceğimiz görüntülenmesini istediğimiz içeriğin belirli bir alanının görüntülenmesini isteyebiliriz. Bunun için ise height ve width etiketlerini iframe etiketi içinde kullanabiliriz. Bunun için :
<iframe src="https://webdunya.com" height="100%> width="200px"</iframe>
Yukarıda yer alan şekilde görüntülenmesini istediğimiz çerçevenin boyutlarını ise height ve width değerleri ile belirtebilir. Belirttiğimiz bu değerler hem yüzde cinsinden hemde piksel cinsinden yazılabilir.[/accordion_content][accordion_content title=”İframe Etiketi Çerçeve Kaldırma yada Rengini Değiştirme” icon=”” active=”active”]Bu sefer ise başka bir dosya yolu yada internet sitesinden göstermek istediğimiz içeriğin çerçevesini kaldırabilir, yada çerçeve rengini ayarlayabiliriz. Çerçevesini kaldırmak için ise kullanacağımız kod satırı :
<iframe src="https://webdunya.com" style="border:none;"></iframe>
ile ifade edilir. Görmüş olacağınız şekilde style etiketini kullanıp istediğimiz değerleri ve nasıl gözükmesi gerektiğini önceden bildiğimiz CSS etiketleri sayesinde burada tanımlayabiliriz. Eğer iframe ile çektiğiniz içeriğin çerçevesinin renginin farklı görünmesini istiyor iseniz :
<iframe src=”https://webdunya.com” style=”border: 2px solid blue;”></iframe>
yukarıda yer alan kod parçacığını kullanabilirsiniz. Bu sayede 2 piksel değerinde bir çerçeve kalınlığı tanımladık ve bu çerçeve renginin mavi olması gerektiği hakkında solid blue komutunu yazarak sağladık.[/accordion_content] [/accordion]
Yukarıda yer alan bazı iframe örnekleri ile illa ki kendinizin denemesi gerekmektedir. Kendiniz denemediğiniz zaman yukarıda verilen bazı değerlerin kullanımı bir ön izleme olmadan aklınızda kalmayacak ve unutmanız daha kolay olacaktır. Bunun için ise lütfen sizlerde iframe etiketi kullanımı deneyin ve farklı değerler vererek ne hale geldiğine bir göz atın.