Ana Sayfa Arşiv Abonelik RSS İletişim | Hakkında

HTML Dersleri - 2

Yazımızın ilk kısmında bir HTML belgesinin temel bölümlerinden, biçimlendirme etiketlerinden ve listelerden bahsedilmişti. Bu sayıda ise tablolar ve formlar konumuz olacak.

<table> etiketi HTML belgemizde tablo oluşturmamızı sağlar. Oluşturacağımız tabloya satır ve sutun ekleme işini <td> ve <tr> etikerleri ile belirleriz. <tr> satırları belirlemede, <td> ise sutunları belirlemede kullanılır. Basitçe bir tablo oluşturacak olursak: <table>
 <tr>
  <td>satır1 hücre1</td>
  <td>satır1 hücre2</td>
 </tr>
 <tr>
  <td>satır2 hücre1</td>
  <td>satır2 hücre2</td>
 </tr>
</table>

Aynı şekilde <table> etiketi bizlere bir tablo içerisinde başka bir tablo oluşturma imkanını da sunmaktadır. Bu şekilde bir kullanım için tek yapmamız gereken iç kısımda oluşturacağımız tablonun hangi satıra ve sutuna geleceğine karar vermek. Örnek olarak 2. satırın 1. hücresi içerisinde oluşturacağımızı varsayarsak: <table>
 <tr>
  <td>satır1 hücre1</td>
  <td>satır1 hücre2</td>
 </tr>
 <tr>
  <td><table> 2. tablomuz </table></td>
  <td>satır2 hücre2</td>
 </tr>
</table>

<form> etiketi ile bir form başlattığımızı belirtmiş oluruz. Formun diğer tüm elemanları <form> </form> etiketleri arasında yer almalıdır. Aksi takdirde hiç bir fonksiyonu kalmamaktadır. Oluşturmuş olduğumuz formdaki bir yerlere gönderilmesi için <form> etiketine ek olarak “action” ve “method” gibi özelliklerin eklenmesi gerekmektedir. <form action="dinamiksayfa.php" method="POST"> </form> <form action="dinamiksayfa.php" method="GET"> </form>

Action kısımında yönlendirme işlemi uygulanır ve yönlendirilen sayfada from verilerinin değerlendirilmesi olur. Form verilerinin değerlendirilmesinin gerçekleşmesi için yönlendirilen sayfanın dinamik bir sayfa yapısında olması(php, asp... gibi dillerle kodlanmış olması) gerekmektedir. Method kısımında ise verilerin gönderilirken kullanılacak olan metod yazılır. POST metodu ile gönderilen veriler kullanıcı tarafından görülemezler, ancak GET metodu ile gönderilen veriler adres çubuğunda gözükürler ve sonradan müdahale edilebilir. Bu nedenle POST metodu GET metoduna göre daha güvenlidir.

<input> etiketi <form> etiketi ile yaratmış olduğumuz forma değişik türde olan form elemanlarını girmemizi sağlar. Bu elemanlar ‘type’, ‘value’, ‘name’ gibi özellikler ile birlikte kullanılırlar.

• name=”“: Formumuza eklediğimiz form elemanlarındaki bilgiler gönderildikten sonra değerlendirilmesi yapılırken gerekli olan özelliktir. Daha ilerde dinamik sayfalar oluştururken formlardan gelen bilgilerin değerlendirmesini yaptığımız zaman çok daha anlaşılır bir hal alacaktır.
• value=”“: Form elemanının standart olarak aldığı değeri belirtmede kullanılır. Eğer bir değer atanmazsa otomatik olarak boş değer atanır.
• type=”“: Form elemanının ne olduğunu belirler. Bunlar:
  • Checkbox, radio,
  • Text, password,
  • File,
  • Submit, reset olabilir.

• Checkbox ve radio: Checkboxlar aynı isim altındaki seçeneklerden birden fazlasının seçilmesinde kullanılır. Bir insanın hem pop müzik dinlerken hem de rock müzik dinleyebileceği tipte durumlar örnek olabilir. <form>
 <input type="checkbox" name="muzikler" value="pop" /> Pop
 <input type="checkbox" name="muzikler" value="rock" /> Rock
