Çerçeve konusu ile birlikte HTML öğreniyorum yazı dizimiz sona erdi, buraya kadar öğrendiklerinizle internette siz de kendinize ait sayfalarınızı inşa edebilirsiniz, eğer bu konuda ciddi düşünüyorsanız bunun yolunun çok çalışmaktan geçtiğini sakın unutmayın, hoşunuza giden sitelerin dizayn mantığını anlamaya çalışın, hatta bunun için kaynak kodlarını inceleyin. Görsel editörleri kullanarak sayfalar hazırlayın ve sonra da editörün kodları nasıl oluşturduğuna bakın. Son olarak; iyi bir tasarımcı olmanın yolunun çok çalışmak ve devamlı araştırmakan geçtiğini unutmayın. Hepinize başarılar...





Form Yapalım...-1

Sitemiz de ziyaretçi defteri olsun istiyoruz.. Ya da ziyaretçimizin doldurması için form alanı oluşturmamız lazım..
Şimdi de Form alanı oluşturmak için gereli araç ve gereçleri öğrenelim:)

Form alanı nelerden oluşur?

Okul da ya da günlük yaşantınızda eminim ki form doldurdunuz.. Hayatınıza internet geldi ve formlarla daha çok karşılaşmaya başladınız.. Gezdiğiniz sitelerde gördüğünüz ziyaretçi defterlerinin artık kendi sitenizde olmasını istiyorsunuz..
Ancakk Ziyaretçi Defterimizin sayfasını oluşturabiliriz ama Ziyaretçi Defterimizin işleyebilmesi için CGI denen programlama dilini bilmemiz gerekir.. Biz şimdilik sadece form alanı oluşturmak ile yetineceğiz.. İleri de belki Ziyaretçi Defterinin işleyişinden de söz edebiliriz :-)

Bu kısa ziyaretçi defteri kursundan sonra gelelim form alanı oluşturmaya:

Form'u yapı taşları

Sayfamızda bulunan form, isteğe bağlı olarak değişik text alanlarından oluşabilir.. Ya da aşağı doğru açılan bir menü ile ziyaretçinin isteğini seçmesine izin verebiliriz.. Şimdi tek tek forum'u oluşturan temel yapı taşlarından söz edelim.. Bir de bunları örnekler ile gösterelim.. Sıvayın kolları Form Alanı yapıyoruz!

 

Form alanı:

Text Area (metin alanı):

Form alanının dışında da kullanılabilen text area yani metin alanı, isminden de anlaşıldığı gibi içine yazı yazabileceğimiz bir alandır..

 

Şimdi bir örnek:

<form><textarea rows="5" cols="20">Yazınızı buraya yazın!</textarea><form>

Yukarıda örneğini verdiğimiz metin alanı Form alanının bir parçasıdır.. Form alanı <form> ile başlar </form> ile biter.. Tekrar yukarıdaki örneğimize bakar isek <textarea> ile başlayan </textarea> ile biten metin alanı oluşturma etiketlerini görüyoruz.. textarea etiketinin yanına yazdığımız "rows" alanımızın yüksekliğini, "cols" ise genişliğini belirlememize yarar.. Böylece metin alanımızın boyutlarını da ayarlıyabiliriz..

Renkli Metin alanı yapalım:

<form><textarea rows="5" cols="20" style="background:#ff33ff" style="font-family:Verdana" style="color:#ffccff" "style="border style:solid;" >Buraya yazınızı yazın!</textarea></form>

Yukarıda örneğimiz ve örneğimizin altında da kaynak kodunu görüyoruz.. Bu seferki kaynak kodumuz diğerinden biraz daha uzun. Bu kodlara biraz daha yakından bakalım:
Tekrar <form> etiketi ile başlıyan </form> etiketi ile biten, alanımızın form' a ait olduğunu belirten kodlarımızı yazdıktan sonra, alanımızın metin alanı olduğunu belirten <textarea; etiketimizi yazdık. Yükseklik (rows) ve genişliği (cols) belirttik. Daha sonra, metin alanımızın zemin rengini belirten

style="background:#ff33ff"

