Web Geliştirme Eğitimi – 2. Ders: HTML Listeler, Tablolar ve Formlar

[Wiston]

Dersin Amacı​

Bu derste HTML’de listeler, tablolar ve formlar kullanmayı öğreneceğiz.

HTML Listeler​

Sırasız Liste (<ul>)​

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Sıralı Liste (<ol>)​

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

HTML Tablolar​

<table border="1">
  <tr>
    <th>Ders</th>
    <th>Seviye</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Başlangıç</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Orta</td>
  </tr>
</table>

• <table> → Tablo
• <tr> → Satır
• <th> → Başlık hücresi
• <td> → Veri hücresi

HTML Formlar​

<form action="gonder.php" method="post">
  <label for="ad">Adınız:</label>
  <input type="text" id="ad" name="ad" required>

  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" required>

  <label for="mesaj">Mesajınız:</label>
  <textarea id="mesaj" name="mesaj"></textarea>

  <button type="submit">Gönder</button>
</form>

• <input type="text"> → Metin kutusu
• <input type="email"> → E-posta kutusu
• <textarea> → Çok satırlı metin alanı
• <button> → Buton

Ödev​

1. 5 hobini sırasız liste olarak yaz.
2. 3 günlük görevini sıralı liste olarak yaz.
3. 2 sütun – 3 satırlı basit bir ders programı tablosu yap.
4. Ad, e-posta ve mesaj alanı olan form oluştur.