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:
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.
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.
<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>
<frameset> etiketi ile birlikte kullanılmaktadır. Frame etiketi ile sayfada gösterilecek içeriğin alanı oluşturulur.
<html>
<head>
</head>
<frameset>
<frame name="sayfa1" src="sayfa1.html">
<frame name="sayfa2" src="sayfa2.html">
</frameset>
</html>
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.
<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>
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.
Herhangi bir html dosyasını çerçeve içinde göstermek için :
<iframe src="dosya_adresi.pdf"> </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:
İframe width parametresi çerçevenin genişliğini belirlemek için kullanılmaktadır.
<iframe width="500px" src="https://www.azkod.com"> </iframe>
İframe height parametresi çerçevenin yüksekliğini belirlemek için kullanılmaktadır.
<iframe height="750px" src="https://www.azkod.com"> </iframe>
<iframe width="400px" height="400px" src="https://www.azkod.com"> </iframe>
İframe name parametresi çerçeveye isim vermek için kullanılmaktadır.
<iframe name="isim" src="https://www.azkod.com"> </iframe>
İ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.
<iframe frameborder="5" src="https://www.azkod.com"> </iframe>
Çerçevesiz olarak
<iframe frameborder="0" src="https://www.azkod.com"> </iframe>
İ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.
<iframe src="https://www.azkod.com" scrolling="yes"> </iframe>
Kaydırma çubuğu olmayan
<iframe src="https://www.azkod.com" scrolling="no"> </iframe>
| Önceki Ders: Html Formlar | Sonraki Ders: Html Medya |