HTML, CSS ve JavaScript: bir web sayfası nelerden oluşur

Ajandan sayfada bir düzeltme istiyorsunuz ve basit bir projede adı size pek bir şey söylemeyen dosyalar beliriyor: index.html, style.css, script.js. Ya da bu dosyalar zaten vardı, ajanın raporunda ise "stilleri değiştirdim" yazıyor - ve bu cümleden tam olarak neye dokunduğu anlaşılmıyor.

Tarayıcının aldığı üç temel teknolojiyi inceleyelim: HTML, CSS ve JavaScript. Anlaşılır olsun diye derleme adımı olmayan basit bir statik sayfa alalım. Gerçek bir repoda dosyaların adları ve yerleri farklı olabilir, bu yüzden düzeltmeden önce ajandan proje yapısını göstermesini ve ilgili öğeden sorumlu dosyaları bulmasını istemek işe yarar. Bu makale elle sayfa kodlamayı öğretmiyor, bunun için ajanınız var.

Sayfa, tarayıcının okuduğu metindir

Basit bir statik sayfayla başlayalım: kaynak dosyaları sıradan metin dosyalarıdır. Bunları not defteriyle açıp gözle okuyabilirsiniz. Burada ayrıca bir derleme gerekmez: tarayıcı HTML'i okur, bağlı kaynakları yükler ve bunlara göre sayfayı ekrana çizer.

Böyle bir projenin başlangıç noktası genellikle index.html dosyasıdır. Tarayıcı onu açar, işaretlemeyi ayrıştırır ve içindeki bağlantılara göre stilleri, betikleri, resimleri ve yazı tiplerini yükler.

Derleme adımı olan bir projede kaynaklar bileşenlerin içinde durabilir, hazır HTML, CSS ve JavaScript'i ise özel bir araç üretir. Aşağıdaki roller orada da işe yarar bir harita olarak kalır, ama tam olarak bu adlara sahip üç dosya aramanıza gerek yok.

Basit örneğimiz için farklı rollere sahip üç dosya alalım:

• HTML - sayfada ne var: başlık, paragraf, düğme, resim;
• CSS - nasıl göründüğü: renkler, yazı tipleri, boşluklar, köşe yuvarlatma, yumuşak geçişler;
• JavaScript - ne olur: tıklayınca, metin girilince, zamanlayıcıyla.

Şimdi tek tek bakalım.

HTML: İşaretleme nelerden oluşur

HTML çizim değil, işaretlemedir. Bir düğmenin nasıl görüneceğini tarif etmezsiniz. "Burada bir düğme var" dersiniz - ve tarayıcı onu kendi bildiği gibi çizer.

İşaretlemenin temel birimi etikettir. Etiketler neredeyse her zaman çift olur: açılış ve kapanış etiketi, aralarında da içerik.

Her parçanın kendi adı var, hepsinin birlikte adı ise öğe. Bu kelime işinize yarayacak: sayfa hakkında konuşurken genellikle "öğe" denir ve etiketle birlikte içindekiler kastedilir.

Etiket adları İngilizce kelimelerin kısaltmalarıdır: p paragraph'tan, a anchor'dan, img image'dan. Bunları ezberlemeye gerek yok, ama tanımadığınız bir etiketin neden sorumlu olduğunu tahmin etmeye genellikle yardımcı olur.

Kapanış etiketini eğik çizgiden tanırsınız. Kapanış etiketi olmayan öğeler de var. Örneğin <img> metin ya da iç içe etiket barındıramaz, resmin adresini de src özniteliğinden alır.

Etiketler kutunun içindeki kutular gibi birbirinin içine yerleşir ve ters sırayla kapanır: önce içteki, sonra dıştaki. Sırayı bozarsanız tarayıcı çökmez, ne demek istediğinizi tahmin etmeye çalışır. Genellikle pek de iyi tahmin edemez.

İkinci kavram özniteliktir. Açılış etiketinin içinde duran ve etiket hakkında bir şey söyleyen ek bilgidir: bağlantı nereye gidiyor, resim nereden alınacak, bu öğeye hangi adla seslenilecek.

<a href="https://example.com">Siteyi Aç</a>
<img src="cover.png" alt="Kapak">
<button id="play" class="btn">Oynat</button>

Son satırdaki class özniteliği iki dakika sonra işimize yarayacak: düğmeye stiller onun üzerinden uygulanacak. id="play" özniteliği ise düğmeye benzersiz bir ad verir, betik düğmeyi bu adla bulur.

Şimdi de bütün bir sayfa. Düşündüğünüzden kısa:

<!doctype html>
<html>
<head>
  <title>Sayfam</title>