</form> Ancak, radiolar bunların tam aksine aynı isim altındaki seçeneklerden sadece bir tanesini işaretlememize izin verir. Bir insanın hem erkek hem de bayan olamayacağı gibi durumlar da radioların kullanım alanına örnek olabilir. <form>
 <input type="radio" name="cinsiyet" value="erkek" /> Erkek
 <input type="radio" name="cinsiyet" value="bayan" /> Bayan
</form>
• Text ve password: Bu özelliklerin ikisi ile de forma metin kutusu ekleriz. Ancak, aralarında küçük bir fark vardır. Text dediğimiz zaman sayfamızda yazmış olduğumuz karakter görünür bir şekilde çıkarlar fakat, password dediğimiz zaman yazmış olduğumuz karakterler *** lar şeklinde gözükürler. (ki bundandır ki şifrelerimizin güvenliği açısından bir nebze de olsa önem teşkil eder.)
• File: Formumuza herhangi bir dosyanın adresinin girilmesi için bi tane ‘gözat’ butonundan ve dosyanın adres bilgilerinin yer aldığı bir metin kutusundan oluşan yapıyı eklememize olanak sağlar.
• Submit ve reset: Forma buton eklememizi sağlar. Submit formdaki bilgileri onaylar, reset ise formdaki bilgilerin tamamını siler formu ilk haline döndürür.

<textarea> birden fazla satırdan oluşan metin kutusu oluşturmamıza yarar. Eklediğimiz metin kutusunun biçimini belirlememiz için bazı özellikleri içinde barındırır(rows=”” ve cols=”“). Bu özelliklerle metin kutusunun satır ve sutun sayısını belirleyebiliriz. <form>
 <textarea name="metinkutusu" cols="20" rows="5"> </textarea>
</form> şeklinde bir kullanım ile 20 tane sutunluk ve de 5 satırlık bir metin kutusu yaratmış olduk.

<select> etiketi ise <option value=”“> </option> etiketleri ile birlikte kullanıldığı zaman açılır kapanır bir menu oluşturmayı sağlar. Menuye tıklanıldığında menu açılır ve seçenekler ortaya çıkar. Menüde yer alacak olan seçenekler <option> etiketleri arasında yer alır, değerleri ise value=”“ özelliği ile birlikte belirtilirler. <form>
 <select>
  <option value="10"> Çok güzel </option>
  <option value="5"> Normal </option>
  <option value="0"> Kötü </option>
 </select>
</form> şeklindedir kullanımı. (<option> etiketleri arasında kalan seçenekler seçildiği zaman value=” " kısımdaki değeri almış olacak)

HTML’de kullanılan bazı etiketlerden sonra da dikkat edilmesi gereken önemli birkaç başlıktan bahsedecek olursak, bir internet sayfası hazırlanırken;

• Dosya boyutuna ve hızına dikkat edilmeli gereksiz resim ve çoklu ortam öğeleri kullanılmaktan kaçınılmalıdır.
• Boyutları büyük olan resimlerde küçültülme işlemi uygulanmalıdır.
• Sadeliğe özen gösterilmelidir.
• Renkler uyumlu olmalıdır.
• Yazı tipi ve rengi gözleri yormayacak şekilde seçilmelidir.
• Vurgulanacak olan nesne özellikle gösterilmeli ancak çok fazla vurgu yapmaktan kaçınılmalıdır.
• Alt sayfalara bağlantılar ulaşılabilir yerlerde olmalıdır.
• Standartlara uyulmalı standart dışı uygulamalardan kaçınılmalıdır.
• Sayfa tasarımında CSS tercih edilmelidir.
• Farklı işletim sistemleri ve tarayıcılarda test edilmelidir.

Yazarın Üslubunu Beğendiniz mi?:	1 2 3 4 5
Yazının İçeriği Yeterli mi?:	1 2 3 4 5
Konu İlginizi Çekti mi?:	1 2 3 4 5

Bu derginin içeriği, Creative Commons lisansı ile korunmaktadır.
Kaynak göstermek ve link vermek şartıyla ticari olmayan amaçlarla yazılarımızı kullanabilirsiniz.

©2007-2008 ODTÜ Bilgisayar Topluluğu