Not: Kişisel Blogumda 4 yıl önce yazmış olduğum eğitimlerdir.

Merhabalar arkadaşlar. Yep yeni bir HTML dersi ile beraberiz. Bugünkü anlatımımda sizlere HTML de Frames yani çerçeveler konusundan bahsetmeye çalışacağım.

Mesela bir Web sayfası düşünelim. Sayfayı hazırlayan kişi düşündü ki sayfanın en ortasında paylaştığım yazı, sağ yanında bu yazı ile ilişkili farklı yazıların linkleri, sol tarafında da kendi kişisel bilgilerinin bulunmasını istediği bir bölüm olan bir Web sayfası oluşturmak istedi. Bu alanlarda barıdıracağı göstereceği bilgilerde her biri ayrım HTML dosyaları içinde bulunsun istedi.
İşte böylesi bir, bir bütün sayfayı parçalara ayırıp o parçalarda farklı HTML dosyaların gösterme işlemini gerçekleştirebilmek için frames kullanırız.

Bu sayede aynı sayfa üzerinde birden fazla dosya içeriğini göstermiş oluruz.

Bu özellik Arama Motoru Optimizasyonu için olumsuz pek çok etkisi olduğu için pek tercih edilen bir yöntem değildir. Ama HTML i geliştiren mühendisler bu özelliği de kullanalım diye vermişler bende anlatıyorum.

Peki nasıl olacak bu işlem ona bakalım.

Öncelikle şunu yapalım. 3 tane farklı HTML dosyasını oluşturalım.

Orta Sayfa İçin

 

 

Sol Taraf İçin

 

 

Sağ Taraf İçin

 

Bunlar bildiğimiz normal HTML sayfalarımızdı.

Şimdi sıra Frame sayfamızı oluşturmada. Ama sayfayı hazırlamadan biraz bahsetsem nedir ne değildir iyi olacaktır.

  • Öncelikle bilmemiz gereken en temel şey frame etiketini body etiketi içinde kullanamayız.

 

  • Bir frame oluşturacaksak bunu <frameset> …. </frameset> etiketleri ile yaparız.

Tek başına bir anlamı var mı tabi ki yok.

Frameset ile kullanabileceğimiz parametrelerimiz var. Bunlardan en önemlilerinden biri cols diğeri ise rows.

Ne işe yarar bu cols ve rows?

 

  • Eğer sayfayı dikey parçalara ayıracaksak o zaman Cols parametresini kullanırız.

 

  • Yatay parçalara ayıracaksakta Rows parametresini kullanırız.

 

  • Bu iki parametrede ya piksel şeklinde yada yüzdelik şekilde değer alır.

Ne demek istediğimi hemen bir örnek ile görelim yoksa anlamak çok zor söylediklerimi.

Diyelim ki sayfayı dikey olarak 3 parçaya böleceğim. Tüm sayfayı % 100 olarak düşünürsek sol tarafın %15 lik bir alanı, orta tarafın ise %70 lik bir kısmı ve sağ tarafında geri kalan %15 lik alanı kaplamasını istiyorum buna göre frame kodlarımı yazayım.

birde pixel şeklinde yazalım.

şeklinde olacaktır.

Burada şöyle bir sorun oluşması normal belki % lik yazarken değilde piksel yazarken sayfanın pixsel değerini bilemeyebiliriz. Burada * işareti imdadımıza yetişir.

Mesela diyelimki sağ ve sol yanlar için 200 200 değerlerini girdik, orta için kalan değeri bilmiyoruz. Onun için herhangi bir değer girmeyiz sadece *  koyarız bu yıldız geri kalan değeri orta kısma aktaracaktır.

  • % lik kullanırken de piksel değer yazarken de kullanabiliriz.

 

  • Ayrıca bir değeri piksel değeri ile bir değeri % lik olarak karma bir şekilde yazabiliriz böyle bir durumda kalan değer için * kullanmak kaçınılmaz olacaktır.

 

