HTML Çerçeveler (Frames) Nasıl Kullanılırlar?
HTML çerçeveler bir internet sayfasını alt pencere böler veya bağımsız pencereler yardımıyla birden fazla görünüm seçeneği sağlar.
Çoklu görünüm seçeneği, sayfanın bir kısmının görünür; bir kısmını ise kaydırılabilir veya değiştirilebilir olmasını sağlar. Örneğin; aynı pencere içerisinde, birinci çerçeve statik reklam alanı, ikinci çerçeve internet sitesinin menüsü, üçüncü çerçeve ise sayfaların içeriğini taşıyan alan olarak kullanılabilir.
Çerçevelerden oluşmuş basit bir HTML kodlarını bir örnek ile gösterelim;
<!DOCTYPE html> <html> <head> <title> Basit bir çerçeve örneği </title> </head> <frameset cols="25%, 75%"> <frameset rows="100, 200"> <frame src="sayfa2.html"> <frame src="resiml.jpg"> </frameset> <frame src="sayfa3.html"> <noframes> <p> Çerçeveler görüntülenememektedir. </p> </noframes> </frameset> </html>
HTML5 ve sonrası teknolojilerde W3 konsorsiyumu tarafından kullanımı doğru bulunan tek çerçeve türü <iframe>’dir.
Standart bir HTML sayfası birer adet <head> ve <body> elementleri barındırmaktadır. Çerçevelerden oluşmuş bir HTML sayfasında ise bir adet <head> elementi bulunmasına karşın; <body> elementinin yerini <frameset> almaktadır. Eğer kullanıcı tarayıcısı çerçeveleri görüntüleyemiyorsa; bu durumda <noframes> içeriği tarayıcıda görünür olur.
<FRAMESET>
<frameset> elementi, kullanıcıya tarayıcıyı birden fazla dikdörtgen alana bölme yeteneği kazandırır. Her bir alan için <frame> elementi kullanılır. Parametre olarak “cols”, “rows”, “OnLoad” ve “OnUnload” özellikleri tanımlanabilir. Güncel HTML sürümünde <frameset> ve <noframes> elementleri kullanımını yitirmiştir. Bu nedenle çerçeve kullanımında <iframe> ve CSS’in ortak kullanımı tercih edilmelidir. Bir doküman içerisinde <frameset> elementi, <body> yerine veya başka bir <frameset> içerisinde kullanılır.
Frameset içerisinde bulunan çerçevelerin boyutlarının ayarlanması “rows” ve “cols” ile yapılır. Frameset için “rows” parametresinin tanımlanması ile yatay alanlar; “cols” parametresinin tanımlanması ile de dikey alanlar oluşturulabilir. Her iki değerin birlikte tanımlanması ile tablo oluşturulabilir. İç içe <frameset> elementleri kullanılması da ayrıca mümkündür.
“rows” ve “cols” parametrelerinin değerleri “çoklu uzunluk değeri” seçeneklerinden olmalıdır. Çoklu uzunluk değeri, yüzde (%) veya göreceli bir değer olabilir. Eğer yükseklik değeri özel olarak belirtilmemişse, bütün sütunlar (cols değerleri) tarayıcının yüksekliği kadar olacaktır. Benzer şekilde genişlik değeri tanımlanmamışsa; her bir satırın (rows değerleri) genişliği, tarayıcının genişliği kadar olacaktır. Çoklu uzunluk değerinin göreceli olması halinde yıldız (*) ile belirtilir. Ayrıca, her tanımlama için kalan uzunluk değeri üzerinden hesaplama yapılır. Mesela toplam genişlik değeri 60px olması halinde cols=”1*, 2*, 3*” olarak belirtilmişse; 1* sütunu 10px, 2* sütunu 20px ve 3* sütunu ise 30px değerlerine sahip olacaktır.
İlk örneğimiz ekranı yatay olarak ikiye bölmektedir.
<frameset rows=”50%, 50%”>
. . .
</franeset>
Sonraki örneğimiz üç satır oluşturmaktadır. İkinci satırın yüksekliği 200 piksel uzunluğundadır (içeriğinde boyutları bilinen bir resim olacaksa bu şekilde kesin değer belirtmek kullanım açısından yararlı olacaktır). İlk satır, ekranın %25’li kısmını; üçüncü satır ise kalan genişliğin %75’lik değerini kullanacaktır. Örnek;
<frameset rows=”1*,200,3*”>
. . .
</frameset>
Eğer frameset içerisinde bir 3×3 tablo oluşturmak istersek kodlarımız,
<frameset rows=”33%,34%,33%” cols=”33%,34%,33%”>
. . .
</frameset>
Bir sonraki örneğimiz için tarayıcı yüksekliğinin 1000px genişliğinde olduğunu kabul edelim. İlk yatay alan, toplam uzunluğun %25 (250px) kadarını alsın. İkinci yatay alan ise kesin olarak 350px değerine sahip olsun. Kalan 400 piksellik değer ise kalan iki yatay alan arasında bölünsün. Üçüncü yatay alanın değeri “*”, dördüncü yatay alanın değeri ise “*” olarak belirlenirse; üçüncü alan, kalan yükseklik değerinin yarısını (200px), dördüncü alan da diğer yarsını (200px) alacaktır.
<frameset rows=”25%, 350,*,*”>
. . .
</frameset>
Frameset elementi kendi bünyesinde başka <frameset> elementleri barındırabilir. Takip eden örnekte, en dışta yer alan <frameset> elementi kullanılabilir alanı dört eşit parçaya bölmektedir. İç kısımda yer alan <frameset> elementi ise kendisine ayrılan ikinci alanın değerini ikiye ayırmaktadır.
<!DOCTYPE html> <html> <head> </head> <frameset cols="33%,34%,33%"> <frameset rows="*,200"> <frame src=”ornek1.htm”> <frame src="ornek2.html"> </frameset> <frame src="ornek3.html"> <frame src="ornek4.html"> </frameset> </html>
<FRAME>
HTML çerçeveler kullanımında <frame> elementi ile <frameset> içerisinde yer alacak dokumanın içeriği ve görünümü tanımlanır. Frameset elementinin sahip olabileceği kendine ait parametreler aşağıdaki tabloda verilmiştir.
| Öznitelik | Açıklama |
| name | Çerçeveler arasındaki bağlantılarda kullanılmak üzere çerçeveye bir isim değeri atanmasını sağlar. |
| longdesc | Eğer ziyaretçinin tarayıcısı çerçeveleri desteklemiyorsa; “longdesc” özniteliğine bir bağlantı adresi tanımlanarak, ziyaretçiye alternatif bir içeriğe ulaşılması sağlanabilir. |
| src | Çerçevede görüntülenecek içeriğin bağlantı adresidir. |
| noresize | Çerçeveyi yeniden boyutlandırmanın engellendiğini belirtir. |
| scrolling | Çerçevenin kaydırma çubuğunun durumunu belirtir. |
| frameborder | Çerçevenin kenarlık değerini tanımlamak için kullanılır. |
| marginwidth | Çerçeve içeriğinin sağ ve sol kenar ile olan mesafesini belirtir. |
| marginheight | Çerçeve içeriğinin üst ve alt kenar ile olan mesafesini belirtir. |
Yukarıdaki tabloda belirtilen parametrelerden yalnızca “src” parametresinin element içerisinde tanımlanması yeterli olacaktır. Bu parametre ile çerçeve içerisine gelecek olan dokumanın kaynak adresi belirtilir. Örneğin; “src” parametresinin değeri “index.html” ile aynı klasörde kaydedilmiş olan “cerceve_icerik1.html” olabilir. Ayrıca tarayıcılar çerçevelere varsayılan olarak kenarlık eklenmektedir.
Çerçevenin içeriğinde görüntülenecek olan sayfayı bir örnek ile gösterelim.
<!DOCTYPE html> <html> <head> <title>a frameset document</title> </head> <frameset cols="33%,33%,33%"> <frameset rows="*,200"> <frame src="ornek1.html”> <frame src="ornek2.html"> </frameset> <frame src="ornek3.html"> <frame src="ornek4.html"> </frameset> </html>
<NOFRAMES>
Ziyaretçi tarayıcısı çerçevelerin görüntülenmesini desteklemiyor olabilir. Bu gibi durumlarda tarayıcıda görüntülenecek olan içerik, <noframes> elementi içerisinde tanımlanır. <noframes> elementi, varsayılan olarak beklenen <body> elementi gibi HTML kodlarını desteklemektedir. İçerik olarak genellikle kullanıcıya, sayfayı görüntülediği tarayıcısının çerçeveleri desteklemediğine dair metin eklenir. Tanımlanan <noframes> elementi yalnızca çerçevelerin desteklenmediği durumlarda görüntülenecektir. Frameset içerisinde en sonda tanımlanması gereken <noframes> elementi, arayüz geliştiricilerin ziyaretçilere sayfayı görüntüleyememe sebeplerini açıklamalarında kullanışlı olmaktadır. Günümüzde çerçeveleri desteklemeyen herhangi bir tarayıcı olmamasına karşın; ziyaretçi, tarayıcı ayarlarından çerçeve görünümlerini devre dışı bırakabilmektedir. Engellemelerin başlıca nedeni; çerçevelerin, kötü niyetli yazılımların kullanıcı bilgilerini elde etmekte kullanabildiği bir element olmasıdır. <noframes> elementinin kullanımını bir örnek ile gösterelim.
<!DOCTYPE html> <html> <head> <title>çerçeve gösterilemiyor</title> </head> <frameset cols="50%, 50%"> <frame src="anasayfa.html"› <frame src="ornek.html"› Örnek yazı 1 <noframes> <p>bu sayfanın çerçeve içermeyen sürümüne <a href="cercevehatasi. html"› adresinden ulaşabilirsiniz.</a></p> </noframes> </frameset> </html>
<IFRAME>
Günümüzde halen yaygın olarak kullanılan ve HTML5 teknolojinde desteklenen tek çerçeve türü <iframe> elementidir. <iframe> elementi, arayüz geliştiricisine, çerçeveyi bir metin bloku içerisinde ekleme imkânı vermektedir. Çerçevenin içeriği “src” parametresinde tanımlanan değerden elde edilmektedir. Tarayıcının çerçeveleri görüntülemesi devre dışı bırakılmış olması halinde ise <iframe> elementinin içeriği görünür olacaktır. Ziyaretçi tarayıcısının çerçeveleri desteklemesi halinde aşağıdaki örnek, kenarlıklar arasında içeriğin görüntülendiği bir çerçeve oluşturacaktır.
<!DOCTYPE html> <html> <head> <title>satır içi çerçeve</title> </head> <body> <p> metni arasına <iframe src="icerik.html" width="400" height="500" scrolling="auto"> tarayıcınız çerçeveleri desteklememektedir. <a href="yardim.html">adresine gidiniz.</a> </iframe> elementi eklenebilir </p> </body> </html>
Satır içi çerçeveler, ziyaretçiler tarafından yeninden boyutlandırılamazlar ve “noresize” parametresi <iframe> elementi için bir anlam ifade etmez. Ayrıca; <iframe> elementinin kullanılması için <frameset> elementi içerisinde tanımlanmış olması gerekmez. Satır içi çerçeveler, CSS yardımıyla sayfanın herhangi bir noktasında gösterilebilir. Örneğin, ziyaretçi sizin belirleyeceğiniz bir <button> elementine tıkladığında çerçevenin görünür olmasını sağlayabilirsiniz. Örnek;
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>
iframe {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px;
border: 0; top : 50px;
display:none;
}
</style>
<script>
function goster () {
document.getElementsByTagName("iframe")[0].style.display = "block"
}
</script>
</head>
<body>
<p>Örnek metin.</p>
<button onclick="goster();">çerçeveyi Göster</button>
<iframe src="http://google.com"></iframe>
</body>
</html>
Harici bir HTML dokumanını sayfa içerisine dahil edebilmek için <iframe> elementi kullanılabileceği gibi; <object> elementi de kullanılabilir. Günümüzde internet sayfalarında HTML çerçeveler kullanımından kaçınılmaktadır. Bu durumun en temel sebebi; çerçeve yüksekliklerinin içeriğe göre otomatik olarak değiştirilmesinin mümkün olmamasıdır. Yükseklik değişiklikleri ancak Javascript kod parçacıkları eklenerek gerçekleştirilebilmektedir. Çerçeve kullanımın yaygınlaşmasının önündeki en büyük engel stillendirmedir. Facebook gibi sosyal ağlarda oynan oyunların tamamı <iframe> elementi içerisinde farklı bir sunucu üzerinden çalışır. Çerçeve kullanımını azaltan bir başka faktör daha bulunmaktadır. HTML içerisinde Javascript dilinin kullanımının yaygınlaşmasından sonra; kötü niyetli bilgisayar korsanları, kullanıcıların şifrelerini çalabilmek için orijinal internet sitelerini çerçeve içerisinde çalıştırıp; kullanıcıların çerçeve içerisinde girdiği bilgileri alabilmekteydi. Bu durum, çerçeveyi taşıyan internet sitesinin tarayıcılar tarafından asıl yüklenici olmasından kaynaklanıyordu. Günümüzde bu güvenlik açığının önüne geçilmektedir. Ancak; bu yöntemle verilen zararın boyutları geçmişte çok büyük olduğu için geliştiriciler internet sitelerinde çerçeve kullanımından uzak durmaktadır. Frame elementinin yüksekliğini ayarlamak için dahil edilen sayfanın yüksekliği ölçülerek çerçeveye uygulanabilir. Bu işlemler yalnızca Javascript dili kullanılarak yapılabilmektedir. Ayrıca yükseklik ölçülmeden önce dahil edilen sayfanın yüklenmiş olması gerekmektedir.
HTML çerçeveler (frames) konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/html/
Sosyal Medya Hesaplarımız
