Wolder King: Html Dersleri

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div>
Merhaba,<br />
Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu olan bu ders size kolay gelecek. Eminim.<br />
<h3>
Formlar</h3>
<div>
Formlarda açma etiketi "input" olarak bilir ve türünü ise "type" değerine özellik vererek belirleriz. İlk olarak "text" yani yazı özelliğini göreceğiz. Sonradan "name" ile forma isim verebilir, "size" ile büyüklüğü belirtebilirsiniz. Örneğin:</div>
<div>
<br /></div>
<form name="giris" action="giris.asp" method="post"><br />
<b>Kullanıcı Adı:</b><br /><br />
<input type="text" name="kullaniciadi" size="12"><br /><br /><br />
<b>Şifre:</b><br /><br />
<input type="password" name="sifre" size="12"><br /><br /><br />
<input type="submit" name="giris" value="Giriş"><br /><br /><br />
</form><br />
<br />
<form action="giris.asp" method="post" name="giris">
Şimdi formu inceleyelim:<br />
<ul>
<li>name="isim": Form veya bir bölümüne isim vermek için kullanılır. Değerlendirmede bize yardımcı olur.</li>
<li>action="dosya": Form bilgilerinin gönderileceği veya test edileceği dosyadır.</li>
<li>method="post": Hangi şekilde dosyaya gideceğidir.. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.</li>
<li>type="tür": Kullanacağımız form nesnesidir. Burada "text" yazı kutusu, "password" şifre kutusu ve "sumbit" ile gönderme düğmesi oluşturmuş oluruz.</li>
<li>size="boyut": Form nesnelerinin uzunluğunu belirtip sadece "text" ve "password" özelliklerinde kullanılır.</li>
<li>value="deger": Butonda ya da metin kutusunda yazılacak değerler bu kısımda belirtilir.</li>
</ul>
<div>
Bunları öğrendikten sonra örneklere devam edelim. Bir yorum kutusu örneği (Çalışmaz ve sadece örnek önizlemedir):</div>
<div>
<br /></div>
<div>
<form name="yorum" action="yorum.asp" method="post"><br />
<b>Adınız Soyadınız:</b><br /><br />
<input type="text" name="adsoyad" size="24"><br /><br /><br />
<b>Yorum:</b><br /><br />
<textarea  cols="36" rows="4">Yorumunuz...</textarea><br /><br /><br />
<input type="submit" name="gonder" value="Gönder"><br /><br /><br />
</form></div>
</form>
<form action="yorum.asp" method="post" name="yarum">
Burada "textarea"yı bir "type" değeri içinde kullanmadık. Çünkü bu textarea bir form nesnesi olmayıp sadece içinde kullanılır. Özellikleri:<br />
<br />
<ul>
<li>cols="sutun sayısı"</li>
<li>rows="satır sayısı"</li>
</ul>
<div>
Bunun dışında "textarea" ve kapanma etiketi arasına içinde bulunan değer yazılır. Şimdi sadece bir tanesi seçilebilen radyo düğmeleri yapalım:</div>
<div>
<br />
<b> Öğrenmek İstediğiniz Programlama Çeşidi Nedir: </b><br /><br /></div>
<div>
<input type="radio" name="kod" value="html"> Html <br /></div>
<div>
<input type="radio" name="kod" value="css"> Css <br /></div>
<div>
<div>
<input type="radio" name="kod" value="php"> Php <br /></div>
<div>
<input type="radio" name="kod" value="asp"> Asp <br /></div>
</div>
</form>
Eğer denerseniz sadece bir tanesinin seçilebildiğini görebilirsiniz. Gördüğünüz gibi "type" değerini "radio" olarak verdik. Şimdi birden çok seçilebilen seçenekler oluşturalım:<br />
<br />
<b> Bildiğiniz Programlama Çeşitleri Nelerdir: </b><br /><br /><br />
<input type="checkbox" name="_html" value="html"> Html <br /><br />
<input type="checkbox" name="_css" value="css"> Css <br /><br />
<input type="checkbox" name="_php" value="php"> Php <br /><br />
<input type="checkbox" name="_asp" value="asp"> Asp <br /><br />
<br />
<br />
Denediyseniz birden fazla seçenek seçebiliyorsunuz. Burada da "type" değerini "checkbox" yaptık. Şimdi açılır seçim kutusu yapalım:<br />
<br />
<select name="kodlar"><br />
<option value="html"> Html </option><br />
<option value="css"> Css </option><br />
<option value="php"> Php </option><br />
<div>
<option value="asp"> Asp </option><br />
</select></div>
<div>
<br /></div>
Şimdi ise bambaşka bir seçenek kullandık. Bunu ve diğerlerini "form" tagları arasına koyabiliriz. Bu arada açılır seçim kutusunda ilk değer herzaman ilk olarak gözüken değerdir.<br />
<br />
Bu derslik bu kadar ve form oluşturmayı tam olarak öğrendik. İletişim formu bu bilgi ile oluşturulmaz. Bundan dolayı çalışan form oluşturmak için diğer sitelerden örnekeri inceleyin. Kolay Gelsin. Emek karşılığı ve soruları yorumda belirtin.

