Kısa cevap: HTML, CSS ve JavaScript modern web sayfasında birlikte çalışır; ancak aynı işi yapmaz. HTML anlamlı içeriği oluşturur, CSS görünümü ve düzeni yönetir, JavaScript ise gerekli etkileşimi ekler. Bu ayrımı öğrenmek, bir sorun çıktığında hangi katmana bakacağınızı da anlamayı kolaylaştırır.
1. HTML nedir?
HTML başlık, paragraf, liste, bağlantı, görsel ve form gibi parçaları anlamlı bir belgeye dönüştürür. h1, nav, main ve button gibi doğru öğeleri seçmek yalnız görsel düzen değil erişilebilirlik için de önemlidir. Rastgele div kullanmak her durumda yeterli bir belge yapısı oluşturmaz.
- Başlık hiyerarşisini mantıklı kurun.
- Eylem için button, gezinme için a kullanın.
- Form alanlarına görünür etiketler ekleyin.
2. CSS ne işe yarar?
CSS renkler, boşluklar, yazı tipleri ve sütun yerleşimi gibi görünümü belirler. Grid ve Flexbox ile farklı ekranlara uyum sağlayan düzenler tasarlanabilir. CSS ile öğeyi görünmez yapmak, ekran okuyucular ve klavye kullanıcıları açısından beklenmedik sonuçlar doğurabileceği için dikkatli olunmalıdır.
- Önce okunabilir temel görünümü hazırlayın.
- Esnek ölçüler kullanın.
- Mobilde yatay taşmayı test edin.
3. JavaScript ne zaman gereklidir?
JavaScript düğmeye basıldığında içerik değiştirebilir, form girişini kontrol edebilir veya tarayıcıda hesaplama yapabilir. Fakat her basit bağlantı veya metin için JavaScript şart değildir. Ana bilginin gereksiz script bağımlılığı nedeniyle kaybolmaması daha dayanıklı bir yaklaşım sağlar.
- Sadece gerekli etkileşimi ekleyin.
- Konsol hatalarını izleyin.
- Klavye ve dokunma ile işlevleri test edin.
4. Üç teknolojinin birlikte çalışması
Örneğin bir düğmenin HTML ile tanımlandığını, CSS ile renklendirildiğini ve JavaScript ile tıklamada metni değiştirdiğini düşünün. Belge yapısı olmadan seçilecek anlamlı düğme yoktur; CSS olmadan görünüm sade kalır; JavaScript olmadan dinamik metin değişmez. Katmanların ayrılması bakım ve hata ayıklamayı kolaylaştırır.
- Önce sade HTML oluşturun.
- Sonra CSS düzenini kurun.
- En son gerekliyse JavaScript davranışı ekleyin.
5. Öğrenmeye hangi sırayla başlanmalı?
HTML ile içerik semantiği, CSS ile duyarlı yerleşim ve JavaScript ile olaylar üzerine çalışmak yeni başlayanlar için anlaşılır bir sıradır. Yalnız kitap okumak yerine küçük bir sayfa oluşturup değişikliklerin sonucunu görmek daha etkilidir. Birinci projede bütün frameworkleri öğrenmek gerekmiyor.
- Bir bilgi sayfası yazın.
- Aynı sayfayı telefon için düzenleyin.
- Bir hesaplama veya açılır menü ekleyin.
6. SEO, hız ve erişilebilirlik
Anlamlı HTML başlıkları ve bağlantılar kullanıcılara içerik yolunu gösterir. CSS okunabilirlik ve kontrastı etkiler. JavaScript ise gereğinden ağır olduğunda yükleme süresini ve etkileşim hızını olumsuz etkileyebilir. Bir sitenin kalitesi üçünün dengeli kullanımına bağlıdır.
- Ana içerik tarayıcıda gerçekten görünüyor mu kontrol edin.
- Odak göstergesini CSS ile yok etmeyin.
- Gereksiz scriptleri azaltmadan önce ölçüm yapın.
7. Aynı bileşenin üç katmanda kurulması: açılır açıklama
Bir ürün sayfasındaki “Detayları göster” alanını düşünelim. Bazı etkileşimler için JavaScript eklemek bile gerekmeyebilir: HTML’nin yerleşik details ve summary öğeleri, destekleyen tarayıcılarda açıklamayı açıp kapatabilir. Böylece etkileşimi sadece gerekli yerde kullanmış oluruz.
<details class="bilgi-kutusu">
<summary>Ürün hakkında ayrıntılar</summary>
<p>Malzeme, ölçü ve bakım bilgileri.</p>
</details>.bilgi-kutusu {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
}
.bilgi-kutusu summary { cursor: pointer; }
.bilgi-kutusu summary:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}Burada HTML anlamı ve açılma davranışının temelini sağlar, CSS görünümü geliştirir. Ancak kullanıcı girdilerine göre sonuç hesaplamak veya uzak bir hizmetten veri almak gibi daha karmaşık davranışlar gerektiğinde JavaScript devreye girer.
8. Hangi değişiklik hangi teknolojiyle yapılır?
| İhtiyaç | Önce bakılacak katman | Kontrol |
|---|---|---|
| Sayfanın ana başlığı yanlış | HTML / içerik | Tek ve anlamlı ana başlık |
| Mobilde kartlar yan yana taşıyor | CSS | Genişlik, Grid, medya sorgusu |
| Hesapla düğmesi sonuç vermiyor | JavaScript ve iş mantığı | Konsol hatası, olay dinleyici, giriş doğrulama |
| Form etiketi ekran okuyucuya okunmuyor | HTML | label ve alan eşleşmesi |
| Odak çizgisi görünmüyor | CSS | :focus-visible stili |
| Menü fareyle açılıp klavyeyle açılmıyor | HTML ve gerekiyorsa JavaScript | Doğru düğme, klavye ve durum yönetimi |
9. Tarayıcı geliştirici araçlarıyla sorunu ayırma
Bir düğmenin çalışmadığını gördüğünüzde hemen yeni eklenti yüklemeyin. Önce tarayıcı geliştirici araçlarında Elements bölümünden öğenin gerçekten var olup olmadığını, Styles bölümünden görünümünü ve Console bölümünden JavaScript hatalarını inceleyin. Network bölümü başarısız dosya istekleri hakkında ipucu verir.
- Önce JavaScript kapalıyken veya yüklenmediğinde temel içeriğin erişilebilirliğini gözleyin.
- Dar ekranı simüle edip gerçek telefonda da kontrol edin.
- Bir hata varsa etkileyen dosya ve bileşeni belirleyin; bütün kodu rastgele değiştirmeyin.
- Düzeltmeyi klavye, dokunmatik ekran ve mümkünse ekran okuyucuyla tekrar deneyin.
10. Başlangıç için üç aşamalı mini proje
Küçük bir “Web Tasarım Terimleri” sayfası hazırlayın. İlk aşamada HTML ile tanım listesi, başlık ve gezinme bağlantıları kurun. İkinci aşamada CSS ile tipografi ve tek sütundan iki sütuna geçen bir düzen hazırlayın. Üçüncü aşamada yalnız gerekli olan bir “terimleri filtrele” davranışı ekleyin.
.terim-listesi {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 48rem) {
.terim-listesi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Filtre etkileşimi ekleyecekseniz filtre dışındaki öğeleri yalnız görsel olarak saklamanın erişilebilirlik üzerindeki etkisini de inceleyin. Tasarımınızın mobil öncelikli düzenini ayrıca test edin.
11. Üç katmanın yayın öncesi kontrol listesi
- HTML başlıkları, linkler, formlar ve düğmeler doğru öğelerle oluşturuldu mu?
- CSS olmadan da ana bilgi anlamlı bir sırayla okunabiliyor mu?
- Telefon boyutunda taşma ve okunamaz metin var mı?
- Fare olmadan Tab, Enter ve Space ile gerekli kontroller kullanılabiliyor mu?
- JavaScript hataları ana içeriği veya form gönderimini engelliyor mu?
- Yükleme performansı varsayımla değil gerçek ölçümle değerlendirildi mi?
Katmanları ayrı ayrı test etmek, yeni başlayanların gereksiz kod kullanmasını ve bakım sırasında sorunların büyümesini önlemeye yardımcı olur.
Sık sorulan sorular
HTML bir programlama dili midir?
HTML bir işaretleme dilidir; belgenin yapısını ve içeriğini tanımlar.
JavaScript her sitede zorunlu mu?
Hayır. Birçok bilgi sayfası temel işlevlerini JavaScript olmadan sağlayabilir.