etiketini tekrar <textarea> etiketimizin içine yazdık.. Aynı yere bu sefer yazı tipimizi ve rengini belirlemeye yarayan

style="font-family:Verdana" style="color:#ffccff" "style="border style:solid;"

etiketimizi yazdık..
Sonuç: Şeker gibi bir metin alanımız oldu:)

Dikkat!
Örneklerimiz de sözünü ettiğimiz "style" etiketlerini daha sonra ayrıntılı şekilde göreceğiz.. Şimdi kafanızı karıştırmasını istemem...
Bir de umarım renk kodlamalarını hatırladınız! Eğer hatırlamadı iseniz diğer derslerimize bir göz gezdirin!

Bu açıklamadan sonra devam edelim:)

 

 

<form><textarea rows="5" cols="26" style="background-image: url('kablumbik.gif')" style="font-family:comic sans ms" style="color:#9900ff" style="border style:solid" >Yazınızı buraya yazın!</textarea></form>

Bu seferki metin alanımızın zeminin de resimler var.. Bunu daha önceki derslerimizde de gördüğümüz "background" etiketi ile yaptık.. Normal "form" ve "textarea" etiketilerimizin yanına bu sefer:

style="background-image: url('kablumbik.gif')"

Etiketini ekledik. Böylece metin alanımızın arka planı resim ile doldu.. Ben elimde olan kaplumbikleri kullandım.. Siz de kendi zevkinize göre istediğiniz resmi kullanabilirsiniz..

Şimdilik form unsurlarından en dikkat çekeni olan
Metin Alanı ' nın nasıl yapıldığını öğrendik.. Form alanımızı oluşturan bütün unsurları oluşturduktan sonra hepsini bir araya getirip bir form oluşturacağız.. Ama biraz sabredin.. Ve unutmayın hiçkimse mükemmel değildir...

 

Form Yapalım... -2

 

Geçen haftalarda başladığımız Form'un temel yapı taşlarını öğrenmeye bu hafta da devam ediyoruz..

 

INPUT = minik metin alanı :)

 

<form> <input type="text" size="10" maxlenght="21"> </form>

 

Bir önceki dersimizde gördüğümüz form oluşturmakta işimize yarayacak olan Metin Alanının küçüğünü yaptık.. Bu minik metin alanını Form' un dışında da kullanabiliriz..
Mesela anasayfamızda..

Şimdi bu minik metin alanımızı oluşturan kodlara bir göz atalım:

İlk başta alanımızın Form' a ait olduğunu belirten <form>...</form> etiketlerimizi yazıyoruz..
Daha sonra (<input ) ile metin alanımızın başlatığını belirtiyor, -size="10"- ile kutumuzun genişliğini, -maxlenght="20"- ile de ziyaretçimizin yazabileceği metin uzunluğunu ayarlayabiliriz..
Eğer -maxlenght- değerini vermezsek normal karakter olarak 21 karakter belirlenir..
Eğer minik metin alanımızın içinde açıklayıcı bir yazı olmasını istiyorsak:

 

<form><input type="text" size="20" value="Buraya Adınızı yazın" maxlength="10"></form>

 

Yukarıdaki örnek de gördüğümüz gibi,
(kalın harfler ile yazdığımız yere dikkatle bakın.)
normal form etiketlerini ve minik metin alanımızı oluşturan input etiketlerini yazdık.. Metin alanımızın ölçülerini belirleyen ölçüleri verdik.. Artı olarak metin alanımızın içinde açıklayıcı bir yazı olmasını sağlayan value="Buraya Adınızı yazın" etiketini ekledik.. Sonuç= Metin alanımızın içinde açıklayıcı yazı oldu. :)

 

Bir açıklama yapmam gerekiyor :)
Neden bu metin alanımıza minik metin alanı dedik? Çünkü bu metin alanımızın sadece enini ayarlıyabiliyoruz...
Boyunu ayarlıyabilmek için büyük metin alanımızı yapmamız lazım.. Sanırım anladık :)

Bu açıklamadan sonra devam edelim:)

 

Parola yazmak için metin alanı..

 

<form> <input type="password" size="10" maxlenght="21"> </form>

 

