HTML Tablolar ve Form Oluşturma
HTLM Tablolar
Tablo oluşturmayı satır sütunlara renk vermeyi aralarındaki boşlukları ayarlamayı öğrendik.
- <table align="center"> = Tabloyu safyaya ortalar.
- <table border="5"> = Tablonun kenar kalınlığını ayarlar.
- <table bgcolor="aqua"> = Tablo rengini ayarlar.
- <table wight="100" height="100"> = Tablonun genişlik ve yüksekliğini ayarlar.
- <table cellspacing="5"> = Hücreler arasındaki piksel cinsinden boşluğu belirtir.
- <table cellpadding="5"> = Hücre içeriği arasındaki boşluğu belirtir.
Yaptığımız örnek html kodu şu şekildedir;
<html>
<body>
<table align="center" border="5" bgcolor="aqua" weight="200" height="400">
<tr>
<td> ilk satır ilk sütun </td>
<td bgcolor="green"> ilk satır ikinci sütun </td>
</tr>
<tr>
<td> ikinci satır ilk sütun </td>
<td bgcolor="red"> ikinci satır ikinci sütun </td>
</tr>
<tr>
<td bgcolor="blue"> üçüncü satır ilk sütun </td>
<td> üçüncü satır ikinci sütun </td>
</tr>
</table><br><br><br>
<table border="3" align="center" cellspacing="5" cellpadding="5">
<tr>
<td colspan="2">satır 1, sütun 1 ve 2 birleşti</td>
</tr>
<tr>
<td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
<tr>
<td>satır 3, sütun 2</td>
</tr>
</table>
</body>
</html>
Liste oluşturmayı öğrendik. Örnek kod şu şekildedir;
- <ol> = Sıralı Liste
- <ul> = Sırasız Liste
- <li> = Liste elemanı
- <dl> = Tanımlı Liste
- <dt> = Tanımlı Liste elemanı
- <dd> = Eleman tanımı
<ol>
<li>Fb</li>
<li>Gs</li>
<li>Bjk</li>
<li>Ts</li>
<li>Gb</li>
</ol>
Form oluşturma işe şu şekildedir;
- <input type="radio"> = Radio Buton oluşturma
- <input type="checkbox"> = Checkbox oluşturma.(kutu şeklinde)
- <title> = Sayfa başlığı için kullanılır.
- <select name="arabalar">.....<option value="fiat"> = Açılır pencere oluşturma.
<html>
<head>
<title> ILKER SAHIN </title>
</head>
<body>
<form>
Ad:<input type="text" name="ad" placeholder="Adinizi yazin" required="required"/><br/>
Soyad:<input type="text" name="soyad" placeholder="Soyadinizi girin" required="required"/><br/>
<input type="radio" name="cinsiyet" value="erkek" checked> Erkek<br/>
<input type="radio" name="cinsiyet" value="kadın" checked> Kadin<br/>
<input type="checkbox" name="hobi" value="Futbol"> Futbol<br/>
<input type="checkbox" name="hobi" value="Basketbol"> Basketbol<br/>
<input type="checkbox" name="hobi" value="Voleybol"> Voleybol<br/>
<select name="Arabalar">
<option value="Sec" selected="Sec"> Seciniz... </option>
<option value="Fiat"> Fiat </option>
<option value="Audi"> Audi </option>
<option value="Renault"> Renault </option>
<option value="Mercedes"> Mercedes </option>
<input type="Submit" value="Kaydet"/>
</form>
</body>
</html>
Yorumlar
Yorum Gönder