HTML, CSS ve JavaScript farkı: web geliştirmeye nereden başlamalı?

HTML bir web sayfasının içeriğini ve anlamını, CSS görünümünü ve yerleşimini, JavaScript ise programlanabilir davranışını düzenler. Başlangıçta üçünü aynı anda ezberlemek yerine tek bir küçük sayfada görevlerini ayırmak daha anlaşılır bir yol sunar.

Üç teknoloji hangi soruya cevap verir?

• HTML — Ne var? Başlık, paragraf, bağlantı ve düğme gibi içeriği tanımlar.
• CSS — Nasıl yerleşir ve görünür? Renk, boşluk, yazı tipi ve hizalamayı düzenler.
• JavaScript — Kullanıcı bir şey yaptığında ne olur? Tıklamayı yakalayıp ekrandaki metni değiştirebilir.

Bir düğmenin tıklanabilir olması tek başına JavaScript gerektirmez: örneğin HTML formu düğmeyle gönderilebilir. Buradaki ayrım, örneğimizdeki özel davranışı hangi katmanın ürettiğidir.

Tek dosyada çalışan küçük bir örnek

Aşağıdaki kodu index.html adıyla kaydet ve tarayıcıda aç. Düğmeye bastığında sonuç metni görünür. Dosyayı doğrudan açmak bu örnek için yeterlidir; sunucu veya ek paket gerekmez.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>İlk etkileşimim</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    button { min-height: 44px; padding: 12px 16px; cursor: pointer; }
    #sonuc { line-height: 1.6; }
  </style>
</head>
<body>
  <h1>Bugün ne öğrendim?</h1>
  <button id="goster" type="button">Mesajı göster</button>
  <p id="sonuc" aria-live="polite"></p>
  <script>
    const dugme = document.querySelector("#goster");
    const sonuc = document.querySelector("#sonuc");
    dugme.addEventListener("click", () => {
      sonuc.textContent = "Üç teknolojinin görevini ayırdım.";
    });
  </script>
</body>
</html>

Öğrenme sırasını nasıl kurabilirsin?

Bu mini proje için önerim şu: önce başlığı ve düğmeyi kur; sonra boşlukları düzenle; en son tıklama davranışını ekle. Her aşamada sayfayı yeniden açıp neyin değiştiğini gözle. Bu sıra evrensel bir zorunluluk değildir; başlangıç projesini küçük tutan bir çalışma planıdır.

Sık karıştırılan üç nokta

HTML programlama dili midir? Bir işaretleme dilidir. Sayfanın yapısını tanımlar; koşul ve döngü gibi programlama görevleri bu örnekte JavaScript’e aittir.

Java ile JavaScript aynı mı? Hayır. İsim benzerliği onları aynı dil yapmaz.

React öğrenmek için HTML ve JavaScript’i atlayabilir miyim? Bu örnekte seçici, olay ve metin güncellemesini açıklayamıyorsan önce bu temellerle çalışmak işini kolaylaştırır.

Sıra sende: üç değişiklik, üç tahmin

1. Düğmenin yazısını HTML’den değiştir.
2. CSS’te padding değerini 24px yap.
3. JavaScript’in gösterdiği mesajı değiştir.

Her değişiklikten önce beklediğin sonucu bir cümleyle yaz. Kontrol: yalnız ikinci değişiklik düğmenin iç boşluğunu büyütmelidir. Mesaj görünmüyorsa tarayıcı konsolunu ve id değerlerinin eşleşmesini kontrol et.

Sonraki adım ve kaynaklar

Programlama derslerini incele. JavaScript’le sayısal bir göreve geçmek için not ortalaması örneğini oku.

Teknik başvuru: MDN — İlk web siten ve MDN — JavaScript nedir?.

Atlas, platformun yapay zekâ destekli öğrenme asistanıdır. Bu yazıdaki şema ve alıştırma bu seri için özgün olarak hazırlanmıştır.