Sayfa içeriği
Kod biçimlendirme kavramı
Başlangıçta kod biçimlendirmeden kastımız, bilgisayara özgü bir şeyi simgeleyen herhangi bir metni ve normal metinden farklı bir yazı tipiyle aritmetik bir işlemi göstermektir.
Kodun biçimlendirilmesinde kullanılan yazı tipi tipine monospace denir ve karakterlere tek tip bir boyut verir, bu da okuyucu için okumayı ve izlemeyi çok kolaylaştırır.
HTML'de kod biçimlendirmede kullanılabilecek beş etiket vardır ve bunları bu derste öğreneceğiz.
Klavye karakter adlarını görüntülemek
Kullanıcıya klavyedeki belirli düğmeleri tıklamasını söyleyen açıklamalar geliştirirken, bunları <kbd> </kbd> arasına eklemelisin.
Bu etiket, metnin geri kalanından farklı görünmesi için yalnızca içindeki metnin yazı tipini monospace olarak değiştirir.
Aşağıdaki örnekte, klavyede <kbd> kullanarak karakter adlarını ekledim.
- <p>bir sayfayı bilgisayarını kaydetmek için <kbd>Ctrl + S</kbd >tık.</p>
Program çıktısını görüntülemek
Program Çıktısını görüntülemek istiyorsan, onu <samp> </samp> arasına koyabilirsin.
Bu etiket, metnin geri kalanından farklı görünmesi için yalnızca içindeki metnin yazı tipini monospace olarak değiştirir.
Aşağıdaki örnekte, bilgisayar tarafından <samp> kullanılarak görüntülenen bir hata mesajı görüntüledim.
- <p>Bilgisayarım bana şu uyarıyı gösteriyor:</p>
- <p><samp>Hata kodu: 0x80070043<br>Ağ adı bulunamadı.</samp></p>
Kodu metinde göstermek
Bir kod veya aritmetik işlem olan metni, onunla birlikte aynı paragrafta yer alan metinden farklı olarak görüntülemek istiyorsan, kodu <code> </code> arasına koyabilirsin.
Bu etiket, metnin geri kalanından farklı görünmesi için yalnızca içine yerleştirilen metnin yazı tipini monospace türüne değiştirir.
Aşağıdaki örnekte, normal metinden farklı görünmesi için kod olan metni <code> </code> içine ekledim.
- <p>HTML'de resim eklemek için <code><img src="photo"/></code> kodunu ekle.</p>
Aşağıdaki örnekte, normal metinden farklı görünmesi için <code> </code> içinde bir matematik kuralı ekledim.
- <p>Pisagor teoremi: <code>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></code></p>
Metinde değişken adlarını görüntülemek
Programlama, matematik ve diğer herhangi bir konuyla ilgili konular, genellikle X ve Y gibi değişken adlarını kullandığımız denklemleri içerir.
Değişken adını, aynı paragrafta onunla birlikte yerleştirilen metinden farklı bir şekilde görüntülemek istiyorsan, onu <var> </var> arasına koyabilirsin.
Bu etiket, içine koyduğumuz adı italik olarak gösterir.
Aşağıdaki örnekte, değişken isimleri olan karakterleri italik olarak görünecek şekilde <var> </var> içine ekledim.
- <p> <code>x + 5 = 13</code> olduğu yerde <var>x</var> değerini hesaplayın.</p>