HTML - Çerçeveler

HTML çerçeveleri, tarayıcı pencerenizi, her bölümün ayrı bir HTML belgesi yükleyebileceği birden çok bölüme ayırmak için kullanılır. Tarayıcı penceresindeki bir çerçeve koleksiyonu çerçeve kümesi olarak bilinir. Pencere, tabloların düzenlendiği şekilde çerçevelere bölünmüştür: satırlar ve sütunlar halinde.

Çerçevelerin Dezavantajları

Çerçeve kullanmanın birkaç dezavantajı vardır, bu nedenle web sayfalarınızda çerçeve kullanmanız asla önerilmez -

Bazı küçük cihazlar, ekranları bölünecek kadar büyük olmadığından, sıklıkla çerçevelerle baş edemez.
Bazen farklı ekran çözünürlüğü nedeniyle sayfanız farklı bilgisayarlarda farklı görüntülenecektir.
Tarayıcının geri düğmesi, kullanıcının umduğu gibi çalışmayabilir.
Çerçeve teknolojisini desteklemeyen hala birkaç tarayıcı var.

Çerçeve Oluşturma

Bir sayfada çerçeve kullanmak için <body> etiketi yerine <frameset> etiketini kullanırız. <frameset> etiketi, pencerenin çerçevelere nasıl bölüneceğini tanımlar. rows <frameset> etiketinin niteliği, yatay çerçeveleri tanımlar ve colsöznitelik dikey çerçeveleri tanımlar. Her çerçeve <frame> etiketiyle belirtilir ve çerçeveye hangi HTML belgesinin açılacağını tanımlar.

Note- <frame> etiketi HTML5'te kullanımdan kaldırıldı. Bu elemanı kullanmayın.

Misal

Üç yatay çerçeve oluşturma örneği aşağıdadır -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Yukarıdaki örneği şu şekilde koyalım, burada satır niteliğini sütunlarla değiştirdik ve genişliklerini değiştirdik. Bu, üç çerçevenin tümünü dikey olarak oluşturacaktır -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Bu, aşağıdaki sonucu verecektir -

<frameset> Etiket Nitelikleri

<frameset> etiketinin önemli öznitelikleri aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	cols Çerçeve kümesinde kaç sütun bulunduğunu ve her bir sütunun boyutunu belirtir. Her bir sütunun genişliğini dört yoldan biriyle belirtebilirsiniz - Piksel cinsinden mutlak değerler. Örneğin, üç dikey çerçeve oluşturmak için cols = "100, 500, 100" kullanın . Tarayıcı penceresinin bir yüzdesi. Örneğin, üç dikey çerçeve oluşturmak için cols = "% 10,% 80,% 10" kullanın . Joker karakter sembolü kullanmak. Örneğin, üç dikey çerçeve oluşturmak için cols = "% 10, ,% 10" kullanın* . Bu durumda joker karakter, pencerenin geri kalanını alır. Tarayıcı penceresinin göreli genişlikleri olarak. Örneğin, üç dikey çerçeve oluşturmak için cols = "3 , 2 , 1 " kullanın* . Bu, yüzdelere bir alternatiftir. Tarayıcı penceresinin göreli genişliklerini kullanabilirsiniz. Burada pencere altıda birine bölünmüştür: ilk sütun pencerenin yarısını, ikincisi üçte birini ve üçüncüsü altıda birini kaplar.
2	rows Bu özellik, cols niteliği gibi çalışır ve aynı değerleri alır, ancak çerçeve kümesindeki satırları belirtmek için kullanılır. Örneğin, iki yatay çerçeve oluşturmak için rows = "% 10,% 90" kullanın . Her satırın yüksekliğini yukarıda sütunlar için açıklandığı şekilde belirtebilirsiniz.
3	border Bu özellik, her karenin kenarlığının genişliğini piksel cinsinden belirtir. Örneğin, border = "5". Sıfır değeri, sınır olmadığı anlamına gelir.
4	frameborder Bu özellik, çerçeveler arasında üç boyutlu bir sınırın gösterilip gösterilmeyeceğini belirtir. Bu öznitelik, 1 (evet) veya 0 (hayır) değerini alır. Örneğin, frameborder = "0" sınır olmadığını belirtir.
5	framespacing Bu öznitelik, bir çerçeve kümesindeki çerçeveler arasındaki boşluk miktarını belirtir. Bu, herhangi bir tam sayı değerini alabilir. Örneğin, kare aralığı = "10", her kare arasında 10 piksel boşluk olması gerektiği anlamına gelir.

<frame> Etiketi Nitelikleri

