Temel HTML Etiketleri - Tablo, Form

İçerik
1. HTMLTablolar
İçiçe tablolar
Hücre genişliği (Cells Width)
Hücre dış ve iç aralığı (Cell
Spacing and Padding)
Sütun ve satır birleştirme (Span)
2

İçerik (2)2. HTML Formlar
Form Alanları ve Alan Kümeleri
Form Kontrolleri ve Etiketler
Metin alanı (Text field)
Çok satırlı metin (Text area)
Seçim kutusu (Select)
Radio button
Checkbox
Düğme (Button)
Image button
Saklı alanlar (Hidden fields)
Sliders ve Spinboxes
Doğrulama (Validation)
alanları 3

HTMLTablolar
Tablolar hücresel veri ifade etmekte kullanılır
Bir tablo bir veya daha çok satırdan meydana
gelir
Her bir satır bir veya daha fazla sütuna sahiptir.
Tablolar birkaç temel etiketten oluşur:
<table></table>:Tablo başlangıç ve bitşi
<tr></tr>:Tablo satırı yaratır
<td></td>: Hücresel veri yaratır
Önceleri sayfa düzeni için de kullanılan tablolar
artık kullanışlı değillerdir.Tablolar yerine CSS
floats ve positioning stilleri kullanılmalıdır. 5

HTMLTablolar (2)
Tablo başlangıç ve bitişi
Satır başlangıç ve bitişi
Sütun/hücre başlangıç ve bitşi
6
<table> ... </table>
<tr> ... </tr>
<td> ... </td>

Basit Bir HTMLTablo – Örnek
7
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="dersnotu1.ppt">Ders Notu 1</a></td>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="ders2-demo.zip">
Ders 2 - Demolar</a></td>
</tr>
</table>

Basit Bir HTMLTablo – Örnek
8
<tr>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="ders2-demo.zip">
Ders 2 - Demolar</a></td>
</tr>
</table>

Data Cells and Header Cells
Two kinds of cells in HTML 5 tables
Data cells – containing the table data
Header cells – used for the column names or
some more important cells in a table
Why two kinds of cells?
Used to semantically separate the cells
<tr>
<th>Full name</th> <th> Mark </th>
</tr>
<tr>
<td>Doncho Minkov</td> <td>Very good 5</td>
</tr>
<tr>
<td>Georgi Georgiev</td> <td>Exellent 6</td>
</tr>

HTMLTablo – Diğer Etiketler
Tablo satırları üç anlamsal bölüme ayrılmıştır:
başlık (header), içerik/gövde (body) ve alt bilgi
(footer)
<thead> tablo başlığını gösterir ve <td>
bileşeni yerine <th> bileşenlerini içerir,
<tbody> çok veri bulunan tablo satır
koleksiyonunu gösterir
<tfoot> tablo alt bilgisini österir fakat
<tbody> etiketinden ÖNCE gelir.
<colgroup> ve <col> sütunları
tanımlar(çoğunlukla sütun genişliğini
ayarlamak amacıyla kullanılır) 10

HTMLTablo – Diğer Etiketler:
Örnek
11
<table>
<colgroup>
<col style="width:100px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
</tbody>
</table>
başlık
altbilgi
En son gövde (veri) gelir
th
sütunlar

<table>
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
</tbody>
</table>
12
table-full.html
Alt bilgi kodlamada verilerden önce
gelmesine rağmen tarayıcıda en
son görüntülenir
HTMLTablo – Diğer Etiketler:
ÖrnekVarsayılan, başlık metni
kalın ve ortalıdır.

İçiçe (Nested)Tablolar
Tablo verisi “hücreler” (<td>) içiçe tablolar
içerebilir. (tablo içinde tablo):
13
<table>
<tr>
<td>İletişim:</td>
<td>
<table>
<tr>
<td>İlk isim</td>
<td>Soyisim</td>
</tr>
</table>
</td>
</tr>
</table>
nested-tables.html