Yukarıdaki metin alanının içine birşeyler yazmaya çalışın bakalım:)
Yazdıklarınız yıldız şeklini aldı değil mi? Bu yüzden metin alanımızın ismi "Parola yazmak için metin alanı"..
Buradaki yaptığımız tek değişiklik input (yani minik metin alanımızı oluşturan etiket) etiketinin yanındaki type (tip) etiketinin değerini password yapmak..

password daha çok e-mail kullanırken lazım olur.. Ya da üye olduğumuz bir sayfaya girebilmek için..

 

Yavaş yavaş form alanımız oluşuyor.. Az kaldı biraz daha beklersek çok güzel bir form alanımız olacak..
Bol bol denemeler yapıyor, araştırmalar yapıyoruz değil mi?
Ee ne demişler çok yaşayan değil çok gezen bilirmiş:) Biz de çok araştırma yaparak bu gezi olanağımızı kullanmış oluruz:)

 

 

Form Yapalım... -3

Form alanının temel yapı taşlarını oluşturan malzemeleri öğrenmeye son sürat devam ediyoruz..
Sonunda çok güzel bir form alanımız olacak.. Hadi kolları sıvayın bakalım:)

İşaret koyulan kutucuklar (Checkbox)

<form><input type="checkbox" name="isaret"> </form>

Yukarıdaki örneklerimize bir bakın.. Yazıların yanındaki kutucuklara işaret koyun..
Bu yaptığımız kutuların ismi işaret Kutucukları yani "Checkbox"..
Bunları da diğerleri gibi Form alanında kullanırız..
Gelin bu işeret kutucuklarını yakından inceleyelim.
Artık alıştığımız ve form alanı oluştururken unutmamamız gereken etiket <form> etiketini hiç unutmuyoruz değil mi?
Daha sonra da (bakınız diğer 2 dersimiz:) diğer 2 dersimizde de gördüğümüz "input" etiketini görüyoruz.. Burada değiştirdiğimiz tek kısım "input" etiketinin type' ini (tipini) "checkbox" yani işaret kutucuğu diye adlandırırız..

 

Radyo Düğmesi

 

<form><input type="radio" name="isaret"> </form>

 

Radyo düğmesi diyince aklınıza bildiğimiz Radyolar geldi değil mi:)
Haklısınız ilk başta benim de aklıma öyle gelmişti. Diğer forum öğelerinden pek bir farkı yok.. Sadece Type (tip) ' ini "Radio" Yapmamız yeterli..

Form alanına bir adım daha yaklaştık..
Biraz sabır ve çalışma ile çok güzel bir form alanımız olacak. Bir dahaki dersimizde yine form alanımıza tanımaya devam edeceğiz..

 

Form Yapalım... -4

Form alanımız yavaş yavaş oluşmaya başladı mı? Bir form alanım olsun diye sabırsızlanıyormusunuz? O zaman siz form alanı yapmaya hazırsınız.
Bizi form alanına bir adım daha yaklaştıracak olan kodları öğrenmeye devam edelim..

Aşağı Doğru Açılan Seçme Kutucuğu (Select)

<select name="Mevsimler" size="1"><option selected>En Sevdiğim Mevsim
<option value="Sonbahar">Sonbahar
<option value="Kış">Kış
<option value="İlkbahar">İlkbahar
<option value="Yaz">Yaz</select>

Şimdi de yukarıdaki kutucuktan bir seçim yapmaya çalışın. En sevdiğiniz mevsimi seçin. Örnek de gördüğümüz kutucuğun adı: Aşağı Doğru Açılan Seçme Kutucuğu. Şimdi de kodlamamızı inceliyelim:
Form alanımzın içerisin de "select" yani
"aşağı doğru açılan seçme kutucuğu" nun ismini belirliyoruz = "name="mevsimler".

Ben mevsimler ismini verdim. siz istediğiniz ismi verebilirsiniz. Bu daha sonra formu bulmanızı kolaylaştırır ve formunuzun içeriğine uygun olsa iyi olur.

 

