Temeller ve hareket

Geçen hafta bu satırı yazdınız ama parçalarına hiç ad vermedik. Hata ararken en çok işe yarayan şey doğru adı bilmektir: "kapanış etiketi eksik" demek, "bir şey çalışmıyor" demekten çok daha hızlı yol gösterir. Satırın parçalarının üstüne gelin ya da aşağıdaki adlardan birini seçin.

<meta charset="UTF-8">
<button>Deniz</button>
<p>Bugün laboratuvarda bir etiketin parçalarına tek tek ad verdik.</p>
<a href="https://www.google.com.tr" target="_blank">Google'da ara</a>

Dosyadan tarayıcıya

Kodu yazdıktan sonra dört adım var: kaydetmek, doğru uzantıyı görmek, dosyayı tarayıcıda açmak ve adres çubuğuna bakmak. Ekranınız aşağıdakilere benzemeli; resimlere tıklayınca büyürler.Mac'te adımlar şöyle:

ekran görüntüsü 1

ekran görüntüsü 2

ekran görüntüsü 3

ekran görüntüsü 4

1. TextEdit'te yeni bir belge açın ve Biçim > Düz Metin Yap'ı seçin (⇧ ⌘ T). Kodu ancak bundan sonra yazın.
2. ⌘ S ile kaydedin: adı 2a.html, düz metin kodlaması Unicode (UTF-8). TextEdit uzantıyı sorarsa ".html kullan" deyin.
3. Finder'da dosyayı seçip ⌘ I ile bilgi penceresini açın. "Ad ve Uzantı" kısmında adın gerçekten .html ile bittiğini görün.
4. Dosyayı Chrome'a sürükleyin. Adres çubuğunda Dosya yazar ve yol /Users/... ile başlar: sayfa internetten değil, kendi diskinizden geliyor.

Tarayıcı yazdıklarınızı birkaç basit kurala göre okur. Bu kuralları bildiğinizde "neden böyle göründü?" sorusunun cevabını çoğu zaman kendiniz bulursunuz. Her pencerede solda yanlış, sağda doğru yazım var ve ikisi de gerçekten tarayıcıda çiziliyor.

<p>Bugün          çok güzel
bir gün.</p>

<p>Bugün çok güzel<br>bir gün.</p>
<p>Yeni bir paragraf.</p>

<p><strong><em>Quiz cuma</strong></em></p>

<p><strong><em>Quiz cuma</em></strong></p>

<p>Satır bir<br></br>Satır iki</p>

<p>Satır bir<br>Satır iki</p>

<a href="https://www.google.com.tr>Google'da ara</a>
<p>Bu paragraf nereye gitti?</p>

<a href="https://www.google.com.tr">Google'da ara</a>
<p>Bu paragraf yerinde.</p>

<style>.kaydet { background-color: gold; }</style>
<BUTTON CLASS="Kaydet">Kaydet</BUTTON>

<style>.kaydet { background-color: gold; }</style>
<button class="kaydet">Kaydet</button>

<p>Görünen paragraf.</p>
<!-- Bu not kapanmadı
<p>Bu paragraf da yorumun içinde kaldı.</p>

<p>Görünen paragraf.</p>
<!-- Bu not yalnızca kaynak kodda durur. -->
<p>Bu paragraf da görünüyor.</p>

Kalın, eğik, altı çizili

Bu kuralları bir biyografide birlikte kullanalım. <strong> bir kelimenin önemli olduğunu söyler ve tarayıcı onu kalın çizer; <em> vurgu içindir ve eğik çizilir. <u> altını çizer, ama altı çizili yazı bağlantıya benzediği için onu az kullanın.

<meta charset="UTF-8">
<p>Adım <strong>Deniz</strong>. <em>Yönetim Bilişim Sistemleri</em> okuyorum.<br>
Kampüste en sevdiğim yer <u>kütüphane</u>.</p>

HTML'de bir etiketin parçalarına ad verdik; bir CSS kuralının da parçaları var. Her kural iki soruya cevap verir: seçici "kime?", süslü parantezlerin içindeki satırlar ise "ne değişecek?" sorusuna. Parçaların üstüne gelin.

• Class adı CSS'te başına nokta alır (.abone-ol), HTML'de almaz (class="abone-ol").
• Class adlarını küçük harfle yazın ve kelimeleri tireyle birleştirin: abone-ol. Boşluk bırakmayın, çünkü boşluk iki ayrı class demektir. Türkçe karakter de kullanmayın: katıl yerine katil.
• CSS'te not bırakmak için /* yorum */ yazılır. HTML'deki <!-- --> CSS'in içinde çalışmaz.

<style>
  /* Kırmızı abone butonu */
  .abone-ol {
    background-color: rgb(200, 0, 0);
    color: white;
  }
</style>
<button class="abone-ol">ABONE OL</button>
<button class="abone ol">ABONE OL</button>

Aynı renk CSS'te üç farklı biçimde yazılabilir: bir adla, bir onaltılık (hex) kodla ya da rgb() ile. #C80000 kodundaki ilk iki hane kırmızının, sonraki ikisi yeşilin, son ikisi mavinin miktarıdır; C8 onaltılık sayıyla 200 demek, yani rgb(200, 0, 0) ile aynı renk. Aşağıdan bir renk seçin, üç yazılışı birden görün.

