Atölye › Kartvizitim › 3/12. adım

Bir kutuya koy

Ne yapıyoruz

Ad ve cümle birlikte tek bir kart olacak. Birlikte duran parçaları bir kutuya koymak için <div> kullanılır: kendi başına hiçbir şey göstermeyen, sadece gruplayan bir etiket.

Kutuya bir de sınıf adı (class) veriyoruz: card. Sonraki adımlarda CSS ile "card adlı kutuyu şöyle boya" diyebilmek için. Bu adımda sayfa görünüşte değişmeyecek.

```html
<div class="card">
  <h1>Ada Lovelace</h1>
  <p>Learning to build websites</p>
</div>
```

Ne işe yarıyor

• <div class="card"> → bir kutu açar. Açılış etiketinin içindeki class="card" bir özellik (attribute): etikete ek bilgi. Burada kutunun adı card (kart).
• İçerideki h1 ve p artık bu kutunun içinde. İki boşluk içeri kaydırmamız bunu okurken görmek için; tarayıcı boşluklara bakmaz.
• </div> → kutu kapanır.

Sıra sende

1. <h1> satırının üstüne <div class="card"> yaz.
2. <p> satırının altına </div> yaz.
3. h1 ve p satırlarını iki boşluk içeri al.
4. Çalıştır: sayfa aynı görünür, kontroller yeşil olmalı.

Beceriler: HTML ile sayfa yapısı

← Kendin hakkında bir satır İlk CSS →

Tüm adımlar

1. Başlık olarak adın
2. Kendin hakkında bir satır
3. Bir kutuya koy
4. İlk CSS
5. Kutuyu karta benzet
6. Kartı ortala
7. Yumuşak bir gölge
8. Adını renklendir
9. Bağlantılarını ekle
10. Bağlantılar yan yana
11. Tepki veren bağlantılar
12. Kendin yap: tepki veren kart