BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 

HTML'YE GİRİŞ 2.BÖLÜM
                                                         11. ÇERÇEVELER (FRAME)
Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeriğini yerleştirmektir.
Fakat şunu da belirtmekte fayda var, birçok tasarımcı estetik açısından çerçevelere pek sıcak bakmaz; genelde üst üste tablolar kullanmayı tercih eder. Yine de pek sık kullanılmayan bu tekniği aklınızın bir yerinde tutun, belki faydalı olabilir...

ÇERÇEVE TEKNİĞİNİN GENEL MANTIĞI

Çerçeve tekniğinde, ilk önce parent(ana) frame denilen bir sayfa oluşturmak gerekir. <Frameset>... </frameset> etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfayı dikey ve yatay olarak ne oranda bölmek istediğimizi browser'a bildiririz.  Src parametresi ile ana çerçevenin bölümlerinde görüntülenecek sayfaların adreslerini bildirdikten sonra, geriye biraz önce adreslerini bildirdiğimiz sayfaları uygun bir şekilde hazırlamak kalır. Şimdi bu biraz karışık ifadeyi bir örnekle daha iyi anlayalım,  sonra da <frameset>  etiketini inceleyelim. 
Önce ana pencereyi hazırlayalım:
<html>< BR><head>
<title>Çerçeveörneği</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type
</head>
<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
<noframes>
<body>
<h1>Browser'ınızın sürümü sayfamızı görüntülemeye uygun degil, lütfen daha yeni bir sürüm
yükleyip tekrar deneyin!</h1>
</body>
</noframes>
</html>

Burada yaptığımız şey ana sayfayı soldan 150 piksel genişliğinde bölüp iki sayfa elde etmekten ibaret. Ayrıca browser'a soldan ilk bölüme (150 px olan bölüm) 'menu.html', ikinci bölüme ise 'esas.html' sayfalarını yerleştirmesini bildirdik. Burada dikkat edilmesi gereken nokta <frameset> etiketinin </head> ile <body> etiketleri arasına yerleştirilmesidir. <Noframes>...</noframes> etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm browser'lar içindir. Şimdi aşağıdaki kodlardan ilkini 'menu.html', ikincisini ise 'esas.html'  adıyla ana pencereyi kaydettiğiniz dizine kaydedin.

<html>
<head>
 <title>menu</title>
 <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>

</head>
<body bgcolor="teal">
</body>
</html>

<html>
<head>
 <title>esas</title>
 <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type></head>

<body bgcolor="Red"></body>
</body>
</html>
Son olarak tekrar ana sayfayı açtığınızda (ismi önemli değil, yeter ki diğer iki sayfa ile aynı dizinde bulunsun!) sonuç böyle olacaktır:
Çerçeve Örneği
Artık çerçevelerin mantığını anladığımıza göre bu tekniğin detaylarını inceleyelim...
11/2. <FRAMESET>  ve <FRAME> ETİKETLERİ
Aşağıda <frameset> etiketinin parametrelerini görüyorsunuz :
rowsSafayı enine bölmenizi sağlar<frameset rows="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
colsSayfayı boyuna bölmenizi sağlar<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
cols ve rows parametreleri piksel değeri alabilecekleri gibi '%' cinsinden de değer alabilirler, örneğin:
<frameset cols="%20,%80">Daha önce kullandığımız '*' ifadesi ile bölünecek alanın genişliğini browser'a bırakabiliriz:
<frameset cols="%20,*">
Son olarak sayfayı üçe veya daha fazlaya da böşebiliriz:
<frameset rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz.
frameborderAna sayfanın bölümleri arasında sınır çizgisi olup olmamasısını belirler.('yes', 'no'; veya '1', '0' değerlerini alır)<frameset cols="150,*" frameborder="1">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
borderÇerçeveler arasındaki sınırın kalınlığını piksel cinsinden belirler.<frameset cols="150,*" border="10">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>