Daha sonra "option selected" ile açılan kutumuzun başlık yazısını yazıyoruz.. Yani kutumuzun konusunu belirliyoruz. Daha sonra aşağı doğru açılan menümüzün seçeneklerini belirliyoruz: "option value=Sonbahar" . (Tekrar söylüyorum burada ben örnek menümüzün içeriğine göre seçenekler yaptım!)
Son olarak </select> diyor ve menümüzü bitiriyoruz...

Bu Menümüz de sadece </select> etiketini bitiririz. Diğer etiketleri bitirmeyiz. Mesela "option value="isim" etiketi bitirilmez. Bu önemli noktayı da anladık değil mi? :)

 

Gönder ve Sil Düğmeleri

<input type="submit" name="gonder" value="gönder">
<input type="reset" name="sil" value="sil">

Bakın ne kadar tatlı iki butonumuz oldu değil mi? Şimdi onlara tıklayın. (Biliyorum ben demesen de tıklayacaktınız:) Ama hiçbirşey olmadı değil mi? Gelin bu butonlarımıza biraz daha yakından bakalım:

<input> etiketini hatırladınız değil mi? Bu sefer <input> etiketimizin Gönder botunundaki type (yani tip)' i "submit" , Sil butonundaki değeri type' i ise "reset" .

Form' umuzun nasıl gönderileceğini daha sonra öğreneceğiz.. Yani formun bize nasıl bilgi ulaştırdığını.. Şimdi geçelim..

 

Gönder ve Sil düğmelerini biz yapalım!

 <button type="submit" name="gönder" value="gönder"><img src="gonder.jpg"></button>
<button type="reset" name="sil" value="sil"><img src="sil.jpg"></button>

Düğmelerimizi biz yapalım dememin sebebi, butonlarımızı bu sefer kodlar ile değil de bir grafik programı ile yapmamızdır..
(Kendi yaptığımız butonlar hakkındaki geniş bilgiyi Photoshop derslerinde bulabiliriz:) )
Butonumuzun kodlamasını daha yakından inceleyelim. Öncelikle butonumuzun type (tip) ' ini belirledik.. Gönder düğmesinin ki "gönder" sil düğmemizin tipi ise "sil" . Butonumuzun bitirmeden önce ise grafik öğemizi belirliyoruz. Ben elimde olan gönder ve sil grafiklerini kullandım. Siz de elinizde olan ama gönder ve sil düğmesi olduğu belli olan bir düğme kullanın.


Vee mutlu son :)
Form alamızın inşaatın da gerekli olan bütün malzemeleri öğrendik.. Sıra geldi başlı başına bir form yapmaya.. Sonra ki dersimizde öğrendiklerimizi birleştirerek çok güzel olacağına inandığım bir form yapacağız.
Bekleyin :)

 

Form Yapalým... -5


Ýþtee beklediðimiz an geldi. Bugüne kadar öðrendiklerimiz ile bir form alaný yapacaðýz. Umuyorum ki çok güzel olacak. Haydi kollarý sývayalým bakalým þöyle bir. Sýra ellerimiz de. Baþlýyoruz kodlamayý yapmaya..

Ýþte Form Örneðimiz:

<html>
<head>
<title>Bize ulaþýn</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body bgcolor="#FFFFFF">
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%"><img src="img-/cicek.jpg" width="230" height="252"></td>
<td width="65%"> <div align="center">
<h1><font face="Arial, Helvetica, sans-serif">Bize Ulaþýn</font></h1> </div>
</td>
</tr>
</table>
<p>&nbsp;</p>
<table width="75%" border="0" cellspacing="0" cellpadding="0" height="391">
<tr>
<td width="37%" height="42"> <div align="right">
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Adýnýz Soyadýnýz: <br> <br> </font>
<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"> </font></p> </div> </td>
<td width="63%" height="42">
<form name="form2" >
<input type="text" name="textfield2"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2">
<div align="right">
<p><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">e-mail adresiniz: <br> </font>
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></p> </div>
</td>
<td width="63%" height="2"> <form name="form1" > <input type="text" name="textfield3"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2"> <div align="right">
<p>
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Web Siteniz: <br> </font>
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"><br> </font></p> </div>
</td>
<td width="63%" height="2"> <form name="form1" >
<input type="text" name="textfield32" value="http://"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2"> <div align="right">
<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Eðitim Durumunuz: <br> </font></div>
</td>
<td width="63%" height="2">
<form name="form3" >
Ýlk <input type="radio" name="radiobutton" value="radiobutton">
Orta <input type="radio" name="radiobutton" value="radiobutton">    
Lise <input type="radio" name="radiobutton" value="radiobutton"> </form>
</td>
</tr>
<tr>
<td width="37%" height="2"> <div align="right">
<font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000">Sitemizi Nasýl Buldunuz? <br> </font></div>
</td>
<td width="63%" height="2">
<form name="form4">
<select name="temas" size="1">
<option selected>Bir Seçim Yapýn</option>
<option>iyi</option>
<option>kötü</option>
<option>fena deðil</option>
</select> </form>
</td>
</tr>
<tr>
<td width="37%" height="80"> <div align="right">
<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Bize Söylemek Ýstedikleriniz <br> </font></div>
</td>
<td width="63%" height="80">
<textarea name="textfield" cols="35" rows="5">Buraya mesajýnýzý yazýnýz.</textarea>
</td>
</tr>
<tr>
<td width="37%" height="32"> 
</td>
<td width="63%" height="32">
<form name="form5" >
<input type="submit" name="Gonder" value="Gönder">      
<input type="reset" name="Sil" value="Sil"> </form> </td>
</tr>
<tr>
<td width="37%"> 
</td>
<td width="63%"> 
</td>
</tr>
</table>
</body>
</html>

Örneðimizi Ýnceleyin..



 

Yukarýdaki HTML kod kümesi size çok uzun geldi deðil mi? Aslýn da hiç de korkulacak birþey deðil.. Birazcýk sabýr bize yeterli olacaktýr:)
Yandaki butona týklayarak bu HTML kod kümesinin oluþturduðu Form Alanýný görebilirsiniz. Bu form' a bakarak siz de kendi web siteniz için formlar yapabilirsiniz..

Öðüt Bölümü:)

Bir daha ki dersimiz de Form gönderme iþlemi nasýl yapýlýr? sorusuna cevap bulacaðýz..

O zamana kadar siz de derslerinize iyi çalýþýn:) Webdersleri Forum'u takip edin.

Bu kadar öðüt yeter mi? :)

 

 

 

 

Form Yapalım... -6


Form alanı yapmayı öğrendik. Peki şimdi ne eksik? Aklımıza geliyor değil mi? Eksik olan Formumuzu gönderme işlemidir. Form yaptık ama bu gönder butonuna bastığımız zaman bu form nereye gidecek? İşte bugün de bu sorulara cevap bulacağız..

Form nasıl gönderilir? Nereye gider?

Form gönderme işlemi HTML gibi diller ile yazılan programlar vasıtası ile yapılır. Bu programlar CGI ve ASP ' dir. Biz burada o programları öğrenmeyeceğiz. Ama formumuz yolda mı kaldı?
Hayır..
Bu formu göndermenin ikinci bir yolu daha var. "mailto:"

mailto: ile form gönderme

İsminden de anlaşılacağı gibi mail ile gönderme işlemi. Ama nasıl?

Bir Form alanı oluşturduğumuz zaman bu alanı <form>..</form> etiketleri içinde yaparız. Buraya kadar doğru. Formu göndermek içi ise, <form> etiketinin içinde Action yüklemi ile formumuzun doldurulup gönderilemsi ile içindeki bilgilerin nereye, hangi adrese gideceğini belirleriz. Yine form etiketinin içirisin de olan Method yüklemine ise hangi yöntem ile göndereceğimizi bildiririz.

Biraz karışık geldi değil mi? Korkmayın.. Şimdi daha derine inelim..

Şöyle bir Form etiketi düşünelim:

<FORM ACTION="mailto:myserenity1@hotmail.com" METHOD=GET>

Bu "mailto:" ile form gönderme işlemidir. Dikkat etmemiz gereken birşey var ki, bu yöntem ziyaretçinin bilgisayarın da bir uyarı mesajı çıkmasını sağlar. Bu yüzden çok tercih edilmez.

 

Yukarıdaki örnekte ben kendi e-mail adresimi yazdım. Siz de mailto: ile hazırlayacağınız formunuza kendi e-mail adresinizi yazmalısınız..

 

