HTML'e Giriş
- HTML'e Giriş
- Metinler
- Renkler
- Linkler
- Resim Ekleme
- Listeler
- Tablolar
- Formlar
- Çerçeveler
- Özel Karakterler
Listeler:
Üç çeşit liste vardır: i.Sıralı Liste(Ordered List):
Örnek:
Örnekte görüldüğü gibi type özniteliği sıralı listenin türünü belirler.
type: {1,a,A,I,i}
Listeye bir değer vererek istediğimiz sayıdan başlatabiliriz:
Örnek:
ii.Sırasız Liste(Unordered List):
Örnek:
Gene burda da type özniteliği sıralı listenin türünü belirler.
type:{square,disc,circle}
iii.Tanımlama Listeleri (Definition List):
TABLOLAR:
Tablolar <table>...</table> etiketleri arasında yapılır. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır.
Örnek:
<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td>4. hücre</td><td>5. hücre</td><td>6. hücre</td></tr>
</table>
| 1. hücre | 2. hücre | 3. hücre |
| 4. hücre | 5. hücre | 6. hücre |
Öznitelikler:
<table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign="">
<td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan="">
border="": Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktari arttırdıkça çerçevenin kalınlığı da artar.
cellpadding="" , cellspacing="": Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing özniteliği ile belirtilir.
bgcolor="": <table bgcolor="red"> şeklinde kullanarak bütün tablo ya da <td bgcolor="red"> şeklinde sadece tek bir hücre renklendirilir.
align: Hücredeki elemanın yatay konumunu belirler ve "right,left,center" opsiyonları ile kullanılır.
valign: Hücre elemanının düşey konumunu belirler ve opsiyonları "top,bottom,middle"dır.
colspan="", rowspan="": Aynı satırdaki hücreleri birleştirmek için colspan, aynı sutündaki hücreleri birleştirmek için de rowspan özniteliği kullanılır.
Birleştirilen hücreye ait <td>..</td> etiketini silinir.
Örnek:
<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td rowspan="2">4. hücre</td><td colspan="2">5. hücre</td></tr>
<tr><td>6.hücre</td><td>7. hücre</td></tr>
</table>
| 1. hücre | 2. hücre | 3. hücre |
| 4. hücre | 5. hücre | |
| 6.hücre | 7. hücre | |
FORMLAR:
Formlar <form>...</form> etiketleri arasında yapılır.
Örnek:
<form name="kimlik" action="gonder.php" method="get">
İsim/Soyad : <input type="text" size="20"><br>
Doğum Yeri : <input type="text" size="20"><br>
Doğum Tarihi : <input type="text" size="20"><br>
Cinsiyet : <input type="radio" name="cins"> Erkek <input type="radio" name ="cins"> Kız<br>
Hobiler:<br>
<input type="checkbox">Müzik dinlemek<br>
<input type="checkbox">Mantı Açmak<br>
<input type="checkbox">Bungee Jumping<br>
<input type="checkbox">Aikido<br>
<input type="checkbox">Halay Çekmek<br>
<input type="checkbox">Diğer :<br>
<textarea rows="4" cols="30" name="diger"></textarea><br>
Şifrenizi giriniz:<br>
<input type="Password" size="15"><br>
<input type="submit" value="GÖNDER"> <input type="reset" value="SİL">
</form>
Görünümü:
action: Formun göndereceği adresi belirler.
method="get": Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.
method="post": Formdaki bilgiler bir adrese postalanacaksa kullanılır.
type="text": Tek satırlık bir metin alanı açar.
size="": Bu metin alanının boyutunu belirler.
type="checkbox": Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
type="radio": Tek seçenekli bir sorunun tek yanıtı alınır.
type="submit": Formu action'la belirtilen dosyaya yönlendiren bir buton yaratır.
type="reset": Bu butona basınca form boş hale gelir.
type="password": Bir password alanı oluşturur. Buraya girilen her karakter * şeklinde görünür.
<textarea rows="" cols="">: type="text" gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullanırız. cols metin alanının uzunluğunu, rows ile yüksekliğini pixel cinsinden verir.
Listeleme:
Örnek:
<select name="otolar">
<option>Alfa Romeo</option>
<option>BMW</option>
<option>Peugeot </option>
<option>Renault </option>
<option>Seat </option>
<option>Lada </option>
</select>
Görünümü:
ÇERÇEVELER:
Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız.
Örnek:<html><head>
<tittle>Cerceveler</tittle></head>
<frameset rows="*.*.*">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>
Örneklerde gördüğünüz gibi * miktarı eşit miktarda kaç tane çerçeve olacağını gösterir. <frameset> etiketinde kaç tane * belirttiysek o kadar <frame src=""> belirtmemiz gerekir. * yerine pixel cinsinden bir sayı ya da % cinsinden oran da belirtebiliriz. cols, sayfaların yanyana çıkmasını, rows üst üste çıkmasını sağlar.
HTML ÖZEL KARAKTERLER
HTML içinde bazı karakterler ("<" gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz.
Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır.
Özel Karakterler
Bir özel karakterler bloğu 3 kısımdan oluşur:
1-) "&" işareti
2-) "#" işareti ve arkasından kod numarası veya direkt ismi
3-) Sonuncu olarak ta ";" işareti.
HTML dökümanı içinde bu tip karakterleri görüntülemek için < veya < yazmalıyız.
Bir numara yerine isim kullanılmasının avantajı, isimlerin daha rahat hatırlanabilmesidir. Dezavantajı ise piyasadaki tüm tarayıcılarda tam desteklenmemesidir.
Özel karakterlerin büyük/küçük harfe duyarlı olduğuna dikkat ediniz
Birden Fazla Boşluk Bırakabilmek
Normalde HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız özel karaktlerini kullanınız.
En Çok Kullanılan Özel Karakterler
| Sonuç | Açıklama | Özel karakterleri | Numaralı Hali |
|---|---|---|---|
| Fazladan boşluk | |   | |
| < | Küçüktür | < | < |
| > | Büyüktür | > | > |
| & | Ve | & | & |
| " | Alıntı | " | " |
| ' | apostorof | ' (IE'de çalışmaz) | ' |
Bazı Başka Özel Karakterler
| Result | Description | Özel karakterleri | Numaralı Hali |
|---|---|---|---|
| ¢ | Cent | ¢ | ¢ |
| £ | Pound | £ | £ |
| ¥ | Yen | ¥ | ¥ |
| € | Euro | € | € |
| § | Section | § | § |
| © | Copyright | © | © |
| ® | Kayıtlı marka | ® | ® |
| × | Çarpma | × | × |
| ÷ | Bölme | ÷ | ÷ |