Şimdi de <frame>; etiketinin parametreleri:



srcBunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfanın yeri
marginwidthSayfanın solundaki kenar boşluğunu belirtir
marginheightSayfanın üstündeki kenar boşluğunu belirtir
noresize'1' veya '0' değerlerini alır, '1' verilirse pencere boyutları sabitlenir.
scrolling'yes', 'no', 'auto' değerlerini alır, kaydırma çubuklarının durumunu belirler.

 FRAME UYGULAMALARI
Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları verilmiştir: 

Html'de çerçeve uygulaması 1 - ABECE WEB KURSU<frameset  rows="150,*" cols="150,*" >
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
<frame name="siyah" src="siyah.html">
</frameset>
Html'de çerçeve uygulaması 2 - ABECE WEB KURSU<frameset  rows="150,*">
<frame name="kirmizi" src="kirmizi.html">
<frameset cols="30%,*">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
</frameset>
Html'de çerçeve uygulaması 3 - ABECE WEB KURSU<frameset  rows="150,*">
<frameset cols="*,*">
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
</frameset>
<frame name="sari" src="sari.html">
</frameset>
Html'de çerçeve uygulaması 4 - ABECE WEB KURSU<frameset cols="150,*">
<frameset  rows="*,*,*">
<frame name="yesil" src="yesil.html">
<frame name="kirmizi" src="kirmizi.html">
<frame name="sari" src="sari.html">
</frameset>
<frame name="siyah" src="siyah.html">
</frameset>
Çerçevelerle çalışmaya başlamadan önce bilmeniz gereken önemli bir nokta:
Hatırlarsanız bağlantılar konusunda <a> etiketinin target isimli bir parametresi olduğundan ve bu parametrenin 'Çerçeveadı' değerini alabileceğinden bahsetmiştik. Bu parametre bize bağlantının belirttiği adresdeki sayfanın adını verdiğimiz çerçeve içinde açılmasını sağlar. Örneğin bu sayfadaki ikinci örneği ele alalım:
'İstiyoruz ki sayfanın yeşil bölümü sayfamızın menüsü olsun. Ziyaretçi buradaki bağlantılara tıklayarak sitenin diğer sayfalarına ulaşsın, ama bu diğer sayfalar sarı bölümde görüntülensin.'
İşte aşağıdaki kod bunu sağlar:
<a href="www.sayfaAdi.com\secenek1.html  target="sari">Bu link saril bölümde görüntülenecek!</a>
Gördüğünüz gibi çerçevelere verdiğimiz isimler (name) bu noktada önem kazanıyorlar...

 FORMLAR

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar <form>...</form> etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım.

FORM TÜRLERİ
Aşağıda form türlerini ve kullanılışlarını görüyoruz.:

text maxlength: Yazılabilecek maksimum text uzunluğu
value: varsayılan değer
size: Px cinsinden alanın uzunluğu
<form>
<input type="text" maxlength="10" size="12" value="İsminiz?"
</form>
<input type="text"> 
Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.
passwordTüm parametrleri text ile aynıdır.<form>
Lütfen şifre girin:<br>
<input type="password" maxlength="10" size="12">
</form>
Lütfen şifre girin:
<input type="password">
 Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir
textaraearows : Alanın karakter cinsinden yüksekliği
cols : Alanın genişliği
<form>
<textarea cols="12" rows="4">Burası bir textarea!</textarea>
</form>
<textarea >...</textarea>
  Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır.
checkboxchecked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur.<form>
<input type="checkbox" checked>seçenek 1
<input type="checkbox">seçenek 2
</form>
seçenek1
 seçenek2
