CodeBlanks Logo Icon CodeBlanks

Code, kbd ve samp

HTML kursu · Orta seviye · Ders 2/67

<code>, <kbd>, <samp> ve <var> etiketlerini öğrenirsin.

code: kod parçası

<code> etiketi bilgisayar kodu parçasını işaretler. İçine bir HTML etiket adı, bir komut ya da bir işlev adı yazılır. Tarayıcı içeriği sabit aralıklı yazı tipiyle gösterir.

Örnek: <code>article</code>. Böylece okuyucu 'article' sözcüğünün sıradan bir kelime değil, bir etiket adı olduğunu anlar. Uzun kod blokları için ileride <pre> etiketini de öğreneceğiz.

kbd ve samp: tuş ve çıktı

<kbd> etiketi kullanıcıdan gelen klavye girişini işaretler: bir tuş ya da tuş birleşimi. Örnek: <kbd>Ctrl</kbd> + <kbd>S</kbd>.

<samp> etiketi ise bir programın örnek çıktısını işaretler. Örnek: <samp>Dosya kaydedildi.</samp>. Böylece 'tuşa basıldı' ile 'program yanıt verdi' ayrılır; ikisi de sabit aralıklı yazı tipiyle görünür.

var: değişken

<var> etiketi matematik ya da programlama değişkenini işaretler. Tarayıcı içeriği genellikle italik gösterir; ama asıl önemli olan anlamıdır: bu bir sabit değil, yerine değer konabilecek bir addır.

Örnek: <p><var>x</var> = <var>y</var> + 2</p>. Böylece okuyucu 'x' ve 'y'nin gerçek metin değil, değişken olduğunu anlar. Matematiksel ya da algoritmik anlatımda işe yarar.

Uygulama Kod, tuş, çıktı ve değişken yaz

Body içine dört paragraf ekle. Birinci paragrafta bir <code> etiketi içinde kaydet() yazsın. İkinci paragrafta iki <kbd> etiketi olsun: ilkinde Ctrl, ikincisinde S; aralarına + işareti koy. Üçüncü paragrafta bir <samp> etiketi içinde Dosya kaydedildi. yazsın. Dördüncü paragrafta bir <var> etiketi içinde dosyaAdi yazsın.

Örnek çözümü göster
<body>
  <p>Komut: <code>kaydet()</code></p>
  <p>Kısayol: <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
  <p>Sonuç: <samp>Dosya kaydedildi.</samp></p>
  <p>Değişken: <var>dosyaAdi</var></p>
</body>

Kendini test et

  1. Klavye girişini işaretlemek için hangi etiket kullanılır?

    • <code>
    • <samp>
    • <kbd>
    • <input>
    Cevabı göster

    <kbd> — Doğru. kbd klavye girişini işaretler.

  2. code etiketini tamamla

    <p>Paragraf etiketi <____>p</code> ile yazılır.</p>
    Cevabı göster
    <p>Paragraf etiketi <code>p</code> ile yazılır.</p>
  3. Etiketi rolüyle eşleştir

    <code>
    Bilgisayar kodu
    <kbd>
    Klavye girişi
    <samp>
    Program çıktısı
    <var>
    Değişken

Orta seviye bölümündeki tüm dersler