Hücreler arası boşluk(cellspacing)
Hücreler arası boşluğu tanımlar.
Hücreler Arası Boşluk (Cell Spacing)
Tablolar iki önemli niteliğe sahiptir:
14
cell cell
cell cell

Hücre iç boşluğu (cellpadding)
Hücre sınırı ile metin arasındaki boşluğu
tanımlar
Hücre İç Boşluğu (Cell Padding)
15
cell
cell
cell
cell

Cell Spacing ve Padding – Örnek
16
<html>
<head><title>Tablo Hücreleri</title></head>
<body>
<tr><td>İlk Hücre</td>
<td>İkinci Hücre</td></tr>
</table>
<br/>
<tr><td>İlk hücre</td>
<td>İkinci Hücre</td>
</tr>
</table>
</body>
</html>
table-cells.html

Cell Spacing ve Padding – Örnek
17
<html>
<head><title>Tablo Hücreleri</title></head>
<body>
<tr><td>İlk Hücre</td>
<td>İkinci Hücre</td></tr>
</table>
<br/>
<tr><td>İlk hücre</td>
<td>İkinci Hücre</td>
</tr>
</table>
</body>
</html>
table-cells.html

Tablo Cell Spacing ve
Cell Padding
Demo

rowspan
Hücrenin kaç tane
sütun kaplayacağını
belirtir
colspan
Hücrenin kaç tane
sütun kaplayacağını
belirtir
Sütun ve Satır Birleştirme
Tablo hücreleri iki önemli niteliğe sahiptir:
19
cell[1,1] cell[1,2]
cell[2,1]
colspan="1"colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2" rowspan="1"
rowspan="1"

Sütun ve Satır Birleştirme – Örnek
20
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
</table>
table-colspan-rowspan.html

<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<td rowspan="2">Cell[2,2]</td>
</table>
21
table-colspan-rowspan.html
Cell[2,3]Cell[1,3]
Cell[3,2]
Cell[2,2]
Cell[1,2]
Cell[2,1]Cell[1,1]
Sütun ve Satır Birleştirme – Örnek

Row and Columns
Spans
Live Demo
22

HTML 5 Formlar
Web Sayfasından KullanıcıVerilerinin
Girilmesi

HTML Formlar
Formlar site ziyaretçilerinden veri toplamanın
en başta gelen yöntemidir.
Form bloklarını yaratmak için:
Örnek:
24
<form></form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
"action" niteliği form verilerinin hangi
sayfaya gönderileceğini söyler
“method" niteliği form verilerinin
nasıl gönderilmesi gerektiğini söyler
– GET veya POST isteği üzerinden

Form Alanları
Tek satır metin giriş alanı:
Çok satır metin bölgesi alanı:
Saklı (Hidden) alanlar kullanıcıya görünmeyen
verileri saklar:
Genellikle JavaScript kodlar tarafından kullanılır 25
<input type="text" name=«ilkAdi" value= "Bu bir
metin alanıdır" />
<textarea name= "yorumlar">Bu bir çok satırlı
metin alanıdır</textarea>
<input type="hidden" name="hesap" value="Bu bir
gizli metin alanıdır." />

Fieldsets
Fieldsets ilişkili form alanı gruplarını kapsamak
için kullanılırlar:
<legend> fieldset başlığıdır.
26
<form method="post" action="form.aspx">
<fieldset>
<legend>Müşteri Detayı</legend>
<input type="text" id="isim" />
<input type="text" id="telefon" />
</fieldset>
<fieldset>
<legend>Sipariş Detay</legend>
<input type="text" id="adet" />
<textarea cols="40" rows="10"
id="uyarilar"></textarea>
</fieldset>
</form>

Form Giriş Kontrolleri
Checkboxes:
Radio buttons:
Radyo düğmeleri gruplanabilir, grup içinden
sadece birinin seçilmesine izin verilir:
27
<input type="checkbox" name= "meyve"
value="elma" />
<input type="radio" name="sifat" value="Bay."
/>
<input type="radio" name="sehir" value="izmir" />
<input type="radio" name=«sehir" value="ankara" />

