Çerçeve (Frame) Oluşturma Html-WebTasarım ve Programlama
Çerçeve oluşturma: Web sayfamızı yatay ve ve dikey olarak bölmek için kullanılır.Çerçeve oluşturma işlemi <frameset></frameset> etiketleri arasında yapılır.
frameset etiketleri içerisinde çerçeve özellikleri için frame etiketi kullanılır.
frame etiketi özellikleri:
name: Çerçeveye isim vermek için kullanılır.
noresize: Çerçevenin büyüklüğünün değiştirilmemesini önler.
scrolling: Çerçeve ekrana sığmadığı zaman kayma çubuğu seçenekleri sunar.Alacağı değerler:yes,no,auto
marginheight: Sayfadaki ilk nesnenin yukarıdan uzaklığınıı belirler.
marginwidth: Sayfadaki ilk nesnenin soldan uzaklığını belirler.
src: İçine yerleştirilecek dosyanın url adresini belirtir.
noframes etiketi : Çerçeveyi desteklemeyen tarayıcılarda ekrana açıklama yazdırmak için kullanılır.<noframes></noframes> tagları arasına istenilen bilgiler yazılır.
Dikey Bölme: Dikey olarak bölmek için cols komutu kullanılır.Değerler piksel veya % (yüzde) olarak verilebilir.
<frameset cols=”60,*,60″></frameset>
<frameset cols=”20%,*,15%”></frameset>
Örnek: Aşağıdaki sayfayı oluşturalım.
[code language=”csharp”]
<html>
<frameset cols="20%,*,20%">
<frame name="solyan" src="solyan.html">
<frame name="orta" src="orta.html">
<frame name="sagyan" src="sagyan.html">
</frameset>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp index.html ismini vererek kaydedelim.
[code language=”csharp”]
<html>
<h1 align="center">solyan</h1>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp solyan.html ismini vererek kaydedelim.
[code language=”csharp”]
<html>
<h1 align="center">orta</h1>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp orta.html ismini vererek kaydedelim.
[code language=”csharp”]
<html>
<h1 align="center">sağyan</h1>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp sag.html ismini vererek kaydedelim.
index html dosyasını çalıştıralım.
Açıklama:
İlk olarak index.html dosyasında sayfamızı dikey olarak %20 sol,%20 sağ ,geri kalan(*) orta olacak üçe bölüyoruz. Böldüğüm ilk dikey çerçeveye solyan ismini veriyorum(name=solyan). Buraya solyan.html dosyasını çağırarak (src=solyan.html) görüntülenmesini sağlıyorum.İkinci dikey çerçeveye orta ismini veriyorum(name=orta). Buraya orta.html dosyasını çağırarak (src=orta.html) görüntülenmesini sağlıyorum.Üçüncü dikey çerçeveye sagyan ismini veriyorum(name=sagyan). Buraya sagyan.html dosyasını çağırarak (src=sagyan.html) görüntülenmesini sağlıyorum.
Yatay Bölme: Yatay olarak bölmek için rows komutu kullanılır.Değerler piksel veya % (yüzde) olarak verilebilir.
<frameset rows=”60,*,60″></frameset>
<frameset rows=”20%,*,15%”></frameset>
Örnek: Aşağıdaki sayfayı oluşturalım.
[code language=”csharp”]
<html>
<frameset rows="20%,80%,10%">
<frame name="ust" src="ust.html">
<frame name="orta" src=orta.html>
<frame name="alt" src="alt.html">
</frameset>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp index.html ismini vererek kaydedelim.
[code language=”csharp”]
<html>
<h1 align="center">Üst</h1>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp ust.html ismini vererek kaydedelim.
[code language=”csharp”]
<html>
<h1 align="center">Orta</h1>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp orta.html ismini vererek kaydedelim.
[code language=”csharp”]
<html>
<h1 align="center">Alt</h1>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp alt.html ismini vererek kaydedelim.
index html dosyasını çalıştıralım.
Açıklama:
İlk olarak index.html dosyasında sayfamızı yatay olarak %20 üst,%10 alt ,%80 orta olacak üçe bölüyoruz. Böldüğüm ilk yatay çerçeveye ust ismini veriyorum(name=ust). Buraya ust.html dosyasını çağırarak (src=ust.html) görüntülenmesini sağlıyorum.İkinci dikey çerçeveye orta ismini veriyorum(name=orta). Buraya orta.html dosyasını çağırarak (src=orta.html) görüntülenmesini sağlıyorum.Üçüncü dikey çerçeveye sagyan ismini veriyorum(name=alt). Buraya sagyan.html dosyasını çağırarak (src=alt.html) görüntülenmesini sağlıyorum.
Örnek:
Aşağıdaki sayfayı çerçeve kullanarak oluşturalım.İlk olarak orta çerçevede word ile ilgili html sayfası,soldan excel linkine tıklayınca excel ile ilgili html sayfası ,access linkine tıklanınca access ile ilgili html sayfası gelsin.Sağdaki çerçevede ilgili sayfalara link oluşturalım.
[code language=”csharp”]
<html>
<frameset cols="15%,*,25%" >
<frame name="solyan" src="solyan.html" >
<frame name="orta" src="word.html ">
<frame name="sagyan" src="sagyan.html">
</frameset>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp index.html ismini vererek kaydedelim.
[code language=”csharp”]<html><body>
<u>Konular</u><br><br>
<a href="word.html" target="orta">Word Nedir ?</a><br>
<a href="excel.html" target="orta">Excel Nedir ?</a><br>
<a href="access.html" target="orta">Access Nedir ?</a><br>
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp solyan.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
<u>Faydalı Linkler</u><br><br>
<a href="https://www.gorselprogramlama.com/" target="_blank">Görsel Programlama</a><br>
<a href="http://www.meb.gov.tr/" target="_blank">Milli eğitim Bakanlığı</a><br>
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp sagyan.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
Word, Microsoft firması tarafından dijital ortamda belgeler
hazırlamak amaçlı oluşturulmuş, gelişmiş bir kelime işlemci programıdır.
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp word.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
Excel,bir hesap tablosu (spreadsheet) programıdır. Excel, her türlü veriyi
(özellikle sayısal verileri) tablolar ya da listeler halinde tutma
ve bu verilerle ilgili ihtiyaç duyacağınız tüm hesaplamaları ve
analizleri yapma imkanı sunan bir uygulama programıdır.
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp excel.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
Access , İlişkisel Veri Tabanı Yönetim Sistemi ile çalışan bir veri
tabanı oluşturma yazılımıdır. İlişkisel Veri Tabanı Yönetim Sistemi
sisteminde bir veri tabanı dosyasında birden fazla tablo oluşturulabilir
ve bu tablolar arasında birbirleriyle ilişki kurulabilir. Kurulan
ilişkiler sayesinde farklı tablolardaki veriler sanki aynı tablodaymış
gibi kullanılabilir.
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp access.html ismini vererek kaydedelim.
index html dosyasını çalıştıralım.
İç içe Çerçeve: Dilkey ve yatay bölmeyi birarada kullanabiliriz.
Örnek: Aşağıdaki sayfayı çerçeve kullanarak oluşturalım.Diğer sorudan tek farkı aşağıya bir bölme oluşturmamızdır.
[code language=”csharp”]
<html>
<frameset rows="*,10%">
<frameset cols="15%,*,25%" >
<frame name="solyan" src="solyan.html" >
<frame name="orta" src="word.html">
<frame name="sagyan" src="sagyan.html">
</frameset>
<frame name="reklam" src="reklam.html">
</frameset>
</html>
[/code]
Yukarıdaki kodları notpad’de yazıp index.html ismini vererek kaydedelim.
[code language=”csharp”]<html><body>
<u>Konular</u><br><br>
<a href="word.html" target="orta">Word Nedir ?</a><br>
<a href="excel.html" target="orta">Excel Nedir ?</a><br>
<a href="access.html" target="orta">Access Nedir ?</a><br>
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp solyan.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
<u>Faydalı Linkler</u><br><br>
<a href="https://www.gorselprogramlama.com/" target="_blank">Görsel Programlama</a><br>
<a href="http://www.meb.gov.tr/" target="_blank">Milli eğitim Bakanlığı</a><br>
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp sagyan.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
Word, Microsoft firması tarafından dijital ortamda belgeler
hazırlamak amaçlı oluşturulmuş, gelişmiş bir kelime işlemci programıdır.
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp word.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
Excel,bir hesap tablosu (spreadsheet) programıdır. Excel, her türlü veriyi
(özellikle sayısal verileri) tablolar ya da listeler halinde tutma
ve bu verilerle ilgili ihtiyaç duyacağınız tüm hesaplamaları ve
analizleri yapma imkanı sunan bir uygulama programıdır.
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp excel.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
Access , İlişkisel Veri Tabanı Yönetim Sistemi ile çalışan bir veri
tabanı oluşturma yazılımıdır. İlişkisel Veri Tabanı Yönetim Sistemi
sisteminde bir veri tabanı dosyasında birden fazla tablo oluşturulabilir
ve bu tablolar arasında birbirleriyle ilişki kurulabilir. Kurulan
ilişkiler sayesinde farklı tablolardaki veriler sanki aynı tablodaymış
gibi kullanılabilir.
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp access.html ismini vererek kaydedelim.
[code language=”csharp”]
<html><body>
<h3 align="center">gorselprogramlama.com</h3>
</body></html>
[/code]
Yukarıdaki kodları notpad’de yazıp reklam.html ismini vererek kaydedelim.
index html dosyasını çalıştıralım.
harika bir site tüm web derslerime buradan çalışıyorum gayet başarılı teşekkür ediyorumm
kardeş sağol .bunları kurdum.
Yukarıdaki sitem açık ama istediğim şablon değil.
@atakan
hata verir sol sağyan
atakan:
tarayıcı versiyon sorunu olabilir.
bu kodla php çağıramıyor muyum ?
daha doğrusu web sayfasının orta kısmında WordPress’i nasıl çalıştırabilirim ?
@atakan
Aynen Çok İyii Ama Üst Tarafta Osla Süüper Olur Çünkü ;
ÜsT Kısımda ” İBrahim in Sitesine HOş qeLdiniz ” Yazısı olcak ,
Ziyaretçi o Site ismine Tıklayınca Sayfanın ” Ana sayfa” ına qelcek ..
yine de emeğin için çok tşk. 🙂
Fotoğraf Ekleyebilirmiyim ?
Bir Sorunla Karşılaştımda .s
ibrahim:img src ile resim ekleyebilirsin.
Yararlı bir paylaşım olmuş.
frame
iframe
nonframe hakkında da bilgi verseydiniz keşke. onları araştırırken buraya geldim.
ekşisözlükteki gibi imleçle kaydırılan bir sol frame nasıl yapılır onu merak etmiştim
aradığımı bulamadım ama baya güzel anlatmışsınız teşekkürler.
güzel paylaşım çok iyi.
okul sitesi yapmanın kodu var mı varsa olan arkadaşlar atabilirler mi?