</head>
<body>
  <h1>İlk Sayfa</h1>
  <p>Sıradan bir metin paragrafı.</p>
  <button id="play" class="btn">Oynat</button>
</body>
</html>

İki bölüm var: <head> - sekme başlığının ve stil bağlantılarının durduğu teknik kısım; <body> - okuyucunun ekranda gördüğü her şey. İlk satır ise tarayıcıya yalnızca karşısında modern HTML olduğunu bildirir.

Şema işaretlemenin temel özelliğini gösteriyor: sayfadaki her şey bir şeyin içinde durur. <body> <html> içinde, düğme <body> içinde, metin de düğmenin içinde. Dosyadaki basamak basamak girintiler de buradan gelir: süs için değil, neyin neyin içinde olduğunu göstermek için.

Pratik sonucu basit. Tarayıcı sekmesinin başlığı ve stillerin bağlanması <head> içinde durur ve ekranda hiç görünmez. Geri kalan her şey <body> içindedir. Ajan raporunda "body'ye blok ekledim" yazıyorsa, söz konusu olan tam da ikinci kutudur: yeni öğe teknik kısma değil, sayfaya eklenmiştir.

Dilde yüzden fazla etiket var, ama gerçek bir sayfada neredeyse hep aynıları döner durur:

Son ikisi kendi başına hiçbir anlam taşımaz ve hiçbir şey çizmez. Bunlar stillerin ve betiklerin kolayca tutunabildiği boş kutulardır - ve tam da bu yüzden her sayfada en çok onlardan bulunur.

CSS: Sayfa görünümünü nasıl kazanır

Çıplak işaretleme cılız görünür: beyaz üzerine siyah metin, gri bir sistem düğmesi, her şey sol kenara yaslanmış. Bununla tasarımı yapılmış bir sayfa arasındaki farkın büyük kısmını CSS yaratır.

CSS kurallardan oluşur. Bir kural iki soruya cevap verir: neye uygulanıyor ve neyi değiştiriyor.

.btn {
  background: #6c5ce7;    /* arka plan rengi */
  color: #ffffff;         /* metin rengi */
  padding: 12px 24px;     /* iç boşluklar */
  border-radius: 12px;    /* köşe yuvarlatma */
}

İlk satır seçicidir: kuralın hangi öğelere ait olduğunu söyler. Ardından süslü parantezlerin içinde "özellik: değer" çiftleri gelir, her biri noktalı virgülle biter.

btn önündeki nokta, bunun bir sınıf olduğunu belirtir. Düğmedeki class="btn" özniteliğini hatırlıyor musunuz? İşte burada devreye girdi: işaretlemede öğeye bir etiket takarsınız, stillerde ise o etikete seslenirsiniz. Aynı etiketi on düğmeye takabilirsiniz - ve tek bir kural sayesinde on düğmenin hepsi aynı görünür.

CSS'te yüzlerce özellik var, ama başkasının dosyasını okuyup orada neler olduğunu anlamak için birkaçı yeter:

• color - metin rengi, background - arka plan rengi veya resmi;
• font-size ve font-family - yazı tipi boyutu ve ailesi;
• padding - öğenin içindeki boşluk, margin - dışındaki, komşularla arasındaki boşluk;
• border-radius - köşe yuvarlatma, "şık" görünümün de yarısı;
• transition - yumuşak geçiş: bir anda sıçramak yerine 0,2 saniyede.

Kurallar çoğunlukla ayrı bir dosyada durur, sayfa da bu dosyadan teknik kısımdaki tek bir satır sayesinde haberdar olur:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Bu satırı silin - stil dosyası yüklenmez. Metin ve öğeler işaretlemede kalır, ama alışık olduğunuz yerleşim ve tasarım kaybolabilir, sayfayı kullanmak da bazen zorlaşır.

Şemada solda da sağda da aynı sayfa var: başlık, iki satır metin, düğme. Hiçbir öğe eklenmedi, hiçbiri kaybolmadı - bu örnekte yalnızca stil dosyası düzenlendi.

Bu bir arama haritası, aşılmaz bir teknik duvar değil. Yeni bir yerleşim için ajanın bazen HTML'deki sınıfları veya kapsayıcıları da değiştirmesi gerekir, özensiz bir CSS kuralı ise düğmenin üstünü örtüp tıklamayı engelleyebilir. Bu yüzden görsel bir düzeltmeden sonra diff'e bakılır, sayfa açılır ve etkilenen işlemler denenir.

JavaScript: Bir işlem yapılınca ne olur

HTML ve CSS sayfayı göstermeyi ve ona yumuşak geçişler ya da animasyon eklemeyi zaten biliyor. Ama örneğimizdeki düğmenin henüz kendine ait bir işlevi yok: basıyorsunuz, puan değişmiyor.