Diğer Form Kontrolleri
Açılır Liste (Dropdown menus):
Gönder (Submit) düğmesi:
28
<select name="cinsiyet">
<option value="1"
selected="selected">Erkek</option>
<option value="2">Kadın</option>
<option value="3">Diğer</option>
</select>
<input type="submit" name="submitBtn"
value="Şimdi Uygula" />

Diğer Form Kontrolleri (2)
Reset düğmesi – formu başlangış durumuna geri
getirir.
Image düğmesi– gönderme düğmesi gibidir fakat
resim gösterilir ve tık koordinatı gönderilir
Genel amaçlı düğme – Javascript içinde kullanılır,
versayılan eylem yoktur.
29
<input type="reset" name="resetBtn"
value="Reset the form" />
<input type="image" src="submit.gif"
name="submitBtn" alt="Gönder" />
<input type="button" value="bana tıkla" />

Parola Girişi – Girilen metni * işareti ile
maskeler/gizler
Çoklu seçim alanı – tek satır yerine çok satırda
madde listesi görüntüler
30
<input type="password" name="pass" />
<select name="urunler" multiple="multiple">
<option value="1"
selected="selected">klavye</option>
<option value="2">fare</option>
<option value="3">monitör</option>
</select>

Dosya girişi– Dosyaları yüklemek için kullanılan
bir alandır
Dosya yükleme yapılacağı zaman dosyayı
gönderme biçimini tanımlamak için enctype
niteliği kullanılır. Genelde multipart/form-data
değerini alır.:
31
<input type="file" name="foto" />
<form enctype="multipart/form-data">
...
<input type="file" name="foto" />
...
</form>

Etiketler
Form etiketleri (label) , form alan ID’leri
kullanılarak açıklayıcı metin konmasını sağlar.
Bir etikete tıklamak ilişkili alana odaklanılmasını
sağlar (checkboxes terslenir (toggled), radio
düğmeleri seçili olur)
Etiketler bir kullanılabilirlik ve erişilebilirlik özelliği
olup her ikisi de erişilebilirlik doğrulamasından
geçmek için gereklidir.
32
<label for="fn">İlk İsim</label>
<input type="text" id="fn" />

HTML Form – Örnek
33
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="sinif" />
<fieldset><legend>Akademik Bilgi</legend>
<label for="derece">Derece</label>
<select name="degree" id="derece">
<option value="LS">Lisans</option>
<option value="YL">Yüksek Lisans</option>
<option value="DR" selected="selected">Doktora
Programı</option>
</select>
<br />
<label for="ogrenciNo">Öğrenci No</label>
<input type="password" name="ogrenciNo" />
</fieldset>
<fieldset><legend>Kişisel Bilgiler</legend>
<label for="ilkAd">İlk İsim</label>
<input type="text" name="ilkAd" id="ilkAd" />
<br />
<label for="sadi">Soyadı</label>
<input type="text" name="sadi" id="sadi" />
form.html

HTML Form – Örnek(2)
34
<br />
Cinsiyet:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Erkek</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Kadın</label>
<br />
<label for="email">Eposta</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">KULLANIM ŞARTLARI...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Form Gönder" />
<input type="reset" value="Form Temizle" />
</p>
</form>
form.html (devam)

form.html (devam)
HTML Form – Örnek (3)
35

Range ve Spinbox
Kullanıcıların sadece sayısal değer girmelerine
izin verir.
min, max, step ve value
Spinbox veya Slider, input tipine bağlıdır.
Farklı tarayıcılarda farklı görünebilirler.
Sliders ve Spinboxes Firefox üzerinde çalışmaz.
Standart textbox olarak görüntülenirler.
37
<input type="range" min="0" max="100" />
<input type="number" min="0" max="100" />