Html Eğitimi Ders 7-Form Oluşturma

Merhaba, Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu ola...

Devamı »

06:31

Html Eğitimi Ders 6-Listeleme

Html Eğitimi Ders 6-Listeleme

Merhaba, Bir önceki derste tablo işlemini görmüştük. Ve şimdi listeleme yapacağız. Çok kolay olucak. Herhangi bir uzatma anlatımı olmayac...

Devamı »

08:19

Html Eğitimi Ders 5-Tablolar

<h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" width="165" /></a>Tablolar</h3>
<div>
Tablolar çok kolaydır. Fakat büyük tabloları ve hücreleri birleştirilmiş tabloları kontrol etmek hiç kolay değildir. Neyse hadi başlayalım.</div>
<div>
<br /></div>
<div>
Tablo açmak için ilk olarak <table> etiketini kullanırız. Her satır için <tr> etiketini her satıra sütun eklemek için <tr> etiketinin içine <td> etiketi koyarız. Örneğin:</div>
<div>
<br /></div>
<div>
<table></div>
<div>
<tr></div>
<div>
<td>1</td></div>
<div>
<td>2</td></div>
<div>
</tr></div>
<div>
<tr></div>
<div>
<td>3</td></div>
<div>
<td>4</td></div>
<div>
</tr></div>
<div>
</table></div>
<div>
<br /></div>
<div>
İlk olarak tablo etiketini açtık. Sonra bir satır oluşturduk. Satırda daha kaç sütun olduğu belli değil. Sonra satıra sütun ekledik. Satırı kapattığımız zaman sütün sayısı belli oldu. Aynı şeyi aşağıyada yapıp tablomuzu bitirdik. Burası kolay kısım. Şimdi gelelim hücre birleştirmeye.</div>
<div>
<br /></div>
<div>
<div>
<table></div>
<div>
      <tr></div>
<div>
         <td colspan="2">1</td></div>
<div>
      </tr></div>
<div>
      <tr></div>
<div>
         <td rowspan="2">2</td></div>
<div>
         <td>3</td></div>
<div>
      </tr></div>
<div>
      <tr></div>
<div>
         <td>4</td></div>
<div>
      </tr></div>
<div>
   </table></div>
</div>
<div>
<br /></div>
<div>
Burada sütunları birleştirmek için "colspan". Satırları birleştirmek için "rowspan" kullandık. Bu özelliklerin hemen yanındaki kaç satırlık ya da sütunluk yer kapladığını gösterir. Örneğin 1. satırda 1 ve 2'yi birleştirmek için, yada onun yerini tutması için 2 sütunluk yer kaplamasını sağladık. Bir adet sağ doğru uzadı diye düşünelim. Sonra satırları alt alta 2 kere birleşsin diye "rowspan"a 2 yazdık. Böylece bir alta kaydı. Fakat başta "colspan" bir sütun sağa kayıp tabloyu uzatmıştı. Bundan dolayı "rowspan" ile bu uzatmaları tek tek tamamlamalıyız. Eğer boyutlarını değiştirmek istiyorsanız "width" ve "height" kullanabilirsiniz. Tablo içindeki yazıları ortalamak veya sağa, sola almak istiyorsanız "aling="center"" özelliğini kullanın. Anlamadığınızı biliyorum. Bunları kod deneme editöründe deneyerek öğrenebilirsiniz. </div>
<div>
<br /></div>
<div>
Bu ders bu kadar. Tabloları anlamak zordu. Sitenize tablolardan ekleyin ve biraz çalışın. Sonraki dersimizde tablo özelliklerini göreceğiz. Kolay gelsin.</div>

Html Eğitimi Ders 5-Tablolar

Tablolar Tablolar çok kolaydır. Fakat büyük tabloları ve hücreleri birleştirilmiş tabloları kontrol etmek hiç kolay değildir. Neyse hadi ...

Devamı »