<frame> etiketinin önemli öznitelikleri aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	src Bu özellik, çerçeveye yüklenmesi gereken dosya adını vermek için kullanılır. Değeri herhangi bir URL olabilir. Örneğin src = "/html/top_frame.htm", html dizininde bulunan bir HTML dosyasını yükleyecektir.
2	name Bu nitelik, bir çerçeveye bir ad vermenizi sağlar. Bir belgenin hangi çerçeveye yüklenmesi gerektiğini belirtmek için kullanılır. Bu, özellikle bir çerçevede sayfaları başka bir çerçeveye yükleyen bağlar oluşturmak istediğinizde önemlidir; bu durumda, ikinci çerçevenin kendisini bağın hedefi olarak tanımlaması için bir ada ihtiyacı vardır.
3	frameborder Bu öznitelik, o çerçevenin kenarlıklarının gösterilip gösterilmeyeceğini belirtir; eğer varsa, <frameset> etiketinde frameborder özniteliğinde verilen değeri geçersiz kılar ve bu 1 (evet) veya 0 (hayır) değerlerini alabilir.
4	marginwidth Bu nitelik, çerçevenin kenarlıklarının sol ve sağ tarafları ile çerçevenin içeriği arasındaki boşluğun genişliğini belirlemenize olanak tanır. Değer piksel cinsinden verilmiştir. Örneğin marginwidth = "10".
5	marginheight Bu nitelik, çerçevenin üst ve alt kenarlıkları ile içeriği arasındaki boşluğun yüksekliğini belirlemenize olanak tanır. Değer piksel cinsinden verilmiştir. Örneğin marginheight = "10".
6	noresize Varsayılan olarak, bir çerçevenin kenarlıklarını tıklayıp sürükleyerek herhangi bir çerçeveyi yeniden boyutlandırabilirsiniz. Noresize niteliği, bir kullanıcının çerçeveyi yeniden boyutlandırmasını engeller. Örneğin noresize = "noresize".
7	scrolling Bu nitelik, çerçevede görünen kaydırma çubuklarının görünümünü kontrol eder. Bu, "evet", "hayır" veya "otomatik" değerleri alır. Örneğin kaydırma = "hayır", kaydırma çubuklarına sahip olmaması gerektiği anlamına gelir.
8	longdesc Bu özellik, çerçeve içeriğinin uzun bir açıklamasını içeren başka bir sayfaya bağlantı sağlamanıza olanak tanır. Örneğin longdesc = "framedescription.htm"

Çerçeveler için Tarayıcı Desteği

Bir kullanıcı, çerçeveleri desteklemeyen herhangi bir eski tarayıcı veya tarayıcı kullanıyorsa, kullanıcıya <noframes> öğesi görüntülenmelidir.

Bu nedenle <noframes> öğesinin içine bir <body> öğesi yerleştirmelisiniz çünkü <frameset> öğesi <body> öğesinin yerini almalıdır, ancak bir tarayıcı <frameset> öğesini anlamıyorsa, o zaman öğenin içinde ne olduğunu anlamalıdır. Bir <noframes> öğesinde bulunan <body> öğesi.

Kullanıcınızın eski tarayıcılara sahip olması için güzel bir mesaj koyabilirsiniz. Örneğin, Üzgünüm !! tarayıcınız çerçeveleri desteklemiyor. yukarıdaki örnekte gösterildiği gibi.

Çerçevenin adı ve hedef nitelikleri

Çerçevelerin en popüler kullanımlarından biri, gezinme çubuklarını bir çerçeveye yerleştirmek ve ardından ana sayfaları ayrı bir çerçeveye yüklemektir.

Bir test.htm dosyasının aşağıdaki koda sahip olduğu aşağıdaki örneğe bakalım -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Burada, iki çerçeveyle doldurmak için iki sütun oluşturduk. İlk kare 200 piksel genişliğindedir ve aşağıdakiler tarafından uygulanan gezinme menü çubuğunu içerecektir:menu.htmdosya. İkinci sütun kalan alanı doldurur ve sayfanın ana bölümünü içerecek vemain.htmdosya. Menü çubuğunda bulunan üç bağlantının tümü için, hedef çerçeveden şu şekilde bahsettik:main_page, böylece menü çubuğundaki bağlantılardan herhangi birine tıkladığınızda, mevcut bağlantı ana sayfada açılacaktır.

Menu.htm dosyasının içeriği aşağıdadır

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

Main.htm dosyasının içeriği aşağıdadır -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Yüklediğimizde test.htm dosya, aşağıdaki sonucu verir -

Artık sol panelde bulunan bağlantılara tıklamayı deneyebilir ve sonucu görebilirsiniz. Hedef özellik ayrıca aşağıdaki değerlerden birini alabilir -

Sr.No	Seçenek ve Açıklama
1	_self Sayfayı geçerli çerçeveye yükler.
2	_blank Bir sayfayı yeni bir tarayıcı penceresine yükler. Yeni bir pencere açılıyor.
3	_parent Sayfayı, tek bir çerçeve kümesi olması durumunda ana tarayıcı penceresi olan ana pencereye yükler.
4	_top Geçerli çerçeveleri değiştirerek sayfayı tarayıcı penceresine yükler.
5	targetframe Sayfayı adlandırılmış bir hedef çerçeveye yükler.