HTML Dersleri 7 Çerçeveler (Frames)

Çerçeveler (Frames)

Çerçeveler bir web tarayıcı web penceresini yatay ve dikey bölerek birden fazla HTML pencereyi tek bir pencerede görüntülemeyi sağlar.  Çerçevelerin en büyük avantajı web tarayıcı penceresinin tamamının her seferinde tekrar yüklenmesinin yerine sadece belirli bir penceresinin yenilenebilmesine olanak sağlar. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur.

Çoğunlukla sağ, sol veya üst bölüme menü penceresi yapmakta kullanılır. Böylece menü bölümü sabit kalırken diğer penceredeki içerikler değişebilmektedir.

Frameset Etiketleri

  • <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler.
  • Her frameset satır (rows) veya sütun (cols) olarak belirlenir.

Çerçeve Oluşturma

Çerçeve oluşturan bir sayfa oluşturmak için birden fazla HTML dosyasına ihtiyaç vardır. Bunlardan ilki çerçeve yapısını oluşturan HTML dosya, diğerleri pencere içerisinde görüntülenecek dosyalardır.

Öncelikle çerçeve yapısını oluşturan (cerceve.html) HTML dosyasını oluşturalım. Bunun için aşağıdaki adımları takip edin;

  1. Oluşturduğunuz HTML dosyada <body> etiketi yerine <frameset> etiketini kullanın.
  2. <frameset> etiketi sayfayı kaça böleceğimizi belirtmemizi sağlar. Eğer sayfayı yatay bölecekseniz rows niteliğini, dikey bölecekseniz cols niteliğini kullanın.
  3. Rows veya cols niteliğine virgülle ayrılmış kaç farklı sayısal değer vermişseniz o kadar sayıda pencere oluşturulur. Bu niteliklere tamsayı değer verilirse sabit ölçülerde, oranlar değerler verilirse (%10 gibi) sayfa ölçülerine orantılı boyutlarda çerçeveler oluşur.
  4. Sonrasında her bir pencere için ayrı ayrı <frame> etiketi tanımlanır. Bu etiket her bir çerçevenin hangi HTML dosyayı görüntüleyeceğini belirler.

Aşağıdaki örnekte 3 yatay pencere oluşturulmuştur.

Şimdi ise cerceve.html sayfası içerisinde görüntülenecek sayfaları oluşturalım. Cerceve.html içerisindeki ust.html, orta.html ve alt.html dosyaları aşağıdaki gibi oluşturulmuştur. Algılama kolaylığı açısından arka planları renkli oluşturulmuştur.

Çıktımıza bakalım:

Cerceve.html dosyasında frameset etiketi rows niteliği ile kullanıldığında ise aşağıdaki görüntü elde edilir.

Çerçevelerde name ve target nitelikleri

Çerçeve içeren sayfalardaki linklere tıklandığında tanımlanan target niteliği sayesinde sayfanın başka bir pencere (frame) içerisinde açılması sağlanabilir. Bu yapı en çok menü oluşturmakta tercih edilir. Link hangi frame içinde açılacaksa o frame’ nin name niteliğindeki tanımlı ad, target niteliğine değer olarak verilir. Bu yüzden öncelikle  frame etiketi ile tanımlanan pencerelere name niteliği kullanılarak isim verilir.

ÖRNEK:

Yukarıdaki kodları frames.html olarak kaydedelim. Örnekte 2 adet frame var; birincisinin adı menu, ikincisinin adı anasayfa  olarak verilmiştir. Anasayfa.html dosyası ise aşağıdaki gibidir.

Menu.html dosyası ise aşağıdaki gibidir.

frames.html dosyası çalıştırıldığında aşağıdaki görüntü elde edilir.

Çıktımız şu şekildedir.

Burada kullanıcı Mynet yazan linki tıkladığında Mynet sitesi “Burası Anasayfa” yazan bölümde açılacaktır.

 

Target niteliğine frame adı dışında aşağıdaki tabloda verilen değerlerde girilebilir.

TEMEL NOTLAR – YARARLI İPUÇLARI

Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için noresize=”noresize” parametrelerini <frame> etiketi içine yazabilirsiniz.

<noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir.

Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!

FRAME ETİKETLERİ
ETİKET AÇIKLAMA
<frameset> Frame ayarlarını belirtir.
<frame> Alt pencere (çerçeve) belirtir.
<noframe> Frame desteğinin kullanılmamasını sağlar.
<iframe> İç frame belirtir.

Böylelikle çerçeveler konusunu da işlemiş olduk.  Her ne kadar HTML 5 ile birlikte çerçevelerin kullanımı azaldı ise de bilgimiz olmasında fayda var. Bir sonraki dersimizde listeleme etiketlerini tanıyacağız. Bir sonraki dersimizde görüşmek üzere…

 

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir