Ç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 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: |
|
Dikkat! 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: |
|
Şimdilik form unsurlarından en dikkat çekeni olan |
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..
|
|
|
<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, |
|
|
Bir açıklama yapmam gerekiyor :) 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:) |
|
|
Yavaş yavaş form alanımız oluşuyor.. Az kaldı biraz daha
beklersek çok güzel bir form alanımız olacak.. |
|
|
Form Yapalım... -3 |
Form alanının temel
yapı taşlarını oluşturan malzemeleri öğrenmeye son sürat devam ediyoruz.. |
İş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..
|
Radyo Düğmesi |
<form><input
type="radio" name="isaret"> </form> |
Radyo düğmesi diyince aklınıza
bildiğimiz Radyolar geldi değil mi:) |
Form alanına bir adım daha
yaklaştık.. |
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. |
||
Aşağı Doğru Açılan Seçme Kutucuğu
(Select) |
||
<select name="Mevsimler"
size="1"><option selected>En Sevdiğim Mevsim |
||
Ş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: |
||
|
||
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!) |
||
|
||
Gönder ve Sil Düğmeleri |
||
<input type="submit"
name="gonder" value="gönder"> |
||
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: |
||
|
||
Gönder ve Sil düğmelerini biz
yapalım! |
||
<button type="submit"
name="gönder" value="gönder"><img
src="gonder.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.. |
||
|
Form Yapalým... -5 |
|||
|
|||
Ýþte Form Örneðimiz: |
|||
<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:) |
||
Öðüt Bölümü:) |
|||
|
|||
|
Form Yapalım... -6 |
||||||
|
||||||
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ı? |
||||||
mailto: ile form gönderme |
||||||
İsminden de anlaşılacağı gibi mail ile gönderme işlemi. Ama
nasıl? |
||||||
|
||||||
|
||||||
Örnekleri İnceleyin... |
||||||
|
||||||
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. |
||||||
Konular bitmiyor :) |
||||||
|
Ç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... |
||
Çerçeve içinde Çerçeve.. Her yer
çerçeve.. |
||
|
||
Örnekler: |
||
cerceve1.htm dosyası: |
||
Şimdi de yazdığımız kodlamayı
inceleyelim: |
||
|
||
Bir sayfaya 4 tane çerçeve sığar
mı? |
||
Bu bir arabaya 4 filin sığması kadar olağan bir durum! :) |
||
<html> |
||
Bu sayfayı
frame2.htm adı ile kaydedin.. |
||
Şimdi de bir başka örnek: |
||
|
||
Şimdi de inceleyelim: |
||
Ayrıca; |
||
|
||
|