HTML mini proje — kişisel site
Önceki özet HTML araç setinizi haritaladı ve burayı pratik adımı olarak işaretledi. Bu ders yeni bir beceri haritası değil. Bir inşa brifi: üç sayfa planlayın, ortak bir navigasyon kabuğu paylaşın, gerçek içerik doldurun ve kısa bir kabul tablosuyla siteyi kanıtlayın.
Neden şimdi mini proje
Eğitimler her seferinde bir konu gösterir. Minik kişisel site birleştirmeye zorlar: her sayfada landmark, çalışan göreli bağlantılar, bilgilendirici görsel, liste veya veri tablosu ve etiketli iletişim formu. O paketi teslim etmek — CSS’siz çirkin bile — öznitelik ezberlemekten iyidir. Odaklı bir oturumun kontrol listesi gibi davranın.
Doğrudan yanıt
1) En az üç dosya: index.html, about.html, contact.html. 2) Her sayfada aynı header/nav/footer landmark’larını çalışan bağlantılarla. 3) Ana’da gerçek intro, hakkında’da kısa hikâye, iletişimde etiketli name/email/message formu. 4) Anlamlı alt’lı bilgilendirici görsel artı beceri listesi veya küçük olgu tablosu. 5) Klavyeyle Tab; eksik label ve kırık bağlantıları düzeltin. 6) «Bitti» demeden önce her kabul satırını işaretleyin.
📊 Acceptance criteria
| Item | Done when |
|---|---|
| Shared nav | Same landmark links work on every page |
| Semantics | header, nav, main, and footer on each page |
| Home & about | Real paragraphs — not placeholder lorem forever |
| Media | At least one informative image with useful alt |
| Data | A skills list or a small facts table |
| Form | Labeled name, email, message + a real submit button |
| Quality | Keyboard tab order makes sense; no unlabeled controls |
Yazmadan önce planlayın
Önce taslak: site adı, üç sayfanın amacı, hangi foto, hangi beceriler/olgular. Klasör — üç HTML’i birlikte basit göreli bağlantılar için. Kişi/markayı bir kez adlandırın ki h1 ve title tutarlı kalsın.
Ortak kabuk — burada başlayın
Her sayfaya header/nav kopyalayın; yalnızca main’i değiştirin. Göreli href dosya adlarıyla tam eşleşmeli. Sonra gerçek button type=submit — boş div ile gönderimi taklit etmeyin.
<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>
Kabuğu okumak
- header+nav+main+footer net landmark verir
- nav’da aria-label ikinci nav gelirse yardımcı olur
- Göreli bağlantılar üç dosyayı bir site yapar
- Kabuğu tekrarlayın; yalnız main değişsin
- Her sayfanın title’ına da kısa başlık koyun
- Özet alışkanlıkları saydı — burada birlikte uygulanır
İletişim formu başlangıcı
İletişim sayfası form becerilerinin projeyle buluştuğu yerdir. Her denetimi görünür label ile eşleştirin. Gelecek backend için name ekleyin. Henüz sunucuya post etmeseniz de işaretlemede gerçek submit olsun.
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>
İşe yarayan inşa sırası
- Kabuğu üç dosyaya çoğaltın; nav bağlantılarını düzeltin. 2. Ana intro ve hakkında hikâyesi (+ liste/tablo) yazın. 3. images/ içine foto; src ve spesifik alt. 4. Formu yapıştırın; label, name, submit doğrulayın. 5. Üç sayfayı açın; daraltın; submit’e kadar Tab. 6. Kabul satırlarını işaretleyin — hafif CSS sonra.
Bu projede kolay hatalar
- Nav’ı bir kez kopyalayıp yalnızca bir sayfayı düzenlemek ta ki bağlantılar sapana
- Yalnızca placeholder’lı iletişim alanları, label yok
- Landmark yerine tüm sayfa için düzen tablosu
- Anlamlı fotoda boş alt
- Lorem bırakıp «bitti» demek
- Üç sayfa doğrulanmadan framework/ağır CSS’e atlamak
- Özet alışkanlığını unutmak: önce yapı ve label
Özet
- Bu oturum pratik kişisel site inşasıdır, başka bir kurs haritası değil
- Üç sayfa ortak header/nav/main/footer ve çalışan göreli bağlantı paylaşır
- Medya, liste veya tablo ve etiketli iletişim formunu birleştirin
- Kabul tablosu «bitti» tanımınızdır
- CSS cilasından önce klavye kontrolü
- Sonraki isteğe bağlı konular (SVG…) ekstra — önce bu siteyi teslim edin
Kısa hatırlatma
Takılırsanız kabul tablosuna dönün — yeni etiket ezberlemeye değil. Amaç kurs becerilerini tarayıcıda açılan küçük bir sitede birleştirme pratiği.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek