Yorumlar ve boşluklar

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

HTML yorumları kaynak kodunu okuyan kişiye not bırakır. Tarayıcı bunları normal sayfa içeriği gibi çizmez; fakat yorumlar ziyaretçiden saklanan gizli bir alan değildir. Kaynağı görüntüleyen biri yorumları okuyabilir. Bu nedenle parola, anahtar veya kişisel bilgiyi yoruma yazmak bir güvenlik yöntemi değildir.

Normal metin akışında art arda gelen boşluklar genellikle tek boşluk gibi gösterilir. Kodda satır atlamak, ekranda yeni paragraf oluşturmaz. İki ayrı düşünce için p, anlamlı bir satır sonu için uygun bağlamda br kullanılır. Şiir veya adres gibi metinler ile sayfa düzeni için boşluk açmayı birbirinden ayır.

pre önceden biçimlendirilmiş metnin boşluklarını korur; code ise kod parçasının anlamını belirtir. Bir HTML etiketini ekranda düz metin olarak göstermek için < ve > işaretlerini karakter başvurularıyla yazmalısın. Aksi hâlde tarayıcı örneği anlatım olarak değil gerçek etiket olarak yorumlayabilir.

İlk örneği oku ve dene

<!-- Bu bir yorum: tarayıcı bunu göstermez -->
<p>Bu     yazıdaki     fazla     boşluklar
tek boşluğa dönüşür.</p>

<p>Satır atlamak için<br>br etiketi kullanılır.</p>

Yorum görünmez. İlk paragraf tek satırda normal aralıklarla, ikinci paragraf iki satıra bölünmüş görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. <!-- ... --> bir HTML yorumudur.
2. Normal metindeki fazla boşluklar çoğunlukla birleştirilir.
3. pre içinde satır ve girinti korunur; uzun kod için yatay kaydırma gerekebilir.
4. &lt; işareti ekranda < görünmesini sağlar; gerçek etiket açmaz.

<!-- Bu not kaynakta görünür. Gizli bilgi yazma. -->
<p>Birinci     düşünce.</p>
<p>İkinci düşünce.</p>
<pre><code>&lt;h1&gt;Örnek&lt;/h1&gt;</code></pre>

İki paragraf ve düz metin olarak <h1>Örnek</h1> kodu. Yorum çizilmez.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Kaynağa bir açıklama yorumu ekle ve sayfa kaynağında bul.
2. Normal p içine beş boşluk ekle; görünümle kaynak arasındaki farkı incele.
3. Bir etiketi gerçek öğe oluşturmadan code içinde göster.

<p>Etiket örneği:</p>
<pre><code>&lt;p&gt;Merhaba&lt;/p&gt;</code></pre>
<!-- Bu açıklama ziyaretçiden gizli değildir. -->

<p>Merhaba</p> düz metin olarak görünür; yeni bir paragraf etiketi oluşturmaz.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Yorum içine anahtar yazmak onu saklamaz; istemciye gönderilen kaynak okunabilir.
2. Görsel boşluk için onlarca &nbsp; eklemek mobil düzeni kırar; CSS margin/padding kullan.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Bir yoruma yazılan parola güvenli biçimde saklanmış olur mu?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.