HTML’de Frame/Frameset ve Iframe ile çerçeve oluşturma

Frame çerçeveler ile aynı sayfa içinde birden fazla HTML dökümanını görüntüleyebilirsiniz. HTML sayfa bölme etiketidir.

Frameset ve Frame’ler HTML 5 tarafından desteklenmemektedir. iFrame ise HTML 5 tarafından belli oranda desteklenmektedir. Bu yüzden kullanmanız tavsiye edilmez ama bütün tarayıcılar Frameset ve iFrame i desteklemektedirler.

Bu öğe kullanılırken Genel olarak bir pencere linklerin bulunduğu alan, diğer pencereyse içeriğin bulunacağı alan olarak kullanılır. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Yine de tarayıcılar tarafından desteklendiği için genel olarak ne olduğunu öğrenelim.

Frame Etiketleri

Etiket Açıklama
<frameset> Frame ayarlarını belirtir.
<frame> Alt pencere (çerçeve) belirtir.
<noframes> Frame desteğinin kullanılmamasını sağlar.
<iframe> İç frame belirtir.

Frameset ve Frame’ler

Bunu basit bir 3 pencereli örnekle anlamaya çalışalım;

<frameset cols="25%,*,25%">
  <frame src="frame_1.htm">
  <frame src="frame_2.htm">
  <frame src="frame_3.htm">
</frameset>

Kullanım ve Açıklama

Şimdi yukarıdaki örneği inceleyelim. Pencereleri bölmeye <frameset> koduyla başlıyoruz. Frameset cols ile sütunların yüzde kaç büyüklükte olacağını belirliyoruz. rows ile de satır yüksekliklerini ayarlayabiliriz. Ardından <frame> kodlarıyla çerçevelerimizi tek tek oluşturduk ve kodu </frameset> bitirdik. Önemli olan bu kodun <body>…</body> etiketleri arasına yazılmamasıdır.

Örneğimizde bulunan cols=”25%,*,25%” i açmak gerekirse ilk ve son sütunun (Dikey Frame) ekranın yüzde 25‘er bölümünü ortadaki sütununda kalan bölümü almasını yıldız (*) koyarak ayarladık.

Yukarıdaki örnekten anladığımız gibi cols ve rows lar “deger1,deger2” şeklinde kullanılır. Değerler pencere sütun veya satırlarının oranlarını belirtir. Değerleri örneğimizdeki gibi % yüzde olarak kullanabildiğimiz gibi px piksel olarakta kullanabiliriz. Eğer bir pencerenin boyutu, diğeri için belirtilen alan dışında kalan olacaksa (*) yıldız kullanırız.

Peki Tarayıcı Frame Tekniğini Desteklemiyorsa

Eğer tarayıcı bu özelliği desteklemiyorsa diye önlem alıp kodu aşağıdaki gibi ayarlamamız gerekir.

<frameset cols="25%,*,25%">
 <noframes>
      <body>Tarayıcı Frameset'i desteklemiyor</body>
 </noframes>
  <frame src="frame_1.htm">
  <frame src="frame_2.htm">
  <frame src="frame_3.htm">
</frameset>

Frame tekniği desteklemeyen tarayıcılarda <noframes>…</noframes> etiketi örnekteki gibi kullanılır. Tarayıcımızın Frameset’i desteklemediği durumlarda frameset açılış ve kapanış etiketleri arasına <noframes>(tarayıcınız frame desteklemiyor mesajı)</noframes> etiketini koyarız. Bu html sayfamızın devamıymış gibi <body></body> etiketleri arasında durmalıdır.

Yatay ve Dikey Frame’leri Birlikte Kullanmak

Örnek Frameset

Örnek Frameset

 

Bunu yapabilmek için Frame içinde frame kullanmalıyız.

<frameset rows="30%,70%">
   <frame src="frame_1.htm">
      <frameset cols="60%,*">
         <frame src="frame_2.htm">
         <frame src="frame_3.htm">
      </frameset>
   </frameset>

Örneği yazıp çalıştırdığınızda çalışmasını daha iyi anlayacaksınız.

Frameborder, Framespacing ve Noresize

Frame’leri oluşturduğumuzda aralarındaki çizgiyi görmüşsünüzdür. Bunu kaldırmak istediğimizde frameborder=”0″ kodunu  <frame> üzerine eklememiz gerekmektedir.

