CodeBlanks Logo Icon CodeBlanks

Proje sonu - Kartvizit

HTML kursu · Başlangıç · Ders 34/68

Tüm bölümleri birleştirip son kartvizit sayfasını yayınlanır hale getirirsin.

Son adım: hr ve kapanış

Son adıma geldin. Kartvizitte isim, ünvan, iletişim, beceriler ve harici bağlantı var. Şimdi son bölümü ekleyeceksin: bir <hr> ile bölümleri ayıracak ve kısa bir kapanış paragrafı yazacaksın.

hr konu değişimini işaretler; burada ana içerikten kapanışa geçişi belirtir. Kapanış paragrafında telif yılı ya da kısa bir veda olabilir. Bu adımda kartvizit tamamlanır.

Kartviziti tamamlarken

Kartviziti tamamlarken şu noktalara dikkat et:

  • Tutarlı girinti: her bölümü aynı miktarda girintile, okunabilirlik artar.
  • Anlamlı sıra: isim, ünvan, iletişim, beceriler, bağlantı, kapanış. Mantıklı bir akış.
  • Kısa metin: kartvizitte her şey kısa olmalı; uzun paragraflar değil.

Bu ilkeler hem bu projeyi hem de gelecekteki tüm kartvizit sayfalarını güçlendirir.

Uygulama Kartviziti tamamla: hr ve kapanış ekle

Önceki adımın beceri ve bağlantı içeren body'sini al. Portföy bağlantısından sonra bir <hr> ekle. Hr'den sonra bir <p> etiketi koy ve içine kısa bir kapanış yaz (örnek © 2025 Ayşe Yılmaz). Böylece kartvizit tamamlanır.

Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ayşe Yılmaz - Kartvizit</title>
  </head>
  <body>
    <h1>Ayşe Yılmaz</h1>
    <h2>Grafik tasarımcı</h2>
    <ul>
      <li><a href="mailto:ayse.yilmaz@yilmazstudyo.com">E-posta</a></li>
      <li><a href="tel:+905551234567">Telefon</a></li>
    </ul>
    <ol>
      <li>Logo tasarımı</li>
      <li>Tipografi</li>
      <li>Renk teorisi</li>
    </ol>
    <a href="https://www.behance.net/" target="_blank" rel="noopener noreferrer">Portföyüm</a>
    <hr>
    <p>© 2025 Ayşe Yılmaz</p>
  </body>
</html>

Kartvizit tamam!

Tebrikler! 5 dersin sonunda elinde çalışan bir kartvizit sayfası var: isim, ünvan, iletişim, beceriler, harici bağlantı ve kapanış. Her dersin başlangıç kodu önceki dersin çözümünü taşıyordu; sen sadece yeni parçayı ekledin.

Bu yapıyı alıp kendi bilgilerinle doldurabilir, beceri listesini uzatabilir, yeni bağlantılar ekleyebilirsin. Kartvizit artık dijital olarak işlevsel.

Kendini test et

  1. Bu projede <hr> etiketi nereye en uygun konur?

    • Sayfanın en üstüne, h1'den önce
    • Her paragraftan sonra
    • Beceri listesi ile kapanış paragrafı arasına
    • Title etiketinin içine
    Cevabı göster

    Beceri listesi ile kapanış paragrafı arasına — Doğru. hr konu değişimini işaretler; ana içerikten kapanışa geçiş buna uyar.

  2. Kapanış paragrafının etiketini tamamla

    <____>© 2025 Ayşe Yılmaz</p>
    Cevabı göster
    <p>© 2025 Ayşe Yılmaz</p>
  3. Parçayı ekleyen dersle eşleştir

    h1 ve h2
    İsim ve unvan
    ul, mailto, tel
    İletişim listesi
    ol, target, rel
    Beceriler ve bağlantılar
    hr ve p
    Proje sonu

Başlangıç bölümündeki tüm dersler