HTML Çerceveleri
Çerçeveler sayesinde tarayıcınızın bir sayfasında birden fazla farklı internet sayfasını gösterebilirsiniz.
Dikey Çerçeve Örneği
<html>
<frameset cols="34%,33%,33%">
<frame src="http://mimarlik.uzerine.com/">
<frame src="http://matlab.uzerine.com/">
<frame src="http://sizofreni.uzerine.com/">
</frameset>
</html>
Yatay Çerçeve Örneği
<html>
<frameset rows="34%,33%,33%">
<frame src="http://tarantino.uzerine.com/">
<frame src="http://java.uzerine.com/">
<frame src="http://e-muzik.uzerine.com/">
</frameset>
</html>
Frameset Komutu
<frameset> komutu ile HTML sayfanıza tarayıcı pencerenizi kaç parçaya böleceğini söylersiniz. Frameset komutları sayfayı sütunlara ya da satırlara ayırır (cols ve rows nitelikleri ile). Niteliklerin yanında girilen rakamlar çerçeve büyüklüklerini belirler.
Yatay çerçeve örneğinde pencereyi rows=?34%,33%,33%? niteliği ile üç parçaya böldük. Aynı zamanda bölme işlemini yaparken sayfaların büyüklüklerini de belirlemiş olduk.
Frame komutu
<frame> komutu ile önceden frameset ile oluşturduğumuz çerçevelerin ne göstermeleri gerektiğini belirleriz. Bunun için src niteliği ile adres tanımlarız.
Dikey çerçeve örneğinde ilk frame komutu ile ilk çerçevenin gideceği yeri mimarlik.uzerine.com olarak belirledik.
NOT: Frameset komutu ile çerçeve büyüklüklerini belirlerken yüzde yerine piksel değerleri ile sayfa büyüklükleri tanımlanabilir (cols=?200,500?). Ayrıca son çerçeveye boş kalan alan direk atanabilir (rows=?25%,*?), bunun için son alana * işareti konması yeterlidir.
Noframe komutu
Bazı internet tarayıcıları frames özelliğini desteklemeyebilir. Bu yüzden frame komutu ile hazırladığınız sayfaya noframe komutu ile hazırlanan bir mesaj koyarsanız, siteyi frames desteklemeyen tarayıcı ile ziyaret edenlere bir mesaj bırakmış olursunuz.
Noresize niteliği
Frameset komutları ile açılan çerçevelerin boyutları, tarayıcı destekliyorsa, ziyaretçi tarafından değiştirilebilir. Eğer bunun yapılmasını istemiyorsak noresize niteliğini kullanmamız yeterli olacaktır.
Örnekler
Noframe örneği
<html>
<frameset rows="34%,33%,33%">
<frame src="http://tarantino.uzerine.com/">
<frame src="http://java.uzerine.com/">
<frame src="http://e-muzik.uzerine.com/">
</frameset>
<noframes>
<body> internet tarayiciniz framesi desteklemiyor! neden <a href="http://www.mozilla-europe.org/tr/firefox/">firefox</a> kullanmiyorsunuz?</body>
</noframes>
</html>
Karışık Frameset
<html>
<frameset rows="45%,*">
<frame src="http://tarantino.uzerine.com/">
<frameset cols="50%,*">
<frame src="http://java.uzerine.com/">
<frame src="http://e-muzik.uzerine.com/">
</frameset>
<noframes>
<body> internet tarayiciniz framesi desteklemiyor! neden <a href="http://www.mozilla-europe.org/tr/firefox/">firefox</a> kullanmiyorsunuz?</body>
</noframes>
</html>
Noresize?lı çerceveler
<html>
<frameset rows="45%,*">
<frame noresize="noresize"src="http://tarantino.uzerine.com/">
<frameset cols="50%,*">
<frame noresize="noresize" src="http://java.uzerine.com/">
<frame noresize="noresize" src="http://e-muzik.uzerine.com/">
</frameset>
<noframes>
<body> internet tarayiciniz framesi desteklemiyor! neden <a href="http://www.mozilla-europe.org/tr/firefox/">firefox</a> kullanmiyorsunuz?</body>
</noframes>
</html>
Yönlendirme Penceresi
Yönlendirme örneği için iki adet html dosyasına ihtiyaç duyacağız. İlki kaynak dosyamız olacak. Ugulamanın doğru çalışması için iki html dosyasının aynı klasörde olmasına dikkat edin.
ilk dosya
<html>
<body>
<a href="http://mimarlik.uzerine.com/" target="showframe">Cerceve 1</a><br>
<a href="http://matlab.uzerine.com/" target="showframe">Cerceve 2</a><br>
<a href="http://sizofreni.uzerine.com/" target="showframe">Cerceve 3</a><br>
</body>
</html>
ikinci dosya
<html>
<frameset cols="15%,*">
<frame src="ornek4_1.html">
<frame src="http://mimarlik.uzerine.com/" name="showframe">
</frameset>
</html>
Inline Çerçeve
<html>
<body>
<iframe src="http://www.uzerine.com"></iframe>
<p>Bazi tarayicilar iframe komutlarini desteklemez, bu yuzdende iframeleri gosteremez</p>
</body>
</html>
Çerçeve İçerisinden Spesifik Bir Bölgeye Yönlendirme
Bir çok web sitesinde sol tarafta yatay bir menü olur ve yönlendirme işlemleri bu şekilde yapılır. Hatta geçtiğimiz derslerdeki örneklerin bazılarında bu mantıkla çalışan bir iki uygulama yapmıştık. Şimdi gene sol tarafta bir menümüz olacak ve menüden seçtiğimiz her seçenek bizi aynı makalenin farklı başlıklarına götürecek.
Bu örnek için üç tane html dosyası hazırlamak gerekecek. ilk önce tarayıcı penceresinin sağ tarafında göstereceğimiz başlıklı makaleyi hazırlayalım (her başlığa bir yönlendirme yapacağımızı unutmadan:) ).
<html>
<body>
<a name="baslik1"><h1>Bolum 1</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik2"><h1>Bolum 2</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik3"><h1>Bolum 3</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik4"><h1>Bolum 4</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik5"><h1>Bolum 5</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik6"><h1>Bolum 6</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik7"><h1>Bolum 7</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik8"><h1>Bolum 8</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik9"><h1>Bolum 9</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<a name="baslik10"><h1>Bolum 10</h1></a>
<p>Bu bolumun amaci HTML dunyasindaki...</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Sırada ise sol taraftaki menü var. HTML sayfanızı ziyaret eden kullanıcı bu menülerdeki bağlantılar sayesinde makalenin istediği bölümüne gidebilecek.
<html>
<body>
<a href="ornek6_1.html/#baslik1" target="showframe">1. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik2" target="showframe">2. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik3" target="showframe">3. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik4" target="showframe">4. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik5" target="showframe">5. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik6" target="showframe">6. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik7" target="showframe">7. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik8" target="showframe">8. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik9" target="showframe">9. bolum icin tiklayiniz...</a><br>
<a href="ornek6_1.html/#baslik10" target="showframe">10. bolum icin tiklayiniz...</a><br>
</body>
</html>
Şimdi sıra son dosyamızda. Son dosyamız ile önce tarayıcı penceresini ikiye bölecek olan çerçeveyi hazırlayacağız. Ardından daha önce hazırladığımız dosyalar ile bu çerçevelere içerik sağlayacağız. NOT: Bu uygulamayı kendiniz denerken tüm üç HTML dosyasının da aynı klasörde olduğuna dikkat edin.
<html>
<body>
<frameset cols="18%,*">
<frame src="ornek6_2.html">
<frame src="ornek6_1.html" name="showframe">
</frameset>
</html>
</body>
Eğer herşey yolunda gittiyse ekranınız alta ki gibi gözükmeli.
Çerçeve Komutları
<frameset> çerçeve açar
<frame> çerçevelere içerik sağlar
<noframe> çerçeve özelliği desteklemeyen sayfalar için uyarı mesajı hazırlamanızı sağlar
<iframe> tarayıcı sayfasını bir kaç parçaya bölmek yerine sayfa içinde bir çerçeve yapar
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com