Html Çerçeveler

Html dilinde çerçeveler, web sitesini çerçevelere bölüp farklı içerikleri aynı anda görüntüleme işlemi yapmak için kullanılmaktadır.

Çerçeveler:

  • frameset
  • frame
  • noframe
  • iframe

Biz yukarıdaki etiketlerden frameset, frame ve noframe hakkında kısaca bilgi verip, iframe hakkında detaylı bilgi vereceğiz.

Bilgi: Çerçevelerde frameset, frame ve noframe özellikleri HTML5 tarafından DESTEKLENMEMEKTEDİR.

Bilgi: frameset etiketi body etiketi yerine kullanılmaktadır. Yani frameset etiketi kullanıldığında body etiketi kullanılmakmaktadır.

Frameset Etiketi

Html dilinde çerçeve oluşturmak için kullanılan etikettir. <frameset> şeklinde açılmakta ve </frameset> şeklinde kapanmaktadır. Frameset etiketi kullanıldığında body etiketi kullanılmamaktadır.

Bu etikette sayfanın kaç çerçeveye bölüneceğini ve çerçevelerin boyutlarını belirlemek için kullanılır.

Bilgi: Frameset etiketi Html5 tarafından desteklenmemektedir.

Frameset Etiketi Kullanımı

<html>

<head>
<title> Frameset etiketi kullanımı </title>
</head>

<frameset>

</frameset>

</html>

Frameset etiketi ile 2 parametre kullanılmaktadır. Bu parametreler genişliği ve yüksekliği pixel veya yüzde (%) cinsinden belirlemek için kullanılmaktadır. Bunlar: 

Cols: Sütunların genişliğini belirlemek için kullanılmaktadır.

<html>
<head>
</head>

<frameset cols="50%,50%">

<frame name="sayfa1" src="sayfa1.html">
<frame name="sayfa2" src="sayfa2.html">

</frameset>

</html>

Rows: Satırların yüksekliğini belirlemek için kullanılmaktadır.

<html>
<head>
</head>

<frameset rows="250px,250px">

<frame name="sayfa1" src="sayfa1.html">
<frame name="sayfa2" src="sayfa2.html">

</frameset>

</html>

 

Frame Etiketi

<frameset> etiketi ile birlikte kullanılmaktadır. Frame etiketi ile sayfada gösterilecek içeriğin alanı oluşturulur.

Frame Etiketi Kullanımı

<html>
<head>
</head>

<frameset>

<frame name="sayfa1" src="sayfa1.html">
<frame name="sayfa2" src="sayfa2.html">

</frameset>

</html>

Noframe Etiketi

Noframe etiketi, çerçeveler bazı tarayıcılar tarafından desteklenmemektedir. Bu etiket ile çerçeveler tarayıcılar tarafından desteklenmediği zaman kullanıcıya bilgi vermek için kullanılmaktadır.

Noframe Etiketi Kullanımı

<html>
<head>
</head>

<frameset>

<frame name="sayfa1" src="sayfa1.html">
<frame name="sayfa2" src="sayfa2.html">
<frame name="sayfa3" src="sayfa3.html">

<noframes>Bu tarayıcı tarafından çerçeveler desteklenmiyor.</noframes>

</frameset>

</html>

İframe Etiketi

Hazırladığımız web sitemizin herhangi bir bölümünde başka bir html dosyası veya web sitesini göstermek istediğimizde iç çerçeve eklemek için kullanılan etiket'tir. Html5 tarafında DESTEKLENMEKTEDİR. 

<iframe> şeklinde açılmakta ve </iframe> şeklinde kapanmaktadır.  <iframe> etiketi içinde gösterilecek olan dosyanın veya web sitenin adresi src parametresinin içine yazılmaktadır.

İframe Etiketi Kullanımı

Herhangi bir html dosyasını çerçeve içinde göstermek için :

<iframe src="dosya_adresi.html"> </iframe>

Herhangi bir web sitesini çerçeve içinde göstermek için :

<iframe src="https://www.azkod.com"> </iframe>

İframe etiketine ait bazı parametreler bulunmaktadır. Bu parametreler:

  • width
  • height
  • name
  • frameborder
  • scrolling

İframe Widht Parametresi

İframe width parametresi çerçevenin genişliğini belirlemek için kullanılmaktadır.

İframe Width Parametresi Kullanımı

<iframe width="500px" src="https://www.azkod.com"> </iframe>

 

İframe Height Parametresi

İframe height parametresi çerçevenin yüksekliğini belirlemek için kullanılmaktadır.

İframe Height Parametresi Kullanımı

<iframe height="750px" src="https://www.azkod.com"> </iframe>

Width ve Height Birlikte Kullanımı

<iframe width="400px" height="400px" src="https://www.azkod.com"> </iframe>

 

İframe Name Parametresi

İframe name parametresi çerçeveye isim vermek için kullanılmaktadır.

İframe Name Parametresi Kullanımı

<iframe name="isim" src="https://www.azkod.com"> </iframe>

 

İframe Frameborder Parametresi

İframe frameborder parametresi çerçevenin kenar kalınlığını belirlemek için kullanılmaktadır. Frameborder="0" olarak girildiğinde çerçeve kenarlığı görünmeyecektir.

İframe Frameborder Parametresi Kullanımı

<iframe frameborder="5" src="https://www.azkod.com"> </iframe>

Çerçevesiz olarak

<iframe frameborder="0" src="https://www.azkod.com"> </iframe>

 

İframe Scrolling Parametresi

İframe scrolling parametresi çerçevede kaydırma çubuklarının kullanılıp kullanılmayacağını belirlemek için kullanılmaktadır. Scrolling="yes" dediğimizde kaydırma çubukları bulunmakta, Scrolling="no" dediğimizde ise kaydırma çubukları görüntülenmemektedir.

İframe Scrolling Parametresi Kullanımı

<iframe src="https://www.azkod.com" scrolling="yes"> </iframe>

Kaydırma çubuğu olmayan

<iframe src="https://www.azkod.com" scrolling="no"> </iframe>