HTML iframe Elemanı
Eminim, bu html elemanı çok hoşunuza gidecek.
Iframe elemanı; bir çerçevedir aslında, tıpkı div elemanı gibidir. Başka bir web sayfasını, kendi sayfamızda göstermemizi sağlayan bir penceredir.
iframe elemanı; bir satır içi elemandır. Yani tıpkı span elemanı gibi, eklendiği yerde görünür, otomatik satır başı yapmaz. Kendinden sonraki html elemanını da alt satıra atmaz.
iframe elemanı; bir satır içi elemandır. Yani tıpkı span elemanı gibi, eklendiği yerde görünür, otomatik satır başı yapmaz. Kendinden sonraki html elemanını da alt satıra atmaz.
Kullanımı da oldukça basittir. Aşağıda bir iframe elemanının kullanım kalıbı verilmiştir:
<iframe src="URL"></iframe>
URL, iframe elemanımızın içerisinde göstermek istediğimiz web sayfasının veya herhangi bir sayfanın adresidir (yoludur).
Örneğe dikkat edelim:
<iframe src="http://www.dersimizkod-html.blogspot.com.tr"></iframe>
Yukarıdaki kodun çıktısı, sayfamızın bir bölgesinde, dersimizkod-html.com.tr sitesinin anasayfasını gösteren bir küçük pencere olacaktır.
! Bir iframe elemanı; bir resim dosyası, bir html dosyası gibi başka türden içerkleri de barındırabilir. Yani, iframe elemanı ile, html sayfamızın içerisinde, başka bir html sayfasını da gösterebiliriz.
iframe Elemanının height (yükseklik) ve width (genişlik) Özellikleri
iframe elemanının varsayılan bir yükseklik ve genişlik değerleri vardır. Fakat, biz de istediğimiz değerleri vererek, isdeğimiz büyüklükte bir iframe penceresi hazırlayabiliriz.
Örneklere dikkat edelim:
<iframe src="deneme.htm" width="200" height="200"></iframe>
Yukarıda; iframe penceresinin, birim belirtmediğimiz için, yükseklik ve genişlik değerleri, pixel (html'de varsayılan uzunluk birimidir. uzunluk belirten bir sayının, birimi yoksa, html o sayının birimini pixel varsayar) cinsinden olacaktır.
<iframe src="deneme.htm" width="50%" height="50%"></iframe>
Yukarıda, iframe penceresinin, yükseklik ve genişlik olarak sayfayın yüzde kaçını kaplayacağı belirtilmiştir.
iframe Penceresinin Kenarlık (border) Özelliği
Varsayılan olarak, iframe pencerelerinde siyah bir kenarlık çizgisi bulunur. Fakat CSS ile bu kenarlığı kaldırabilir ya da stillendirebiliriz.
Örneğe dikkat:
<iframe src="deneme.htm" style="border:none"></iframe>
Yukarıdaki iframe penceresinin kenarlık çizgisi, CSS ile; style="border:none" diyerek kaldırılmıştır.
<iframe src="deneme.htm" style="border:5px dotted red"></iframe>
Yukarıdaki kodda ise; style="border:5px dotted red" CSS kodu ile 5 pixel kalınlığında ve nokta nokta (dotted) ve kırmızı (red) bir kenarlık oluşturulmuştur.
Unutma! CSS, html kadar esnek değildir, pixel ya da her ne ise, sayıların sonunda birim belirtmemizi ister!!!
iframe Penceresini Bir Link İçin Hedef (target) Olarak Kullanmak
İstersek, bir iframe elemanı hazırlayıp, sayfamızın başka bir yerindeki bir linke tıklandığında, bu linkin kaynağını da, bu iframe penceresinde görüntüleyebiliriz.
Bunun için iframe elemanına dilediğiniz bir isim (name="bir_isim") vermemiz ve aynı ismi, target değeri olarak link elmanına eklememiz yeterlidir. (<a href="url" target="bir_isim">link metni</a>)
Örneğe dikkat edelim:
<iframe src="http://www.dersimizkod-php.com.tr" name="cerceve" width="100%"></iframe>
<p><a href="http://www.dersimizkod-html.blogspot.com.tr" target="cerceve">dersimiz kod - html sitesi</a></p>
<p><a href="http://www.dersimizkod-html.blogspot.com.tr" target="cerceve">dersimiz kod - html sitesi</a></p>
dersimizkod-php sitesini göstermekte olan iframe penceresi, dersimizkod-html sitesi linkine tıklandığında, bu linkin kaynağını gösterecektir.
Aşağıda bu kodun uygulamasını göreceksiniz:
Tıklarsanız, dersimiz kod - html sitesi yukadırdaki iframe penceresinde görünecektir.
Hiç yorum yok:
Yorum Gönder