CodeBlanks Logo Icon CodeBlanks

Proje sonu - Hakkımda

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

Tüm parçaları birleştirip sayfayı yorumlarla dokümante edersin.

Proje sonu: tüm parçaları birleştir

Son adıma geldin. Sayfada iskelet, başlık, tanıtım metni, vurgular ve bölüm ayrımı var. Şimdi son adım: yorumlarla dokümante etmek.

Yorumlar, kodu sen ve başkaları için açıklayan kısa notlardır. Tarayıcı bunları göstermez ama kaynağı görüntüleyen herkes okur. Her bölümün üstüne kısa bir yorum yazmak, sayfayı okunabilir ve bakımı kolay tutar.

Yorumlarla dokümante et

Yorum yazarken şu noktalara dikkat et:

  • Kısa tut: birkaç sözcük ya da tek cümle yeter. Uzun açıklamalar kodu kalabalıklaştırır.
  • Konum önemli: yorum, açıkladığı bölümün hemen üstünde olmalı.
  • Anlamlı yaz: 'bölüm' yerine 'üst başlık: ad ve ünvan' gibi açık yaz.

İyi yorumlar, aylar sonra döndüğünde de sayfayı anlamanı sağlar.

Uygulama Her bölümün üstüne açıklayıcı yorum ekle

Önceki dersin vurgu ve ayrım içeren sayfasını al. Üç bölümün üstüne birer yorum ekle: birincisi <h1>'den önce (üst başlığı açıkla), ikincisi ilk <p>'den önce (tanıtım metnini açıkla), üçüncüsü <hr>'den önce (vurgu ve ilgi alanlarını açıkla). Mevcut kodu silme; sadece yorum ekle.

Ö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 - Hakkımda</title>
  </head>
  <body>
    <!-- Üst başlık: ad ve ünvan -->
    <h1>Ayşe Yılmaz</h1>
    <h2>Yazılım geliştirici</h2>

    <!-- Tanıtım metni -->
    <p>Merhaba! Ben Ayşe. <strong>Web tabanlı uygulamalar</strong> geliştiriyorum ve açık kaynağa <em>katkıda</em> bulunmayı severim.</p>
    <p>Bu sayfada kendimi kısaca tanıtıyorum.</p>

    <!-- Vurgu ve ilgi alanları -->
    <hr>
    <p>En sevdiğim alan <mark>açık kaynak</mark>.</p>
    <p>Hobilerim:<br>kitap okumak ve doğa yürüyüşü.</p>
  </body>
</html>

Hakkımda sayfası tamam!

Tebrikler! 5 dersin sonunda elinde çalışan bir hakkımda sayfası var: iskelet, başlık, tanıtım metni, vurgular, bölüm ayrımı ve açıklayıcı yorumlar. 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, paragrafları uzatabilir, yeni bölümler ekleyebilirsin. Sayfan artık yayınlanmaya hazır.

Kendini test et

  1. Yorum etiketi (<!-- -->) hangi amaçla kullanılır?

    • Kodu kendin ve başkaları için açıklamak
    • Tarayıcıda metin göstermek
    • Sayfaya resim eklemek
    • Başka bir sayfaya bağlantı vermek
    Cevabı göster

    Kodu kendin ve başkaları için açıklamak — Doğru. Yorumlar kaynak kodunda görünür ama tarayıcıda gösterilmez.

  2. Üst başlık bölümünün yorumunu tamamla

    <!-- ____ -->
    Cevabı göster
    <!-- Üst başlık: ad ve ünvan -->
  3. Etiketleri anlamlarıyla eşleştir

    DOCTYPE
    Belge türü bildirimi
    lang
    Sayfa dili
    title
    Sekme başlığı
    mark
    İşaretli metin
    hr
    Bölüm ayrımı

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