Peki az önce oluşturduğumuz sayfaları bu frameler içine nasıl bağlayacağız ?

O işlemide <frameset> etiketi içinde kullanacağımız <frame> etiketi ile yaparız.

Frame etiketinin sahip olduğu src parametresi ile dosya isimlerini yazarak yolu gösteririz.

  • Burada unutmamamız gereken şey ise dosyalarımızın, frame yazdığımız HTML dosyası ile aynı klasör içinde olması gerektiğidir.

 

  • Eğer farklı yerlerde olursa adresin tam girilmesi gerekir.

Nasıl kullanıldına bir bakalım.

<frameset>

<frame src=”Orta.html”>

</framset>

 

  • Unutmayalım Frame etiketinin kapanış etiketi yoktur.

Haydi o zaman öğrendiklerimizi bir de HTML dosyamızda görelim.

 

Anlatmaya çalıştığım şeyi böylelikle yapmış olduk. Birde yatay parçalanmış halini görelim.

 

 

Peki yatay ve dikey frame leri aynı anda kullanmak istersem ne olacak?

Bunun için frame içinde frame kullanmamız gerekecekti.

Mesela ilk olarak sayfayı iki parçaya bölelim sonrada alt kısmı dikey olarak 2 parçaya bölelim.

<frameset rows=”50%,50%”> <frame name=”Sol” src=”Solyan.html”> <frameset cols=”20%,*”> <frame name=”Orta” src=”Orta.html”> <frame name=”Sağ” src=”Sagyan.html”> </frameset> </frameset>

Şeklinde yapacaktık birde nasıl sonuç aldığımızı görelim.

 

Şimdiye kadar dikkat ettiyseniz frameleri oluşturduğumuz çizgiler belli bir şekildedir ve fare imleci ile çekilerek yeniden boyutlandırılabilir durumdadır.

Eğer yeninden boyutlandırma işlemini açık bırakırsak sayfa kullanıcının elinde oyuncak olur.

Öyleyse çok özel bir durum olmadıkça bu özelliği kapatmakta fayda vardır.

Peki bunu nasıl yapacağız?

 

<frame> etiketine ait bir parametre olan noresize parametresi ile halledeceğiz. İstersek oluşan frameleri bir birinden ayıran çizgiyi yok etnek istersekte frameborder parametresini kullanırız.

Kodların nasıl kullanıldığına bir bakalım.

şeklinde yazılmalıdır.

Son olarak birde iframe den bahselim.

Bazen oluşturduğumuz frameler içinde sadece kendi dosyalarımızı değil farklı Web sayfalarını görüntülemek isteriz. İşte iframe farklı bir siteyi çerçeve içinde göstermek istediğimizde kullanılır.

Boyutlandırılması için bazı parametrelerimiz mevcut.

Kodlarımıza bir bakalım ve sonrasında parametreleri açıklayalım.

Burada bize yabancı olan bir tane parametremiz var o da scrolling parametresi. Bu ifade kaydırma çubuğunu ifade eder yes ve no şeklinde değer alır. Kaydırma çubuğunun gösterilip gösterilmeyeceği belirlenir.

Bir hayli uzun ve detaylı bir anlatım oldu umarım aklınıza gelebilecek tüm sorulara doyurucu cevaplar verecek bir anlatım olmuştur. Bu derslikte bu kadar diyelim bir sonraki dersimizde görüşme ümidiyle. Çalışan arkadaşlarıma kolaylıklar dilerim. Vesselam.

HTML Eğitimleri 10 – Frames yazısı ilk önce Industryolog – Endüstri Mühendisliği Yazılım üzerinde ortaya çıktı.

Facebook Sayfamizdan Bizleri Takip Edebilirsiniz
Murat Bilginer

Industryolog Akademi Founder – Endüstri Mühendisi
Canias ERP Troia Geliştiricisi & Yazılım Uzmanı
7 Yıldır bildiğini paylaşmak için çabalayan bir blogger.

http://muratbilginer.net/