Web'e ilk adım

Web'i bir şirket icat etmedi. Bir araştırma merkezinde, belgeleri birbirine bağlamak için yazılmış bir öneriyle başladı ve kimseden izin almadan herkese açıldı. Bugün kullandığınız her sitenin arkasında bu açıklık var; aşağıdaki tarihler o yolun önemli durakları.

1. 1989CERN'de çalışan Tim Berners-Lee, belgeleri birbirine bağlayan bir sistem önerir. Yöneticisi önerinin kenarına "belirsiz ama heyecan verici" diye not düşer.
2. 1991İlk web sitesi yayına girer: info.cern.ch. Hâlâ açık; tıklayıp kendiniz görebilirsiniz.
3. 1993CERN web'in yazılımını herkese ücretsiz bırakır. Aynı yıl, resmi ve metni aynı sayfada gösteren Mosaic tarayıcısı çıkar.
4. 1994Web'in kurallarını yazan W3C kurulur. Håkon Wium Lie, sayfanın görünüşünü ayrı bir dille yazma fikrini, yani CSS'i önerir.
5. 1995Brendan Eich, JavaScript'in ilk sürümünü on günde yazar. Java ile bir ilgisi yoktur; adı bir pazarlama kararıdır.
6. 2025Andrej Karpathy "vibe coding" terimini ortaya atar: kodu yapay zekâya yazdırıp sonuca bakarak ilerlemek.

Tarayıcınıza yobi2213.online yazıp Enter'a bastığınız an ile sayfanın ekrana gelmesi arasında dört şey olur. Hepsi bir saniyeden kısa sürer, ama bu adımları bilmek, bir şey ters gittiğinde nereye bakacağınızı gösterir.

1. DNS adresi bulur. Bilgisayarlar isimle değil numarayla konuşur. DNS, "yobi2213.online" gibi bir ismi o numaraya (IP adresine) çeviren dev bir rehberdir.
2. Tarayıcı istek gönderir. O numaradaki bilgisayara, yani sunucuya, "bana bu sayfayı ver" der. Bu konuşmanın dili HTTP'dir.
3. Sunucu dosyayı yollar. Gelen şey bir HTML dosyası, yani düz bir metin dosyasıdır. İçinde CSS, JavaScript ve resim geçiyorsa tarayıcı onları da ayrıca ister.
4. Tarayıcı ekrana çizer. Gelen parçaların hepsini birleştirip gördüğünüz sayfayı oluşturur.

Front end, back end: bir restoran

Bir web sitesinin parçalarını bir restorana benzetmek, hangisinin nerede çalıştığını akılda tutmayı kolaylaştırır.

Bir web sayfası üç dilin birlikte çalışmasıdır. Her birinin tek bir görevi var ve bu görevleri birbirinden ayrı tutmak, bir sayfayı hem yazmayı hem de düzeltmeyi kolaylaştırır.

Bugün ilk ikisiyle çalışacağız. JavaScript'e dönemin son haftalarında geçeceğiz; önce iskeleti ve kıyafeti sağlam kurmak istiyoruz, çünkü davranış ancak sağlam bir yapının üstüne eklenebilir.

<button> ile </button> arasına yazdığınız her şey butonun üstünde görünür. Açılan ve kapanan bu işaretlere etiket (tag) diyoruz. Etiketler tarayıcıya "bu bir buton", "bu bir paragraf" der; tarayıcı da her birini kendi bildiği biçimde çizer.

<button>Tıkla</button>

<p>Merhaba, dünya!</p>
<p>Bugün kampüse servisle geldim ve ilk web sayfamı yaptım.</p>

Web'i web yapan şey bağlantılardır: bir sayfadan ötekine tek tıkla geçebilmek. <a> etiketinin href adında bir özelliği (attribute) var ve bağlantının nereye gideceğini söyler. Özellikler açılış etiketinin içine yazılır ve etikete ek bilgi verir; örneğin target="_blank" eklerseniz bağlantı yeni sekmede açılır.

<a href="https://www.google.com.tr" target="_blank">
  Google'da ara
</a>

Şimdi sayfaya bir <style> bölümü ekliyoruz. Bu dönemin kuralı: görünüşle ilgili her şey style'ın içinde durur. HTML sayfada ne olduğunu, CSS ise nasıl görüneceğini söyler; ikisini ayrı tuttuğunuzda birini değiştirirken diğerini bozmazsınız.

Butonlara bir class veriyoruz ve CSS'te o class'a başına nokta koyarak sesleniyoruz. Aynı class'ı taşıyan her buton aynı kıyafeti giyer. Hedefimiz YouTube'un ABONE OL ve KATIL butonları.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Butonlar</title>
  <style>
    .abone-ol {
      background-color: rgb(200, 0, 0);
      color: white;
      border: none;
      height: 36px;
      width: 105px;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
    }

    .katil {
      background-color: white;
      border-color: rgb(41, 118, 211);
      border-style: solid;
      border-width: 1px;
      color: rgb(41, 118, 211);
      height: 36px;
      width: 62px;
      border-radius: 2px;
      cursor: pointer;
    }

    .takip-et {
      background-color: rgb(2, 158, 255);
      color: white;
      border: none;
      height: 36px;
      width: 90px;
      border-radius: 18px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      margin-left: 8px;
    }
  </style>