<input type="checkbox>
Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.
radiochecked: sayfa açıldığında 'checked' ibaresi bulunan daire seçilmiş olur.<form>
<input type="radio" name=sec">seçenek1<br>
<input type="radio" name= "sec"checked>seçenek2<br>
<input type="radio" name="sec">seçenek2
</form>
seçenek1
seçenek2
seçenek2
<input type="radio">
Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.
selectsize: Select etiketinin karakter cinsinden boyutu
selected: Görevi checked ifadesinin aynıdır.
multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir
<form>
<select size= "1">
<option selected>seçenek1
<option>seçenek2
<option>seçenek3
</select>
<select><option>...<option>...</select> Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.
submitvalue: Butonun üzerine yazılacak metin buraya yazılır<form>
<input type="submit" value="Gönder">
</form>
<input type="submit>
Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir
resetvalue: Butonun üzerindeki metin<form>
<input type="reset" value="Sil">
</form>
<input type="reset" > 
Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.
buttonvalue: Butonun üzerindeki metin<form>
<input type="button" value="Düğme">
</form>
<input type="button>
Düğmelere JavaScript ile bazı işlevler kazandırılabilir.

 <FORM> ETİKETİ 
İşte <form> etiketinin parametreleri ve bunların işlevleri:

method'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu göndereceğiniz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı bilmiyorsanız, birçok servis sağlayıcı size form'larınızın sonuçlarını e-mail'inize gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksanız 'post' metodunu seçmelisiniz.
<form method= "post>
actionFormu göndereceğiniz CGI programının adresini action parametresiyle bildirirsiniz. Eğer yukarıda bahsedilen hizmetten yararlanmak istiyorsanız, servis sağlayıcınızdan bu programın adresini öğrenmelisiniz. Örneğin bu adres 'freeservers' için '/cgi-bin/cgiemail' 'dir.
<form method="post" action= "/cgi-bin/cgiemail">



 FORM UYGULAMASI
Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceksiniz. Bu örneği önce parça parça kendiniz yapmaya çalışın, gerektiğinde aşağıda verilen kodlardan yararlanın...

Bu siteye not verin!


Kullanıcı ismi 
Parola 
Cinsiyet EK
Bildiğiniz Uygulamalar



Sitenin içeriği
5, Çok zengin!
4, Fazlasıyla yeterli
3, Yeterli
2, Yetersiz
1, Çok kısıtlı
Sitenin tasarımı




<form name="anket">
<p><h3>Bu siteye not verin!</h3></p><p><b>Kullanıcı ismi</b>  <input value="Buraya yazın!"></p>
<p><b>Parola</b> <input type="password" maxlength="10"></p>
<p><b>Cinsiyet</b> E<input type="Checkbox">K<input type="Checkbox">
<p>Bildiğiniz Uygulamalar</p>
<p><select size="4" multiple>
<option>HTML
<option>JavaScript
<option>Css
<option>Asp
</select></p><br><br>
<p><b>Sitenin içeriği</b></p>
<p><input type="radio" name="not" value="5">5, Çok zengin!<br>
<input type="radio" name="not" value="4">4, Fazlasıyla yeterli<br>
<input type="radio" name="not" value="3" checked>3, Yeterli<br>
<input type="radio" name="not" value="2">2, Yetersiz<br>
<input type="radio" name="not" value="1">1, Çok kısıtlı <br></p>
<p><b>Sitenin tasarımı</b></p>
<p><select>
<option selected>Harika!
<option>Oldukça iyi
<option>İyi
<option>İdare eder
<option>Berbat</option>
</select></p>
<p><input type="submit" value="gönder"><input type="reset" value="sil"
</form>
HTML bölümünün burada sonuna geldik. Fakat tek başına HTML, çoğu zaman istediğimiz gibi sayfalar yapabilmek için yeterli olmaz. Artık internet'te yeralan sayfaların hemen hepsinde JavaScript kullanılmaktadır. Aşağıdaki link size daha dinamik sayfalar yapma olanağı sunan JavaScript bölümüne götürecektir.
Bu konumuzda burda bitiyor devamını ilerleyen zamanlarda devam edecez...


Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



Yorum Gönder Blogger

 
Top