Örnekleri İnceleyin...

 

 

 

 

Birinci Form Örneği

İkinci Form Örneği

Üçüncü Form Örneği

Diğer Form Gönderme Teknikleri

Mailto: bizim için en kolay form gönderme tekniğidir. Ancak örneklerde de gördüğümüz gibi uyarı mesajı verdiği için pek tercih edilmez.
Bunun yerine programlama dilleri ile yazılmış form gönderme teknikleri kullanılır.
Ama bizim için yapılmış olan ücretsiz servisler de var. Bu sayede hiçbir programlama diline ihtiyaç duymadan bir ziyaretçi defteri sahibi oluyoruz.

Konular bitmiyor :)

Form alanı yapmasını ve gönderme işlemini öğrendik.. Geriye ne kaldı??
Haftaya CSS ile dinamik, rengarenk sayfalar hazırlayacağız.. O zamana kadar form gönderme işlemini iyi okuyun iyi anlayın:)

 

 

Çerçeve (frame)

Bazı sayfalarda görmüş olmalısınız. Yanda yeni bir pencere içinde linkler diğer yanda ise yazılar.. Yani sayfa sanki 2 tane pencereden oluşuyor ama tek pencere içerisinde görüntüleniyor...

Web tasarımcıları çerçeveyi pek sevmez. Yani hoş bir görüntü kazandırmaz sayfaya. Web tasarımcısı kadar ziyaretçi de bundan pek hoşlanmaz.. Ama bazı zamanlar da bir kolaylıktır Çerçeveler.. Ve ayrıca Çerçeve teknolojisi HTML' e sonradan dahil edilmiş.. Buna göre eski browserlar bunu anlamayacak! Bir kuralı daha hatırlayalım: Yaptığımız sayfalar bizim bilgisayarımızdaki gibi görünmez ziyaretçimize hiçbir zaman!

Bu derste Çerçeve yani Frame etiketini göreceğiz..

Çerçeve içinde Çerçeve.. Her yer çerçeve..


Çerçeveleri oluşturan etiket <frameset> etiketidir. <frame> etiketi ile de her bir frame'in (çerçevenin) özelliklerini ve frame'de gösterilecek sayfayı belirtiyoruz...

Şimdi örneklerimizi yapalım ve inceleyelim:

Örnekler:

cerceve1.htm dosyası:

<html>
<head>
<title>Sol çerçeve</title>
</head>
<body bgcolor="#FF0000">
<font size=7>Sol Çerçeve</font>
</body>
</html>

cerceve2.htm dosyası:

<html>
<head>
<title>Sağ Çerçeve</title>
</head>
<body bgcolor="#000099">
<font size=7>Sağ Çerçeve</font>
</body>
</html>

Şimdi de bu iki çerçeveyi içine koyacağımız Ana Çerçeveyi yapalım ve frame.htm adı ile kaydedelim:

<html>
<head>
<title>Çerçeveli bir sayfa</title>
</head>
<frameset cols="30%, 70%">
<frame name="solcerceve" src="cerceve1.htm">
<frame name="sagcerceve" src="cerceve2.htm">
<noframes>
Browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>

Şimdi de yazdığımız kodlamayı inceleyelim:


Yukarıdaki butona basarak örneği inceleyebilirsiniz.

Örneği incelediyseniz şimdi de yapımında kullandığımız kodlamayı bir inceleyelim:

Öncelikle normal olarak 2 tane HTML sayfası yazdık. Ve bunları cerceve1.htm ve cerceve2.htm adı ile kaydettik. Daha sonra bu yaptığımız sayfaları içine alacak olan frame.htm ' yi yazdık.. Burada diğer sayfalardan farklı olarak <frameset> etiketini kullandık.. <frameset cols="30%, 70%"> bu etiket ile sayfaların bir tanesini sayfanın yüzde 30'unu kaplayacak şekilde diğerini ise sayfanın yüzde 70'ini kaplayacak şekilde ayarladık..
Daha sonra da sayfamızın içine çerçeveleri yerleştirdik
<frame name="solcerceve" src="cerceve1.htm">
ile sol çerçeveyi,
<frame name="sagcerceve" src="cerceve2.htm">
ile de sağ çerçeveyi sayfamıza yerleştirdik. Burada dikkatinizi çekti mi bilmem? <noframes> etiketi ile tarayısıcı eski olan ziyaretçimizi uyarıyoruz ve çerçeve teknolojisini destekleyen bir browser yüklemesini söylüyoruz. (biz de çok oluyoruz:) )