Sayfaya istediğiniz mantığı genellikle JavaScript ekler. Düğme HTML'de zaten id="play" benzersiz adını aldı. Şimdi düzen basit: öğeyi bul, olayı bekle, bir şeyi değiştir.

// düğmeyi id'sine göre buluyoruz
const button = document.getElementById("play");
let score = 0;

// olaya abone oluyoruz: tıklanınca ne yapılacak
button.addEventListener("click", function () {
  score = score + 1;
  button.textContent = "Puan: " + score;
});

İlk tıklama yazıyı "Puan: 1" yapar, ikincisi "Puan: 2". Hiçbir şey olmuyorsa önce HTML'de id="play" yazdığını, betikte de aynı adın, play'in kullanıldığını kontrol edin.

Burada üç ayrıntı var. const ve let bir değişken tanımlar - içinde değer tutan, adı olan bir kutu. addEventListener sayfayı bir olaya abone eder: tıklama, metin girişi, farenin üzerine gelmesi. Süslü parantezlerin içinde ise bir fonksiyon durur - olay gerçekleştiğinde çalışacak bir kod parçası.

Son satıra dikkat edin: betik düğmenin metnini değiştiriyor. Bu önemli bir nokta - JavaScript, sayfa çalışırken hem işaretlemeyi hem de stilleri değiştirebilir. Bir paragraf ekleyebilir, bir bloğu gizleyebilir, düğmenin rengini değiştirebilir. Bu yüzden katmanlar arasındaki sınır bir duvar değil, bir iş bölümüdür.

Pratikte öğe verilere tepki veriyorsa, bir tıklamayı işliyorsa ya da bir şey hesaplıyorsa aramaya JavaScript'ten başlayın. Yumuşak beliriş, renk değişimi ve basit hareketleri çoğu zaman CSS yapar. Bu bir başlangıç noktası, kesin teşhis değil: düzeltmeden sonra sayfayı açın, görünümü ve işlemleri kendiniz kontrol edin - tek bir ekran görüntüsü yetmez.

Bir düğme üç dosyada

Hepsini tek bir öğe üzerinde toparlayalım. "Oynat" düğmesi aynı anda üç dosyada yaşar ve her dosya kendi işinden sorumludur.

<button id="play" class="btn">Oynat</button>

.btn {
  background: #6c5ce7;
  border-radius: 12px;
}

const playButton = document.getElementById("play");

playButton.addEventListener("click", function () {
  playButton.textContent = "Oyun başladı";
});

Dosyalar bağlıysa tıklama, "Oynat" yazısını "Oyun başladı" yapar. Artık örneği, var olmayan bir fonksiyon uydurmadan deneyebilirsiniz.

Şimdi de en faydalı kısım - satırları birer birer kaldırırsak ne olur:

• HTML'i kaldırdık - her şey kayboldu: stil verilecek ya da canlandırılacak bir şey kalmadı;
• CSS'i kaldırdık - düğme yerinde ve çalışıyor, sadece doksanlardan kalma gri bir sistem düğmesi gibi görünüyor;
• JS'i kaldırdık - düğme güzel ama cansız. Basılıyor, ama hiçbir şey olmuyor.

Buradan görev tarif etmek için basit bir harita çıkıyor. Nasıl göründüğü hoşunuza gitmiyorsa aramaya stillerden başlayın. Ne olduğu hoşunuza gitmiyorsa - betikten. Öğe hiç yoksa işaretlemeden başlayın. Burada önemli olan "başlayın" kelimesi: gerçek bir düzeltme komşu katmana da dokunabilir, bu yüzden ajanın sonucu diff'te ve tarayıcıda kontrol edilir.

Proje klasöründe neler var

Basit bir sayfa için en yaygın dosya takımı şöyle görünür:

index.html    işaretleme, giriş noktası
style.css     stiller
script.js     davranış

Bu dosyalar işaretlemedeki iki satırla birbirine bağlanır. Stiller teknik kısımda bağlanır, betik ise en sonda, </body> kapanmadan hemen önce; böylece betik çalışmaya başladığında tüm öğeler zaten var olur:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- sayfanın işaretlemesi -->
  <script src="script.js"></script>
</body>

Başka türlüsü de olur. Büyük bir projede onlarca dosya bulunur, css/ ve js/ gibi klasörlere dağıtılmışlardır, yanlarında da resimler ve yazı tipleri durur. Tam tersi de olur: tek bir dosya - bu durumu hemen aşağıda anlatıyoruz. İşaretleme, stil ve mantık rolleri yine de yerinde kalır, ama dosya adları ve bağlanma şekilleri farklı olabilir.

Stiller ve betikler sayfanın içinde olduğunda

