Bir cümlelik özet
Bu proje derste, bu modülde öğrendiğin semantik HTML, CSS düzeni, responsive tasarım, küçük bir JavaScript etkileşimi ve erişilebilirliği tek bir sayfada birleştirerek kendi ilgi alanlarını tanıtan bir web sayfası yapacaksın.
Neden önemli?
Şimdiye kadar HTML, CSS ve JavaScript'i ayrı ayrı öğrendik. Gerçek bir web sayfası ise bu üç parçanın birlikte çalışmasıyla ortaya çıkar. HTML içeriği taşır, CSS görünümü verir, JavaScript ise davranışı ekler.
Bir projeyi baştan sona kendin kurmak, tek tek örnekleri çözmekten farklı bir şeydir. Neyi hangi sırada yapacağına, sayfanın telefonda nasıl görüneceğine ve klavye kullanan biri için erişilebilir olup olmadığına sen karar verirsin. Bu ders, o kararları küçük ve güvenli adımlarla vermeni sağlar.
Adım 1: Planlama — sayfada ne olacak?
Kod yazmadan önce sayfanın bölümlerini kâğıda çizmek işini kolaylaştırır. Amaç, seni tanıtan tek sayfalık bir tanıtım sayfası.
Örnek bir plan:
1. Başlık: Kısa selam + tek cümlelik tanıtım
2. Hakkımda: Birkaç cümle
3. Hobilerim: Kart listesi (2–4 kart)
4. Gizli detay: "Daha fazla göster" ile açılan kutu
5. Alt bilgi: Sayfanın kim tarafından yapıldığı (takma ad)İkinci örnek: farklı bir ilgi alanı
Aynı iskeleti farklı bir konu için de kullanabilirsin. Örneğin basketbolla ilgileniyorsan kartlar "En sevdiğim pozisyon", "Antrenman günlerim" ve "Hedefim" olabilir. İskelet aynı kalır; yalnız içerik değişir.
Adım 2: Semantik HTML iskeleti
Semantik HTML, <div> yerine anlamı belli etiketler kullanmaktır: <header>, <main>, <section>, <footer>. Bu etiketler ekran okuyucuların sayfayı doğru anlamasına yardım eder.
Önce belgenin başlığı:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>İlgi Alanlarım</title>
<link rel="stylesheet" href="stil.css">
</head>viewport satırı sayfanın telefonda doğru ölçekte açılmasını sağlar; onu unutma.
Sonra gövde:
<body>
<header>
<h1>Merhaba, ben bir öğrenciyim</h1>
<p>Bu sayfada sevdiğim konuları tanıtıyorum.</p>
<button id="tema-dugmesi" type="button">Koyu temaya geç</button>
</header>
<main>
<section aria-labelledby="hobiler-baslik">
<h2 id="hobiler-baslik">Hobilerim</h2>
<ul class="kartlar">
<li>Robotik</li>
<li>Basketbol</li>
<li>Kitap okumak</li>
</ul>
</section>
</main>
</body>aria-labelledby, bölümün hangi başlıkla adlandırıldığını yardımcı teknolojiye söyler. Bir görsel eklersen alt metnini yazmayı unutma:
<img src="robot.png" alt="Kendi yaptığım çizgi izleyen robotun fotoğrafı">Adım 3: CSS ile düzen ve responsive tasarım
Renkleri CSS değişkeni olarak tanımlarsak, tema değiştirmek çok kolaylaşır. Değişkenler :root içinde durur ve var() ile kullanılır.
:root {
--arka-plan: #ffffff;
--yazi: #1a1a1a;
--vurgu: #2563eb;
}
body {
font-family: system-ui, sans-serif;
background: var(--arka-plan);
color: var(--yazi);
margin: 0;
line-height: 1.6;
}İçeriği ortalamak ve okunur bir genişlikte tutmak için:
main {
max-width: 640px;
margin: 0 auto;
padding: 1rem;
}Responsive demek, sayfanın ekran boyutuna göre kendini ayarlaması demektir. Kartları dar ekranda alt alta, geniş ekranda yan yana dizmek için @media kullanırız:
.kartlar {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 600px) {
.kartlar {
grid-template-columns: 1fr 1fr;
}
}Koyu tema için body'ye bir sınıf eklendiğinde değişkenleri değiştiririz:
body.koyu {
--arka-plan: #111827;
--yazi: #f3f4f6;
}Bu sınıfı JavaScript ekleyip kaldıracak.
Adım 4: JavaScript etkileşimi
Modern JavaScript'te let ve const kullanır, olayları addEventListener ile dinleriz. İki küçük etkileşim ekleyeceğiz: tema değiştirme ve gizle-göster.
Tema düğmesi:
const dugme = document.getElementById("tema-dugmesi");
dugme.addEventListener("click", () => {
document.body.classList.toggle("koyu");
const koyuMu = document.body.classList.contains("koyu");
dugme.textContent = koyuMu ? "Açık temaya geç" : "Koyu temaya geç";
});Şimdi HTML'e gizli bir detay ekleyelim:
<button id="detay-dugmesi" type="button"
aria-expanded="false" aria-controls="detay">
Daha fazla göster
</button>
<div id="detay" hidden>
<p>Robotik kulübünde çizgi izleyen robot yapmayı deniyorum.</p>
</div>Ve onu açıp kapatan kod:
const detayDugmesi = document.getElementById("detay-dugmesi");
const detay = document.getElementById("detay");
detayDugmesi.addEventListener("click", () => {
const acikMi = detay.hasAttribute("hidden") === false;
detay.toggleAttribute("hidden");
detayDugmesi.setAttribute("aria-expanded", String(!acikMi));
});aria-expanded değerini güncellemek önemlidir: ekran okuyucu, kutunun açık mı kapalı mı olduğunu böyle anlar.
Mini uygulama
Yukarıdaki parçaları birleştirip kendi sayfanı kur. Sonra şu test senaryolarını tek tek dene:
- Sayfayı aç ve tarayıcı penceresini daralt–genişlet. Kartlar dar ekranda alt alta, geniş ekranda yan yana geliyor mu?
- Tema düğmesine bas. Renkler değişiyor ve düğme yazısı güncelleniyor mu?
- "Daha fazla göster"e bas. Kutu açılıyor mu, ikinci basışta kapanıyor mu?
- Fareyi kullanmadan, yalnız
Tabtuşuyla düğmelere ulaşıpEnterile çalıştırabiliyor musun?
Bir hata ve düzeltmesi
İlk denemede tema düğmesi çalışmadı. Konsol şu hatayı verdi:
Uncaught ReferenceError: koyu is not definedSorunu bulmak için ilgili satıra baktık:
// Hatalı: koyu tırnaksız yazılınca değişken sanılıyor
document.body.classList.toggle(koyu);
// Doğru: sınıf adı bir metin, tırnak içinde olmalı
document.body.classList.toggle("koyu");Sınıf adları metindir; tırnak koyunca hata düzeldi. Küçük bir eksik bile programı durdurabilir.
Geliştirme fikirleri
- Seçilen temayı
localStorageile hatırlat, böylece sayfa yenilenince aynı kalsın. - İkinci bir bölüm ekle: "Öğrenmek istediğim şeyler".
- Kartlara küçük emoji veya
altmetinli görsel ekle.
Projeyi güçlendirme planı
Proje: Kişisel Proje Sayfası için yalnız çalışan bir gösterim hazırlamak yeterli değildir. İyi bir proje; hedefi, kullanıcıyı, sınırları, test koşullarını ve başarısız denemeleri de görünür kılar. Bu genişletme çalışmasında farklı ekranlarda okunabilen ders kartları arayüzü bağlamını kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü oluştur. Dersin hedefi “Semantik HTML, CSS, responsive ve küçük bir JS etkileşimini birleştirerek erişilebilir bir proje sayfası yap” olsa da proje sayfasında ölçülmemiş bir sonucu kesin başarı gibi yazma.
1. Proje özeti ve kapsam
Önce üç cümle yaz: Çözmek istediğin sorun nedir, bu sorun kimin için önemlidir ve ilk sürüm özellikle neyi yapmayacaktır? Kapsam dışını belirtmek projeyi küçültmez; tamamlanabilir hâle getirir. Adım 1: Planlama — sayfada ne olacak? ile Adım 2: Semantik HTML iskeleti arasındaki ilişkiyi projenin temel varsayımı olarak yaz ve bu varsayımı hangi testin doğrulayacağını belirt.
2. Kabul ölçütleri
- Başlık hiyerarşisi mantıklı mı?
- Bağlantılar klavye ve dokunmayla çalışıyor mu?
- Mobil ekranda yatay taşma var mı?
- Görsellerin alternatif metni ve boyutları tanımlı mı?
- HTML, CSS ve JavaScript sorumlulukları birbirine karışıyor mu?
“Proje: Kişisel Proje Sayfası” için kabul ölçütlerini “çalışıyor” gibi belirsiz sözcüklerle bırakma. Süre, mesafe, doğru deneme sayısı, ekran genişliği veya kullanıcı adımı gibi gözlenebilir bir ölçü seç. Ölçüm mümkün değilse en azından üç ardışık denemede aynı davranışın görülüp görülmediğini kaydet.
3. Test matrisi
| Test | Koşul | Beklenen | Gerçek sonuç | Sonraki karar |
|---|---|---|---|---|
| Normal | Standart giriş ve tam bağlantı | Temel görev tamamlanır | Test sırasında doldur | Koru veya küçük iyileştirme yap |
| Sınır | En düşük ya da en yüksek kabul edilen değer | Sistem kararlı kalır | Test sırasında doldur | Eşiği veya kuralı gözden geçir |
| Hata | Eksik, yanlış ya da beklenmeyen giriş | Güvenli ve anlaşılır tepki | Test sırasında doldur | Hata yönetimi ekle |
| Tekrar | Aynı koşulda en az üç deneme | Benzer sonuçlar | Test sırasında doldur | Tutarsızlığın kaynağını araştır |
4. Sürüm günlüğü
“Proje: Kişisel Proje Sayfası” projesinin her sürümü için tarih, değiştirdiğin tek ana karar, değişikliğin nedeni ve test sonucu yaz. İlk sürümün çalışmaması başarısızlık değildir; Adım 1: Planlama — sayfada ne olacak? veya Adım 2: Semantik HTML iskeleti ile ilgili hangi varsayımın yeniden düşünülmesi gerektiğini gösteren veridir. Görsel kullanırken kişisel bilgi ve özel arka plan ayrıntılarını paylaşma.
5. Sunum ve öz değerlendirme
“Proje: Kişisel Proje Sayfası” projesini iki dakikada anlatacak şekilde hazırlan: sorun, çözüm yaklaşımı, farklı ekranlarda okunabilen ders kartları arayüzü için en önemli test sonucu ve bir sonraki adım. “Tamamlandı” demek yerine hangi kısmın doğrulandığını ve hangi kısmın hâlâ geliştirilmesi gerektiğini açıkla.
Sık yapılan hatalar
viewport etiketini unutmak
Bu satır olmadan sayfa telefonda küçücük görünür. <head> içinde mutlaka bulunsun.
Görsele alt metni yazmamak
alt boş kalırsa görmeyen kullanıcı görselin ne olduğunu anlayamaz. Kısa ve açık bir açıklama yaz.
Sadece renkle anlam vermek
"Yeşil kutu iyi, kırmızı kötü" gibi yalnız renge dayalı ipuçları renk körü kullanıcılar için sorun olur. Renge ek olarak metin de kullan.
aria-expanded değerini güncellememek
Kutuyu açıp kapatıyorsun ama aria-expanded hep false kalıyorsa ekran okuyucu yanlış bilgi verir. Her tıklamada değeri değiştir.
Güvenlik notu
Bu sayfa herkese açık olabilir, bu yüzden kişisel bilgi koyma:
- Ev adresi, telefon numarası, okul adı veya tam adını yazma.
- Kendi yüzünün net göründüğü fotoğrafı bir yetişkine sormadan ekleme.
- Takma ad veya yalnızca ismin kullanmak daha güvenlidir.
Bu derste gerçek bir form yok; hiçbir yere veri gönderilmiyor, her şey senin tarayıcında kalıyor. Sayfanı internette yayımlamadan önce mutlaka bir veliyle birlikte gözden geçir.
Yayın öncesi kalite kapısı
Kişisel sayfa yayımlanmadan önce bütün bağlantılar gerçek tıklamayla, klavye sırası yalnız Tab tuşuyla ve metin kontrastı açık-koyu zeminlerde kontrol edilir. Mobil menünün kapalıyken görünmez bir katman oluşturmadığı, görsellerin alternatif metinleri ve sayfa başlıklarının benzersiz olduğu doğrulanır. Ardından sayfa 360, 768 ve 1280 piksel genişlikte incelenir.
Yayın içeriğinde kesin konum, telefon, kişisel e-posta, günlük program veya izinsiz kişi fotoğrafı bulunmaz. Proje ve başarılar kanıt olmadan tamamlanmış gibi yazılmaz. Bu kontrol, teknik olarak çalışan bir sayfanın güvenli ve dürüst bir portfolyoya dönüşmesini sağlar.
Ders özeti
- Bir web sayfası HTML (içerik), CSS (görünüm) ve JavaScript (davranış) birlikte çalışınca ortaya çıkar.
- Semantik etiketler ve
ariaöznitelikleri sayfayı erişilebilir yapar. - CSS değişkenleri ve
@mediaile tema ve responsive düzen kolayca kurulur. addEventListenerile küçük etkileşimler eklenir;aria-expandedgüncel tutulmalıdır.- Kişisel bilgi paylaşılmaz ve sayfa yayımlanmadan önce bir yetişkinle kontrol edilir.
Kontrol soruları
<header>,<main>ve<footer>gibi etiketlere ne ad verilir ve neden kullanılır?viewportmeta etiketi ne işe yarar?- Bir sayfayı responsive yapmak için hangi CSS kuralını kullanırız?
- Tema düğmesine basınca hem renkler değişiyor hem düğme yazısı güncelleniyor. Bunu sağlayan iki satırı açıkla.
- Kişisel proje sayfasına neden ev adresi veya telefon yazmamalıyız?
Cevaplar
- Bunlara semantik HTML etiketleri denir. Anlamı belli oldukları için ekran okuyucular ve arama motorları sayfayı daha doğru anlar.
viewport, sayfanın cihaz genişliğine göre doğru ölçekte açılmasını sağlar; onsuz sayfa telefonda çok küçük görünür.@mediasorgusu kullanırız. Örneğin@media (min-width: 600px)ile geniş ekranda farklı bir düzen tanımlanır.classList.toggle("koyu")body'ye sınıfı ekleyip çıkararak renkleri değiştirir;dugme.textContent = ...satırı ise düğme yazısını duruma göre günceller.- Sayfa herkese açık olabileceği için kişisel bilgiler güvenlik ve gizlilik riski oluşturur; takma ad kullanmak daha güvenlidir.
Kaynak ve doğrulama notu
“Proje: Kişisel Proje Sayfası” dersi için doğrulama odağı Adım 1: Planlama — sayfada ne olacak? ile Adım 2: Semantik HTML iskeleti arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.
Sonraki ders
Elektroniğe Giriş modülü: Web sayfalarından fiziksel dünyaya geçiyoruz; devre, gerilim ve LED gibi temel kavramlarla ilk elektronik denemelerine başlıyoruz.