• <html> → Beden: Tüm sayfayı saran yapı (vücut komple)
• <head> → Kafa: Beyin gibi, sayfanın görünmeyen ama önemli bilgileri burada
• <body> → Gövde: Ekranda görünen her şey burada
METİN BİÇİMLENDİRME ETİKETLERİ VE ARTTRİBUTE’LARI
1. <h1> - <h6>: Başlık oluşturur.
► align = "left", "right", "center"
2. <p>: Paragraf oluşturur.
► Align="left", "right", "center"
3. <br>: Satır sonu ekler, metni bir alt satıra geçirir.
4. <hr>:Yatay çizgi (ayraç) çizer.
► align = "left", "right", "center"
► width = "%" ya da "px" cinsinden genişlik
► size = çizginin kalınlığı (örnek: "3")
► noshade = gölgesiz düz çizgi yapar
► color = çizginin rengi (örnek: "red")
5. <u>: Altı çizili metin
6. <del>:Üstü çizili metin.
7. <b>, <strong>: Metni kalın yapar. [b:stilsel etki, strong:semantik etki]
8. <i>: Eğik metin oluşturur. (italik)
9. <mark>:Metin vurgusu ekler.
10. <sub>: Alt simge oluşturur. H2O
11. <sup>: Üst simge oluşturur. X2
12. <font>:Yazı tipi özelliklerini ayarlamak için kullanılır.
► face= metin tipi
► size=metin boyutu
► color=metin rengi
LİSTELEME ETİKETLERİ VE ATTRİBUTE’LARI
1. <ul>: Sırasız liste oluşturur.
► Type: Liste elemanlarının şekli ("disc", "circle", "square", "none").
2. <ol>: Sıralı liste oluşturur.
► type: (Liste elemanlarının numaralandırma biçimi ("1": rakam, "A": büyük
harf, "a": küçük harf, "I": Roma rakamı).
► start: Listenin başlangıç numarasını belirler.
3. <li>: Liste öğesini oluşturur.
TABLO ETİKETLERİ VE ATTRİBUTE’LARI
1. <table>: Tabloyu oluşturur.
► border: Tablo kenarlığı belirler.
► width: Tablo genişliğini ayarlar. "%" ya da "px" cinsinden genişlik
► height: Tablo yüksekliğini ayarlar. "%" ya da "px" cinsinden yükseklik.
► cellspacing: Hücreler arasındaki boşluğu ayarlar.
► cellpadding: Hücre içindeki boşluğu ayarlar.
2. <tr>: Tablo satırı oluşturur.
► align: Satır içeriğini yatayda hizalar.
► valign: Satır içeriğini dikeyde hizalar.
3. <td>: Tablo hücresini oluşturur.
► colspan: Hücrenin yatayda kaç sütun kapsayacağını belirler.
► rowspan: Hücrenin dikeyde kaç satır kapsayacağını belirler.
► align: Hücre içeriğini yatayda hizalar.
► valign: Hücre içeriğini dikeyde hizalar.
4. <th>: Tablo başlık hücresini oluşturur.
► colspan: Başlık hücresinin yatayda kaç sütun kapsayacağını belirler.
► rowspan: Başlık hücresinin dikeyde kaç satır kapsayacağını belirler.
► align: Başlık hücresini yatayda hizalar.
► valign: Başlık hücresini dikeyde hizalar.
HTML ATTRİBUTE’LARI
1. width
► Değer: px veya %
► Açıklama: Elemanın genişliğini ayarlar.
2. height
► Değer: px veya %
► Açıklama: Elemanın yüksekliğini ayarlar.
3. border
► Değer: px
► Açıklama: Elemanın etrafına kenarlık ekler.
4. Align
► Değer: left, right, center, justify
► Açıklama: Yatay hizalama.
5. Valign
► Değer: top, middle, bottom
► Açıklama: Dikey hizalama.
6. Colspan
► Değer: Sayı
► Açıklama: Hücrenin kaç sütun boyunca yayılacağını belirtir.
7. Rowspan
► Değer: Sayı
► Açıklama: Hücrenin kaç satır boyunca yayılacağını belirtir.
8. Bgcolor
► Değer: Renk adı veya HEX kodu
► Açıklama: Arka plan rengini ayarlar.
9. Cellspacing
► Değer: px
► Açıklama: Hücreler arası mesafeyi ayarlar.
10. Cellpadding
► Değer: px
► Açıklama: Hücre iç boşluğu ayarlar.
11. Font
► Değer: size, color, face
► Açıklama: Yazı tipi ve stil özelliklerini ayarlar.
Form etiketi: Form elemanlarının yerleştirilmesi için kullanılan temel etikettir.
İnput type kullanıdan veri alınmasını sağlayan boş kutucuklardır. İnput type ile
oluşturmak istediğiniz form elemanının tipini belirtirsiniz.
Eğer form gönderiliyor ve kullanıcıdan veri alınıyorsa, name attributesi
ZORUNLUDUR. Form verisinin sunucuya gönderirken hangi anahtar (değişken adı)
ile gönderileceğini belirtmek için kullanılan bu name değeri benzersiz olmalıdır
(aynı formda aynı name varsa karmaşa olur).
name ➜ Verinin grubu ya da konusu olur:
• Aynı gruba ait kutular için aynı name kullanılır (örneğin: "icecekler", "hobiler",
"ilgiAlanlari").
Eğer ad,soyad, adres bilgileri gibi veri girişi yapılacağı bir form elemanı
oluşturulacaksa bu form elemanının tipi ‘TEXT’ tir. Sayfada bir textbox oluşturur ve
içine veri girişi yapılması sağlanır.
<form>
Adınız:
<input type= ‘text’ name= ‘AdBilgisi’> <br>
Soyadınız:
<input type= ‘text’ name=’SoyadBilgisi’>
</form>
Oluşturulan textboxlar daha düzgün görünmesi için tablo içerisine yerleştirilebilir.
<form>
<table>
<tr>
<td> Adınız</td>
<td> : </td>
<td><input type=’text’ name=’ AdBilgisi’>
</td>
</tr>
<tr>
<td> Soyadınız</td>
<td> : </td>
<td><input type=’text’ name=’ SoyadBilgisi’> </td>
</tr>
</table>
</form>
Eğer giriş yaparken karakter gizlenmek istenirse(şifre gibi) input type= ‘PASSWORD’
kullanılması gerekir.
<form>
<table>
<tr>
<td> Kullanıcı Adınız</td>
<td> : </td>
<td><input type= 'text' name= 'AdBilgisi'> </td>
</tr>
<tr>
<td> Şifreniz</td>
<td> : </td>
<td><input type= 'password' name= 'Sifre'> </td>
</tr>
</table>
</form>
Eğer max lenght uzunluğu özelliğinde bir değer ataması yapılmak istenirse
maksimimum girilebilecek karakter sayısı sınırlanmış olur.
<td><input type= 'password' name= 'Sifre ' maxlength='5'> </td>
İşaretleme kutusu oluşturmak için kullanılan form elemanı CHECKBOX ile çoklu
seçim yapılacak durumlarda kullanılır.
Hobileriniz:
<input type="checkbox" name= ‘hobi’ value= ‘kitap’>Kitap
<input type="checkbox" name= ‘hobi’ value= ‘müzik’>Müzik
Value ise form elemanının taşıdığı bilgidir. Seçili, işaretli veya tıklanan seçeneklerin
değerini belirtir. Bir alanın değerini belirlemek için kullanılır. Bu değer form
gönderildiğinde name ile birlikte sunucuya gönderilir.
Özetle,kullanıcı hobi olarak neyi seçtiyse sunucuya şu bilgi gider:
Hobi(name)=Kitap(value)
Hobi=Müzik
Birden fazla seçenekten yalnızca bir tanesini seçmek için ise RADİO attributesi
kullanılır
• Aynı name'e sahip radio butonlardan yalnızca biri seçilebilir.
Cinsiyetiniz:
<input type="radio" name="cinsiyet" value="erkek">Erkek
<input type="radio" name="cinsiyet" value="kadın">Kadın
Eğer checkbox veya radiobutton da bir elemanın seçili olarak gelmesi isteniyorsa
tanımlama kısmına CHECKED yazılır.
Cinsiyetiniz:
<input type="radio" name="cinsiyet" value="erkek" >Erkek
<input type="radio" name="cinsiyet" value="kadın" checked>Kadın
TEXTAREA ise HTML’de birden fazla satırlı metin girişi yapmak için kullanılan form
elemanıdır. Yani kullanıcı uzun açıklamalar, yorumlar, adres bilgisi gibi metinleri
buraya yazabilir.
Açılış ve kapanış etiketi vardır: <textarea>...</textarea>
Diğer inputlarda olduğu gibi formdan veri gönderileceği için name kesinlikle
olmalıdı[Link]ğer input elemanlarından farklı olarak kendi içine yazılır, value özelliği
kullanı[Link]ıcı ne yazarsa, form gönderildiğinde o yazı gönderilir.
Bu form elemanının alabileceği rows(satır) ile cols(sütun) sayısı belirlenebilir.
Adres: <br> <textarea name="adres" rows="5" cols="40"></textarea>
rows="5" ➝ 5 satır yüksekliğinde
cols="40" ➝ 40 karakter genişliğinde
<fieldset> ve <legend> : Formu gruplandırmak ve başlıklandırmak için kullanılır.
HTML formlarında ilgili form elemanlarını gruplayarak bir çerçeve (kutu) içinde
göstermeye yarar.
Görsel olarak kutu çizer ve formun okunabilirliğini artırır.
<legend> ile Birlikte Kullanılır
<legend> etiketi, <fieldset> içine başlık eklemek için kullanılır.
Kutunun sol üst köşesinde başlık olarak görünür.
<form>
<fieldset>
<legend>Kullanıcı Girişi</legend>
<table>
<tr>
<td> Kullanıcı Adınız</td> <td> : </td>
<td><input type= 'text' name= 'AdBilgisi'> </td>
</tr>
<tr>
<td> Şifreniz</td>
<td> : </td>
<td><input type= 'password' name= 'Sifre'> </td>
</tr>
</table>
</fieldset>
</form>
Buton oluşturmak için: SUBMİT (GÖNDER)- RESET(TEMİZLE)
<input type="submit" value="Gönder">
<input type="reset" value="Temizle">
Artı olarak PLACEHOLDER ile bir form elemanının içinde, kullanıcı veri girişi yapmadan
önce görünen açıklayıcı veya yol gösterici metindir.
• Kullanıcı henüz bir şey yazmadığında görünür.
• Kullanıcı yazmaya başlayınca otomatik kaybolur.
• Kullanıcının ne tür bilgi girmesi gerektiğini belirtmek için kullanılır.
• Form verisi olarak gönderilmez, sadece görsel amaçlıdır.
<input type= 'text' name= 'AdBilgisi'
placeholder='Kullanıcı adınızı giriniz..'>
<input type= 'password' name= 'Sifre'
placeholder='Şifrenizi giriniz'>
SELECT ve OPTION NEDİR?
select ➜ Açılır liste (dropdown) kutusunu oluşturur.
option ➜ Liste içindeki her bir seçeneği belirtir.
Cinsiyetiniz :
<select name= ‘cinsiyet’>
<option value='Seciniz'> Seçiniz </option>
<option value='erkek'>Erkek </option>
<option value='kadın'>Kadın </option>
</select>
</form>
Alt sınırı ve üst sınırı istenildiği şekilde belirlenebilen ve sadece sayısal karakterlere
izin veren form elemanına NUMBER denir. Arttırıp azaltılabilen düğmesi ile kutucuk
şeklinde görünümü vardır.
MİN ve MAX ile alabileceği en küçük ve en büyük değer ayarlanabilir.
Gereken durumlarda STEP ise sayının kaçar kaçar artacağını belirler
Eğer formun başlangıçta bir değer alması istenirse, formun içinde gösterilecek
varsayılan sayıyı belirtmek için VALUE ile değer atanır. Kullanıcı isterse bunu
değiştirebilir.
<input type="number" name="ikisersayim" min="2" max="100" step="2" value="2">
Kullanıcıdan tarih bilgisi almak istenirse DATE elemanı kullanılır.
Tarih formatı genellikle YYYY-MM-DD (yıl-ay-gün) şeklindedir.
min ve max ile seçilebilecek tarih aralığı belirlenebilir.
value ile varsayılan tarih atanabilir
<input type="date" name="dogumtarihi" min="1900-01-01"
max="2025-12-31" value="2000-01-01">
MONTH ise [Link] formatında sadece ay ve yıl seçimi yapar,
gün seçimi içermez.
min ve max ile seçilebilecek tarih aralığı belirlenebilir. value ile
varsayılan tarih atanabilir
<input type="month" name="ayYil" value="2025-05" min="2020-
01" max="2030-12">
WEEK ile YYYY-Www (Yıl-W hafta numarası) formatıyla haftaya
göre tarih seçmek için kullanılır. Yine min, max ve value ile sınır
ve varsayılan değer verilebilir.
<input type="week" name="hafta" value="2025-W22"
min="2023-W01" max="2026-W52">
TİME ise HH:MM formatında saat ve dakika seçmek için kullanılır. Min-max-
value değerlerine ek olara STEP özelliği, kullanıcının zaman seçerken
otomatik olarak hangi aralıklarla seçim yapabileceğini belirler. Yani zaman
kutusunda o saniye adımlarıyla (örneğin 1 saniye, 60 saniye, 900 saniye gibi)
artış sağlanır.
<input type="time" name="saat" value="14:30" min="09:00" max="18:00"
step="900" >
DATETİME-LOCAL input tipi YYYY-MM-DDThh:mm formatında,
kullanıcıya hem tarih hem de saat seçme imkanı verir. Yani tarih
ve zamanı aynı anda seçebileceğiniz bir form elemanıdır.
<input type="datetime-local" name="randevu" value="2025-05-
30T14:30">
EMAİL input tipi, kullanıcıdan e-posta adresi girmesini isteyen form elemanıdır.
Form gönderilirken, Tarayıcı, girilen e-posta adresinin @ ve geçerli bir domain
içermesine dikkat eder. Genellikle text gibi burada da placeholder kullanılır.
<input type="email" id="email" name="email" placeholder="ornek@[Link]">
TEL ile kullanıcıdan telefon numarası almak için kullanılır. pattern özelliği ile form
alanlarında kullanıcının belirli bir düzen (desen) ile veri girmesini zorunlu kılar. [] ile
alabileceği değer kümesi {} ile kaç tane alabileceği belirlenir.
<input type="tel" name="telefon" placeholder="05xx-xxx-xx-xx" pattern="[0-9]{4}-
[0-9]{3}-[0-9]{2}-[0-9]{2}">
pattern="[0-9]{4}-[0-9]{3}-[0-9]{2}-[0-9]{2}"
→ Şu formata uymalı: 0555-123-45-67
[0-9]{4} → 4 rakam
- → Tire karakteri
{3} → 3 rakam vb.
COLOR, renk seçmek için kullanılır. Kullanıcıya küçük bir renk
paleti açar ve kullanıcı burada RGB, HSL veya HEX renk kodları
karşılığıyla renk seçimi yapabilir.
Formda varsayılan bir renk gösterilmek istenirse, bu renk sadece
HEX formatında value özelliğine yazılmalıdır.
<input type="color" name="renk" value="#ff0000"> (kırmızı)