Üç dosya en yaygın düzen, ama tek düzen değil. Aynı CSS'i üç farklı yere koyabilirsiniz ve er ya da geç üçüyle de karşılaşacaksınız.

Birincisini zaten gördünüz: ayrı bir dosya artı bir <link> satırı. İkincisi, ayrı dosya olmadan doğrudan işaretlemenin içindeki <style> bloğu:

<head>
  <style>
    .btn {
      background: #6c5ce7;
      border-radius: 12px;
    }
  </style>
</head>

İçerisi tamamen aynı: seçici, süslü parantezler, "özellik: değer" çiftleri. Değişen yalnızca adres. Sayfa tek olduğunda ve onun için ayrı bir dosya açmaya gerek olmadığında böyle yazılır.

Üçüncü yer satır içi stiller, İngilizcesiyle inline styles. Özellikler doğrudan öğenin üzerinde, style özniteliğinde durur:

<button class="btn" style="background: #e17055; font-size: 20px">Oynat</button>

Burada seçiciye gerek yok: kuralın neye ait olduğu zaten belli - üzerine yazıldığı öğeye. Bu yüzden ne süslü parantez var ne de sınıfın önünde nokta; yalnızca noktalı virgülle ayrılmış "özellik: değer" çiftleri, hepsi tek satırda.

Bu tam olarak bir kez kullanışlıdır. Sonrasında eksileri başlar. Kural tek bir öğeye uygulanır: on düğme - on kopya, sonra da onunu birden değiştirmeniz gerekir. Sıradan bir satır içi stil genellikle dosyadaki sıradan bir kurala baskın gelir. Düğmeyi style ile boyadınız, sonra aynı özelliği style.css'te düzenliyorsunuz ve rengin neden değişmediğini anlamıyorsunuz. Bu yüzden style özniteliği ilk bakılan yerlerden biridir; öncelik kurallarının ayrıntılarına şimdilik gerek yok.

Betikte de durum aynı, sadece yer iki tane. Ayrı dosya <script src="..."> ile bağlanır, ama kodu doğrudan etiketlerin arasına da yazabilirsiniz:

<script>
  document.getElementById("play").addEventListener("click", function () {
    alert("Oyun başladı");
  });
</script>

Gerektiğinde göz atabilmeniz için hepsini bir tabloda toplayalım:

Uç durum, her şeyin bir araya toplandığı durumdur: işaretleme, <style> bloğu ve <script> bloğu tek bir index.html içinde yaşar. Bunda korkulacak bir şey yok, küçük bir sayfa için böylesi daha da kolay: tek dosya, tarayıcıda açtınız ve çalışıyor, yolda hiçbir şey kaybolmaz. Zorluklar daha sonra, sayfa büyüdükçe ve bu uzun metin yığınında bir şey bulmak gerektiğinde başlar. O zaman içerik genellikle dosyalara dağıtılır ve ortaya o bildik üçlü çıkar.

Ajana "stilleri değiştir" demeden önce stillerin nerede durduğunu öğrenin. Projede tek bir index.html varsa style.css dosyası hiç olmayabilir ve düzeltme işaretlemenin içinde yapılır. Öğe değişmiyorsa üç şeyi kontrol etmesini isteyin: doğru stil dosyası bağlı mı, seçici uyuyor mu ve araya satır içi bir style ya da daha güçlü bir kural girmiş mi. Böylece suçluyu tahmin etmeye çalışmadan aramayı daraltırsınız.

Claude Code ile birlikte nasıl çalışır

Artık ajan bir sayfayı ele aldığında neler olduğu anlaşılıyor:

• basit bir statik projede ajan HTML, CSS ve JavaScript'i kendisi yazıp birbirine bağlayabilir. Başka bir projede önce ondan yapıyı göstermesini ve ilgili öğeden sorumlu dosyaları söylemesini isteyin;
• dosyaya yazılmadan önce tam olarak neyi göreceğiniz ayarlara ve çalışma moduna bağlıdır. Ajan öneriyi önceden gösteriyorsa gözden geçirin; yazıldıktan sonra da her durumda diff'i ve son hâliyle dosyaları inceleyin. style.css adı dosyanın rolüne dair ipucu verir, ama hiçbir şeyi garanti etmez;
• görsel bir düzeltmeyi gözle ve etkilenen öğelere tıklayarak, davranış düzeltmesini ise gerçek işlemlerle kontrol edin. Ekran görüntüsü, sayacın saymayı bıraktığını göstermez;
• bir şey bozulursa tahmin ettiğiniz katmanı değil, gözlemlediğiniz belirtiyi anlatın: "düzeltmeden sonra düğme görünüyor ama tıklayınca hiçbir şey olmuyor". O zaman ajan HTML, CSS ve JavaScript arasındaki bağlantıları kontrol eder.