HTML 5 yenlikler
Autocomplete
Tarayıcı önceden girilen değerleri saklar.
Aynı sayfa daha sonra tekrar ziyaret edildiğinde
bu bilgiler geri getirilir.
Autofocus
Sayfa yüklendiğinde alana odaklanılır/seçilir.
Bilgi girişi için ilk burası işaret edilmiş olur.
Required
Doldurulması veya seçilmesi zorunlu alanları
gösterir. 38

Giriş Alanları İçin Doğrulama
Email – e-posta için doğrulama
Doğrulama için örüntü belirlenebilir.
Mobil cihazlarda e-posta klavyesini getirir.
URL – url için doğrulama
Mobil cihazlarda url klavyesini getirri.
Telefon
Sayı klavyesini getirir.
39
<input type="email" required="true"
pattern="[^ @]*@[^ @].[^ @]"/>
<input type="url" required="true" />
<input type="tel" required="true" />

TabIndex
tabindex HTML niteliği ,TAB tuşuna arka
arkaya basıldığında form alanları ve
bağlantılarının hangi sırada gezileceğini
kontrol etmek amacıyla kullanılır.
tabindex="0" (sıfır) - "natural" (doğal) sıra
Eğer X >Y, tabindex="X" sahip bileşen
tabindex="Y " sahip bileşenden önce tekrarlanır
Negatif tabindex’e sahip bileşenler atlanır,
bununla beraber, bu standartta tanımlı değildir
40
<input type="text" tabindex="10" />

HTML Çerçeveler (Frames)
<frameset>, <frame> ve <iframe>
(<frameset> ve <frame> HTML 5’te
Desteklenmiyor)

HTML Çerçeveler (Frames)
Çerçeveler tek bir web sayfası içinde birden
fazla HTML belgeyi göstermeye imkan sağlar.
Sayfa yatay ya da düşey olarak birkaç
görüntüye (çerçeveye) ayrılabilir.
Çerçeveler HTML geliştirmenin önceki
dönemlerinde (çağlarında ☺ ) popülerken artık
kullanılmamaktadırlar. Sebep div, iframe, ajax
v.b
Çerçeveler tüm tarayıcı ve arama motorları
tarafından desteklenmemektedir.
<noframes> bileşeni uyumlu olmayan
tarayıcılara içerik sağlamak amacıyla kullanılır. 42

HTML Çerçeve Demo
43
<html>
<head><title>Çerçeve Örnek</title></head>
<frameset cols="180px,*,150px">
<frame src="sol.html" />
<frame src="orta.html" />
<frame src="sag.html" />
</frameset>
</html>
frames.html
sol.html belgesindeki (sol çerçevede görüntülenen
sayfa) <a> bağlantı bileşeninin target niteliğine
yazılan değere dikkat ediniz.

Satır İçi Çerçeveler (Inline Frames):
<iframe>
Satır içi çerçeveler bir web site içinde başka bir
web sitesi sayfalarını göstermenin bir yoludur:
44
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>
iframe-demo.html

HTML –Tablolar ve Formlar
Sorular?

Etkinlikler
46
1. Aşağıdaki iki web sayfasına benzer sayfayı
tablolar kullanarak oluşturunuz:
2. Yandaki web
sayfasının benzerini
form bileşenleri
kullanarak
oluşturunuz:

Etkinlikler (2)
3. Bu örnektekine
benzer örnek form
oluşturunuz:
47
ornek-form.png resmine bakınız.

Etkinlikler(3)
4. Hesap makinesi benzeri yapıyı HTML5 ile
gerçekleştiriniz.
48

Etkinlikler(4)
5. Tablo ve form etiketleri ile aşağıdaki sayfayı
oluşturunuz:
49

Etkinlikler(6)
7. Aşağıdaki sayfayı HTML5 etiketleri ile oluşturunuz.
İpucu: Fieldsets ve Nested tabloları kullanınız.
50

Temel HTML Etiketleri - Tablo, Form

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

More from cmkandemir

More from cmkandemir (20)

Temel HTML Etiketleri - Tablo, Form