</head>
<body>
  <button class="abone-ol">ABONE OL</button>
  <button class="katil">KATIL</button>
  <button class="takip-et">Takip et</button>
</body>
</html>

Butonlar duruyor ama tepki vermiyor. :hover farenin butonun üstüne geldiği anı, :active ise tıklandığı anı yakalar. transition bu değişimin bir anda değil, yumuşakça olmasını sağlar. body ile de bütün sayfanın rengini değiştiririz. Tur 3'teki style'ın sonuna şunları ekleyin:

    body {
      background-color: rgb(24, 20, 48);
      font-family: Arial;
    }

    .abone-ol:hover {
      opacity: 0.8;
    }

    .abone-ol:active {
      opacity: 0.5;
    }

    .katil {
      transition: background-color 0.15s, color 0.15s;
    }

    .katil:hover {
      background-color: rgb(41, 118, 211);
      color: white;
    }

    .takip-et:hover {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }

Az önce her satırı elle yazdınız. Şimdi aynı işin yapay zekâ ile nasıl yapıldığına bakıyoruz ve araçların nasıl adım adım güçlendiğini görüyoruz.

Aynı fikrin terminalde çalışan hali de var. Claude Code gibi araçlarda pencere yoktur: ajana komut satırından ne istediğinizi söylersiniz, o da klasördeki dosyaları düzenler.

Vibe coding nedir?

Kodu okumadan yapay zekâya yazdırmak, sonuca bakmak ve beğenmezseniz "şunu değiştir" demek. Hızlı ve eğlenceli bir yöntem. Ama yazılan kodu okuyamıyorsanız, bir şey ters gittiğinde neyin bozulduğunu da bulamazsınız.

Yapay zekâ yazar, siz okursunuz. Okuyamadığınız kodu yönetemezsiniz.

Hangi model daha iyi?

LMArena'da bir soruyu iki anonim modele aynı anda sorar ve daha iyi cevaba oy verirsiniz. Modellerin kim olduğu ancak oy verdikten sonra açılır. Milyonlarca kör oy bir araya gelince ortaya bir sıralama çıkar.

Derste izlediğiniz istekler

Işık Üniversitesi sitesini Antigravity'de bu dört istekle kurduk. Evde aynısını deneyin ve her adımda ajanın ne yaptığını izleyin.

FMV Işık Üniversitesi Yönetim Bilişim Sistemleri bölümü için tek HTML dosyasında bir tanıtım sitesi yap: açılış bölümü, bölüm hakkında, kampüs, iletişim. Önce planını göster, ben onaylamadan kod yazma.

Bunu ödüllü bir ajans işi gibi yeniden tasarla: koyu tema, büyük tipografi, GSAP ScrollTrigger ile kaydırdıkça beliren bölümler ve hareket eden fotoğraflar.

Siteyi tarayıcıda aç, telefon boyutunda test et, ekran görüntüsü al ve bozuk yerleri düzelt.

İletişim bölümüne ad, e-posta ve mesaj alanları olan bir form ekle.

İstediğiniz bir sitede üç katmanı kendi gözünüzle görün. Değişiklikler yalnızca sizin ekranınızda olur ve sayfayı yenilediğinizde her şey geri gelir; yani hiçbir şeyi bozamazsınız.

1. Geliştirici araçlarını açın: F12⌥ ⌘ I. Elements sekmesinde bir başlığa çift tıklayın ve yazısını değiştirin.
2. Kıyafeti çıkarın. <style> ya da <link rel="stylesheet"> satırını seçip Delete'e basın. Geriye kalan çıplak sayfa HTML'in kendisidir.
3. Kasları durdurun. Ctrl Shift P⌘ ⇧ P ile komut menüsünü açın, "Disable JavaScript" yazın, Enter'a basın ve sayfayı yenileyin. Duran her şey JavaScript'ti.

Safari'de önce geliştirici menüsünü açın: Safari > Ayarlar > Gelişmiş > "Web geliştiricileri için özellikleri göster". Bu derste Chrome kullanmanızı öneriyorum.

Gelecek derse web-ders klasörünüzü ve bir ekran görüntüsü getirin. İşaretlediğiniz maddeler bu tarayıcıda saklanır, böylece nerede kaldığınızı görebilirsiniz.

• Tur 1 ve Tur 2'nin dosyaları hazır: 1a.html'den 1f.html'ye.
• butonlar.html'de dört buton var ve hepsinin hover'ı çalışıyor.
• Sayfanın arka plan rengini siz seçtiniz ve yazılar rahat okunuyor.
• Meydan okumadaki ürün kartını kopyaladınız.
• Antigravity'yi antigravity.google/download adresinden kurdunuz.
• Kendi seçtiğiniz bir konu için ajana bir site yaptırdınız ve ekran görüntüsünü aldınız. Kodu açıp bugün öğrendiğiniz etiketleri buldunuz.

Alıştırmaların akışı ve buton örnekleri SuperSimpleDev'in ücretsiz HTML & CSS kursundan uyarlandı. Evde tekrar etmek isterseniz oradan izleyebilirsiniz: bu hafta 1. ve 2. dersler.