HTML Çerçeveler (Frames) ve iFrames
Frame, HTML'de birden fazla belgeye tek bir sayfada görüntüleme için açılan iç pencerelerdir. Bu şekilde sağda farklı bir pencere ve içerik, solda farklı bir pencere ve içerik olacaktır. Genellikle bir pencere linklerin bulunduğu alan, diğer pencere ise asıl içeriğin bulunacağı alan olarak kullanılır. Klasik yapıda Menü öğelerinin bulunduğu bir pencere ve sayfa içeriğinin bulunduğu bir pencere olarak düşünebilirsiniz. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz.
Özetle Frames kullanımı, sayfamızı parçalara ayırmamızı sağlar. Böylece sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Bunun anlamı ise kullanılacak çerçeve miktarınca ek Html sayfası oluşturmak demektir.
Avantajlarının yanı sıra Web geliştiricilerin birden fazla HTML dökümanını takip etmesinin zorluğu ve istenilen sayfanın yazıcıya gönderilmesindeki problemler gibi dezavantajlarıda mevcuttur.
Framaset Etiketleri ve Kullanımı
Çerçeve oluşturmada kullanılan etiket framesettir. cols parametresi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını, rows parametresi ise çerçevelerin alt alta satırlar şeklinde görüntüleneceğini belirtmekte kullanılır. Yani <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirlerken her frameset satır rows veya sütun cols olarak belirlenir.
Frame Etiketi: <frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.
<frameset cols="35%,65%"> <frame src="frameA.html"> <frame src="frameB.html"> </frameset>
Örneğimizde 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %35'i ayrılmıştır. İkincisine ise %65'i ayrılmıştır. "frameA.html" birinci sütuna, "frameB.html" ise ikinci sütuna yerleştirilmiştir. Frameset sütun değerlerimizi yüzdelik dilimler yerine piksel olarakta belirleyebiliriz. Örneğin: (cols="300,400") verebilir ve geri kalanının da kendi kendini 100 değerine tamamlamasını sağlayabiliriz: (cols="35%,*").
NOT: Frameset etiketi html dosyasının </head>...<body>
etiketleri arasında kullanılmaktadır. <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!
Örneğimizde sayfa iki sütuna ayrımıştır. Eğer sayfa iki satıra ayrılmak istenseydi, yukarıdaki <frameset cols="*,*"> etiketi, <frameset rows="*,*">şeklinde yazılmalıydı. Eğer sayfayı üç sütuna ayırmak isteseydik bu seferde <frameset cols="*,*,*"> şeklinde yazılmalıydı.
Framaset Etiketleri ve Kullanımı için html örneği:
sol.html dosyamız
<html> <head> <title>Solda Açılacak Sayfamız </title> </head> <body bgcolor="LightBlue"> <font size="7">sol.html</font> </body> </html>
sag.html dosyamız
<html> <head> <title>Sagda Açılacak Sayfamız </title> </head> <body bgcolor="Orange"> <font size="7">sag.html</font> </body> </html>
index.html dosyamız (dikey frame)
<html> <head> <title>..</title> </head> <frameset cols="35%,65%"> <frame name="sol" src="sol.html"> <frame name="sag" src="sag.html"> </frameset> <body> </body> </html
Örnek Gösterimi
Örneğimizde dikey olarak bölünmüş bir frameset oluşturduk. Çerçevelerimizi yatay oluşturma istersek eğer örnek kodlarda <frameset cols="*,*"> yerine <frameset rows="*,*"> yaparak, sayfanın satırlara ayrıldığını görebilirsiniz.Bunu yanı sıra yıldız yerine oran veya sayı girerek meydana gelecek değişimleri gözleyebilirsiniz.
<html> <head> <title>..</title> </head> <frameset rows="35%,65%"> <frame name="ust" src="ust.html"> <frame name="alt" src="alt.html"> </frameset> <body> </body> </html
NOT: Çerçevelerde görünebilir kenarlıklar dikkatinizi çekmiştir. Öntanımlı olarak kullanıcı bunları sürükleyerek yeniden boyutlandırabilir. Bunu önlemek için noresize="noresize" parametrelerini <frame> etiketi içine yazabilirsiniz. <noframes> etiketinide döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir. scrolling="yes, no veya auto" parametresiylede kaydırma çubuklarının durumunu belirleyebilirsiniz.
iFrames Nedir Nasıl Kullanılır
iFrame asıl HTML sayfası içerisinde bulunan ve kaynağını, yani içeriğini asıl sayfa dışında başka bir siteden alan çerçevelerdir. iFrame kullanılmadığında sunucu istenilen sayfayı yeniden yükler. Bu da sitenin hızının yavaşlaması demektir. İşte bu noktada iFrame kullanılırsa sadece gerekli alanlar değiştiğinden sayfa yüklenmesi daha hızlı gerçekleşir.
iFrame kullanımı için en az iki sayfaya ihtiyacımız var. Bu sayfalardan ilki Ana Sayfamız (iFrame'in üzerinde bulunduğu sayfa) diğeri ise iFrame'in Ana Sayfa üzerinde göstereceği sayfa.
iFrame kullanımı için en az iki sayfaya ihtiyacımız var. Bu sayfalardan ilki Ana Sayfamız (iFrame'in üzerinde bulunduğu sayfa) diğeri ise iFrame'in Ana Sayfa üzerinde göstereceği sayfa.
<html> <body> <iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.ibrahimbayraktar.net" target="iframe_a">ibrahimbayraktar.net</a></p> <p>Link'e tıklandığında istenilen sayfa iframe olarak belirtilen boyutlar açılakcaktır</p> </body> </html>
Örnek Gösterimi
Hiç yorum yok:
Yorum Gönder