0 gün Seviye 1 Avar Teknolojileri

Sınava Hazırlık

Ders 1/45 · 5 dakika

Vaktiniz azsa buradan başlayın. Bu sayfa, geçmiş bir sınav örneğinde istenen her şeyi tek yerde toplar: sayfa iskeleti, hazır kodlar ve yalnızca gerekli dersler.

Sınav nasıl?

Geçmiş sınav örneği tamamen uygulamaydı. Size istenen özelliklerin bir listesi ve sonucun ekran görüntüsü verilir, siz de tam bir HTML + CSS sayfası yazarsınız. Her bölümün ayrı puanı vardır. Gerçek sınav bu örnekten farklı olabilir.

  1. Önce iskeleti yazın, dosyayı .html uzantısıyla kaydedip tarayıcıda açın.
  2. Listeyi sırayla yapın. Her maddeden sonra kaydedip sayfayı yenileyin.
  3. Takıldığınız maddeyi atlayın ve sonrakine geçin. Sonunda geri dönersiniz.
  4. “Kırmızı tonlarında” gibi bir ifade varsa o tona uyan bir renk yeterlidir.

Sayfa iskeleti

Her görev bununla başlar. Ezberleyin, çünkü ilk puanlar buradan gelir. CSS’i head içindeki style etiketine yazın. Kutunun üstündeki Kopyala düğmesiyle alabilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sayfa Başlığı</title>
  <style>
    body {
      background-color: aliceblue;
      font-family: 'Segoe UI', sans-serif;
    }

    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Başlık</h1>
  <p>Paragraf</p>
</body>
</html>

Sınıf vermek

Bir kelimeye ayrı bir görünüm vermek için kelimeyi span içine alın ve class verin. CSS’te sınıf adının başına nokta yazılır, HTML’de yazılmaz. Etiket seçicileri ise adıyla yazılır: body, h1, a.

<style>
  .italik {
    font-style: italic;
    color: green;
  }

  .kalin {
    font-weight: bold;
    color: black;
  }

  .vurgulu {
    background-color: blue;
    color: white;
    text-transform: uppercase;
  }

  a {
    color: crimson;
  }
</style>

<p lang="tr">Bu cümlede <span class="italik">eğik</span>, <span class="kalin">kalın</span> ve <span class="vurgulu">vurgulu</span> kelimeler ile bir <a href="#">bağlantı</a> var.</p>

text-transform: uppercase için html etiketinde lang="tr" olmalıdır. Yoksa i harfi İ yerine I olur.

Hazır CSS kodları

Sayfa ve başlık

İstenenYazılacak kod
Açık mavi zeminbackground-color: aliceblue;
Açık gri zeminbackground-color: whitesmoke;
Sans-serif yazı tipifont-family: 'Segoe UI', sans-serif;
Sayfada iç boşlukpadding: 20px;
Ortalanmış yazıtext-align: center;
Kırmızı tonucolor: crimson;
Altın tonucolor: gold;
Yazı gölgesitext-shadow: 2px 2px 4px gray;
Büyük harftext-transform: uppercase;

Kutu veya paragraf

İstenenYazılacak kod
Beyaz arka planbackground-color: white;
Yarı saydam siyahbackground-color: rgba(0, 0, 0, 0.6);
Yuvarlak köşeborder-radius: 12px;
Kutu gölgesibox-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
Genişlik ve ortalamawidth: 60%; margin: 0 auto;
İki yana yaslıtext-align: justify;
Satır aralığıline-height: 1.7;
Yazı boyutufont-size: 18px;
İç boşlukpadding: 24px;

text-align: center kutunun içindeki yazıyı ortalar. Kutunun kendisini ortalayan margin: 0 auto değeridir ve kutunun bir genişliği olmalıdır.

<style>
  body {
    background-color: aliceblue;
    font-family: 'Segoe UI', sans-serif;
  }

  h1 {
    text-align: center;
    color: crimson;
    text-shadow: 2px 2px 4px gray;
  }

  p {
    width: 60%;
    margin: 0 auto;
    padding: 24px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-align: justify;
    line-height: 1.7;
  }
</style>

<h1>Başlık</h1>
<p>Bu paragraf ortalanmış, köşeleri yuvarlatılmış ve gölgeli bir kutu. Satırları iki kenara yaslanıyor. Değerleri değiştirip sonucu izleyin.</p>

Arka plan resmi

Sayfanın tamamını kaplayan resim için beş satır birlikte yazılır. background-attachment: fixed sayfa kayarken resmin yerinde kalmasını sağlar.

