Bölüm 15 (HTML Dersleri), Frames/Çerçeveler
HTML ile kendi web sayfalarınızı oluşturabilirsiniz. W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.
Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.
HTML Çerçeveleri/Frames
Çerçevelerle daha doğrusu frame’ler ile, bir tarayıcı penceresinde birden fazla html belgesi görüntüleyebiliyorsunuz. Çağırılan her bir html belgesi bir çerçeve olarak anılır, her bir frame(çerçeve) de diğerlerinden bağımsızdır.
Çerçeveleri kullanma neden avantajlı değildir;
- HTML’nin ileri versiyonlarında destek bulamayabilir
- Kullanımı zordur çünkü tüm sayfayı basmak zordur.
- Web geliştiricisinin birçok HTML belgesini takip etmesi gerekir.
HTML, Frameset Elementi
Frameset elementi bir veya daha fazla frame elemanını tutar. Her bir frame elementi ayrı bir belgede tutulur.
Frameset elemanı frameset’te kaç tane sütun ve satır olacağını belirler ve kaçının ne kadar pixel ya da yüzdelik alan kaplayacağını belirler.
HTML, Frame Elementi
<frame> etiketi belirli bir pencereyi tanımlar bir frameset içinde.
Aşağıdaki örnekte 2 sütunlu bir frameset mevcut.
Birinci sütun tarayıcının %25’ini kaplıyor. İkincisi ise %75’ini kaplıyor. “frame_a.htm” birinci sütunda, “frame_b.htm” ise ikinci sütundadır.
Misal;
<frameset cols=”25%,75%”>
<frame src=”frame_a.htm” />
<frame src=”frame_b.htm” />
</frameset>Not; frameset’in sütunlarının alanı yanı cols, piksel cinsinden de yazılabilir ve sütunlardan geriye kalan yıldız ile kalan alanı kaplaması sağlanabilir. (cols=”200,500″) ve (cols=”25%,*”) gibi.
Temel notlar – Yararlı İpuçları
İpucu; bir frame’in sınırları yani border’i gözüküyorsa, kullanıcı border’i sürükleyerek boyutunu değiştirebilir. Bunu önlemek için frame etiketine noresize=”noresize” ‘i ekleyebilirsiniz.
Not; <noframes> ‘i tarayıcılar için eklemek frame’leri desteklememeleri demek.
Önemli; <body></body> etiketleri ile <frameset></frameset> etiketlerini bir arada kullanamazsınız. Bununla beraber, <noframes> eklerseniz bir miktar yazı ile beraber tarayıcılara tarayıcılar frame’leri desteklemez. Bu yüzden body etiketlerinin içine yazı koymanız gerekir. İlk örnekte nasıl olduğunu göreceksiniz.
Uygulamalar ve Örnekler |
Dikey frameset
3 farklı belgeyle dikey frame grubu.
Yatay frameset
3 farklı belgeyle yatay frame grubu.
<noframes> etiketinin kullanımı
frame’leri desteklemeyen tarayıcılar için kullanım uygulaması.
iç içe frameset’ler
3 belgeli frameset uygulaması.
Frameset ve noresize=”noresize”
Noresize özelliğinin kullanımı. Çerçeve kenarlarını değiştiremediğinizi fark edeceksiniz.
Yönlendirme frame’i
Yönlendirme frame’i nasıl yapılır. Yönlendirme frame i ikinci frame de hedefi içerir, birincisinde de tıklanabilirler vardır. “tryhtml_contents.htm” dosyası 3 link içerir. Linklerin kaynak kodları:
<a href =”frame_a.htm” target =”showframe”>Frame a</a><br>
<a href =”frame_b.htm” target =”showframe”>Frame b</a><br>
<a href =”frame_c.htm” target =”showframe”>Frame c</a>
ikinci frame hedefleri gösterecektir.
Frame içindeki belirli bir alana geçme/tıklama
İki frames. Birisi belirli bir kaynağa sahip frame içinde. Belirli olan alan <a name=”C10″>, “link.htm”dosyasının içinde. alttaki de bir benzeri…
Jump to a specified section with frame navigation
Two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file “content.htm” looks like this: <a href =”link.htm” target =”showframe”>Link without Anchor</a><br><a href =”link.htm#C10″ target =”showframe”>Link with Anchor</a>.
HTML Frame Tags
| Etiket | Tanım |
|---|---|
| <frameset> | frame grubu tanımı |
| <frame /> | bir alt pencere uygulaması (bir frame) |
| <noframes> | tarayıcılar için noframe uygulaması |