HTML, CSS ve JavaScript: Her Katmanın Görevi
HTML, CSS ve JavaScript'in bir web sayfasına ayrı ayrı ne kattığını ve sorumlulukları ayırmanın siteleri neden sürdürülebilir kıldığını öğrenin.
HTML, CSS ve JavaScript: Her Katmanın Görevi, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Web'in Üç Temel Taşı
Her web sayfası, birbirini tamamlayan üç teknolojiden oluşur: yapı için HTML, görünüm için CSS ve davranış için JavaScript. Bunları birbirinden ayrı tutmak, ön yüz geliştirmedeki en önemli ilkelerden biridir.
HTML — Yapı ve Anlam
HTML (HyperText İşaretleme Dili), içeriğin ne olduğunu açıklar. Bir başlık, paragraf, liste veya form — HTML; tarayıcıların, arama motorlarının ve ekran okuyucularının anlayabileceği anlamsal bir anlam kazandırır.
<!DOCTYPE html>
<html lang="en">
<head><title>My Page</title></head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>CSS — Görünüm ve Stil
CSS (Basamaklı Stil Sayfaları), içeriğin nasıl göründüğünü açıklar. Renkler, yazı tipleri, boşluklar, yerleşim ve animasyon CSS'te tanımlanır. Stili CSS'te tutmak, tek bir dosyayı düzenleyerek tüm siteyi yeniden tasarlayabilmenizi sağlar.
body {
font-family: system-ui, sans-serif;
background: #f0f4f8;
color: #1a202c;
}
h1 {
color: #2b6cb0;
}JavaScript — Davranış ve Etkileşim
JavaScript, kullanıcı eylemlerine veya verilere tepki olarak ne olduğunu açıklar. Bir düğmeye tıklamak, bir form göndermek, bir sayacı güncellemek veya yeni gönderileri almak — tüm bu davranışlar JavaScript'in alanıdır.
document.querySelector('button').addEventListener('click', () => {
document.querySelector('#count').textContent++;
});Üç Katman Neden Ayrılmalı?
İlgi alanlarını ayırmak şu anlama gelir: bir tasarımcı JavaScript'e dokunmadan CSS'i değiştirebilir; bir mühendis HTML'yi yeniden yazmadan bir özellik ekleyebilir; aynı HTML birden fazla CSS temasına sahip olabilir. Kodun bakımı, sınanması ve yeniden kullanılması kolaylaşır.
CSS Olmadan HTML
CSS yüklenmeden önce tarayıcı ham HTML'yi görüntüler: düz metin, çalışan bağlantılar ve yerel form denetimleri. Bu, yavaş bağlantılara sahip veya JavaScript'i devre dışı bırakılmış kullanıcılar için temel deneyimdir. İyi HTML bu deneyimi kabul edilebilir hâle getirir.
Aşamalı Geliştirme
Aşamalı geliştirme: çalışan HTML ile başlayın, görünümü iyileştirmek için CSS ekleyin, davranış kazandırmak için JavaScript ekleyin. Her katman bir öncekinin üzerine eklenir; böylece bir katman çalışmazsa deneyim sorunsuz biçimde daha temel hâle gelir.
Satır İçi ve Harici Dosyalar
CSS'i <style> etiketlerine, JavaScript'i ise <script> etiketlerine yerleştirebilirsiniz; ancak harici .css ve .js dosyaları daha iyidir. Tarayıcı tarafından önbelleğe alınabilir, daha küçük dosyalara ayrılabilir ve birbirlerinden bağımsız olarak bakımları yapılabilir.
Tarayıcı Üçünün Tümünü Uygular
Tarayıcı, DOM'u oluşturmak için HTML'yi okur, CSSOM'u oluşturmak için CSS'i okur, stilleri uygular ve ardından her ikisini de değiştirebilen JavaScript'i çalıştırır. Bu sırayı anlamak, doğru zamanda çalışan kod yazmanıza yardımcı olur.
Yaygın Hatalar: Katmanları Karıştırmak
HTML'de stil (style="" öznitelikleri), JavaScript'te HTML (dizelerin birleştirilmesi) ve CSS'te davranış (display:none çözümleri) katmanları birbirine karıştırır. Bunların her biri kodda hata ayıklamayı, kodu sınamayı ve ekip arkadaşlarınıza devretmeyi zorlaştırır.
Çerçeveler Temel İlkeleri Değiştirmez
React, Vue ve Angular, tarayıcıda hâlâ HTML, CSS ve JavaScript üretir. Üç katmanı anlamanız, her çerçevenin çıktısını anlamanız ve soyutlamaların gizlediği sorunlarda hata ayıklayabilmeniz demektir.
Hızlı Kontrol
Bir web sayfasının yerleşimini ve görsel görünümünü tanımlamaktan hangi katman sorumludur?
Özet: Her Katmanın Rolü
HTML = yapı ve anlam. CSS = görünüm ve yerleşim. JavaScript = davranış ve etkileşim. Bu üçünü kod tabanınızda açıkça birbirinden ayırın; ekip arkadaşlarınız ve gelecekteki siz size teşekkür edecektir.
Sıkça Sorulan Sorular
“HTML, CSS ve JavaScript: Her Katmanın Görevi” dersi ücretsiz mi?
Evet — “HTML, CSS ve JavaScript: Her Katmanın Görevi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“HTML, CSS ve JavaScript: Her Katmanın Görevi” dersinde ne öğreneceğim?
HTML, CSS ve JavaScript'in bir web sayfasına ayrı ayrı ne kattığını ve sorumlulukları ayırmanın siteleri neden sürdürülebilir kıldığını öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“HTML, CSS ve JavaScript: Her Katmanın Görevi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tarayıcılar, DNS ve HTTP: İstek Yaşam Döngüsü
- HTML, CSS ve JavaScript: Her Katmanın Görevi
- Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama
- Geliştirici Araçları: DevTools'u Açma ve Kullanma