<style>
  body {
    background-image: url('baldiyetapanadam.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
  }

  .kutu {
    margin: 80px 16px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    color: white;
  }
</style>

<div class="kutu">Resmin üzerinde yarı saydam bir kutu.</div>

Kendi dosyanızda resmi HTML dosyasıyla aynı klasöre koyun ve url içine dosyanın adını yazın.

Resmi ortalamak

Resimler satır içi çalışır, bu yüzden margin: 0 auto tek başına ortalamaz. Önce display: block gerekir. Parlama etkisi, kaymasız ve açık renkli bir gölgedir.

<style>
  body {
    background-color: black;
  }

  img {
    display: block;
    margin: 0 auto;
    width: 250px;
    border-radius: 10px;
    box-shadow: 0 0 20px gold;
  }
</style>

<img src="baldiyetapanadam.png" alt="Örnek resim">

Alıntı veya özel bir kutu için ayrı bir sınıf yazın ve bu sayfadaki kodları birleştirin: font-style: italic, color: gold, background-color: rgba(0, 0, 0, 0.6), border-radius ve padding.

Tablo

  • cellspacing Hücrelerin arasındaki boşluktur. 0 yazılırsa hücreler bitişir.
  • cellpadding Hücrenin içindeki boşluktur.
  • th Başlık hücresidir.
  • rowspan Hücreyi alt alta satırlara, colspan yan yana sütunlara yayar.

Birleştirilen hücrenin kapladığı yerlere td yazmazsınız. Aşağıda Matematik iki satır kapladığı için ikinci satırda yalnızca iki hücre var.

<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <th>Gün</th>
    <th>Sabah</th>
    <th>Öğle</th>
  </tr>
  <tr>
    <td>Pazartesi</td>
    <td rowspan="2">Matematik</td>
    <td>Tarih</td>
  </tr>
  <tr>
    <td>Salı</td>
    <td>Fizik</td>
  </tr>
  <tr>
    <td>Cuma</td>
    <td colspan="2">Gezi</td>
  </tr>
</table>

İç içe liste

İçteki liste, dıştaki li etiketinin içine yazılır. ol numaralı, ul işaretli listedir.

<ol>
  <li>Pazartesi
    <ul>
      <li>Kahvaltı: 50&#8353;</li>
      <li>Akşam yemeği: 80&#8353;</li>
    </ul>
  </li>
  <li>Salı
    <ul>
      <li>Kahvaltı: 60&#8353;</li>
    </ul>
  </li>
</ol>

Özel bir simgeyi kopyalayıp yapıştırabilir veya koduyla yazabilirsiniz. Örnekteki &#8353; kodu ₡ simgesini gösterir.

Form

Her alanın bir label etiketi olmalıdır. label etiketinin for değeri, alanın id değeriyle aynı yazılır.

box-sizing: border-box önemlidir. Bu satır olmadan width: 100% olan kutular formun dışına taşabilir.

<style>
  form {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
  }

  input, select, textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
  }
</style>

<form>
  <label for="ad">Ad Soyad:</label>
  <input type="text" id="ad" name="ad">

  <label for="eposta">E-posta:</label>
  <input type="email" id="eposta" name="eposta">

  <label for="telefon">Telefon:</label>
  <input type="tel" id="telefon" name="telefon">

  <label for="gun">Gün:</label>
  <select id="gun" name="gun">
    <option value="">Seçiniz</option>
    <option value="cuma">Cuma</option>
  </select>

  <label for="notlar">Notlar:</label>
  <textarea id="notlar" name="notlar"></textarea>

  <button type="submit">Gönder</button>
</form>
Birden çok h1

Derslerde sayfada tek bir h1 kullanmanız önerilir. Sınav yönergesi birkaç başlık için h1 istiyorsa yönergeye uyun, çünkü puan ona göre verilir.

Teslim etmeden önce

  • Her açılan etiket kapatıldı mı?
  • lang="tr", meta charset ve title var mı?
  • Bütün sınıf adları HTML ve CSS’te aynı mı yazıldı?
  • Bütün kurallar style etiketinin içinde mi, süslü parantezler kapalı mı?
  • Resim dosyası doğru klasörde ve adı doğru mu?
  • Listedeki her maddeyi ekran görüntüsüyle karşılaştırdınız mı?

Takıldığınız konunun dersi

Sayfa ve metin

Tablo, liste ve form

CSS

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.