HTML5 - Semantik Yapı ve Formlar
Bu döküman, Yazılım Uzmanlığı kategorisinde Giriş Seviye eğitim materyalidir. Aşağıda konunun detaylı açıklaması, örnekler ve pratik alıştırmalar bulacaksınız.
Seviye: Giriş — Bu içerik başlangıç düzeyindeki öğrenciler için hazırlanmıştır. Hiçbir ön bilgi gerektirmez.
HTML5 Semantik Yapı
<header> — Sayfa üst bölümü (logo, menü)\n<nav> — Navigasyon bağlantıları\n<main> — Ana içerik (sayfada bir tane)\n<article> — Bağımsız içerik birimi\n<section> — Tematik bölüm\n<aside> — Yan içerik\n<footer> — Sayfa alt bilgisi
Form Elementleri
| Element | Kullanım |
|---|---|
<input type="text"> | Metin girişi |
<input type="email"> | E-posta (doğrulamalı) |
<input type="password"> | Şifre alanı |
<input type="number"> | Sayı girişi |
<input type="date"> | Tarih seçici |
<input type="file"> | Dosya yükleme |
<textarea> | Çok satırlı metin |
<select> | Açılır liste |
Form Doğrulama
required— Zorunlu alanminlength/maxlength— Karakter sınırımin/max— Sayı aralığıpattern— Regex ile özel doğrulama
Proje: İletişim Formu
- Ad, e-posta, telefon, mesaj alanları oluşturun
- Tüm alanlara doğrulama ekleyin
- Gönder butonu ile form submit yapın