Geçen hafta bu üç butonu hızlıca kopyaladık. Bu kez onları sıfırdan, her seferinde tek bir özellik ekleyerek kuruyoruz. Her satırın butonda neyi değiştirdiğini görmek, CSS'i ezberlemek yerine okumayı öğretir. Sağdaki pencerede Sonraki'ye basın; kodda o anki satır yanar.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Butonlar</title>
  <style>
    body {
      font-family: Arial;
    }

    .abone-ol {
      background-color: rgb(200, 0, 0);
      color: white;
      border: none;
      height: 36px;
      width: 105px;
      border-radius: 2px;
      cursor: pointer;
    }

    .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;
    }
  </style>
</head>
<body>
  <button class="abone-ol">ABONE OL</button>
  <button class="katil">KATIL</button>
  <button class="takip-et">Takip et</button>
</body>
</html>

ekran görüntüsü 5

ekran görüntüsü 6

Mac'te aynı akış: TextEdit'te 2d.html'yi düz metin olarak kaydedin (⌘ S), sonra Chrome'da sayfayı yenileyin (⌘ R). Kaydetmeden yenilerseniz eski hali görürsünüz.

Aynı üç butonla devam ediyoruz. :hover farenin butonun üstüne geldiği anı, :active tıklandığı anı yakalar. transition ise değişimin bir anda değil, verdiğiniz sürede olmasını sağlar.

transition'ı butonun temel haline yazın, :hover'a değil. Temel haldeki kural butonda her zaman geçerli olduğu için geçiş hem fare gelirken hem de giderken çalışır. Yalnızca :hover'a yazarsanız fare ayrıldığı anda o kural geçersiz olur ve geçiş de onunla birlikte gider: buton yumuşakça değişir ama bir anda geri döner. Aşağıdaki iki butonun üstüne gelip ayrılın.

<style>
  button {
    background-color: white;
    border: 2px solid black;
    height: 40px;
    width: 150px;
    cursor: pointer;
  }

  .sadece-hover:hover {
    background-color: black;
    color: white;
    transition: background-color 0.6s, color 0.6s;
  }

  .temelde {
    transition: background-color 0.6s, color 0.6s;
  }

  .temelde:hover {
    background-color: black;
    color: white;
  }
</style>
<button class="sadece-hover">Sadece hover'da</button>
<button class="temelde">Temel halde</button>

cursor: pointer fare imlecini ele çevirir ve "burası tıklanabilir" der. :focus-visible ise butona fareyle değil klavyeyle, Tab tuşuyla gelindiği anı yakalar. Ona belirgin bir çerçeve verdiğinizde fare kullanmayan biri sayfada nerede olduğunu her an görebilir.

    .abone-ol {
      transition: opacity 0.15s;
    }

    .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 {
      transition: background-color 0.15s;
    }

    .takip-et:hover {
      background-color: rgb(0, 126, 204);
    }

    button:focus-visible {
      outline: 3px solid rgb(255, 196, 0);
      outline-offset: 2px;
    }

box-shadow bir kutunun arkasına gölge çizer. Değerleri sırayla okunur: önce yatay kayma, sonra dikey kayma, sonra bulanıklık, en son renk. Her birini değiştirdiğinizde gölgenin tek bir özelliği değişir; parçaların üstüne gelin.

Aynı dört değerle bambaşka gölgeler çıkar. Her pencerede yalnızca gölge satırı var:

/* büyük bulanıklık, soluk renk */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* bulanıklık 0: bu sayfanın pencereleri gibi */
box-shadow: 5px 5px 0 rgb(122, 43, 255);

/* kayma yok, yalnızca parlak bir ışık */
box-shadow: 0 0 14px rgb(255, 46, 166);

/* virgülle ayrılan iki gölge */
box-shadow: 4px 4px 0 rgb(255, 46, 166), 8px 8px 0 rgb(122, 43, 255);

Yazıya gölge vermek için text-shadow var. Değerleri aynı sırayla okunur (yatay, dikey, bulanıklık, renk), yalnızca kutuya değil harflerin kendisine uygulanır.

<meta charset="UTF-8">
<style>
  body {
    background-color: rgb(24, 20, 48);
    font-family: Arial;
  }

  .baslik {
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 3px 3px 0 rgb(255, 46, 166);
  }

  .parlak {
    color: rgb(182, 255, 46);
    font-size: 24px;
    text-shadow: 0 0 8px rgb(182, 255, 46);
  }
</style>
<p class="baslik">Merhaba</p>
<p class="parlak">Neon bir satır</p>

Bu kısmı evde yapın. Aşağıdaki isteği Antigravity'ye verin ve ajanın hazırladığı sayfayı tarayıcıda açın.

Bana tek bir HTML dosyasında birbirinden farklı 10 buton hover efekti yap. Her birinin altına hangi CSS özelliklerini kullandığını yaz.

Sonra yapay zekâya sormadan üç efekt seçin ve her birinde hangi özelliğin ne yaptığını kendi cümlelerinizle yazın. Tanımadığınız bir özellik çıkarsa DevTools'ta o satırın yanındaki kutucuğu kaldırıp tekrar işaretleyin: neyin değiştiğini gözünüzle görürsünüz.

Yapay zekâ yazar, siz okursunuz.

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.

• 2a.html, 2b.html ve 2c.html hazır: etiketin anatomisi, biyografiniz ve düzeltilmiş hata avı.
• 2d.html'de dört buton var; dördüncüsü sizin bulduğunuz yeşille.
• 2e.html'de butonlar üstüne gelince ve tıklanınca tepki veriyor, geçişler temel halde yazılı ve sabit boyutların yerini padding aldı.
• 2f.html'de en az bir box-shadow ve bir text-shadow var.
• Bölüm 1 meydan okumasındaki ürün kartını urun-karti.html'de kopyaladınız.
• DevTools'ta kendi butonunuzun kutu şemasının ekran görüntüsünü aldınız.

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