Frame’ler arasındaki boşluğu ayarlamak içinse framespacing kullanılır. Bu değeri sıfırlamak için framespacing =”0″ yazmanız gerekir ama güncel browser’lardan sadece IE ile Opera desteklemektedir. O yüzden kullanmamanız tavsiye edilir.

Bir diğer olaysa frame boyutlarını sabitlemekle alakalıdır. Çünkü belirlediğimiz boyutlar başlangıçta çalışmakta ama ziyaretçi tarafından değiştirilebilmektedir. Bunu engellemek için <frame> üzerine noresize=”noresize” yazmanız gerekmektedir.

<frameset cols="40%,60%">
  <frame src="frame_1.htm" noresize="noresize">
  <frame src="frame_2.htm">
</frameset>

Çerçeve Kullanımını Dezavantajları

  • HTML 5 tarafından çoğu özelliği desteklenmemektedir.
  • Web yazılımcıları bu yolu kullanmak yerine daha iyi çözümler buldular.
  • Yazılımcının birden fazla HTML dosyasını takip etmesi zordur.
  • İstenilen sayfanın yazıcıya gönderilmesi zordur.

IFrame Kullanımı

iFrame, frame’den farklıdır. HTML belge içinde istediğiniz yerde kullanılır. Daha çok başka websitelerinden çekilen içeriklerin sayfa içinde gösterilmesi için kullanılır. Eski ve çok kullanılan bir tekniktir. HTML 5’le birlikte yeni özellikler kazandı ve bazı özelliklerini kaybetti.

Aşağıdaki örneği inceleyerek iframe’in nasıl işlediğini çözebilirsiniz.

<iframe src="http://www.site.com/sayfaframe.htm" frameborder="0" style="width:200px;height:300px" scrolling="no"></iframe>

frameborder=”0″Kenarlık ile çerçeve kullanmayacağımızı belirttik.

style  – Stil özellikleri için gerekli kodumuz.

width:200px – Genişliğini 200px (piksel) olarak belirledik.

height:300px – Yüksekliği 300px (piksel) olarak belirledik. 

scrolling=”no”Kaydırma çubuğunun görünmemesini ayarladık

Özellik Değer Açıklama
align left
right
top
middle
bottom
HTML5’te desteklenmiyor
<iframe> i hizalamaya yarar
frameborder 1
0
HTML5’te desteklenmiyor
<iframe> in çerçevesini belirler
height pixels <iframe> in yüksekliğini belirtir
marginheight pixels HTML5’te desteklenmiyor
<iframe> üst ve alt (top ve bottom) margin değerini belirtir
marginwidth pixels HTML5’te desteklenmiyor
<iframe> ‘in sağ ve sol margin değerini belirtir
name text <iframe> in ismini belirler
sandbox “”
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
<iframe> in içeriği için ekstra kısıtlama sağlar
scrolling yes
no
auto
HTML5’te desteklenmiyor
<iframe> de scrollbar kullanılıp, kullanılmayacağını belirtir
seamless seamless Bu özellikle hiçbir tarayıcı tarafından desteklenmiyor
src URL <iframe> ile sayfa içine gömülecek dosyayı belirtir
srcdoc HTML_code <iframe> in içinde ne gösterileceğini belirtir.Src olsa dahi destekleyen tarayıcılar srcdoc taki bilgiyi yazdırır

Örneği inceleyin <iframe srcdoc=”<p>merhaba!</p>” src=”gulegule.php”>

Sonuç Merhaba olacaktır

width pixels <iframe> in genişliğini belirler.

DAHA FAZLA İÇERİK

Windows 10 Nasıl Kurulur? Windows 10 Nasıl Kurulur?

5 Haziran 2015, Cuma

WordPress’e Giriş WordPress’e Giriş

28 Kasım 2014, Cuma

Stop Motion Tekniği Nedir ? Stop Motion Tekniği Nedir ?

5 Ocak 2015, Pazartesi

SİZDE YORUM YAPIN

Stop Motion Tekniği Nedir ?

Stop Motion Tekniği Nedir ? 5 Ocak 2015, Pazartesi

30+ Bedava Photoshop Actions

30+ Bedava Photoshop Actions 14 Aralık 2014, Pazar

Photoshop Action: Double Sketch Effect

Photoshop Action: Double Sketch Effect 13 Aralık 2014, Cumartesi