Bir sayfaya 4 tane çerçeve sığar mı?

Bu bir arabaya 4 filin sığması kadar olağan bir durum! :)

Şimdi biraz önce yazdığımız çerçevelere 2 çerçeve daha ilave edelim. Ve cerceve3.htm ile cerceve4.htm isimleri ile kaydedelim. Oldu mu? O zaman bunları bir sayfada birleştirelim:

<html>
<head>
<title>Çerçeveli Sayfa</title>
</head>
<frameset cols="50%, 50%" rows="50%, 50%">
<frame name="bir" src="cerceve1.htm">
<frame name="iki" src="cerceve2.htm">
<frame name="uc" src="cerceve3.htm">
<frame name="dort" src="cerceve4.htm">
<noframes>Browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>

Bu sayfayı frame2.htm adı ile kaydedin..
Şimdii, bu sayfanın diğer sayfadan bir farkı var. Haydi şimdi bunu bulun. Demiyeceğim..
Bu sayfadaki fark <frameset rows=""> etiketidir. Bu etiket çerçevelerimizi yatay bir şekilde sayfaya yerleştirir.. (cols' da dikey öyle değil mi?)

Şimdi de bir başka örnek:


<html>
<head>
<title>Çerçeveli Sayfa</title>
</head>
<frameset rows="50%, 50%" frame border="yes" border="5" bordercolor="#000000">
<frame name="bir" src="cerceve1.htm" noresize >
<frameset cols="*,*">
<frame name="iki" src="cerceve2.htm" scrolling="yes">
<frame name="uc" src="cerceve3.htm">
<noframes>Browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>

Şimdi de inceleyelim:


Örneğimizi incelediyseniz eğer bu sayfanın diğer yaptığımız çerçeveli sayfalardan farklı var değil mi? Eveet, bayağı bir farklı :)

Sayfamızın kodlamasına baktığımızda:
frameborder="yes" border="5" bordercolor="#000000">
ilk dikkatimizi çeken etiket frameset etiketimize ekledğimiz bu etiket çerçevelerimizin kenarlarının ölçülerini belirlemeye yarar. "frameborder" etikenin iki şekli vardır. "Yes" çerçevenin kenarlıklı olmasını, "no" ise kenarlıksız olmasını sağlar.

<frame name="bir" src="cerceve1.htm" noresize > etiketinin sonunda bulunan "noresize" etiketi çerçevelerin ölçülerinin değişmesini önlüyor. Yani alttaki çerçeve bakarsanız bunun ölçülerini mouse işaretçiniz ile değiştirebileceğinizi görüyorsunuz.

Son olarak Çerçeve 2 de uyguladığım bir yöntem olan; scrolling="yes"> etiketi ile kaydırma çubuklarının olmasını istiyorum. Bunu 3 şekilde ayarlayabiliyoruz: "yes" kaydırma çubuğu olsun, "no" kayfırma çubuğu olmasın ve "auto" gerektiği zaman kaydırma çubuğu aktif olsun.

Ayrıca;

<frame name="uc" src="cerceve3.htm" marginwidth="0" marginheight="0">

marginwidth ve marginheight etiketleri ile çerçevenin içini de kontrol edebiliyoruz. marginwidth="50" yaparsak çerçevenin içine yazdığımız yazı kenarlardan bir hayli uzaklaşacaktır.

Bu derste de çerçeveleri inceledik. Bir sonraki ders de çerçevelerin inceliklerini öğreneceğiz.. Çerçevelerde yapılan en sık hatalardan söz edeceğiz.

Anlayamadığınız ya da öğrenmek istediğiniz konuları bana sorabilirsiniz.. Her zaman cevap alacağınızdan emin olun..