Anasayfa
Forum
Hakkında
Ders 20: Final Proje — Tanıtım Web Sitesi
Ders 20: Final Proje — Tanıtım Web Sitesi
Neden?
Final proje, bilgiyi bağımsız bir ürün planına ve çalışan siteye dönüştürme aşamasıdır.
Ne öğreneceğiz?
Bu derste proje kapsamını, kontrol listesini ve teslim sürecini öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Yola
HTML bilgini bağımsız bir proje planına dönüştürebilecek ve tamamlanmış bir web sitesi hazırlayabileceksiniz.
- Ana Sayfa: [/b]Siteyi tanıtan başlık, açıklama, görsel ve çağrı bağlantısı.
- Hakkında: Projenin veya işletmenin geçmişi, amacı ve değerleri.
- Hizmetler / Ürünler: Liste veya kart düzeninde içerik ve fiyat tablosu.
- İletişim: Ad, e-posta, konu, mesaj ve onay alanlarından oluşan form.
Zorunlu HTML özellikleri
Projede en az bir semantik <header>, <nav>, <main>, <section>, <article> ve <footer> kullan. En az iki görsel, bir sıralı veya sırasız liste, bir tablo, bir form ve sayfalar arası bağlantılar ekle.
Her sayfada dil tanımı, karakter kodlaması, mobil görünüm ayarı, açıklayıcı başlık ve kısa meta açıklama bulunmalıdır. Form alanları etiketlenmeli, zorunlu alanlar required ile belirtilmeli ve görseller anlamlı alt açıklamalarına sahip olmalıdır.
Örnek iletişim formu
PHP Kod:
<form action="/iletisim" method="post">
<div>
<label for="ad-soyad">Ad soyad</label>
<input type="text" id="ad-soyad" name="ad-soyad" required>
</div>
<div>
<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta" required>
</div>
<div>
<label for="konu">Konu</label>
<select id="konu" name="konu" required>
<option value="">Seçiniz</option>
<option value="bilgi">Bilgi talebi</option>
<option value="destek">Destek</option>
</select>
</div>
<div>
<label for="mesaj">Mesaj</label>
<textarea id="mesaj" name="mesaj" rows="6" required></textarea>
</div>
<label>
<input type="checkbox" name="onay" required>
İletişim bilgilerimin kullanılmasını kabul ediyorum.
</label>
<button type="submit">Mesajı gönder</button>
</form>
Bu formun HTML kısmı hazırdır; gerçek ortamda veriyi işlemek için sunucu tarafı bir uygulama gerekir. PHP, Python veya başka bir backend teknolojisi form verisini alıp işleyebilir. HTML tek başına veriyi kalıcı bir veritabanına kaydetmez.
Kursu tamamladıktan sonra
Bu 20 dersin sonunda temel bir HTML ile web sayfasının yapısını kurabilecek durumdasınız. Bir sonraki aşamada farklı kaynaklar üzerinden HTML bilginizi ilerletebilir daha sonra CSS ile responsive tasarım, Flexbox, Grid, renkler ve animasyonlar öğrenebilirsiniz. Ardından JavaScript ile DOM işlemleri, form etkileşimleri ve API kullanımı üzerine çalışabilir, PHP öğrenirken ise HTML formlarından gelen verileri sunucu tarafında işlemeyi ve veritabanına kaydetmeyi öğrenebilirsiniz.
